参考资料
http://www.lvyestudy.com/les_cj/css_list.aspx
第十一章——css引入方式
CSS，即“Cascading Style Sheet（层叠样式表）”
1、外部样式表
<link href="路径" rel="stylesheet" type="text/css" />2、内部样式表
<style type="text/css">
</style>3、行内样式表
在标签的style属性中定义
第十二章——css选择器
一个样式的语法是由三部分构成：选择器、属性和属性值
1、基本选择器
- 元素选择器
- id选择器
- class选择器
2、后代选择器
3、相邻选择器
该元素的下一个兄弟元素，相邻选择器的操作对象是该元素的同级元素。
4、群组选择器
第十三章——字体样式
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体斜体 |
| color | 颜色 |
1、字体类型font-family
font-family：字体1,字体2,字体3;2、 字体大小font-size
font-size：关键字/像素值;| font-size属性值 | 说明 |
|---|---|
| xx-small | 最小 |
| x-small | 较小 |
| small | 小 |
| medium | 默认值，正常 |
| large | 大 |
| x-large | 较大 |
| xx-large | 最大 |
3、字体颜色color
color:颜色值;4、字体粗细font-weight
一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900）
font-weight:粗细值;
| font-weight属性值 | 说明 |
|---|---|
| normal | 默认值，正常体 |
| lighter | 较细 |
| bold | 较粗 |
| bolder | 很粗（其实效果跟bold差不多） |
5、字体斜体样式font-style
talic是使用文字的斜体，oblique是让没有斜体属性的文字倾斜。
font-style:取值;| font-style属性值 | 说明 |
|---|---|
| normal | 默认值，正常体 |
| italic | 斜体，这是一个属性 |
| oblique | 将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique |
6、CSS注释
/*注释的内容*/第十四章——段落（文体）样式
| 属性 | 说明 |
|---|---|
| text-decoration | 下划线、删除线、顶划线 |
| text-transform | 文本大小写 |
| text-indent | 段落首行缩进 |
| text-align | 文本水平对齐方式 |
| line-height | 行高 |
| letter-spacing | 字距 |
| word-spacing | 词距 |
1、下划线、删除线和顶划线text-decoration
text-decoration:属性值;
| 属性值 | 说明 |
|---|---|
| none | 默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式 |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 顶划线 |
2、文本大小写text-transform
text-transform:属性值;| 属性值 | 说明 |
|---|---|
| none | 默认值，无转换发生 |
| uppercase | 转换成大写 |
| lowercase | 转换成小写 |
| capitalize | 将每个英文单词的首字母转换成大写，其余无转换发生 |
3、首行缩进text-indent
ext-indent的属性值应该是字体font-size属性值的两倍
text-indent:像素值;4、文本水平对齐text-align
text-align:属性值;| text-align属性值 | 说明 |
|---|---|
| left | 默认值，左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
第十五章——边框样式
任何元素都可以设置边框属性
1、边框样式
属性 说明 border-width 边框的宽度 border-style 边框的外观 border-color 边框的颜色
- border-style属性
属性值 说明 none 无样式 hidden 与“none”相同。bug应用于表除外。对于表，hidden用于解决边框冲突 solid 实线 dashed 虚线 dotted 点线 double 双线，双线的宽度等于border-width值
属性值 说明 inset 内凹 outset 外凸 ridge 脊线 groove 槽线
- 简洁写法
border-width:1px;
border-style:solid;
border-color:Red;border:1px solid Red;2、局部样式
border-top:1px solid red; /*上边框样式*/
border-right:1px solid orange; /*右边框样式*/
border-bottom:1px solid blue; /*下边框样式*/
border-left:1px solid green; /*左边框样式*/第十六章——列表样式
经常使用“list-style-type:none”去除列表项默认的符号
第十七章——表格样式
1、边框合并
去除单元格之间的空隙
border-collapse:属性值;
separate意思是“分离”，而collapse意思是“折叠，瓦解”。
border-collapse属性值 说明 separate 默认值，边框分开，不合并 collapse 边框合并，如果相邻，则共用一个边框
2、边框间距
设置表格边框间距
border-spacing:像素值;第十八章——图片样式
1、图片大小
width:像素值;
height:像素值;2、图片边框
border-width:像素值;
border-style:属性值;
border-color:颜色值;
img{width:60px;height:60px;}
img:hover{border:1px solid gray;}3、水平对齐
text-align:属性值;| text-align属性值 | 说明 |
|---|---|
| left | 默认值，左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
4、垂直对齐
行内元素相对于该元素的垂直对齐方式
vertical-align:属性值;| vertical-align属性取值 | 说明 |
|---|---|
| top | 顶部对齐 |
| middle | 中部对齐 |
| baseline | 基线对齐 |
| bottom | 底部对齐 |
5、 文字环绕
float:取值;
| float属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
第十九章——背景样式
| 属性 | 说明 |
|---|---|
| background-image | 定义背景图像的路径，这样图片才能显示嘛 |
| background-repeat | 定义背景图像显示方式，例如纵向平铺、横向平铺 |
| background-position | 定义背景图像在元素哪个位置 |
| background-attachment | 定义背景图像是否随内容而滚动 |
1、颜色
background-color:颜色值;2、地址
background-image:url("图像地址");3、平铺
background-repeat:取值;| 属性值 | 说明 |
|---|---|
| no-repeat | 表示不平铺 |
| repeat | 默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺 |
| repeat-x | 表示在水平方向（x轴）平铺 |
| repeat-y | 表示在垂直方向（y轴）平铺 |
4、位置
background-positon:像素值/关键字;
| 属性值 | 说明 |
|---|---|
| top left | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
5、固定
background-attachment:scroll/fixed;第二十章——超链接
1、伪类
|
1 2 3 4 |
|
| 属性 | 说明 |
|---|---|
| a:link | 定义a元素未访问时的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标经过显示的样式 |
| a:active | 定义鼠标单击**时的样式 |
2、hover
:hover”伪类可以定义任何一个元素在鼠标经过时的样式
元素:hover{}3、鼠标样式
cursor:pointer;第二十一章——盒子模型
只有块元素能设置width和height，行内元素无法设置width和height。
| 属性 | 说明 |
|---|---|
| border | （边框）元素边框 |
| margin | （外边距）用于定义页面中边框到父元素或者同级元素之间的距离 |
| padding | （内边距）用于定义内容与边框之间的距离 |
| content | （内容）可以是文字或图片 |
- 边框border
border:像素值 边框类型 颜色值- 内边距padding
padding:像素值;
padding:像素值1 像素值2;
padding:像素值1 像素值2 像素值3 像素值4;- 外边距margin
margin:像素值;
margin:像素值1 像素值2;
margin:像素值1 像素值2 像素值3 像素值4;第十二章——浮动布局
1、浮动float
浮动元素的宽度由内容决定
float:取值;| float属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
2、清除浮动
清除浮动对周围元素的影响
clear:both;第二十三章——定位布局position
- 固定定位（fixed）
被固定的元素不会随着滚动条的拖动而改变位
- 相对定位（relative）
相对于原始定位的位置
- 绝对定位（absolute）
相对于浏览器的位置
如果元素之间有重叠部分，该元素会覆盖掉其他元素
- 静态定位(static)
positon属性的默认值