12.9日总结1

12月9日总结

1.文本

1.1文本颜色

color:设置文本颜色

1.2 文本对齐

text—align：属性用于设置文本的水平对齐方式

文本可以设置左对齐、右对齐、水平居中

当text—align属性设置为justify后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（图文混排)。

1.3 垂直对齐

vertical—align 属性设置元素的垂直对齐方式

上对齐：top 中间对齐：middle 下对齐：bottom

1.4 文本装饰

text—decoration 属性用于设置或删除文本装饰。

text—decoration：none：通常用于删除链接上的下划线

text—decoration：overline 上划线

text—decoration：line—through 删除线

text—decoration：underline 下划线

1.5 文本缩进

text—indent 属性用于指定文本第一行的缩进。

text—indent：2em;

1.6 字符间距

letter—spacing属性用于指定文本中字符之间的间距。

letter—spacing：12px；

1.7 文本阴影

text—shadow 属性为文本添加阴影

text—shadow:x px w px c color x:水平阴影 w：垂直阴影 c：模糊效果

2、字体

2.1 字体选择很重要

使用易于阅读的字体很重要。为字体选择正确的颜色和文本大小也很重要。

2.2 font—family 属性

属性应包含多个字体名称作为备用字体，以确保浏览器/操作系统之间的最大兼容性。字体名称应以逗号分隔。

2.3 font—style 字体样式

font-style 属性主要用于指定斜体文本。

font-style ：normal 文本正常显示 font-style ：italic文本以斜体显示

2.4 字体粗细

font—weight 属性指定字体的粗细

font—weight：bold；字体加粗

2.5 字体大小

font—size 属性设置文本大小 可以完全控制文本大小

font—size 值可以是绝对或相对大小

绝对尺寸：

1. 将文本设置为指定大小

2. 不允许用户在所有浏览器设置中更改文本大小(可访问性不佳)

3. 当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

1. 设置相对于周围元素的大小

2. 允许用户在浏览器中更改文本大小

2.5.2 字体

1em等于当前字体大小。浏览器中的默认文本大小为16px。因此，默认大小1em为16px。可以使用这个公式从像素到em来计算大小:16px/1em

2.5.3 百分比和em的组合

在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小.

2.5.4 响应式字体大小

可以使用vw单位设置文本大小，它的意思是“视口宽度”。

视口(Viewport)是浏览器窗口的大小。1vw=视口宽度的1%。如果视口为50厘米宽，则1vw为0.5厘米。

3、图像

3.1 背景图像

background—image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

3.1.1 背景重复

background-repeat：no-repeat 属性

如需水平重复图像，请设置background-repeat：repeat-x；

如需水平重复图像，请设置background-repeat：repeat-y；

background-repeat：no-repeat 属性指定只显示一次背景图像

background—position 属性 图片定位

简写：

background：颜色 图片路径 偏移不重复/重复 定位

3.2 精灵图

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

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

加快网页加载的速度

4、列表

4.1 html与css列表属性

有序列表<ul>：列表项用的是项目符号标记

无序列表<ol>：列表项用的是数字或字母标记

4.2 不同的列表项目的标记

list—style—type 设置列表属性指定的列表项标记的类型

1. list-style-type: afar;

2. list-style-type: circle;

3. list-style-type: upper-roman;

4. list-style-type: lower-alpha;

4.3 图像作为列表项标记

list-style-img属性作为图像指定的列表项标记

4.4 删除默认设置

list-style-type：none属性可用于删除标记/项目符号

4.5 设置列表的颜色样式

在STYLE中 添加<ol><ul>标记的任何样式都会影响整个列表，而添加的<li>标记的属性将影响各个列表项