CSS基础
2017-05-20 本文已影响0人
madpluto
1. CSS的全称是什么?
Cascading Style Sheet 层叠样式表
2. CSS有几种引入方式? link 和@import 有什么区别?
页面中使用CSS的方式主要有3种：
- 行内添加定义style属性值（内部样式表）
- 页面头部内嵌调用（内联样式表）
- 外面链接调用（外部样式表）
其中外面引用有两种：link和@import，也叫链接样式和导入样式。
link和@import的区别
- link属于html标签，而@import是css的语法。
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面-加载结束后加载。
- link是html标签，因此无兼容问题，而@import是在CSS2.1提出的，只有IE5以上才能识别。
- link方式样式的权重高于@import。
以下这几种文件路径分别用在什么地方，代表什么意思?
-
相对路径：以文件(HTML页面)所在路径为基准来查找相关文件
- css/a.css:在当前路径(HTML文件所在路径)下存在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:在本地计算机上可以通过该路径找到a.css文件
-
网路路径：例如当前页面的地址为http://localhost:8080/code/index.html, 在该HTML文件中存在以下路径：
-
/static/css/a.css：以绝对路径的方式在服务器中寻找a.css文件，即在服务器上直接通过该路径寻找相关文件
-
css/a.css:以相对路径的方式在服务器中寻找a.css文件，即在i ndex.html文件所在路径(目录)中寻找css文件夹下的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png5: 通过该地址可以找到网络上的8-1.png文件
4. 如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
- 将图片上传到图床，用图片的网络路径链接在页面上添加url
- 上传到服务器内部并用相对路径读取
5. 列出5条以上html和 css 的书写规范
html规范
- id class建议单词全字母小写，单词间以 -分隔。同项目必须保持风格一致。
- HTML 标签的使用应该遵循标签的语义。
- 禁止 img的 src取值为空。延迟加载的图片也要增加默认的 src
- 使用 button元素时必须指明 type 属性值。
- 在 CSS 可以实现相同需求的情况下不得使用表格进行布局
css规范
- 属性名与之后的 :之间不允许包含空格， :与 属性值之间必须包含空格
- 选择器的嵌套层级应不大于 3级，位置靠后的限定条件应尽可能精确
- 在可以使用缩写的情况下，尽量使用属性缩写
- 尽量不使用 !important声明。
- 将 z-inde 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理
6. 截图介绍 chrome 开发者工具的功能区
chrome
- Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
- Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
- Sources:断点调试JS。
- Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
- Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
- Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
- Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
- Security:判断当前网页是否安全。
- Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
