背景
背景颜色
backgrounds-color:指定背景颜色。
h1 {background-color:颜色;}
背景图像
background-image:指定背景图像
p {
background-image: url("图像地址");
}
背景图像的重复
默认情况下,背景图像会进行平铺重复显示以覆盖整个元素实体。
但是有时候平铺重复显示并不是十分的适合当前页面,例如
当遇到这种情况时,可以使用repeat-x使图像进行水平平铺。
(background-repeat: repeat-x;)
若要进行垂直平铺则使用repeat-y,不平铺使用no-repeat。
背景图像定位
使用background-position可以对背景图像进行定位。
例如;要将图像放在右上角就使用background-position: right top;
还可以使用像素坐标,或百分号来表示。
背景固定
指添加的背景图像应该是滚动的还是固定的。他用background-attachment来固定。
他有三个属性
scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
fixed:当页面的其余部分滚动时,背景图像不会移动。
inherit:规定应该从父元素继承 background-attachment 属性的设置。
背景属性连写
这么多背景属性可以连写在一个background中,如:
background: #ffffff url("tree.png") no-repeat right top;
顺序是:
color——image——repeat——attachment——position
文本
文本颜色
用来设置文件颜色,直接使用color设置。
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本对齐方式
水平对齐
使用text-align;值为center,right,left。当值是justify时每一行的宽度相等。
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
垂直对齐
使用vartical-align。值是top,middle,bottom
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
文本反排
文本排版方向使用uncode-bidi属性和direction属性
uncode-bidi
bidi-override:严格按照direction的值重排序
normal:表示默认值(与原来方向相同)
embed:作用于inline元素,对象打开附加的嵌入层,在对象内部进行隐式重排序。
direction
他也有三个值:
1.inherit:文本流的值,使用父元素设置
2.ltr:默认值从左到右
3.trl:从右到左。
文本转换
使用text-transform将文本中的大小写字母进行转换。
他的值有:
1.none:表示使用原始值
2.capitalize:表示每个单词第一个字母大写
3.uppercase:表示使每个单词的字母都大写
4.lowercase:表示每个单词的所有字母小写
文本间距
单词间隔
使用word-spacing,控制单词之间的间隔距离
语法
word-spacing:取值;
字符间隔
使用letter-spacing来控制字符间隔
语法
letter-spacing:取值;
字符缩进
使用text-indent来设置段落第一行的文本缩进
语法:
text-indent:取值;
行高
使用line-height设定行间距
语法:
line-height:取值;
空白处理
white-space:用来处理页面内的空白。包括三个值:
1.normal:默认值,即多个空格合并
2.nowrap:强制在同一行内显示所有文本,知道文本结束或遇到
对象
3.pre:源代码中的空格和做进被保留,至少需要IE6才能正确显示
语法:
white-space:取值;
文本修饰
text-decoration:对文本进行修饰,可设置下划线,删除线等
值有:
1.none:默认值不修饰
2.underline:添加下划线
3.overline:添加上划线
4.line-through:添加删除线
5.bink:添加文字闪烁效果
语法:
text-decoration:取值;
文本阴影
text-shadw:用来设置文本阴影
语法:
/*text-shadw:水平阴影值 垂直阴影值 模糊度 颜色;*/
text-show:20px 20px 30px red;