项目复习总结3：CSS引入方式，注释，命名规范，背景，行高，文本属性_html/css_WEB-ITnose

目录：

2、CSS引入方式  各种的优缺点

3、选择器的写法与选择器的优先级

4、CSS命名规范

5、背景，行高

6、文本(text与font开头)等所有属性

① CSS注释书写规范：

1、单行注释：

   直接写在属性值的后面，如：

1. ① .search{  
2.     border:1pxsolid#fff;/*定义搜索输入框边框*/  
3.     background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/  
4.   }  
6. ② .wrap {    /*height: 100px;*/   } 

2、多行注释：

     分别在开始的地方及结束的地方注释，如：

1. ①/********Start 搜索条开始********/  
2. .search{  
3.   border:1pxsolid#fff;  
4.   background:url(../images/icon.gif)no-repeat#333;  
5. }  
6. /********End 搜索条结束*********/  
7.  
8. ②

② CSS注释书写好处：

1. 利用注释可以快速定位到复杂的代码页面中，可以高效的编写样式，使得代码层次清楚，修改更加直观。

2. css注解（css 注释）可以帮助我们对自己写的CSS文件进行说明，如说明某段CSS代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂的方便性，同时在团队开发网页是时候合理适当的注解有利于团队看懂css样式是对应html哪里的，以便顺利快速开发网页。

行注释

// 这是行注释，注意'//'后面有空格

/* 这是一段注释 */

块注释

     /*                          

      * 注释以一行（*后面记得有空格）

      * 注释以二行（*后面记得有空格）

      * 注释以三行（*后面记得有空格）

      */ 

 ④ @import : 跟link类似，如果使用@import的话，要将@import放到样式代码的最前面，否则它将会不起作用

link与@inport区别：

① @import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。

② @import 是css2里面的，所以古老的ie5不支持。

③ 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

④ link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css

① CSS不同引入方式的优先级：标签内嵌样式 > 头部书写样式 > 外部引用样式 > 浏览器默认样式。

② CSS选择器的优先级：id > class > tagname.

③ 多个选择器混用时的优先级：例子.a  .b  c{}和.a  c{},它们指向的目标都是c，但是前者的优先级高于后者。

注：当指向同一目标选择器的优先级相同时，后面的优先级大于前面的优先级；当同一个标签中定义有多个class名时，各个类选择器之间的优先级与html中的class名排列无关，而是与css文件中各个类选择器的排列有关。

1、 区分大小写

2 、 首写符必须是字母，下划线（ _ ）或者美元符($)

3、 除首字母外的字符，可以由字母，数字，下划线，美元符号组成

4、 不允许包含空格

background背景 属性：

   * background-color
   * background-position
   * background-size
   * background-repeat
   * background-origin
   * background-clip
   * background-attachment
   * background-image

CSS3新增的属性：

background的语法：[详见博客背景图合并知识整理]

background-color：red | #RGB;

background-position:X轴坐标 Y轴坐标 | left| right | center | top..

background-size: 100px | 30% | cover | contain;    在线测试

background-repeat: repeat | no-repeat | repeat-x | repeat-Y

background-origin：border | padding | content

background-clip：border-box | padding-box | content-box

background-attachment：fixed | scroll

background-image：url

简写的形式：background:color url() positon repeat；

备注：background-size的属性值如果只设置一个值，则第二个值会被设置为 "auto"。

      cover：实现把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

      contain ：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

line-height行高属性：设置行间的距离（行高）。

语法： line-height : normal | | | | inherit

行高与行距：

 line-height详解

CSS 文本属性

CSS 字体属性