文本样式

2018-07-09  本文已影响0人  咔狼
1. 文本对齐方式 text-align

left(左对齐,默认值)
right(右对齐)
center(居中对齐)
justify(两端对齐)
注意:还可使行级、行块级元素对齐,但一定要给 其父元素。

2. 文本修饰 text-decoration

文本修饰 text-decoration
underline(下划线)
overline(上划线)
line-through(删除线)

3. 首行缩进 text-indent

px(允许使用负值)
em(1em等于一个字的宽度)

4. 文本溢出处理 text-overflow

clip(超出裁剪)
ellipsis(超出出现省略号)

单行超出用省略号显示:
overflow:hidden; 超出隐藏
text-overflow:ellipsis; 文本超出用省略号代替
white-space:nowrap; 不允许换行
5. 文本字母处理 text-transform

none(正常显示)
capitalize(单词首字母大写)
uppercase(单词全部大写)
lowercase(单词全部小写)

6. 字间距 letter-spacing

示例: letter-spacing: 30px;

7. 词间距(对中文无效)word-spacing

示例: word-spacing: 30px;

8. 文本换行方式 white-space

nowrap(只有遇到<br />才会换行)
normal(默认换行方式)
pre(保留空格、缩进、换行,但是文本不会自动换行)
pre-line(合并空格、缩进、换行,文本自动换行)
pre-wrap(保留空格、缩进、换行、并且文本自动换行)

9. 单词换行方式 word-break

break-all(允许在单词内换行)
normal(默认换行方式)
keep-all(不允许在单词内换行)

10. 鼠标指针 cursor (css3)

auto(默认,浏览器设置的光标)
pointer(光标呈现为指示链接的指针)
move(此光标指示某对象可被移动)
text(光标指示文本)
wait(标指示正忙)
help(光标指示帮助)

11. 元素透明度

opacity (主流浏览器)
值:0-1 0为完全透明,1为完全不透明

filter: alpha(opacity=50) (兼容IE8及其以下)
值:0-100 0为完全透明,100为完全不透明

12. 嵌套规则

p, h标签里面不能嵌套其他所有元素
行级元素不能嵌套块级元素,除了a标签

12. 对齐方式

行级和行块级垂直对齐方式
vertical-align: (top)(middle)(bottom)

上一篇下一篇

猜你喜欢

热点阅读