1. CSS初识
CSS(Cascading Style Sheets) 主要用于美化样式。
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
2. 样式表
2.1 内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>2.2 行内样式表
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>2.3 外部样式表
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
3. CSS字体属性
3.1 font-size:字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。
3.2 font-family:字体
p{ font-family:"微软雅黑";}3.3 font-weight:字体粗细
字体加粗除了用b和strong标签之外，可以使用CSS 来实现，但CSS是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值：
normal、bold、bolder、lighter、100~900（100的整数倍）。
3.4 font-style:字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
4. CSS外观属性
4.1 color:文本颜色
预定义的颜色值，如red，green，blue等。
十六进制，如#FF0000，#FF6600，#29D794等
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
4.2 line-height:行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7.8像素左右就可以了。
text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
4.3 text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
5. 基础选择器
5.1 标签选择器（元素选择器）
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
特点：
1. 标签选择器能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
2. 标签选择器可以把某一类标签全部选择出来。
5.2 类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用class=“类名”即可。
类选择器的优势：
1. 可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。
小技巧：
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
3.不要纯数字、中文等命名，尽量使用英文字母来表示。
5.3 多类名选择器
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>5.4 id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }id选择器和类选择器区别
W3C规定，在同一个页面不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器(class)好比人的名字，可以多次重复使用的，比如：张伟、王伟、李伟、李娜。
id选择器好比人的身份证号码，全中国是唯一的，不得重复。
id选择器和类选择器最大的不同在于使用次数上。
5.5 通配符选择器
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}6. 复合选择器
6.1 交集选择器
6.2 并集选择器
6.3 后代选择器
6.4 子代选择器
7. 伪类选择器
链接伪类选择器
:link /* 未访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
:visited /* 已访问的链接 */
注意写的时候，他们的顺序尽量不要颠倒，按照lhav的顺序。
8. 标签显示模式
8.1 块状元素
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有h1-h6/p/div/ul/li/ol/dl/dd/dt/table/tr/td/caption/form等，其中<div>标签是最典型的块元素。
块级元素的特点：
1、有默认的宽高，宽是父元素的100%，高度是内容所撑起来的高度
2、宽高可以设置
3、独占一行
4、可以容纳任意的元素（h/p元素不能容纳块状元素）
5、可以设置外边距和内边距的
8.2 行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
1、有默认的宽高，宽高是内容所撑起来的
2、宽高设置是无用的
3、相邻的行内元素或者行内块元素在同一行上显示
4、只可以容纳行内元素与内容
5、水平方向上的外边距和内边距可以设置，垂直方向设置无用
8.3 行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<label>、<select>、<option>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
1、有默认的宽高，是元素本身的宽高
2、宽高是可以设置的
3、相邻的行内元素或者行内块元素在同一行上显示
4、一般不容纳其他元素
5、外边距和内边距都是可以设置的
8.4 标签显示模式转换
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
9. CSS背景
| background-color | 背景颜色 |
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性） | |
| background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
9.1 背景图片
语法： background-image : none | url (url)
参数： none :无背景图（默认的），url :使用绝对或相对地址指定背景图像
9.2 背景平铺
语法： background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数： repeat : 背景图像在纵向和横向上平铺（默认的），no-repeat : 背景图像不平铺，repeat-x : 背景图像在横向上平铺，repeat-y : 背景图像在纵向平铺
9.3 背景位置
语法：background-position : length || length，background-position : position || position
参数：length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 position : top | center | bottom | left | center | right
9.4 背景附着
语法：background-attachment : scroll | fixed
参数：scroll : 背景图像是随对象内容滚动fixed : 背景图像固定
9.5 背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
