前端之CSS字体和文本类属性

 

 

一、字体类属性：

 

1.字体类型：

 

font-family:字体1,字体2,字体3;

 

常用写法： font-family:"微软雅黑",arial;

 

注：a) 多个字体之间用逗号分隔；

 

    b）中文字体要放在双引号中，英文字体由多个单词组成时也要加双引号；

 

    c) 浏览器优先识别字体1，如果找不到字体1，识别字体2，如果都找不到，显示浏览器默认字体。

 

2.字体大小：

 

font-size:数值+单位;

 

注：a）浏览器默认字体大小为16px；

 

    b) font-size:medium;等价于 font-size:16px;

 

    c）字体大小一般设置偶数不设置奇数；

 

 

 

3.字体加粗：

 

font-weight:normal(常规字体)|bold(加粗)|bolder(加粗)|100-500(常规字体)|600-900（加粗字体）;

 

4.字体倾斜：

 

font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);

 

5.文本是否大写：

 

font-variant:normal(常规字体)|small-caps(小型的大写字母字体);

 

注：此属性主要应用于英文

 

6.字体颜色：

 

color:颜色值;

 

颜色值的几种设置方式：

 

a)十六进制写法  #000 黑色  #fff 白色  #f00 红色

 

b)rgb写法       rgb(0,0,0) 黑色  rgb(255,255,255) 白色

 

c)rgba写法     a代表透明度，取值范围0-1  rgba(0,0,0,0.6)

 

d)颜色单词     red(红色) black(黑色) white(白色) green(绿色) yellow(黄色) gray(灰色) pink(粉色) blue(蓝色)

 

7.font简写方式：

 

font:italic bolder 12px "微软雅黑",arial;

 

注：使用简写方式时，font-size和font-family不可与其他属性互换位置，也不能分开写

 

font:12px/1.5 "微软雅黑",arial;  （字体大小为12px,行高是字体大小的1.5倍）

 

注：将font-size和line-height结合在一起时，用/来表示，/前表示字体大小，/后表示字体行高，当行高不加单位时，表示行高为

 

    字体大小的多少倍

 

注：只有在同时指定font-size和font-family时才能使用/这种写法

 

二、文本类属性：

 

1.水平对齐方式：

 

text-align:left(默认值,左对齐)| center(居中对齐)|right(右对齐)|justify(两端对齐,只对英文起作用);

 

注: text-align只对文本，图片，内联元素起作用，给文本，图片，内联元素所在父元素加

 

2.垂直对齐方式：

 

vertical-align:top|middle|bottom;

 

　　top:居顶部对齐

 

　　middle:居中对齐

 

　　bottom:居底部对齐

 

注：该属性只对行内块元素有效，给本元素添加此属性；

 

    一般在设置图片和文字居中对齐的时候会用到，input控件垂直居中对齐时会用到；

 

3.行高：

 

line-height:数值+单位;

 

注：当单行文本的行高等于容器高时，可以实现单行文本在容器中垂直居中；

 

     line-height只写数值不加单位时，表示倍行高，行高为字体大小的多少倍；

 

eg: line-height:3; 字体大小的三倍

 

注：line-height不允许设置负值

 

4.文本修饰：

 

text-decoration:none(默认值)|underline(下划线)|overline(上划线)|line-through（删除线）;

 

常用： a{text-decoration:none;}

 

5.首行缩进：

 

text-indent:数值+单位;

 

注：向前缩进为负值，会达到一种隐藏的效果，向后缩进为正值

 

    只对第一行有效!

 

6.字符间距（汉字与汉字，字母与字母的间距）:

 

letter-spacing:normal(默认间隔)|数值+单位;

 

注：值越大，间距越大，值越小，间距越小，允许设置负值

 

7.词间距（主要针对英文）:

 

word-spacing:normal(默认值)|数值+单位;

 

注：允许设置负值

 

8.文本是否大小写:

 

text-transform:none(默认值)|capitalize(首字母大写)|uppercase(全部大写)|lowercase(全部小写);

 

9.长单词换行:

 

word-wrap:normal(默认值)|break-word;

 

注：在长单词或 url 地址内部进行换行时设置为break-word

 

10.强制在一行显示:

 

white-space:normal(默认值)|nowrap(不换行);

 

注：常在省略号设置中用到

 

11.文本流控制:

 

layout-flow:horizontal(从左到右)|vertical-ideographic(从上到下);