共计 1728 个字符，预计需要花费 5 分钟才能阅读完成。
1. 字体样式
1.1 字体类型 font-family
p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}
1.2 字体大小 font-size
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}
font-size 属性单位
px（像素）
em、rem、cm、mm、pt、pc
1.3 字体风格 font-style
normal、italic 和 oblique
normal：表示默认的字体样式，即不倾斜。这是 font-style 属性的默认值，用于指定文本不应用任何特殊的倾斜效果。
italic：表示对字体进行倾斜处理。当设置为 italic 时，文本会呈现为斜体，这是一种常见的字体样式，用于强调文本或改变其视觉表现。
oblique：表示使用斜体字体显示字符。与 italic 类似，oblique也使文本呈现为斜体，但它是通过调整字体角度而不是使用专门的斜体字体来实现的。在某些情况下，如果系统中没有对应的斜体字体，oblique可以作为 italic 的替代选项
1.4 字体的粗细 font-weigh
1.5 字体属性 font
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
p span{font:oblique bold 12px "楷体";}
2. 文本样式
2.1color 属性
RGB
十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
rgb(r,g,b) : 正整数的取值为 0～255
RGBA
在 RGB 基础上增加了控制 alpha 透明度的参数，其中这个透明通道值为 0～1
2.2 文本修饰
text-decoration 属性
| 值 | 说明 |
|---|---|
| none | 默认值，定义的标准文本 |
| underline | 设置文本的下划线 |
| overline | 设置文本的下划线 |
| line-through | 设置文本的删除线 |
2.3 排版文本的段落
text-align
| 值 | 说明 |
|---|---|
| left | 把文本排列在左边 |
| right | 把文本排列在右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
2.4 文本阴影
text-shadow : color x-offset y-offset blur-radius;
color 阴影颜色
x-offset x 轴位移，用来指定阴影水平位移量
y-offset y 轴位移，用来指定阴影垂直位移量
blur-radius 阴影模糊半径，代表阴影向外模糊的模糊范围
3. 超链接伪类
标签名: 伪类名{
声明；
}
a:hover {
color:#B46210;
text-decoration:underline;
}
设置伪类的顺序：a:link > a:visited > a:hover > a:active
4. 列表样式
list-style
li {
list-style:none;
}// 去除列表前的小黑点
5. 背景样式
5.1 背景颜色
background-color
背景颜色值：十六进制方法表达
5.2 背景图像
background-color
属性
background-image:url(图片路径);
背景重复方式
background-repeat 属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
5.3 背景定位
background-position
.title{
text-indent:1em;
line-height:35px;
background:url(../image/arrow-down.gif) 205px 10px no-repeat;
}
6.css 渐变
6.1 线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
linear-gradient ( position, color1, color2,…)
position 渐变的方向
color1 第一种颜色
color2 第二种颜色
6.2 径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
原文地址: CSS3 美化网页元素
