文本
color文本颜色
h1 {color:#00ff00;}
direction文本方向
div{
direction:rtl;
unicode-bidi: bidi-override;
}
1.direction属性 ltr(默认从左到右)rtl(右到左)inherit
2.unicode-bidi属性normal|embed|bidi-override(ps:文本倒过来了)
3.unicode-bidi 属性与 direction属性一起使用,来设置或返回文本是否被重写
letter-spacing 增加或减少字符间的空白(字符间距)
h1 {letter-spacing:2px}
line-height字符行高
p.small {line-height:90%}/*基于当前字体尺寸的百分比行间距。*/
p.big{line-height: 2}/*此数字会与当前的字体尺寸相乘来设置行间距。*/
p.c{line-height: 20px}
text-align文本水平对齐方式
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
p.main {text-align:justify;}/*两端对齐*/
text-decoration文本的修饰(下划线、上划线、删除线)
h1{text-decoration: underline red;} /*红色下划线*/
h2{text-decoration: underline wavy red; } /*红色波浪形下划线*/
h2 {text-decoration:line-through;}
h1 {text-decoration:overline}
text-indent 文本块中首行文本的缩进,负值等于向左缩进
p{text-indent:50px;}
p{text-indent:50%;}/*基于父元素宽度的百分比的缩进*/
text-shadow 应用于阴影文本css3
h1{text-shadow: 2px 2px #ff0000;}
text-shadow: h-shadow v-shadow blur(模糊的距离) color;
h1 {text-shadow:2px 2px 8px #FF0000;}
text-transform 控制文本的大小写
h1 {text-transform:uppercase;/*仅有大写字母*/}
h2 {text-transform:capitalize;/*文本中的每个单词以大写字母开头*/}
p {text-transform:lowercase;/*无大写字母,仅有小写字母*/}
vertical-align 垂直对齐方式
- baseline默认。元素放置在父元素的基线上。
- sub垂直对齐文本的下标。
- super垂直对齐文本的上标
- top 把元素的顶端与行中最高元素的顶端对齐
- text-top 把元素的顶端与父元素字体的顶端对齐
- middle 把此元素放置在父元素的中部
- bottom 使元素及其后代元素的底部与整行的底部对齐。
- text-bottom 把元素的底端与父元素字体的底端对齐。
- length 将元素升高或降低指定的高度,可以是负数。
- % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
white-space指定元素内的空白怎样处理
- normal 默认。空白会被浏览器忽略。
- pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
- nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。 - pre-wrap 保留空白符序列,但是正常地进行换行。
- pre-line 合并空白符序列,但是保留换行符。
- inherit 规定应该从父元素继承 white-space 属性的值。
word-spacing增加或减少字与字之间的空白
p{word-spacing:30px;}
字体
font 在一个声明中设置所有字体属性。
可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的
p.ex2{font:italic bold 12px/30px Georgia, serif;}
a链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */