css基础与书写规范

笔记

css语法

选择符｛属性：属性值｝

1. 通配选择器，写法是“*”，含义就是所有元素，举例：*{font-size:12px;}
2. 类型选择器，以文档语言对象类型作为选择器，就是使用结构中的元素名称作为选择器，例如：div，p等。说明：所有页面中的元素都可以作为类型选择器。
3. 包含选择器，写法：选择器1 选择器2，选择器1和选择器2之间用空格分隔，表示所有被选择器1包含的选择器2。举例：div p{font-size:12px;}，效果：在所有被div元素包含的p元素中，字体大小都是12px。
4. ID选择器，语法格式是“#”，加上自定义的ID名称，举例：#你的ID名字{font-size:12px;}
5. 类选择器，语法格式是“.”，加上自定义的类的名字，举例：.你的类名字{font-size:12px;}
6. 选择器分组，当多个选择器应用了相同的样式时，可以将选择符用英文逗号分隔的方式合并为一组。写法：选择器1，选择器2，选择器3   ，举例：.name,div,p{font-size:12px;}，效果：在类名为name的元素，div和p元素中，文本的字体大小都是12px。

伪类和伪元素

伪类和伪元素也是一种选择器，在页面元素中用来定义超出结构所能标识的样式，伪类是能被支持css的浏览器自动识别的特殊器。伪类写法：选择符 伪类{属性：属性值}，举例：a:hover{font-size:12px;}，效果：当鼠标指针悬停在有链接的文本上时，文本字体大小为12px。

伪类一般以“:”开头，与类不同的是，伪类和伪元素在css中是指定的，不能随意命名和定义。

继承性

如果某个属性具有继承性，则属性作用在父元素的同时，也会作用于其包含的子元素，举例：

效果：苹果 香蕉 西瓜字体的颜色都是红色

注意：不是所有属性都具有继承性

层叠性

浏览器处理冲突的一个能力，如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉，权重高的覆盖权重低的，如果权重高的选择器出现在父元素中，元素会使用最近定义的样式，最近最优先原则。

css命名参考

一个好的命名规则，可以避免重复命名，当某个效果不能正常显示时，寻找相应的css代码就比较方便。

1. 长名称或词组可以使用中横线来为选择器命名。
2. 不要随意使用Id，id在JS是唯一的，不能多次使用，而使用类选择器却可以重复使用，所以id应该按需使用，而不能滥用。

块元素和内联元素

有些css只适用于块元素，有些只适用于内联元素。

1. 块元素，类似于div，p，h1-h6这样的元素，特点是每个块元素都从新的一行开始，可以包含其他的块元素和内联元素。
2. 内联元素，类似于a，b，span，img这样的元素，特点是和其他元素都在一行上，不可以设置宽高。

css的调用

css调用有3种方法：

1. 元素中直接使用，写法:<元素名称 style:"属性:属性值"></元素名称>，直接使用样式的语法结构和独立样式表中完全相同。举例：<div style="width:100px; height:100px;">我是在元素中直接使用样式的例子</div>
2. 从页面头部引用，将css写在页面的head中，然后页面中调用,举例：
   1. <style>
   2.  div{color:red;}
   3.  </style>
   4. <div>
   5. <p> 苹果</p>
   6. <p>香蕉</p>
   7. <span>西瓜</span>
   8. </div>

3. 采用链接的形式调用。①使用link元素，举例：<link rel="stylesheet" href="你的css路径" type="text/css">  ②使用@import，举例：<style type="text/css"> @import url(你的css文件路径);</style>  这两种方法的区别在于，@import先加载html，后加载css，因此@import引起的css解析延迟会增加页面的留白期，用户体验不好。而link是在页面载入时同时加载。

样式的优先级

元素中直接使用＞页面头部引用＞链接形式调用

行内样式>ID选择器>伪类>类选择器>类型选择器>通配符

选择器的优先级

ID选择器>类选择器>类型选择器＞通配选择器