CSS 级联样式表
选择器类型
标记选择器，直接使用HTML标记名称作为选择器，它定义的样式作用于所有与选择器同名的标记
p{
background-color: cadetblue;
font-size: 20px;
color: green;
}
类选择器，任何HTML标记中都可以使用class属性，选择多个类要间隔空格class="c1 c2"
.c1{
color: brown;
}
联合选择器
p.c2{
background-color: blue;
}
id选择器,只有页面上的标记<body>及其内的标记里才能具有id属性，每个id属性值必须唯一，且只能用于一个指定的标记，
id属性的取值必须以字母开头，有字母，数字，下画线，连字符组成。
class比id更灵活，除非想唯 一标识用id
#right{
color: blueviolet;
}
伪类选择器 用法为 标记：伪类名{...}
a:link{color: blue;} 链接未被访问前的样式
a:visited{color: blueviolet;} 链接被访问后的样式
a:hover{color: brown;} 鼠标悬停时的样式
a:active{color: burlywood;} 在被用户激活时（在鼠标点击与释放之间）的样式
设置顺序不能变，否则失效（未测试）
first-letter 作用于块，设置第一个字符的样式
first-line 作业于块，设置第一行的样式
first-child 设置第一个子标签的样式
属性选择器 给带有指定属性的HTML标记设置样式
[属性名]{属性 ：属性值}
[title] {color:red;}
[属性名="属性值"] {}
p[name="chu"]{font-style: initial;}
[attribute~=value] 用于选取属性值中包含指定词汇的标记 （用空格隔开的字词列表）
[attribute|=value] 用于选取带有指定值开头的属性值的标记 （属性值是value或者是以value开头的值）
[attribute^=value] 匹配属性值以指定值开头的每个标记
[attribute&=value] 匹配属性值以指定值结尾的每个标记
[attribute*=value] 匹配属性值中包含指定值的每个标记
选择器声明
集体声明
h1,h2,p{color: khaki;}
h2.special,.special,#one{text-decoration: khaki;}
全局声明
*{color:purple;}
派生选择器
li strong {font-style: italic;font-weight: normal}
strong{font-weight: bolder;}
上面的例子 只有ol中的strong元素中的样式为斜体
CSS定义与引用
内联样式表（行内样式表） 避免使用
<标记 style="属性：属性值;">
内部样式表
<style type="text/css">
选择器 {}
</style>
外部样式表
1.<link type="text/css" rel="stylesheet" href="url">
2.<style type="text/css">
@import url{""};
选择器 {}
</style>
CSS优先级
行内样式 > id样式 > class样式 > 标记样式
div{position:absolute; width: 200px; height: 200px; color: white;}
#d1{background-color: purple; z-index: 0;}
#d2{background-color: rebeccapurple; top:25px; left:50px; z-index: 1;}
#d3{background-color: rosybrown; top:50px; left:100px; z-index: 2;}
position: 定义图层的定位方式
static 静态定位，默认
absolute 绝对定位
relative 相对定位，图层不可重叠
fixed 图层位置固定，不滚动
border: 边框
background-color:
left,top: 定义图层的左上角位置
width,height:
float: 设置图层的浮动方式
left/right/none
clear: 清除图层内浮动
left/right/both/none
z-index: 设置图层的层叠上下层关系，值越大，图层位置越高
overflow: 内容溢出控制
visible 始终显示滚动条
auto 不显示滚动条，但超出部分可见，内容超出时显示滚动条
hidden 超出时隐藏内容
CSS样式属性
1.单位
绝对单位：in(英寸)、cm、mm、pt(磅 1pt=1/72in) ，很少使用，多用在印刷上
相对单位: em 表示元素的字体高度，能根据font-size来确定单位大小
例如p{font-size:24px;line-high:2em;} 行高就是48px
ex 表示以小写字母x的高度作为参考，浏览器中常将em/2 = ex
px 根据像素点来确定
% 一般通过另一个值计算
2.字体样式
font-size 设置字体大小
font-style:normal/italic/oblique 设置字体风格
不使用/ 斜体 /倾斜字体
font-family:字体1，字体2，... 设置字体
多字体时用“，”分隔，浏览器依次查找，如果字体名称出现空格，必须用“()”括起来
font-variant:normal/small-caps 设置使用小型的大写字母
font-weight:normal(400)/bold(700)/bolder/lighter/整数(100-900,由细到粗) 设置字体加粗
font:style weight variant size/line-height family 一次性设置多个字体属性
3.文本样式
leter-spacing:normal/长度单位 字符间距
line-height:normal/length 行距
text-indent:length 首行缩进
text-decoration:none/underline/overline/line-through 字符装饰（下划线...）
text-transform:capitalize/uppercase/lowercase/none 英文大小写转换
text-align:left/right/center/justify 水平对齐
vertical-align:top/middle/bottom/text-top/text-bottom 垂直对齐
4.背景与颜色
color: 设置字体颜色
background-color: 背景颜色
background-image: url 背景图片
background-repeat: repeat/no-repeat/repeat-x(从左向右)/repeat-y(从上到下) 背景图片没铺满时是否重叠
background-attachment:scroll/fixed 设置背景图像是否随滚动条一起滚动
background-position:水平参数 垂直参数 设置背景图片的具体起始位置(两个参数间空格分开)
left|center|right/%/xpos top|center|bottom/%/ypos
background:color image repeat position attachment
5.列表样式
list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/decimal(阿拉伯数字)/lower-roman(罗马数字)/upper-roman/lower-alpha(英文字母)/upper-alpha/none
list-style-image:url|none 设置列表替代图像
list-style-position:outside/inside 设置图像位置
list-style:type image position
CSS盒模型：每个元素都是长方形的盒子 由外到内依次为：margin(边界)、border(边框)、padding(填充)、content(内容)
margin-top/right/bottom/left:数值/auto
margin:10px 10px 10px 10px 上 右 下 左
margin:10px 10px 10px 上 左右 下
margin:10px 10px 上下 左右
margin:10px 上下左右
border-style:none/hidden/dotted(点状)/dashed(虚线)/solid(实线)/double(双线)/groove(3D凹槽)/ridge(山脊状)/inset(沉入感)/outset(浮出感)
border-top/right/bottom/left-style:
border-style:上 右 下 左 （下面都可以这样设置）
border-medium(默认)/thin/thick/数值
border-color:
border:width style color
padding同margin