CSS3美化字体样式

1.span标签

span标签是HTML5的行内标签，被用来组合文档中的行内元素。

2.字体样式

font–family:设置字体的类型，常用的字体有宋体、微软雅黑、黑体等，可以设置多个字体中文要记得加英文“”号
font–size：设置字体的大小，常用单位是px还有其他的in，cm，mm等，但并不实用。
font–style：设置字体风格
font–weight：设置字体的粗细
font：用于对字体的综合设置
font–style属性用于设置字体风格如斜体，normal默认值显示标准的字体，italic：显示斜体的字体样式，oblique：显示倾斜体的字体
font-weight属性用于设置字体的粗细，bold定义粗体字符，bolder定义更粗的字符，lighter定义更细的字符，100~900可以自定义粗细
font可以对字体进行综合设置，语法：p{font：font-style font-weight font-size；}各属性之间以空格隔开

3.文本样式

• color：设置文本的颜色

1.使用颜色名称来直接定义颜色，如：color：yellow
2.使用十六进制代码指定颜色，如：color：#00F；记住一定要颜色代码前加#号
3.RGB使用红绿蓝这光学三原色，只要设置好这三种颜色，就可以形成各种颜色
4.RGBA：是RGB方法的拓展，只是加了一个alpha属性，要用到有透明度的颜色时，可以用这个属性控制透明度，值为0~1，越小越透明

• text–align：设置文本内容水平对齐

left：默认值，左对齐
right：右对齐
center：居中对齐
justify：两端对齐

• text-indent：设置首行文本的缩进

每个段落的首行都会空出字符，属性值可以是em和px，2em表示缩进两个字符

• line–height：设置文本的行高

行高就是行与行之间的距离，属性单位分别有px，em，和百分比，通常按字体大小的倍数表示，16px行高就可以设置为32px

• text–decoration：设置文本的装饰

none:默认值没有装饰
underline：下划线
overline：上划线
line–through：删除线

• vertical-align：设置文本内容的垂直对齐

文本垂直居中，属性值有middle，top，bottom

• text–shadow：设置文本阴影效果

{text–shadow：10px 8px 5px #999；}分别是设置水平阴影位置，垂直阴影位置，模糊距离，还有阴影的颜色

4.超链接伪类

a：link{ }设置未访问前超链接的状态
a：visited{ }单击访问后的状态
a：hover{ }鼠标指针悬停时的状态
a：active{ }鼠标未释放时的状态
list–style去除列表样式的圆点符号或数字

5.背景样式

background–color：规定背景颜色
background–image：规定要使用的背景图
background–repeat：规定重复的背景图像

repeat：默认，背景会在垂直方向和水平方向重复
repeat-x：水平方向重复
repeat-y：垂直方向重复
no–repeat：背景图像仅显示一次。

background–position：规定背景图像的位置

top顶部 left，right左和右，bottom底部，如果只定义一个值，那第二个值默认为center

background：复合属性，综合设置
background–size：规定背景的尺寸，length设置宽高，percentage以父元素的百分比设置宽高，cover背景图拓展覆盖
contain把图像扩展至最大尺寸，完全适应内容区域
线性渐变
background–image:linear–gradient(方向，颜色1，颜色2)；颜色至少定义两种

代码007普通

打赏 收藏 海报 链接