前端-阶段01-CSS-Day05 | 昕昕-未来不是梦

type

status

date

slug

summary

1 CSS 长度单位和颜色设置

1.1 CSS 中的长度单位

1.2 CSS 中的颜色设置方式

① 使用颜色名表示颜色

常见的颜色名有：

② rgb 方式表示颜色

③ hex 十六进制方式表示颜色

2 CSS 基本选择器

2.1 四种基本选择器

① 标签名（元素名）选择器

② 类名选择器

③ ID 选择器

元素的ID名必须是唯一的！

④ 全局（通配）选择器

2.2 基本选择器之间的权重

3 盒子模型（显示模式）

3.1 元素的显示模式

① 块级元素 block

显示模式是块级的元素称为块级元素，特点：

② 行内元素 inline

显示模式是行内的元素称为行内元素，特点：

③ 行内块元素 inline-block

显示模式是行内块的元素称为行内块元素，特点：

按照最早的标准，行内块元素也被当做行内元素！

3.2 HTML 元素的默认显示模式

① 默认显示模式是 block 的元素：

② 默认显示模式是 inline 的元素：

③ 默认显示模式是 inline-block 的元素：

3.3 修改元素的显示模式

使用CSS属性 display 可以设置元素的显示模式，该属性的值如下：

4 CSS 属性总结

4.1 字体样式

属性名	作用	属性值
font-size	字体大小	长度
font-weight	字体粗细	normal：正常。 lighter：细。 bold：粗。 100~900数字：100~300是细体，400、500正常，600以及以上粗体
font-style	斜体字	normal：正常。 italic：斜体字。
font-family	字体族科	字体名称、字体列表
font	设置多种字体样式	多个值，使用空格分隔

① 字体族科 font-family

字体族科的设置：

设置字体列表：

衬线字体和非衬线字体：

② 复合属性 font

③ 子属性和复合属性的关系

4.2 文本颜色

属性名	作用	属性值
color	设置文字颜色	颜色

4.3 文本样式

属性名	作用	属性值
letter-spacing	字间距	长度
word-spacing	词间距（中文无效果）	长度
text-decoration	文本修饰线	none：无修饰线。 underline：下划线。 overline：上划线。 line-throuth：删除线
text-indent	首行缩进	长度
text-align	文本水平对齐方式	left：左对齐。 right：右对齐。 center：居中对齐
vertical-align	与同行文本如何对齐	baseline：基线对齐。 top：顶线对齐。 middle：中线对齐。 bottom：底线对齐。 sub：下标字。 super：上标字。长度：元素底部与基线的距离
line-height	ㅤ	ㅤ

① vertical-align

② line-height 设置行高

行高的概念：

使用行高实现元素中的一行文字垂直居中，满足以下条件：

line-height 是 font 的子属性：