CSS基础选择器、文字文本相关样式

1、基础认知

1.1、CSS初识

CSS：层叠样式表（Cascading style sheets）

CSS作用：给页面中的HTML标签设置样式

1.2、CSS语法规则

CSS书写位置：css写在style标签中， style标签一般写在head标签里面， title标签下面

示例：

代码：

显示：

1.3、CSS初体验

常见属性：

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

示例：

代码：

显示：

注意点：

1. CSS标点符号都是英文状态下的
2. 每一个样式建值写完之后，最后都需要写分号

2.1、CSS引入方式

1. 内嵌式： CSS写在style标签中
   提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

示例：

2. 外联式： CSS写在一个单独的.css文件中
   提示：需要通过link标签在网页中引入

示例：

3. 行内式： CSS写在标签的style属性中
   提示：不推荐使用，之后会配合js使用

示例：

CSS常见三种引入方式的特点区别：

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中	当前页面	小案例
外联式	CSS写在单独的CSS文件中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

2、基础选择器

选择器的作用： 选择页面中对应的标签（找她），方便后续设置样式（改她）

2.1、标签选择器

结构： 标签名{CSS属性名：属性值;}

作用： 通过标签名，找到页面中所有这类标签，设置样式

注意点：

1. 标签选择器选择的是一类的标签，而不是单独的一个
2. 标签选择器无论嵌套有多深，都能找到对应的标签

示例：
代码：

效果：

2.2、类选择器

结构： .类名{CSS属性名：属性值;}

作用： 通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字开头或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签

示例：
代码：

效果：

2.3、id选择器

结构： #id属性值{CSS属性名：属性值;}

作用： 通过id属性值，找到页面中所有带有这个id属性值的标签，设置样式

注意点：

1. 所有标签上都有id属性
2. id属性类似于身份证号码，在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签

示例：
代码：

效果：

2.3.1类与id的区别

class类名与id属性值的区别：

1. class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
2. id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

类选择器与id选择器的区别：

1. 类选择器以.开头
2. id选择器以#开头

实际开发情况：

1. 类选择器用的最多
2. id一般配合js使用，除非特殊情况，否则不要使用id设置样式
3. 实际开发中会遇到冗余代码的抽取（可以将一些公有代码抽取到一个公共的类中去）

2.4、通配符选择器

结构： *{CSS属性名：属性值;}

作用： 找到页面中所有的标签，设置样式

注意点：

1. 开发中使用极少，只会在极特殊情况下才会用到
2. 在基础小页面中可能会用于去除标签默认的margin和padding
   代码：

*{
	margin: 0;
	padding: 0;
}

示例：
代码：

效果：

2.5基础选择器小结

标签选择器： 标签名 { css属性名：属性值； }

类选择器： .类名 { css属性名：属性值； }

id选择器： #id属性值 { css属性名：属性值； }

通配符选择器： * { css属性名：属性值； }

3、字体和文本样式

3.1、字体样式

3.1.1、字体大小

属性名： font-size

取值： 数字+px

注意点：

1. 谷歌浏览器默认文字大小是16px
2. 单位需要设置，否则无效

示例：
代码：

效果：

3.1.2、字体粗细

属性名： font-weight

取值：

1. 关键字：

正常	normal
加粗	bold

2. 纯数字：100~900的整数

正常	400
加粗	700

注意点：

1. 不是所有的字体都提供了九种粗细，因此部分取值页面中无变化
2. 实际开发中以：正常、加粗两种取值使用最多

示例：
代码：

效果：

3.1.3、字体样式（是否倾斜）

属性名： font-style

取值：

1. 正常值（默认值）：normal
2. 倾斜：italic

示例：
代码：

效果：

3.1.4、字体系列font-family

属性名： font-family

常见取值： 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列

1. 具体字体： “Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
2. 字体系列： sans-serif、 serif、 monospace等……

渲染规则：

1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

1. 如果字体名称中存在多个单词，推荐使用引号包裹
2. 最后一项字体系列不需要引号包裹
3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

示例：
代码：

效果：

3.1.5、样式的层叠问题

问题：
给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？

结果：
如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

TIP：

• CSS （Cascading style sheets） 层叠样式表
• 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

示例：
代码：

效果：

3.1.6、字体font相关属性的连写

属性名： font (复合属性)

取值：
• font : style weight size family;

省略要求：
• 只能省略前两个，如果省略了相当于设置了默认值

注意点： 如果需要同时设置单独和连写形式
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面

示例：
代码：

效果：

3.1.7、字体相关属性总结

字体大小： font-size
• 数字+px

字体粗细： font-weight
• 正常： normal 或 400
• 加粗： bold 或 700

字体样式： font-style
• 正常： normal
• 倾斜： italic

字体系列： font-family
• 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列

字体连写： font
• font : style weight size family;

3.2文本样式

3.2.1文本缩进

属性名： text-indent

取值：
• 数字+px
• 数字+em（推荐： 1em = 当前标签的font-size的大小）

示例：
代码：

效果：

3.2.2文本水平对齐方式

属性名： text-align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点：
• 如果需要让文本水平居中， text-align属性给文本所在标签（文本的父元素） 设置

水平居中方法总结 text-align : center

text-align : center 能让以下元素水平居中：

1. 文本
2. span标签、 a标签
3. input标签、 img标签

注意点：
如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置

示例：
代码：

效果：

3.2.3文本修饰

属性名： text-decoration

取值：

属性值	效果
umderline	下划线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线

注意点：
• 开发中会使用 text-decoration : none ; 清除a标签默认的下划线

示例：
代码：

效果：

3.2.4文本样式总结

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

3.3line-height行高

作用： 控制一行的上下行间距

属性名： line-height

取值：
• 数字+px
• 倍数（当前标签font-size的倍数）

应用：

1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距

行高与font连写的注意点：
• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family ;

示例：
代码：

效果：