总结现在的互联网前端三层：
HTML 超文本标记语言 从语义的角度描述页面结构。
CSS 层叠式样式表 从审美的角度负责页面样式。
JS JavaScript 从交互的角度描述页面行为。
一、CSS基本语法
CSS: cascading style sheet:层叠式样式表
css可以写在单独的文件里，也可以写在style标签里(head中)。
<style type=”text/css”>
xx{
color:red;
font-size:14px;
}
</style>
二、CSS常见属性
字符颜色:color 可以是red\blue等自带属性，也可以是rgb,16进制等。 sublime快捷生成：c
字号大小:font-size 单位：像素 sublime快捷生成：fos
背景颜色:background-color sublime快捷生成：bgc
加粗/不加粗: font-weight:bold/normal sublime快捷生成：fwb/fwn
斜体/不斜体;font-style:italic/normla sublime快捷生成：fsi/fsn
下划线/无下划线:text-decoration:underline/none sublime快捷生成：tdu/tdn
三、基础选择器
3.1 标签选择器
所有的标签都可以是选择器，例如ul\li\label\dt\dl\input，并且全局通用,即选择的是页面上所有这种类型的标签，用于描述该类标签的共性。
3.2 id选择器
任何的html标签都可以有id属性，表示这个标签的唯一标识。命名遵循命名法，一个html页面不能出现相同的id
一个标签可以被多个css选择器选择，这就是“层叠式“的第一层含义
3.3 类名选择器
class 属性与id属性非常相似，区别就是class属性可以重复，即多个标签可以属于一个类。代表对一整类的标签进行统一修改，css中用 “.”来表示类
一个标签 可能同时属于多个类，用空格隔开。
要用公共类的思想设计类。尽可能的用class极特殊情况用id（id会与后台交互时产生沟通成本，因为类关联样式，id关联行为）
四、高级选择器
4.1 后代选择器
表示一个父标签内 所有子标签的共性。
<styletype="text/css">
.div1 p{
color:red;
}
</style>
<divclass="div1">
<ul>
<li>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</li>
</ul>
</div>
其中 空格可以多次出现。例如：
.div1 .li2 p{
color:red;
}
后代选择器，描述的是一种祖先结构。就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。
4.2 交集选择器
交集选择器，意思就是一个选择器可以设置在两个标签的交集标签中。这个写法是IE7开始兼容的
h3.special{
color:red;
}
交集选择器可以取连续交集(一般不要这么写)
h3.special.zhongyao{
color:red;
}
交集选择器，我们一般都是以标签名开头，比如div.haha 比如p.special。
4.3 并集选择器
用逗号表示
h3,li{
color:red;
}
4.4 通配符
* 表示所有元素，效率不高，标签多的情况下基本上没什么效率了，所以基本不可能这么用
*{
color:red;
}
五、其他选择器（CSS3选择器）
5.1 儿子选择器
父标签的直属标签可用。IE7开始兼容，IE6不兼容。
div>p{
color:red;
}
5.2 序选择器
选择某一组标签中的某个标签。IE8开始兼容
例子：选择ul下的li中第一个
<styletype="text/css">
ul li:first-child{
color:red;
}
</style>
5.3 下一个兄弟选择器
+，表示下一个兄弟。IE7开始兼容
<styletype="text/css">
h3+p{
color:red;
}
</style>
六、CSS的继承性和层叠性
6.1 继承性
当给父标签设置某些属性后，后代所有标签都继承了这些属性，这就是继承性。
可继承属性：
color、text开头、line开头的、font开头 等关于文字样式的
6.2 层叠性
层叠性：CSS处理冲突的一种能力。
CSS中是有先后顺序的，先表明的属性值会被后表明的属性层叠掉，也就是说被覆盖了。
当不同选择器作用在同一个标签上时（选中到标签时），优先权重为：id选择器数量 > 类选择器数量 > 标签选择器数量，若权重相同，则按先后顺序表明，当使用并集选择器时需要拆开计算 不能合起来计算权重。
通过继承来的时候（不直接选中某个元素），权重是0，当大家都是0时 遵循就近原则：谁描述的近听谁的、
特例：当两个权重都是0，且根据就近原则一样近时，则继续比较权重，若权重一样则继续按先后顺序。
当使用!important标记时，来给一个属性提高权重：k:v !important
一般来说不允许使用，因为会让CSS写的很乱。
注意：
1.!important提升的是一个属性 而不是一个选择器。
2.!important无法提升继承的权重，原本是0则还是0
3.!important当权重都是0时，无法影响就近原则。
网友评论