文本 图片

文本

文本颜色

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