CSS简介这节的目录
CSS简介
1.1 HTML和CSS的区别
1.2 CSS语法
CSS基础选择器
2.1选择器的作用
2.2 选择器的分类
2.2.1 基础选择器
标签选择器
类选择器
类选择器-多类名
id选择器
通配符选择器
总结
CSS字体属性
字体系列
3.1 font-family
3.2 font-size
3.3 font-weight
3.4 font-style
3.5 font 复合属性
总结
CSS文本属性
外观系列
4.1 color
4.2 text-align 水平对齐方式
4.3 text-decoration 文本装饰
4.4 text-indent 首行缩进
4.5 line-height 行间距
4.6 white-space 空白符处理
4.7 letter-spacing 字间距
4.8 word-spacing 单词间距
4.9 text-transform 文本转换
总结
CSS引入方式
5.1 行内样式表
5.2 内嵌式样式表
5.3 链入式样式表
5.4 导入式样式表
Emmett语法
6.1 快速生成HTML结构语法
6.2 快速生成CSS结构语法
CSS的高级特性
7.1 CSS复合选择器
7.1.1 标签指定式
7.1.2 后代选择器(重要)
7.1.4 子选择器(重要)
7.1.3 并集选择器(重要)
7.1.4 伪类选择器
链接伪类选择器
:focus伪类选择器
总结
7.2 CSS的元素显示模式
7.2.1 块元素
7.2.2 行内元素
7.2.3 行内块元素
总结
7.2.4 元素显示模式的转换
案列：小米侧边栏
7.3 CSS的背景
7.3.1 background-color
7.3.2 background-image
7.3.3 background-repeat
7.3.4 background-position
7.3.5 background-attachment
7.3.6 background
背景色半透明
总结
案例：五彩缤纷导航
7.4 CSS的三大特性
7.4.1 重叠性
7.4.2 继承性
行高的继承
7.4.3 优先级
CSS简介
CSS是层叠样式表的简称，有时我们也会称为CSS样式表或级联样式表。
1.1 HTML和CSS的区别
CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。
总结：
HTML主要是做结构，显示元素内容
CSS美化HTML，布局网页
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离。
1.2 CSS语法
样式规则
CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
选择器{属性1：属性值1；属性2：属性值2；}
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以"键值对"的形式出现
属性是对指定的对象设置的样式设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文 “:” 分开
多个"键值对"之间用英文 “;” 进行区分
CSS基础选择器
2.1选择器的作用
选择器就是根据 不同需求把不同的标签选出来 这就是选择器的作用.
CSS做了两件事:
找到了标签,选择器 (选对人)
设置这些标签的样式,比如颜色为红色 (做对事)
2.2 选择器的分类
2.2.1 基础选择器
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
标签选择器
类选择器
样式点定义 结构类(class)调用 一个或多个 开发最常用
类选择器-多类名
多类名使用方式：
在class属性中写多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式
使用场景：
可以把一些标签元素相同的样式(共同的部分)放到一个类里面
这些标签都可以调用这个公用的类，然后再调用总结独有的类
从而节省CSS代码，统一修改非常方便
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML 元素以id属性来设置id选择器，CSS 中id 选择器以"#"定义
样式#定义 结构id调用 只能调用一次 别人切勿使用
通配符选择器
*是全部的意思
不需要调用
总结
CSS字体属性
字体系列
3.1 font-family
CSS 使用 font-family 属性定义文本的字体系列
各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证再任何用户的浏览器中都能正确显示
在有英文字体和中文字体时，规定中文字体写在英文字体的后面
3.2 font-size
CSS 使用 font-size 属性定义文本的大小
px(像素)大小是我们网页的最常用的单位
可以给body指定整个页面文字大小
标题标签比较特殊，需要单独指定大小
3.3 font-weight
CSS 使用 font-weight 属性定义文本字体的粗细
font-weight 除了 bold 还有以下属性：
属性值
作用
normal(常用给标题不加粗)
默认值，定义标准的字符
bold
定义粗体字符
bolder
定义更粗的字符
lighter
定义更细的字符
100-900(100的整数倍)
400=normal，700=bold
3.4 font-style
CSS 使用 font-style 属性定义文本的风格
属性值
作用
normal
默认值，浏览器会显示标准默认的字体样式
italic(常用)
显示倾斜字体
oblique
显示倾斜字体
3.5 font 复合属性
书写有顺序，属性与属性之间空格隔开
size 和 family 不能不写，否则font属性将不起作用
总结
CSS文本属性
外观系列
4.1 color
表示方式
属性值
预定义的颜色值
red，green blue
十六进制
#FF6600
RGB代码
rgb(255,0,0)或rgb(100%,100%,100%)
4.2 text-align 水平对齐方式
text-align 属性用于设置元素内文本内容的 水平对齐方式
属性值
解释
left
左对齐(默认值)
right
右对齐
center
居中对齐
4.3 text-decoration 文本装饰
属性值
描述
none
默认值。没有装饰线
underline
下划线 。标签a自带下划线，可以设置取消
overline
上划线
line-through
删除线
4.4 text-indent 首行缩进
通过设置该属性，所有元素的第一行都可以缩进一个 给定的长度 ，甚至该长度可以为负值
em 是一个相对单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
4.5 line-height 行间距
4.6 white-space 空白符处理
属性值
解释
normal
默认值，文本中的空格、空行无效
pre
预格式化，按文档的书写格式保留空格、空行原样显示
nowrap
强制文本不能换行，除非遇到 br ,内容超出浏览器页面则会自动出现滚动条
4.7 letter-spacing 字间距
letter-spacing 用来定义字符与字符之间的空白。
其属性值可以为不同单位的数值(常用px)
允许使用负值
默认为normal
4.8 word-spacing 单词间距
word-spacing 用来定义英文单词之间的间距，对中文字符无效
其属性值可以为不同单位的数值(常用px)
允许使用负值
默认为normal
注意：
相同：word-spacing 和 letter-spacing 均可以对英文进行设置。
不同：letter-spacing定义的为字母之间的间距，而word-spacing 定义的为英文单词之间的间距
4.9 text-transform 文本转换
用来控制英文字符的大小写
属性值
作用
none
默认值，不转换
capitalized
首字母大写
uppercase
全部字符转换为大写
lowercase
全部字符转换为小写
总结
CSS引入方式
5.1 行内样式表
5.2 内嵌式样式表
5.3 链入式样式表
5.4 导入式样式表
Emmett语法
6.1 快速生成HTML结构语法
生成标签 直接输入标签名按tab键即可 比如 div 然后tab键 就可以生成一对div标签
生成多个相同标签 加上 * 即可 比如 div*3就可以生成3个div
如果有父子级关系的标签 用>即可 比如 ul>li 就可以
如果有兄弟关系的标签 用+即可 比如 div+p
如果生成带有类名或者id名字的，直接写.demo或者#two 按tab键就可以了
如果生成的div类名是有顺序的，可以用自增符号$
如果想要在生成的标签内部写内容可以用{}表示
6.2 快速生成CSS结构语法
第一个字母简写 ，按tab键就可…
CSS的高级特性
7.1 CSS复合选择器
7.1.1 标签指定式
由两个选择器构成，标签和class/id，之间不能有空格
7.1.2 后代选择器(重要)
外层写前面，内层写后面，中间空格隔开，不限于两个元素
7.1.4 子选择器(重要)
只能选择作为某元素的最近一级子元素，可以理解为长子选择器。
7.1.3 并集选择器(重要)
有多个标记具有相同的属性，用逗号隔开，进行集体说明且任何选择器都可以作为并集选择器的一部分
7.1.4 伪类选择器
用于向某些选择器添加特殊的效果
链接伪类选择器
属性
作用
a:link
选择所有未被访问的链接
a:visited
选择所有已被访问的链接
a:hover
选择鼠标指针位于其上的链接
a:active
选择活动链接(鼠标按下未弹起的链接)
一点细节
:focus伪类选择器
用于选取获得焦点的表单元素
焦点就是鼠标的光标
下面示例意思是光标停在哪个表单里面，哪个表单的背景色为黄色。
总结
7.2 CSS的元素显示模式
元素显示模式就是元素(标签)以什么方式进行显示
HTML元素一般分为块元素和行内元素两种类型
7.2.1 块元素
块元素的特点：
比较霸道，自己独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器(父级宽度)的100%
是一个容器及盒子，里面可以放行内或者块级元素
注意： 文字类的元素内不能使用块级元素
7.2.2 行内元素
行内元素的特点：
相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素
注意：链接里面不能放链接，但是特殊情况下a里面可以放块级元素，最好给a 转换为块级模式更安全。
7.2.3 行内块元素
一行可以显示多个
默认宽度就是本身内容的宽度
高度、行高、外边距以及内边距都可以控制
总结
7.2.4 元素显示模式的转换
display 其属性
作用
inline
将元素显示为行内元素
block
将元素显示为块元素
inline_block
将元素显示为行内块元素
案列：小米侧边栏
代码：
7.3 CSS的背景
页面元素既可以添加背景颜色和背景图片
7.3.1 background-color
7.3.2 background-image
background-image实际开发常用logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置
7.3.3 background-repeat
参数值
作用
no-repeat
背景图像不平铺
repeat
背景图像平铺
repeat-x
背景图像在横向上平铺
repeat-y
背景图像在纵向平铺
7.3.4 background-position
利用background-position：x y;
参数代表的意思是：x坐标和y坐标，可以使用方位名词和精准单位
参数值
说明
length
百分数，由浮点数字和单位标识符组成的长度值
position
top center bottom left center right 方位名词
背景图片位置
1.参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2.参数是精准单位
如何参数值是精准坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
3.参数是混合单位
如果是精确单位和方位名词混合使用那么第一个肯定是x坐标，第二个一定是y坐标
7.3.5 background-attachment
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment后期可以制作视差滚动的效果
参数
作用
scroll
背景图像是随对象内容滚动
fixed
背景图像固定
7.3.6 background
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
背景色半透明
最后一个参数时alpha透明度，取值范围在0~1之间
我们习惯把0.3的0省略掉
总结
案例：五彩缤纷导航
7.4 CSS的三大特性
7.4.1 重叠性
7.4.2 继承性
行高的继承
7.4.3 优先级
当同一个元素指定多个选择器，就会有优先级的产生
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
选择器权重如下表所示：
选择器
选择器权重
继承或者 *
0
标签选择器
1
类选择器，伪类选择器
10
ID选择器
100
行内样式 style=“”
1000
！important
无穷大
标签选择器
4689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
