css指的是层叠样式表(Cascading Style Sheets).
CSS语法
CSS语法主要由两个部分组成：选择器和声明(一条或多条声明).
选择器一般是自己需要改变样式的HTML元素；每一条声明包括属性和属性值，属性和属性值之间用冒号(: )分开，每个声明后面用分号(;)结束.
CSS注释
注释是用来解释你的代码
CSS注释：/*注释内容*/
CSS的几种引入方式
1. 内联样式
内联样式是在标记的style属性中设定css属性。不推荐大规模使用。
<p style="margin: 20px"> blamekidd </p>
2. 内部样式表
当单个文档需要特殊的样式的时候，可以考虑使用内部样式表。
使用<style>标签在文档的头部定义内部样式表
<head> <style> p { margin-left: 20px; } </style> </head>
注意：不要在属性值与单位之间留空格(如：margin: 20 px)，正确的写法应该是：margin: 20px;
3. 外部样式表
外部样式就是将CSS写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式.
每个页面使用<link>标签链接到样式表，<link>标签在文档的头部
<link herf="mystyle.css" rel="stylesheet" type="text/css/">
4. 样式的优先级
一般情况下，优先级如下：
内联样式>内部样式>外部样式>浏览器默认样式
注意：
如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式
CSS选择器
基本选择器
1. 元素选择器
p { color: red; }
2. ID选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
在CSS中，id选择器以"#"来定义。
#nav { background-color: red; }
3. class选择器
class选择器用于描述一组元素的样式，class可以在多个元素中使用。
在CSS中，class选择器以一个点"."来显示。
.c1 { font-size: 14px; } /*也可以指定特定的HTML元素使用class*/ p.c1 { font-size: 14px; }
注意：
1. ID属性和类名不要以数字开头(在有的浏览器中不起作用)
2. 标签中的class属性如果有多个，要用空格分隔
4. 通用选择器
* { color: white; }
组合选择器
CSS组合选择器说明了两个选择器直接的关系。
1. 后代选择器 以空格分隔
后代选择器用于选取某元素的后代元素。
/*li内部的a标签设置字体颜色*/ li a { color: red; }
2. 子元素选择器(儿子选择器) 以大于号分隔
与后代选择器相比，儿子选择器只能选择作为某元素子元素的元素。
/*选择所有父级是<div>的<p>元素*/ div>p { font-family: "Arial Black"; }
3. 相邻兄弟选择器 以加号分隔
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同的父元素。
/*选取所有位于<div>元素之后的第一个<p>元素*/ div+p { margin: 5px; }
4. 后续兄弟选择器(弟弟选择器) 以破折号分隔
弟弟选择器选取所有指定元素之后的相邻兄弟元素。
/*选取所有<div>元素之后的所有相邻兄弟元素<p>*/ div~p { background-color: yellow; }
属性选择器
/*把包含标题(title)的所有元素变为蓝色*/ [title] { color: blue; }
/*把标题(title)=123的所有元素变为蓝色*/ p[title="123"] { color: blue; }
/*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: red; } /*找到title属性中包含hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素*/ [title~="hello"] { color: red; }
