CSS是网页的美容师
CSS样式表（书写位置）
1. 行内式（内联样式）
称行内样式，行间样式，是通过标签的style属性来设置元素的样式
基本语法为：
<标签名 style=”属性1：属性值1；属性2：属性值2；属性3：属性值3；”>内容</标签名>
2. 内部样式表（内嵌样式表）
称内嵌式，是讲CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
基本语法：
CSS字体样式、
Font字体
font-size 字体大小
p {
font-size:”20px”；
}
谷歌浏览器默认文字大小为16px
font-family字体
P{ font-family:”微软雅黑”；}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个， 直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准。
p{font-family: Arial,“Microsoft Yahei”, “微软雅黑”;}
各种字体之间必须使用英文状态下的逗号隔开。 2. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必 须位于中文字体名之前。 3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如fontfamily: “Times New Roman”;。
font-weight字体粗细
font-style字体风格
font综合字体样式设置
选择器 { font: font-style font-weight font-size/line-height font-family;}
注意
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔 开。 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否 则font属性将不起作用。
text-align文本水平对齐方式
其可用属性如下
该标签作用是让盒子里的内容水平居中，而不是让盒子居中对齐
line – height:行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。 单位： line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使 用最多的是像素px
text – indent:首行缩进
p {
/行间距/
line-height: 25px;
/首行缩进2个字 em 1个em 就是1个字的大小/
text-indent: 2em;
}
text – decoration文本装饰
复合选择器
后代选择器
又称为包含选择器
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子 孙子。
父级 子级{属性:属性值;属性:属性值;}
如：
.class h3{color:red;font-size:16px;}
当标签发生嵌套时，内层标签就成为外层标签的后代。 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
子元素选择器
子元素选择器只能选择作为某元素子元素(亲儿子)的元素。 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
.class>h3{color:red;font-size:14px;}
.demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
交集选择器
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special
并集选择器、
如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。 并集选择器（CSS选择器分组）是各个选择器通过 , 连接而成的，通常用于集体声明。
任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一 部分
链接伪类选择器
为了和我们刚才学的类选择器相区别 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 伪娘
用于向某些选择器添加特殊的效果。比如给链接添加特殊效果
a:link /* 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 */
写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。
因为叫链接伪类，所以都是 利用交集选择器 a:link a:hover 因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式
实际工作开发中，我们很少写全四个状态，一般我们写法如下：
复合选择器总结
标签显示模式（display）
块级元素block-level
常见的块级元素有
~
-
- ,其中
是最典型的 （1）比较霸道，自己独占一行 （2）高度，宽度、外边距以及内边距都可以控制。 （3）宽度默认是容器（父级宽度）的100% （4）是一个容器及盒子，里面可以放行内或者块级元素 行内元素inline-level 常见行内元素有
- ,其中
是最典型的 （1）比较霸道，自己独占一行 （2）高度，宽度、外边距以及内边距都可以控制。 （3）宽度默认是容器（父级宽度）的100% （4）是一个容器及盒子，里面可以放行内或者块级元素 行内元素inline-level 常见行内元素有
标签显示模式转换display
块转行内：display:inline；
行内转块：display:block;
块、行内转为行内块：display:inline-block;
行高（line-height）
背景background
背景颜色color
background-color：颜色值；默认的值是transparent 透明的
背景图片image
background-image：none | url(url)
background-image：url(imager/demo.png);
背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
背景位置（position）
background-position : length || length
background-position : position || position
注意
必须先指定background-image属性
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效 果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
背景附着
就是解释背景图片是滚动还是固定的
background-attachment：scroll | fixed
scroll：背景图随对象内容滚动的
fixed：背景图像固定
背景简写
background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写： background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background：transparent url (image.jpg) repeat-y scroll center top :
背景透明（css3）
background：rgba(0,0,0,0.3)
最后一个参数是alpha 透明度 取值范围 0~1之间
我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
因为是CSS3 ，所以 低于 ie9 的版本是不支持的。