字体样式
属性名 含义 举例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";
字体的粗细
font-weight属性
normal 默认值，定义标准的字体
bold 粗体字体
bolder 更粗的字体
lighter 更细的字体
字体属性
font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
p span{font:oblique bold 12px "楷体";}
文本样式
文本属性
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
文本颜色
color属性
RGB
十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
rgb(r,g,b) : 正整数的取值为0～255
RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
排版文本段落
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
文本修饰和垂直对齐
文本装饰
text-decoration属性
none 默认值，定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线
垂直对齐方式
vertical-align属性：middle、top、bottom
文本阴影
text-shadow : color x-offset y-offset blur-radius;
css超链接伪样式
伪类名称 含义 示例
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式
a:active {color:#999;}
设置伪类的顺序：a:link->a:visited->a:hover->a:active
列表样式
list-style-type
list-style-image
list-style-position
list-style
值 说明 语法示例
none 无标记符号 list-style-type:none;
disc 实心圆，默认类型 list-style-type:disc;
circle 空心圆 list-style-type:circle;
square 实心正方形 list-style-type:square;
decimal 数字 list-style-type:decimal
网页背景
背景颜色
background-color
背景图像
background-image
背景图像
background-image属性
background-image:url(图片路径);
背景重复方式
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
背景定位
background-position属性
值 含义
Xpos Ypos 单位：px，Xpos表示水平位置，Ypos表示垂直位置
X% Y% 使用百分比表示背景的位置
X、Y方向关键词 水平方向的关键词：
left、center、right
垂直方向的关键词：
top、center、bottom
设计师如何对背景图片的大小进行控制呢？
背景尺寸 background-size
属性值 描述
auto 默认值，使用背景图片保持原样
percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover 整个背景图片放大填充了整个元素
contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
linear-gradient ( position, color1, color2,…)
-webkit-linear-gradient ( position, color1, color2,…)
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合