1500字范文 > 【前端学习笔记】(三)（CSS基础选择器字体和文本样式）

【前端学习笔记】(三)（CSS基础选择器字体和文本样式）

时间：2022-10-18 13:49:40

一、基础认知1.1 CSS介绍1.2 CSS语法规则1.3 CSS常见属性1.4 CSS引入方式1.5 CSS常见三种引入方式的区别二、基础选择器1、标签选择器2、类选择器3、 id选择器4、类与id的区别5、通配符选择器三、字体和文本样式1、字体样式1.1 字体大小：font-size1.2 字体粗细：font-weight1.3 字体样式：font-style1.4 字体类型：font-family1.5 样式的层叠问题1.6 字体类型：font属性连写2、文本样式2.1 文本缩进：text-indent2.2 文本水平对齐方式：text-align2.3 文本修饰：text-decoration3、 line-height 行高4、颜色常见取值

一、基础认知

1.1 CSS介绍

CSS：层叠样式表

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

1.2 CSS语法规则

• css 写在 style 标签中，style 标签一般写在 head 标签里面，title 标签下面

1.3 CSS常见属性

注意点：

（1） CSS 标点符号都是英文状态下的

（2）每一个样式键值对写完之后，最后需要写分号

例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: blue;font-size: 16px;background-color: aquamarine;width: 200px;height: 200px;}</style></head><body><p>Hello</p></body></html>

效果展示：

1.4 CSS引入方式

➢内嵌式：CSS 写在 style 标签中

• 提示：style 标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

➢外联式：CSS 写在一个单独的.css文件中

• 提示：需要通过 link 标签在网页中引入

➢行内式：CSS 写在标签的 style 属性中

• 提示：之后会配合 js 使用

1.5 CSS常见三种引入方式的区别

二、基础选择器

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

1、标签选择器

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

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

➢ 注意点：

（1）标签选择器选择的是一类标签，而不是单独某一个

（2）标签选择器无论嵌套关系有多深，都能找到对应的标签

2、类选择器

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

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

➢ 注意点：

（1）所有标签上都有 class 属性，class 属性的属性值称为类名（类似于名字）

（2）类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

（3）一个标签可以同时有多个类名，类名之间以空格隔开

（4）类名可以重复，一个类选择器可以同时选中多个标签

3、 id选择器

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

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

➢ 注意点：

（1）所有标签上都有 id 属性

（2） id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

（3）一个标签上只能有一个id属性值

（4）一个 id 选择器只能选中一个标签

4、类与id的区别

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

• class 类名相当于姓名，可以重复，一个标签可以同时有多个 class 类名

• id 属性值相当于身份证号码，不可重复，一个标签只能有一个 id 属性值

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

• 类选择器以 . 开头

• id 选择器以 # 开头

➢ 实际开发的情况

• 类选择器用的最多

• id 一般配合 js 使用，除非特殊情况，否则不要使用 id 设置样式

• 实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

5、通配符选择器

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

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

➢ 注意点：

（1）开发中使用极少，只会在极特殊情况下才会用到

（2）在基础班小页面中可能会用于去除标签默认的 margin 和 padding

![通配符选择器1

效果：

三、字体和文本样式

1、字体样式

1.1 字体大小：font-size

➢ 属性名：font-size

➢ 取值：数字 + px

➢ 注意点：

• 谷歌浏览器默认文字大小是16px

• 单位需要设置，否则无效

例子：

效果展示：

1.2 字体粗细：font-weight

➢ 属性名：font-weight

➢ 取值：

• 关键字：

• 纯数字：100~900的整百数：

➢ 注意点：

• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化

• 实际开发中以：正常、加粗两种取值使用最多。

例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {font-weight: normal;}.two {font-weight: bold;}.three {font-weight: 400;}.four {font-weight: 700;}</style></head><body><p class="one">p标签1</p><p class="two">p标签2</p><p class="three">p标签3</p><p class="four">p标签4</p></body></html>

效果展示：

1.3 字体样式：font-style

➢ 属性名：font-style

➢ 取值：

• 正常（默认值）：normal

• 倾斜：italic

例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {font-style: normal;}.two {font-style: italic;}</style></head><body><p class="one">p标签1</p><p class="two">p标签2</p></body></html>

效果展示：

1.4 字体类型：font-family

➢ 属性名：font-family

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

• 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……

• 字体系列：sans-serif、serif、monospace等……

➢ 渲染规则：

（1）从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体

（2）如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

➢ 注意点：

（1）如果字体名称中存在多个单词，推荐使用引号包裹

（2）最后一项字体系列不需要引号包裹

（3）网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {font-family: Microsoft YaHei;}.two {font-family: 楷体;}</style></head><body><p class="one">p标签1</p><p class="two">p标签2</p></body></html>

效果展示：

常见字体

➢ 无衬线字体（sans-serif）

（1）特点：文字笔画粗细均匀，并且首尾无装饰

（2）场景：网页中大多采用无衬线字体

（3）常见该系列字体：黑体、Arial

➢ 衬线字体（serif）

（1）特点：文字笔画粗细不均，并且首尾有笔锋装饰

（2）场景：报刊书籍中应用广泛

（3）常见该系列字体：宋体、Times New Roman

➢ 等宽字体（monospace）

（1）特点：每个字母或文字的宽度相等

（2）场景：一般用于程序代码编写，有利于代码的阅读和编写

（3）常见该系列字体：Consolas、fira code

1.5 样式的层叠问题

➢ 问题：

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

➢ 结果：

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

➢ TIP：

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

• 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {color: red;color: blue;}</style></head><body><p class="one">p标签1</p></body></html>

效果展示：

1.6 字体类型：font属性连写

➢ 属性名：font (复合属性)

➢ 取值：

• font : style weight size family;

➢ 省略要求：

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

➢ 注意点：如果需要同时设置单独和连写形式

• 要么把单独的样式写在连写的下面

• 要么把单独的样式写在连写的里面

例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {font: italic 700 20px 宋体;}.two {font: 30px 楷体;}</style></head><body><p class="one">p标签1</p><p class="two">p标签2</p></body></html>

效果展示：

2、文本样式

2.1 文本缩进：text-indent

➢ 属性名：text-indent

➢ 取值：

• 数字+px

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

例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {text-indent: 2em;}</style></head><body><p>第一代电子管计算机——ENIAC(The Electronic Numerical Integrator And Computer)1946年在费城公诸于世，它通过不同部分之间的重新接线编程，还拥有并行计算能力，但功能受限制，速度也慢。ENIAC的问世标志现代计算机的诞生，是计算机发展史上的里程碑。</p><p>第二代晶体管计算机晶体管的发明大大促进计算机的发展，晶体管代替电子管，电子设备体积减小。1956年，晶体管在计算机中使用，晶体管和磁芯存储器导致了第二代计算机的产生。第二代计算机体积小、速度快、功耗低、性能更稳定。首先使用晶体管技术的是早期的超级计算机，主要用于原子科学的大量数据处理，这些机器价格昂贵，生产数量极少。</p></body></html>

效果展示：

2.2 文本水平对齐方式：text-align

➢ 属性名：text-align

➢ 取值：

➢ 注意点：

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

例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {text-align: left;}.two {text-align: center;}.three {text-align: right;}</style></head><body><p class="one">web前端开发</p><p class="two">Web前端开发</p><p class="three">Web前端开发</p></body></html>

效果展示：

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

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

① 文本

② span标签、a标签

③ input标签、img标签

➢ 注意点：

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

2.3 文本修饰：text-decoration

➢ 属性名：text-decoration

➢ 取值：

➢ 注意点：

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

例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {text-decoration: underline;}.two {text-decoration: line-through;}.three {text-decoration: overline;}a {text-decoration: none;}</style></head><body><p class="one">下划线</p><p class="two">删除线</p><p class="three">上划线</p><a href="#">链接（去掉了下划线）</a></body></html>

效果展示：

3、 line-height 行高

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

➢ 属性名：line-height

➢ 取值：

• 数字+px

• 倍数（当前标签 font-size 的倍数）

➢ 应用：

（1）让单行文本垂直居中可以设置 line-height : 文字父元素高度

（2）网页精准布局时，会设置 line-height : 1 可以取消上下间距

➢ 行高与 font 连写的注意点：

• 如果同时设置了行高和 font 连写，注意覆盖问题

• font : style weight size / line-height family ;

4、颜色常见取值

➢ 属性名：

• 如：文字颜色：color

• 如：背景颜色：background-color

➢ 属性值：

例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 50px;}.one {background-color: blue;}.two {background-color: rgb(255,0,0);}.three {background-color: rgba(255,0,0,0.3);}.four {background-color: #6868dd;}</style></head><body><div class="one">关键词</div><div class="two">rgb</div><div class="three">rgba</div><div class="four">十六进制</div></body></html>

效果展示：

➢ 取值类型①：关键词

➢ 常见颜色取值：

• red：红色

• green：绿色

• blue：蓝色

• yellow：黄色

• orange：橘色

• skyblue：天蓝色

• pink：粉色

• …….

➢ 取值类型②：rgb表示法