文本属性:
属性 |
含义 |
举例 |
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:十六进制方法表示颜色,前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分类
rgn:正整数的取值范围为0~1
rgba:在rgb基础上增加了控制alpha透明度的参数,取值范围为0~1
实例:
text-align(设置元素水平对齐方式)
left:把文本排列到左边。默认值游浏览器决定
right:把文本排列到右边
center:把文本排列到中间
justify:实现两端对齐文本效果
text-decoration属性:
垂直对齐方式:
vertical-align属性:middle、top、bottom
none:默认值,定义的标准文本
underline:设置文本的下划线
overline:设置文本的上划线
line-through;设置文本的删除线
文本的阴影:
(x轴位移,) (阴影模糊半径)
(x比如写:20xp)
text-shadow :color x-offset y-offset blur-radius;
(阴影颜色) (Y轴位移)
超级链接伪类:
伪类名称 |
含义 |
示例 |
a:link |
未单击访问时超链接样式 |
a:link{color:#9ef5f9;} |
a:visited |
单击访问后超链接样式 |
a:visited {color:#333;} |
a:hover |
鼠标悬浮其上的超链接样式 |
a:hover{color:#ff7300;} |
a:active |
鼠标单击未释放的超链接样式 |
a:active {color:#999;} |
列表样式:
值 |
说明 |
语法示例 |
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
实例repeat-x
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a{
background-image: url(1.jpg);
background-repeat:repeat-x;
font-size: 1000px;
}
</style>
<title></title>
</head>
<body>
<a href="">课本</a>
</body>
</html>
渐变
div{
150px;
height:70px;
background:linear-gradient(red,blue) 默认的从上到下
}
div{
150px;
height:70px;
background:linear-gradient(to right ,red,blue) 从左往右
}