【博学谷学习记录】超强总结，用心分享|前端开发持续三周的感受

连续三周的学习，今天和大家分享一下CSS的基础。

首先CSS的基础：

◆ 基础认知

◆ 基础选择器

◆ 字体和文本样式

◆ Chrome调试工具

1、基础认知

1.1 CSS的介绍

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

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

1.2 CSS 语法规则

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

1.3 CSS 常见属性

注意点： 1. CSS 标点符号都是英文状态下的

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

1.4 CSS引入方式

内嵌式：CSS 写在style标签中

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

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

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

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

提示：基础班不推荐使用，之后会配合js使用；

2、基础选择器

1. 标签选择器

2. 类选择器

3. id选择器

4. 通配符选择器

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.通配符选择器

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

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

注意点：

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

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

3、字体和文本相关样式

1. 字体样式

2. 文本样式

3. line-height行高

1.1 字体大小

属性名：font-size

取值：数字 + px 

注意点：谷歌浏览器默认文字大小是16px，单位需要设置，否则无效

1.2 字体粗细

属性名：font-weight

取值：

注意点：

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

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

1.3 字体样式（是否倾斜）

属性名：font-style 

取值： 正常（默认值）：normal     倾斜：italic

1.4 字体font相关属性的连写

属性名：font (复合属性) 

取值：  font : style weight size family; 

省略要求：

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

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

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

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

2.文本样式

2.1 文本缩进

属性名：text-indent 

取值：

数字+px 

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

2.2 文本水平对齐方式

属性名：text-align

取值：

left 左 、right 右 、center 居中

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

 2.3 文本修饰

属性名：text-decoration

取值：

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

3、line-height行高

3.1 行高

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

属性名：line-height 

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

应用：

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

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

行高与font连写的注意点： 

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

font : style weight size/line-height family ;

4、Chrome调试工具操作

最后总结一下需要学习的重点：

能够知道 CSS 的 引入方式 及区别 

能够使用 基础选择器 在 HTML 中选择元素 

能够使用 字体和文本相关样式 修改文字样式 

能够使用 CSS 让页面中元素水平居中 

能够使用 Chrome调试工具 修改和检查样式