Task 6

2017-09-29 本文已影响6人 DHFE

CSS全称是什么？

Cascading-Style-Sheets(层叠样式表)

层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程，css之所以有"层叠"概念，是因为有多个样式来源。
css样式来源：内联样式，内部样式，外部样式，浏览器用户自定义样式，浏览器默认样式。
按照其优先级为内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式规则，来为最终的样式呈现服务。
如果有important，则优先级最高。

CSS有几种引入方式? link 和@import 有什么区别?

内联样式
内部样式
外部样式

区别：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
@import url(style.css)和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.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

Users文件下的hunger文件夹下的project文件夹下的css文件夹内的a.css文件（绝对路径）

/static/css/a.css

某目录下的static文件夹内的css文件夹内的a.css文件

http://cdn.jirengu.com/kejian1/8-1.png

表示一个互联网的资源存放地址，绝对路径(URL)，指向一个.png文件

如果我想在js.jirengu.com上展示一个图片，需要怎么操作?

将图片上传至server中，然后使用URL打开图片。
将图片上传至html文件当前目录下，使用相对目录打开图片。

出5条以上html和 css 的书写规范

HTML

用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线 – HTML5 规范中明确说明这是可选的。
不要省略可选的结束标签（closing tag）（例如，</li>或 </body>）。

CSS

用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 :后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
不要在 rgb()、rgba()、hsl()、hsla() 或 rect()值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5代替 0.5；-.5px代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
尽量使用简写形式的十六进制值，例如，用 #fff代替 #ffffff。
为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
避免为 0 值指定单位，例如，用 margin: 0;代替 margin: 0px;。

菜鸟教程——HTML、CSS规范
 知乎：HTML 和 CSS 代码结构如何写更加规范？
HTML+CSS编写规范

说到规范，大部分公司都会自己一套代码规范，这是肯定的，从代码的可读性，可维护性角度出发。
也希望自己以后能写出健壮的代码。

截图介绍 chrome 开发者工具的功能区

Chrome开发者工具