CSS负责实现网页的外观样式，熟练掌握CSS的语法和使用是学习前端的重要部分。
CSS指的是“Cascading Style Sheet”（层叠样式表），是用来控制网页外观的一门技术。
CSS引入方式：
-
外部样式表：HTML代码和CSS代码分别放在不同的文件中，在HTML文件中使用link标签来应用CSS文件。
`<link rel="stylesheet" type="text/css" href="文件路径"/>` -
内部样式表：把HTML代码和CSS代码放在同一个文件中。其中，CSS代码在style标签内，style标签在head标签内部。
`<style type="text/css">......</style>` -
行内样式表：CSS在标签的style属性中定义。
`<div style="...">...</div>`
CSS选择器：
- 元素选择器：选中相同元素，对相同元素定义同样一个CSS样式。
div{color:red;} - id选择器：为元素设置一个id属性，针对设置了这个id的元素定义CSS样式。
#id{color:red;} - class选择器：对元素设置class属性，针对该class元素定义CSS样式。
.class{color:red;} - 后代选择器：选择元素内部某一种元素中的所有元素，包括子元素和其他后代元素。
#father div{color:red;} - 群组选择器：两个选择器之间使用','分隔开来。
h3, div{color:red;}
字体样式:
#div1{font-family: Arial;}
#div2{font-family: "Time New Roman";}
#div1{font-family: "微软雅黑";}
字体大小：
#p1{font-size: 像素值;}
字体粗细：
#p1{font-weight:lighter/normal/bold/bolder/精确数值;}
字体风格：
#p1{font-style:normal/italic/oblique;}
字体颜色：
#p1{color:颜色;}
CSS注释：
/*注释内容*/
文本样式：
首行缩进：p{text-indent:值;}
水平对齐：p{text-align:值;} 属性取值共有三种：left（左对齐），center（居中对齐），right（右对齐）。对文本有效，且对img元素有效。
文本修饰：p{text-decoration:值;} 属性取值共四个：none（去除划线效果），underline（下划线），line-through（中划线），overline（顶划线）。
大小写：p{text-transform:值;} 属性取值共四个：none（无转换），uppercase（转换为大写），lowercase（转换为小写），capitalize（将单词首字母转换为大写）。
行高：p{line-height:值;}
间距：p{letter-spacing:值;word-spaceing:值;}
边框样式：
边框属性：border-width（边框的宽度）。 border-style取值：none（无样式），dashed（虚线），solid（实线）。 border-color：定义边框的颜色。
局部样式：border-top（上边框），border-bottom（下边框），border-left（左边框），border-right（右边框）。
列表样式：list-style-type
有序列表取值：decimal（阿拉伯数字），lower-roman（小写罗马数字），upper-roman（大写罗马数字），lower-alpha（小写英文字母），upper-alpha（大写英文字母）。
无序列表取值：disc（实心圆），circle（空心圆），square（正方形）。
去除列表项符号：list-style-type:none;
表格样式：
表格标题：caption-side:top/bottom;
表格边框合并：border-collapse:separate/collapse;
表格边框间距：border-spacing:值;
图片样式：
图片大小：img{width:像素值;height:像素值;}
图片垂直对齐：vertical
属性取值：top（顶部对齐），middle（中部对齐），baseline（基线对齐），bottom（底部对齐）。
文字环绕：float
属性取值：left（元素向左浮动），right（元素向右浮动）。
背景：
背景颜色：background-color。
背景图片样式：background-image:路径。
背景图片重复：background-repeat：
repeat（在水平和垂直方向上同时平铺），repeat-x（在水平方向上平铺），repeat-y（在垂直方向上平铺），no-repeat（不平铺）。
背景图片位置：background-position:水平距离 垂直距离;
| 属性值 | ||
|---|---|---|
| top left | top center | top right |
| left center | center center | right center |
| bottom left | bottom center | bottom right |
背景图片固定：background-attachment: scroll（跟随元素一起滚动）/fixed（固定不动）
超链接：a:link（未访问时的样式）/visited（访问后的样式）/hover（鼠标经过元素时的样式）/active（单击激活时的样式）
