12.10日知识点梳理

文本：

文本颜色：color

文本对齐：text-align

text-align=“center”：居中对齐

text-align=“left”：左对齐

text-align=“right”：右对齐

text-align=“justify”：每一行都是齐整的，因为宽度相等，并且左右边距都是一样的。（一般用在新闻里）

左对齐，右对齐，居中对齐，行对齐

垂直对齐：vertical-align

top，middle，bottom（上中下）

文本装饰

text-decoration：用于设置或删除文本装饰

text-decoration：overline：上划线

text-decoration：line-through：删除线

text-decoration：underline：下划线

文本缩进

text-indent：用于文本中第一行的缩进。（1em=16px）

字符间距

letter-spacing：用于文本中字符之间的间距。（像素px）（大多数用于横幅）

文本阴影

text-shadow：为文本添加阴影。

text-shadow：2px（水平阴影） 2px（垂直阴影） 5px（模糊阴影）red（颜色）；

字体

font-family：修改字体样式

字体样式：

font-style：用于指定斜体文本

font-style：normal（文本正常显示）

font-style：italic（斜体显示）

字体粗细

font-weight：修改字体的粗细

font-weight：normal；正常显示

font-weight：bold；字体加粗

字体大小

font-size

绝对尺寸：

 

相对尺寸：

 

以像素设置字体大小

以em设置字体大小

1em=16px

以px设置字体大小

px

使用百分比和em的组合

em、%

响应式字体大小

vw，它的意思是视口宽度

它随浏览器窗口的大小而改变

1vw=视口宽度的1%

图像

背景图像

background-image：用于指定元素背景的图像，默认情况下，背景图片会重复。

背景重复

background-repeat：no-repeat；不重复

background-repeat：repeat-x；水平重复

background-repeat：repeat-y；垂直重复

背景位置

background-position：用于指定图片的位置

background-position：right top；（右上）

图像精灵

图像精灵是单个图像中包含的图像集合。

包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

列表

HTML 列表和 CSS 列表属性

不同的列表项目标记

图像作为列表项标记

删除默认设置

设置列表的颜色样式

伪类

定义元素的特殊状态

Link、visited、hover、active

（未访问，已访问，鼠标悬停，已选择的链接。）

Link需要清除缓存，不然无法显示，href还需要内容。

伪类名称对字母大小写不敏感。

伪类选择器可以和类选择器结合使用

:First-child：获取该元素中的第一个子元素。

：Last-child：获取该元素中的最后一个子元素。

伪元素

语法规则是：：俩冒号

可以设置元素的首字母、首行的样式。

在元素的内容之前或之后插入内容。

超链接

有四个状态，link，visited，hover，active

文本

文本装饰：text-decoration

背景色：background-color

连接按钮：组合多个css属性，将链接显示为框/按钮。

盒模型

所有html元素都可以视为方框。

它包括：外边距，边框，内边距以及实际的内容。