CSS基础
2017-10-24 本文已影响0人
饥人谷_邵征鹏
1. CSS的全称是什么?
CSS, Cascading Style Sheets, 层叠样式表。
2.CSS有几种引入方式? link 和@import 有什么区别?
CSS有四种引入方式。
- 1.内联方式：直接在HTML标签中的style属性中添加CSS。
内联式CSS样式.png
- 嵌入方式：在HTML头部的<style>标签下书写CSS代码。
嵌入式CSS样式.png
- 3.外联方式：把CSS代码写在一个单独的外部文件中，这个CSS样式文件以“.css”为扩展名。在<head>内，使用<link>标签将CSS样式文件链接到HTML文件内。
外联式CSS样式.png
- 4.导入方式：使用CSS规则引入外部CSS文件。
导入式CSS样式.png
link 和@import 有什么区别?
两者都是外部引用CSS的方式。
- 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- 区别2：link引入CSS时，在页面载入时同时加载；@import需要在页面网页完成载入以后加载。
- 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本游览器不支持。
- 区别4：link支持Javascript控制DOM去改变样式；而@import不支持。
3.以下这几种文件路径分别用在什么地方，代表什么意思?
-
相对路径: 以文件所在路径为基础查找引用相关文件（类似于DW创建一个站点的方式）
DW站点内文件引用.png
-
css/a.css，在当前路径下的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，在本地计算机硬盘上可以通过该路径找到a.css文件。
-
网络路径
-
/static/css/a.css，在服务器上直接通过该路径寻找到a.css文件。
-
http://cdn.jirengu.com/kejian1/8-1.png，通过该地址可以找到网络上的8-1.png图像文件。
4.如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
-
可以把该图片上传到饥人谷服务器，用相对路径读取。
用DW打个比方
服务器引用.png
-
上传到一些网络平台相册上，然后用图片的绝对链接。
也可以直接引用图片的网络绝对链接。
网络图片引用.png
5.列出5条以上html和 css 的书写规范
- 语法不区分大小写， 但建议统一使用小写。
- id和class使用有意义的单词，分隔符建议使用 “-”，中横线。
- 尽可能用缩写。 例如： border: 1px solid black;
- 属性值是0，缩写。例如： body { margin: 0; padding: 0; }。
- 块内容缩进。
- 属性名冒号后面添加一个空格。
更多规范，可以参考这篇博客，http://www.cnblogs.com/lwwen/archive/2016/08/29/5818043.html
6.截图介绍 chrome 开发者工具的功能区
- 第一个框：是用于屏幕适配的，也就是传说中的chrom能够调试各种移动设备的屏幕分辨率。
屏幕适配.png
- Element标签：该标签使用来查看页面的HTML标签元素的，能够也就是查看源码，我们可以看到布局，可以到用到的样式，还有用到的链接等等。
element.png
- Console：这个就是一个web控制台， Console直译过来也是控制台的意思。可以调试JS代码。
console控制台.png
- Source：该选择框使用来选择资源的，当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。这个也可以来调试JS代码。
source.png
- Network: 就是用于抓包的，我们需要分析页面的请求，比如模拟登陆什么的都需要去分析程序是怎么在后台执行的，接下来就，我们可以看到Headers（请求消息头） Preview（预览） Response（响应） Timing（请求时间）Cookie这些东西。
Network.png
-
Profiles： 如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
performance.png
timeliness.png
- Application： 记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等
application.png
-
Security： 判断当前网页是否安全。
security.png
-
Audits（直译审计的意思）： 对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。
audits.png
