css3层叠样式表

前言

本文介绍对CSS3层叠样式表的学习

---

一、CSS选择器

1.1 基础认知

1）CSS的介绍

CSS：层叠样式表（Cascading style sheets） 作用：给页面中的HTML标签设置样式。

2）语法规则
css写在style标签中，style标签一般写在head标签里面，title标签下面
3）常见属性

属性	作用
color	文字颜色
font-size	字体大小
background-color	背景颜色
width	宽度
height	高度

4）CSS引入方式

引用方式	位置	使用场景
内嵌式	CSS 写在style标签中	当前页面
外联式	写在一个单独的.css文件中	多个页面，通过link标签在网页中引入
行内式	CSS 写在标签的style属性中	配合js在当前标签内

1.2 基础选择器

1）标签选择器

结构：标签名 { css属性名：属性值； }

2）类选择器

结构：.类名 { css属性名：属性值； }

3）id选择器

结构：#id属性值 { css属性名：属性值； }

4）通配符选择器

结构：* { css属性名：属性值； }

1.3 字体和文本样式

1）字体样式

样式	属性名	属性值
字体大小	font-size	数字+px
字体粗细	font-weight	正常：normal 或 400/加粗：bold 或 700
字体样式	font-style	正常：normal/倾斜：italic
字体类型	font-family	具体字体1,具体字体2
字体类型	font	font : style weight size family;

2）文本样式

样式	属性名	属性值
文本缩进	text-indent	数字+px/数字+em
文本水平对齐方式	text-align	left/center/right
文本修饰	text-decoration	underline（下划线）/none

3）line-height行高

作用：控制一行的上下行间距
属性名：line-height
取值：
• 数字+px
• 倍数（当前标签font-size的倍数）

1.4 Chrome调试工具

1.5 选择器进阶

1. 复合选择器

1）后代选择器：空格

作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素 选择器语法：选择器1 选择器2 { css }

2）子代选择器：>

作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
选择器语法：选择器1 > 选择器2 { css }

2. 并集选择器：,

作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ， 选择器2 { css }

3. 交集选择器：紧挨着

作用：选中页面中 同时满足 多个选择器的标签
选择器语法：选择器1选择器2 { css }

4. hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover { css }

5. Emmet语法

作用：通过简写语法，快速生成代码

1.6 背景相关属性

1. 背景颜色

属性名：background-color（bgc）
属性值：关键字、rgb表示法、rgba表示法、十六进制……

2. 背景图片

属性名：background-image（bgi）

background-image:url('图片的路径')；

3. 背景平铺

属性名：background-repeat（bgr）

4. 背景位置

属性名：background-position（bgp）

background-position:水平位置，垂直位置;

5. 背景相关属性的连写形式

属性名：background（bg）
属性值：单个属性值的合写，取值之间以空格隔开

1.7 元素显示模式

1. 块级元素

显示特点：独占一行（一行只能显示一个）;宽度默认是父元素的宽度，高度默认由内容撑开;可以设置宽高
代表标签： • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2. 行内元素

显示特点：一行可以显示多个; 宽度和高度默认由内容撑开;不可以设置宽高
代表标签： a、span 、b、u、i、s、strong、ins、em、del……

3. 行内块元素

显示特点：一行可以显示多个;可以设置宽高
代表标签：
• input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4. 元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

1.8 CSS特性

1. 继承性的介绍

特性：子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性(文字控制属性都可以继承)
①color
②font-style、font-weight、font-size、font-family
③text-indent、text-align
④ line-height

2. 层叠性的介绍

特性：
①给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
②给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

二、盒子模型

三、浮动

四、定位+装饰

五、前置样式

六、header+footer+主体内容