目录
一、CSS基础
1.CSS简介及与HTML对比
HTML的局限性
我们都知道，HTML只关注内容的语义，所以即使HTML可以做简单的样式，但带来的是无尽的臃肿和繁琐。
CSS简单概念及功能
CSS是层叠样式表（Cascading Style Sheets ）的简称，有时我们也会称之为CSS样式表或级联样式表，它也是一种标记语言，主要用于设置HTML页面中文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS的主要使用场景就是美化网页、布局页面的。
CSS让我们的网页更加丰富多彩，布局更加灵活自如，简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。
HTML和CSS对比
HTML主要做结构，显示元素内容；CSS美化HTML，布局网页；CSS最大价值就是使结构与样式相分离。
2.CSS简单语法规范
CSS规则主要由选择器以及一条或多条声明两部分构成。
选择器是用于指定CSS样式的HTML标签，花括号内是该对象设计的具体样式。
属性与属性值以键值对的形式出现，之间用“：”分开。属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
3.CSS代码风格
样式格式书写有：紧凑格式和展开格式（推荐用展开格式，可以更加直观）
样式大小写：除特殊情况，推荐用小写。
空格：属性值前面，冒号后面，保留一个空格；选择器（标签）和大括号中间保留空格。
4.CSS文本属性
CSS文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
color属性，表示文本颜色，通常用16进制（简写形式）。
text-align属性，表示文本对齐，可以设定文字水平的对齐方式。
text-indent属性，表示文本缩进，通常用于段落首行缩进2个字的距离 eg：text-indent：2em。
text-decoration属性，表示文本修饰，添加下划线是underline，取消下划线是none。
line-height属性，表示行高，控制行和行之间的距离。
letter-spacing属性，表示字符间距。
5.CSS颜色、背景、字体
CSS颜色color
red，green，blue 颜色名
rgb（x，x，x） x：RGB值的一个颜色分量，每个颜色分量取值0-255.
rgb（x%，x%，x%）RGB百分比值0%-100%
rgba（x，x，x，a）x：RGB值；a：透明度。
#rrggbb 十六进制数
CSS背景background
background-color 背景颜色 eg： rgb（255，0，0）
background-image 背景图片 eg：url（“logo.jpg”）
background-repeat 重复方式 eg：repeat-x
CSS字体font
font 文本颜色
font-family 字体系列
font-size 字号
font-style 斜体
font-weight 粗体
6.CSS引入方式
行内样式表，书写方便，权重高，但结构样式混写，使用较少，可控制一个标签。
内部样式表，部分结构和样式相分离，但没有彻底分离，使用较多，可控制一个页面。
外部样式表，完全实现结构和样式相分离，但需要引入，使用最多，可控制多个页面。
7.CSS超链接、列表、表格、布局
CSS超链接
链接的四种状态：
a：link 超链接的正常状态（没有任何动作前）
a：visited 访问过的超链接状态
a：hover 鼠标移动到超链接上的状态
a：active 选中超链接时的状态
示例：
a{
font-size：10px；
}
a：hover{
font-size：100%；
}
CSS列表
有序列表、无序列表共用样式：
list-style 所有用于列表的属性，设置于一个声明中
list-style-image 为列表项标志设置图像
list-style-position 标志的位置
list-style-type 标志的类型
CSS表格
表格大小相关属性：width，height
表格边框相关属性：border，border-collapse
居中：text-align：center
水平分隔线：向<th>和<td>添加border-bottom属性
可悬停表格：在<tr>元素上使用：hover选择器，以突出显示鼠标悬停时的表格行。
条状表格：使用nth-child（）选择器并给全部奇数或偶数表行添加。
CSS布局图示
二、选择器
选择器就是根据不同需求把不同标签选出来。简单来说，就是选择标签用的。
选择器分类
选择器分为基础选择器和复合选择器。基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。
1.标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式。能快速为页面中同类型的标签统一设置样式。但不能设计差异化样式，只能选择全部的当前标签。
示例：
标签名 {
属性1：属性值1；
属性2：属性值2；
...
}
2.类选择器
可以差异化选择不同的标签，单独选一个或几个标签。类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示，后面紧跟类名（自定义）。长名称或词组可以使用中横线来为选择器命名。不要使用纯数字、中文等命名，尽量使用英文字母来表示。命名要有意义，最好目的显而易见。
示例：
.类名 {
属性1：属性值1；
...
}
3.id选择器
id选择器可以标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。
示例：
#id名 {
属性1：属性值1；
...
}
id选择器和类选择器的区别
类选择器可以一个有多个，也可以多个被一个使用。id选择器不能重复。二者最大的区别在于使用次数。类选择器在修改样式中用得最多，id选择器一般用于页面唯一性的元素上。
4.通配符选择器
在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。通配符选择器不需要调用，自动就给所有元素使用样式。
示例：
* {
属性1：属性值1；
...
}
下面是一些基础选择器汇总：
三、盒子模型
页面中的所有元素都可以看成一个盒子，占据着一定的空间。
盒子模型组成：content，width宽度，height高度，border边框，padding内边距，margin外边距。
一个盒子的实际宽度、高度：content+padding+border+margin。
overflow属性：当内容溢出盒子框时，通过overflow属性进行如下设置：
hidden：超出部分不可见。
scroll：显示滚动条。
auto：如果有超出部分，显示滚动条。
border属性：
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
padding属性：内边距属性，取值：px，%（外层盒子的宽度和高度）。
margin属性：外边距属性。（合并：垂直方向合并，水平方向不合并。）
padding和margin属性：
top 上
right 右
bottom 下
left 左
水平居中：
图片、文字水平居中：text-align：center；
div水平居中：margin：0 auto；
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
