字体属性

font-size

• 语法:font-size:<length> | <percentage> | <absolute-size> | <relative-size>
  • 后面两个值不常用有small,middle ,large等

font-size:12px;
  font-size:16px;
  font-size:2em;(24px)
  font-size:200%;

font-family

• 语法:font-family:[<family-name> | <generic-family>]#
  • <generic-family>=serif | sans-sarif

font-family:arial;
font-family:arial,Verdana,sans-sarif;
font-family:Verdana,"微软雅黑";

font-weight

• 语法:font-weight:normal|bold|bolder|lighter|100|200|..|900
  • font-weight:normal默认

font-weight;bold;

font-style

• 语法:font-style:normal|italic|oblique
  • oblique:倾斜
  • italic: 斜体

font-style:italic;

line-height

• 语法:line-height:normal|<number>|<length>|<percentage>
  • normal不是固定的,由浏览器决定

line-height:40px;
  line-height:3em;
  line-height:300%;
  line-height:3;
300%和3显示是一样的,有哪些区别呢?
  修改里面某一段文字大小时;
line-height为number时,继承为直接继承,所以如果给下面的元素设置行高,等于字体大小乘以number值(不计算,直接继承)

而line-height:百分比;先计算,在继承,

结合上面五个属性:

font

• 语法:font:[[<font-size>||<font-weight>]?<font-size>[/<line-height>]?<font-family>]
  • 语法可以看出:font-style font-weight可选,font-size必填项,font-family也是必填项,line-height可选,但有的时候前面有/

缩写:
font:30px/2 "Consolas",monospace;
font:20px arial,serif;
font:italic bold 20px/2 arial,serif

color

• color:red;
• color:#ffffff;
• color:rgb(255,0,0);
• color:rgba(255,0,0,1);
• color: transparent;

---

对齐方式

text-align

• 语法:text-align:left|right|center|justify
  • justify:两端对齐

vertical-align

• 语法:vertical-align:baseline|sub|super|top"text-top|middle|bottom|text-bottom|<percentage>|<length>
  • baseline:基线
  • sub:下标
  • suoer:上标
  • middle:垂直居中

vertical-align

text-indent 首行缩进

• text-indent:<length>|<percentage>

text-indent:2em;首行缩进两个字

text-indent

---

格式处理

white-space设置换行是否保留,空格是否合并等

• white-space:normal|nowrap|pre|pre-wrap"pre-line
  • nowrap不换行,字强制一行
  • pre 换行保留 空格和Tab保留 不换行 完整保留代码格式
  • pre-wrap 在pre的基础上允许换行
  • pre-line 只保留换行,空格合并掉

word-wrap 单词换行

• word-wrap:normal|break-word
  • break-word 把一个长单词允许自动换行

word-break

• word-break:normal|leep-all|break-all
  • break-all 任意字母都可以换行

---

文本修饰

text-shadow 文字阴影

• text-shadow:none|[<length>{2,3}&&<color>?]#
  • color可不写,颜色为文字颜色
  • #代表可写多个shadow,逗号分开
  • 2到3个length值

image.png

text-decoration下划线

• 语法:text-decoration:none | [underline||overline||line-through]
  • 语法可以知道,可以写多条线
  • underline:下划线
  • overline;上划线

---

高级设置

css ...的实现

• text-overflow:clip | ellipsis

text-overflow:ellipsis;
overflow:hidden; 文字超出隐藏,溢出截掉
white-space:nowrap;不换行

鼠标形状的设置 Cursor

cursor

• url()自定义
• auto:自动处理
• default 普通光标
• none 消失
• help 带问号的
• pointer手型
• zoom-in放大镜类似的
• move 十字移动鼠标

inherit 强制继承

很多文本类型都可以继承