文本样式

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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容