一.CSS的全称是什么?
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
二.CSS有几种引入方式? link 和@import 有什么区别?
插入样式表的方法有三种:
1.外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
2.内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:
<head>
<style type="text/css">
css样式内容
</style>
</head>
3.内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
<p style="color: red; margin-left: 20px">
This is a paragraph.
</p>
link 和@import 的区别:
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:link支持使用JavaScript控制DOM去改变样式;而@import不支持。
区别5:link方式样式的权重高于@import的。
三.以下这几种文件路径分别用在什么地方,代表什么意思?
相对路径:
css/a.css
当前目录下css文件夹下的a.css文件
./css/a.css
当前目录下css文件夹中的a.css文件
b.css
当前目录中的b.css文件
../imgs/a.png
上一级目录中的imgs文件夹下的a.png文件
绝对路径:
/Users/hunger/project/css/a.css
根目录下User文件夹下的hunger文件夹下的project文件夹下的css文件夹下的a.css文件
网站相对路径:
/static/css/a.css
当前项目的根目录下的static文件夹下的css文件夹下的a.css文件
网站绝对路径:
http://cdn.jirengu.com/kejian1/8-1.png
引用http://cdn.jirengu.com这个CDN服务下的kejian1文件夹下的8-1.png文件
四.如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
- 把图片传到服务器,然后获取图片的相对地址。
- 直接复制网络上图片链接地址。
五.列出5条以上html和css的书写规范
html规范:
1.页面的第一行添加标准模式声明 <!DOCTYPE html>;
2.代码缩进:tab键设置四个空格(通常在软件右下角设置相应空格大小);
3.html中除了开头的DOC和 'UTF-8'或者head里特殊情况可以大写外,其他都为小写,css类都为小写;
4.建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言 lang="zh-CN";
css规范:
1.CSS书写顺序
位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)
2.使用CSS缩写属性:CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。
3.长名称或词组可以使用中横线来为选择器命名。
六.截图介绍 chrome 开发者工具的功能区
Elements标签页
Elements标签页的左侧就是对页面HTML结构的查看与编辑,你可以直接在某个元素上双击修改元素的属性。
1.Edit as HTML直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现;
2.Copy可以将HTML代码直接复制下来,在拷贝别人网站上面的HTML代码的时候非常方便;
3.Break on可以对某个元素进行监听,在JS对元素的属性或者HTML进行修改的时候,直接触发断点,跳转到对改元素进行修改的JS代码处。
1.Style看HTML元素的样式;
2.Computed可以看元素的盒子模型;
3.Properties看到元素具有的方法与属性,比查API手册要方便得多。
Console标签页
Javascript控制台:在这个面板可以查看错误信息、打印调试信息(console.log())、写一些测试脚本,还可以当作Javascript API查看用。
Sources标签页
Sources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。
- Wctch:监测变量
- Breakpoints:JS断点列表
- Event Listener Breakpoints:事件监听断点
Network标签页
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求,才会在这里显示。
Application标签页
使用Application面板检查加载的所有资源,包括IndexedDB与Web SQL数据库,本地和会话存储,cookie,应用程序缓存,图像,字体和样式表。
Security标签页
HTTPS 为您的网站和将个人信息委托给您的网站的人提供了重要的安全性和数据完整性。在 Chrome开发者工具中使用 Security 面板调试安全问题,确保您已在自己的网站上恰当地实现 HTTPS。包括以下功能:
(1)使用 Security Overview 可以立即查看当前页面是否安全。
(2)检查各个源以查看连接和证书详情(安全源)或找出具体哪些请求未受保护(非安全源)。
Audits标签页
Audits的是用来分析页面加载的过程,进而提供减少页面加载时间、提升响应速度的方案。对网络和页面性能进行检测,根据测试的结果进行优化。但是检测结果只是参考,在实际的项目中肯定有特殊情况存在,并不能为了满足某项测试结果而忽略特定情况的存在。