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 值可以是绝对或相对大小
绝对尺寸:
-
将文本设置为指定大小
-
不允许用户在所有浏览器设置中更改文本大小(可访问性不佳)
-
当输出的物理尺寸已知时,绝对尺寸很有用
相对尺寸:
-
设置相对于周围元素的大小
-
允许用户在浏览器中更改文本大小
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 设置列表属性指定的列表项标记的类型
-
list-style-type: afar;
-
list-style-type: circle;
-
list-style-type: upper-roman;
-
list-style-type: lower-alpha;
4.3 图像作为列表项标记
list-style-img属性作为图像指定的列表项标记
4.4 删除默认设置
list-style-type:none属性可用于删除标记/项目符号
4.5 设置列表的颜色样式
在STYLE中 添加<ol><ul>标记的任何样式都会影响整个列表,而添加的<li>标记的属性将影响各个列表项