文本
文本颜色
color 设置文本颜色
文本对齐
text-align 可以设置文本水平对齐方向
垂直对齐
vertical-align 属性设置元素的垂直对齐方式
img.top { vertical-align:top; } img.middle { vertical-align:middle; } img.bottom { vertical-align:bottom; }
文本装饰
Text-decoration 属性用于设置或删除文本装饰
h1 { text-decoration:overline;//上划线 } h2 { text-decoration:line-through;//删除线 } h3 { text-decoration:underline;//下划线 }
字符间距
letter-spacing属性用于指定文本中字符之间的间距
文本阴影
text-shadow属性为文本添加阴影
最简单的用法是只制定水平阴影 2px和垂直阴影 2px
h1 { text-shadow:2px 2px; }
添加模糊效果
h1 { text-shadow:2px 2px 5px red;//5px 为模糊度 }
字体
font-family属性
在css中,我们使用font-family属性规定文本的字体
font-family属性应包含多个字体名称作为备用字体,以确保浏览器/操作系统之间最大的兼容性,以逗号分隔
字体样式
font-style属性主要用于制定斜体文本
-
normal-文本以正常显示
-
italic-文本以斜体显示
字体粗细
font-weight属性指定字体的粗细
字体大小
font-size设置文本的大小
以em设置字体大小
为了允许用户调整文本大小 ,许多开发人员使用em而不是像素
1em等于当前字体大小 浏览器中的默认文本大小为16px
响应式字体大小
可以使用vw单位设置文本大小,他的意思是"视口宽度"
当调整浏览器窗口大小时,字体大小将会缩放
图像
背景图像
Background-image属性指定用作元素背景的图像
h1 { background-image:url(../img/); }
背景重复
background-image 属性在水平和垂直方向上都会重复图像
no-repeat设置不重复
列表
不同的列表项目标记
List-style-type
图片作为列表标记
List-style-image