1.1. 行内元素、块级元素
1.1.1. 元素的类型
CSS中将元素分为行内元素和块级元素，他们都各自有各自的特点和行为习惯。
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”，也称为块级元素。在布局页面时，块级元素独占一行。
与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”，也称为行内元素。在布局页面时，行内元素不会独占一行。同时垂直内边距、边框和外边距不影响行内框的高度。
可以通过display属性修改框的类型。
1.2. CSS概述
1.2.1. CSS是什么
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
1.2.2. 组织网页的两种常用方式
组织网页结构主要有两种方式：
表格嵌套表格
DIV+CSS
早期的网页都是表格套表格的方式实现的，这种方式对于比较简单的页面效果尚可，一旦页面稍微复杂一些，使用起来就十分的麻烦，现阶段的大部分网页都主要使用DIV+CSS的方式，只在局部使用表格嵌套方式
1.3. 引入CSS的方式
1.3.1. Style属性方式
利用标签中style属性来改变每个标签的显示样式。
例：
<p style=" color:#FFFFFF">
p标签段落内容。
</p>
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
1.3.2. Style标签方式
在head标签中加入style标签，对多个标签进行统一修改。
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
1.3.3. 链接方式
通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
例：
<link rel="stylesheet"type="text/css" href="css_3.css" media="screen" />
注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
1.3.4. 引入方式的优先级
由上到下，由外到内。优先级由低到高。
1.4. CSS代码格式
1.4.1. css代码格式
选择器名称 { 属性名：属性值1 ; 属性值2 属性值3 ；属性名：属性值；…….}
属性与属性之间用 分号 隔开
属性与属性值直接按用 冒号 连接
如果一个属性有多个值的话，那么多个值用 空格 隔开。
1.5. CSS基本选择器
1.5.1. html标签名选择器
html标签名选择器。使用的就是html的标签名
div｛
color:red;
｝
*{
Color:red;
}
1.5.2. class选择器
class选择器。其实使用的标签中的class属性。格式为 .class名
.aaa{
color:red;
}
<div class=”aaa”>hahahaha</div>
1.5.3. id选择器
id选择器。其实使用的是标签的中的id属性。格式为#id名
#bbb{
color:red;
}
<div id=”bbb”>hehehe</div>
1.6. CSS扩展选择器
1.6.1. 后代选择器
选择父选择器选中的元素中符合子选择器的子孙元素，可以用此选择器。
例：
p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>刘德华</b><a href=”#”><b>段落</b>样式</a></p>
<p>P标签段落</p>
1.6.2. 子元素选择器
选择父选择器选中的元素中符合子选择器的子元素，可以用此选择器。
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>
This is <em>really <strong>very</strong></em> important.
</h1>
1.6.3. 分组选择器
对多个不同选择器进行相同样式设置的时候应用此选择器。
例：
p,div { color:#FF0000;}
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>
注：多个不同选择器要用逗号分隔开。
1.6.4. 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
如果您希望把包含属性（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
假设只希望选择 moons 属性值为 1 的那些 planet 元素：
planet[moons="1"] {color: red;}
上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：
<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>
对齐方式
text-align
设置或检索对象中文本的对齐方式。
取值:
left(左对齐,默认值) right(右对齐) center(居中对齐) justify(两端对齐)
列表属性
list-style
设置列表项目相关样式
list-style-position
设置或检索作为对象的列表项标记如何根据文本排列。
list-style-type
设置或检索对象的列表项所使用的预设标记。
字体设置
font
字体设置, 这是一个复合属性, 可以依次按序设置如下属性,也可以单独设置
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font-style
斜体设置
font-weight
字体粗细
font-size
字体大小
color
字体颜色
font-family
字体设置
text-decoration
字体下划线
text-underline-position
下划线位置
line-height
行高。即字体最底端与字体内部顶端之间的距离。
宽高设置
height
高度
width
宽度
背景设置
background,这是一个复合属性, 可以依次设置如下属性, 也可以单独设置
background : background-color || background-image || background-repeat || background-attachment || background-position
背景设置
background-color
背景色设置
background-image
背景图片设置
background-repeat
设置或检索对象的背景图像是否及如何铺排
background-position
设置或检索对象的背景图像位置