前端学习笔记-CSS系列(二)文本

上文说过了选择器，这次我们来一块学习下有关于CSS中文本的操作。

|文本大小

font-size：<length>|<percentage>

常用语法

文本大小代码 对应HTML页面

要注意的是em和百分比表示都是以父视图大小为基准

|字体

font-family[<family-name>|<generic-family>]#

可以指定某一字体或某一类字体，可填写多个字体。

|粗细

font-weight:normal|bold

|正斜

font-style:normal|italic

|行高

line-height:normal|<number>|<length>|<percentage>

组合

font:[[<font-style>||<font-weight>]?<font-size>[/<line-height>]?<font-family>]

|颜色

color:red/#ff0000/rgb()/rgba/transparent

|文本水平方向对齐方式

text-align:left|right|center|justify

|垂直方向对齐方式

vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length>

|缩进

text-indent:<length>|<percentage>

小技巧:

可以通过设置极负值来达到隐藏文字的效果。应用于SEO优化，让文字存在于代码中，而不在主页面渲染。

|换行、空格、TAB处理

white-space:normal|nowrap|pre|pre-wrap|pre-line

normal:合并换行、空格、TAB 换行
nowrap:合并换行、空格、TAB 不换行
pre:换行、空格、TAB保留 不换行
pre-wrap:换行、空格、TAB保留 换行
pre-line:只保留换行，空格、TAB合并 换行

|单词换行

word-wrap:normal|break-word
word-break:normal|keep-all|break-all

break-all:任意两个字母可换行

|文字阴影

text-shadow:none|[<length>{2,3}&&<color>?]#

e.g

text-shadow:1px 2px 3px red;

1px:x方向偏移
2px:y方向偏移
3px:模糊半径
color:颜色可选 如不填默认为文字颜色

|下划线

text-decoration:none|[underline||overline||line-through]

|文字显示不全处理为...

text-overflow:ellipsis  

一般与下面两个属性连用

overflow:hidden
white-space:nowrap 

|定义鼠标形状

curor:

属性列表
[<uri>,]自定义
auto 自动
default 光标
none 消失
help 带问号
pointer 手
zoom-in 放大镜
zoom-out
move

e.g

curor:pointer;

保险起见会在自定义链接跟一个系统图标以应对链接失效的处理方案

curor:url(xx.cur),pointer

|强制继承

inherit

作用 在不知道父元素具体样式的情况下 子元素可以通过Inherit 来继承父元素的样式

文本的内容大概就这些，有不足的地方还请各位大神指正。如果觉得有用，不妨点个喜欢。谢谢。