CSS 文本

字体

[1] 改变字体大小(字号) font-size

font-size 字体大小设置的是字体中字符 em 框的高度，实际的字符字形通常比字符 em 框要矮，与字体类型有关。

font-size:<length>|<percentage>|<absolute-size>|<relative-size> | inherit   // 后两个开发中较少使用，不做详细了解。
   [absolute-size] xx-small/x-small/small/medium（初始值）/large/x-large/xx-large
   [relative-size] smaller/larger
   [em / %] 1em = 100%
   [默认字体大小] chrome/firefox/opera/IE/safari:16px
   [最小字体大小] chrome:12px；opera:9px；safari/IE/firefox:无

font-size:<length>|<percentage>|<absolute-size>|<relative-size> | inherit // 后两个开发中较少使用，不做详细了解。

[absolute-size] xx-small/x-small/small/medium（初始值）/large/x-large/xx-large

[relative-size] smaller/larger

[em / %] 1em = 100%

[默认字体大小] chrome/firefox/opera/IE/safari:16px

[最小字体大小] chrome:12px；opera:9px；safari/IE/firefox:无

[ 长度单位？！] font-size 的值可以用相对长度单位，也可以用绝对长度单位。推荐使用相对长度单位 px / em。

// em 和 % 是以父元素的文字大小作为参照物的

   父元素    font-size:12px;
   子元素
      font-size:16px;   // 显示为16px
      font-size:2em;   // 显示为24px
      font-size:200%;   // 显示为24px

// em 和 % 是以父元素的文字大小作为参照物的

父元素 font-size:12px;

子元素

font-size:16px; // 显示为16px

font-size:2em; // 显示为24px

font-size:200%; // 显示为24px

[2] 设置文字字体 font-family

建议：同时指定多个字体（以逗号隔开），这样，若浏览器不支持第一个字体，会尝试下一个，直到找到合适的字体。

font-family:[<family-name>|<generic-family>]#
            指定具体字体名称  通用字体名称
<generic-family>=serif|sans-serif|cursive|fantasy|monospace(系统决定表现为哪种字体，后三种不常用)

例如，
  font-family:arial;
  font-family:arial,Verdana,sans-serif;
  font-family:Verdana,”microsoft yahei”;
  font-family:”宋体”,seriff;

// 常用技巧
1. 现在网页中普遍使用14px；
2. 尽量使用偶数的数字字号，IE6等老式浏览器支持奇数字号会有bug；
3. 各种字体之间必须使用英文状态下的逗号隔开；
4. 中文字体需加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，引文字体名必须位于中文字体名之前；
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的引号；
6. 尽量使用系统默认字体，这样可以确保在任何用户的浏览器中都能够正常显示。

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

指定具体字体名称通用字体名称

<generic-family>=serif|sans-serif|cursive|fantasy|monospace(系统决定表现为哪种字体，后三种不常用)

例如，

font-family:arial;

font-family:arial,Verdana,sans-serif;

font-family:Verdana,”microsoft yahei”;

font-family:”宋体”,seriff;

// 常用技巧

1. 现在网页中普遍使用14px；

2. 尽量使用偶数的数字字号，IE6等老式浏览器支持奇数字号会有bug；

3. 各种字体之间必须使用英文状态下的逗号隔开；

4. 中文字体需加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，引文字体名必须位于中文字体名之前；

5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的引号；

6. 尽量使用系统默认字体，这样可以确保在任何用户的浏览器中都能够正常显示。

[ 字体系列 ] // 了解即可

通用字体系列（5 种）：拥有相似外观的字体系列

serif 字体：字体成比例，且有上下短线(衬线字体)，包括 Times\Georgia\New century Schoolbook sans-serif 字体：字体成比例，且没有上下短线(无衬线字体)，包括 Helvetica\Geneva\Verdana\Arial\Univers Monospace 字体：字体不成比例，等宽字体，包括 Courier\Courier New\Andale Mono Cursive 字体：手写体，包括 Zapf Chancery\Author\Comic Sans Fantasy 字体：无法归类的字体，包括 Western\Woodblock\Klingon

1
2
3
4
5

serif 字体：字体成比例，且有上下短线(衬线字体)，包括 Times\Georgia\New century Schoolbook
sans-serif 字体：字体成比例，且没有上下短线(无衬线字体)，包括 Helvetica\Geneva\Verdana\Arial\Univers
Monospace 字体：字体不成比例，等宽字体，包括 Courier\Courier New\Andale Mono
Cursive 字体：手写体，包括 Zapf Chancery\Author\Comic Sans
Fantasy 字体：无法归类的字体，包括 Western\Woodblock\Klingon

特定字体系列：具体的字体系列

font-family:"宋体"; font-family:"arial";

1
2

font-family:"宋体";
font-family:"arial";

[ 默认字体 ]

chrome/opera:"宋体";firefox:"微软雅黑";Safari/IE:Times,"宋体" font-family:字体系列1,字体系列2 …… // 若浏览器识别第一个字体，则以第一个字体显示；如果不识别，则尝试下一个。 font-family: arial，“宋体”,“微软雅黑”; // 若写英文字体，一定要把英文字体写在前面，英文字体会影响到英文、数字和标点符号。 font-family: Times, 'New Century Schoolbook','New York', serif; // 若字体名中有一个或多个空格，要添加引号

1
2
3
4
5
6
7
8

chrome/opera:"宋体";firefox:"微软雅黑";Safari/IE:Times,"宋体"

  font-family:字体系列1,字体系列2 ……
  // 若浏览器识别第一个字体，则以第一个字体显示；如果不识别，则尝试下一个。
  font-family: arial，“宋体”,“微软雅黑”;
  // 若写英文字体，一定要把英文字体写在前面，英文字体会影响到英文、数字和标点符号。
  font-family: Times, 'New Century Schoolbook','New York', serif;
  // 若字体名中有一个或多个空格，要添加引号

[ 中文字体 ] 对于中文字体来说，常见的是宋体和微软雅黑。 // 宋体是衬线字体，而微软雅黑是无衬线字体。

衬线字体常用于排版印刷，而无衬线字体则常用于网页中。一般地，一行中有 30-40 个文字时，行高为 1.5 时，有较好的阅读体验。对于标题来说，更好的样式是取消其加粗设置，并改变其颜色，增加页面的层次感。

[ 兼容性 - Unicode 字体 ] 在 CSS 中设置字体名称，直接写中文是可以的，但是在文件编码（GB2312、utf-8等）不匹配时会产生乱码的错误。 // XP 系统不支持类似“微软雅黑”的中文。

方案一：可以使用英文来代替，如 font-family:"Microsoft YaHei";

方案二：直接使用 Unicode 编码来写字体名称（浏览器可以正常解析）。 // 无需记忆，百度即可

// 实际开发中，Unicode 编码字体一般只使用宋体和微软雅黑。

[3] 字体加粗 font-weight

字体加粗除了用 b 和 strong 标签外，可以使用 CSS 来实现，但是 CSS 是没有语义的。

font-weight:normal | bold | bolder | lighter（ 后两者不常用 ）
font-weight:100 | 200 | 300 | 400（ normal ） | 500 | 600 | 700（ bold ） | 800 | 900
例，font-weight:bold;

// 小技巧：数字400等价于normal，而700等价于bold，一般推荐使用数字来表示。

font-weight:normal | bold | bolder | lighter（后两者不常用）

font-weight:100 | 200 | 300 | 400（ normal ） | 500 | 600 | 700（ bold ） | 800 | 900

例，font-weight:bold;

// 小技巧：数字400等价于normal，而700等价于bold，一般推荐使用数字来表示。

[4] 字体风格(斜体) font-style

字体倾斜除了用 i 和 em 标签之外，可以使用 CSS 来实现，但 CSS 是没有语义的。

font-style:normal | italic | oblique    //  italic 字体里的斜体，oblique 强制倾斜
例，font-style:italic;

// 实际开发中，很少使用字体倾斜（用户体验不好），反而通常把斜体标签（em,i）改为普通模式（如，i用于字体图标）

font-style:normal | italic | oblique // italic 字体里的斜体，oblique 强制倾斜

例，font-style:italic;

// 实际开发中，很少使用字体倾斜（用户体验不好），反而通常把斜体标签（em,i）改为普通模式（如，i用于字体图标）

[5] 字体变形 font-variant

font-variant:normal(默认)
font-variant:small-caps(小型大写字母)   // 即，小写字母会被转换成小型的大写字母，而大写字母不变。

1 2	font-variant:normal(默认) font-variant:small-caps(小型大写字母) // 即，小写字母会被转换成小型的大写字母，而大写字母不变。

[6] 行高 line-height

line-height属性用于设置行间距，即行与行之间的距离（字符的垂直间距），一般称为行高。

line-height:normal | <number> | <length> | <percentage>           // 一般情况下，行高比字号大7-8像素左右就可以了

例如，      // line-height的常用属性单位有三种：px\em\%，实际工作中使用最多的是px。
  line-height:40px;
  line-height:3em;    // em，指当前字体大小
  line-height:300%;    // line-height的值，先计算后继承
  line-height:3;    // line-height的值为number时，是直接继承，不计算

line-height:normal | <number> | <length> | <percentage> // 一般情况下，行高比字号大7-8像素左右就可以了

例如， // line-height的常用属性单位有三种：px\em\%，实际工作中使用最多的是px。

line-height:40px;

line-height:3em; // em，指当前字体大小

line-height:300%; // line-height的值，先计算后继承

line-height:3; // line-height的值为number时，是直接继承，不计算

[7] font 缩写 { 字体图标 iconfont ？↓ }

font 属性用于对字体样式进行综合设置（不强求），其基本语法格式为：

font:[[<font-style> || <font-variant> || <font-weight> || <font-stretch>]?<font-size>
[/<line-height>]?<font-family>] | caption | icon | menu | message-box | small-caption | status-bar

可以简化理解为：选择器{font-style font-weight font-size/line-height font-family}
// 使用font属性时，必须按照上述语法格式中的顺序书写，不能更换顺序，各属性以空格隔开；
// 其中，font-style、font-weight、line-height可选（取默认值）；font-size、font-family必选。

例如，
  font:30px/2 "consolas",monospace;
  font:italic bold 20px/1.5 arial,serif;
  font:20px arial,serif;

font:[[<font-style> || <font-variant> || <font-weight> || <font-stretch>]?<font-size>

可以简化理解为：选择器{font-style font-weight font-size/line-height font-family}

// 使用font属性时，必须按照上述语法格式中的顺序书写，不能更换顺序，各属性以空格隔开；

// 其中，font-style、font-weight、line-height可选（取默认值）；font-size、font-family必选。

例如，

font:30px/2 "consolas",monospace;

font:italic bold 20px/1.5 arial,serif;

font:20px arial,serif;

颜色

color:red;
color:#ff0000;
color:rgb(255,0,0);
color:rgba(255,0,0,1);    // a,半透明，取值0~1
color:transparent;    // 全透明，等同于color:rgba(0,0,0,0);

color:red;

color:#ff0000;

color:rgb(255,0,0);

color:rgba(255,0,0,1); // a,半透明，取值0~1

color:transparent; // 全透明，等同于color:rgba(0,0,0,0);

颜色的出现让网页不再只是黑白，运用好颜色设计，能让网页增色不少。一个网页，给人们留下的第一印象实际上就是它的整体颜色。关于如何设置颜色，可查阅 CSS 的 6 种颜色模式。

实际上，颜色的应用主要分为前景色、背景色和透明三个部分。

[1] color 前景色 { CSS颜色模式及颜色模式转换器？↓ }

[ PS 取色 ] color 属性用于定义文本的颜色，值: <color> | inherit，其取值方式通常有 3 种：

预定义的颜色值，如：red、green、blue 等；

十六进制，如：#fff，#FF6600，#29D794 等，十六进制是最常用的定义颜色的方式；

RGB 代码，如：红色可以表示为 rgb(255,0,0) 或 rgb(100%,0%,0%)； // 0% 不能省略百分号

[ 半透明 ] CSS3 中，文本颜色可以采用半透明的语法格式：

color:rgba(r,g,b,a) // a 是 alpha，透明的意思取值范围 0～1 之间 color:(0,0,0,0.3)

1
2

color:rgba(r,g,b,a)
// a 是 alpha，透明的意思取值范围 0～1 之间 color:(0,0,0,0.3)

影响边框：
一般来说，前景是元素的文本，不过前景还包括元素周围的边框。
有两种方式直接影响一个元素的前景色，可以使用color属性，也可以使用属性border-color设置边框颜色。

继承颜色：
color是可以继承的，可以把文档中的所有正常文本设置为某种颜色，如通过声明body{color:red;}设置为红色。
这会把所有没有其他样式的文本变成红色（如锚就不包含在内，锚有其自己的颜色样式）。
但浏览器对表单类元素有预定义的颜色，使body颜色无法继承到表单类元素中。

影响边框：

一般来说，前景是元素的文本，不过前景还包括元素周围的边框。

有两种方式直接影响一个元素的前景色，可以使用color属性，也可以使用属性border-color设置边框颜色。

继承颜色：

color是可以继承的，可以把文档中的所有正常文本设置为某种颜色，如通过声明body{color:red;}设置为红色。

这会把所有没有其他样式的文本变成红色（如锚就不包含在内，锚有其自己的颜色样式）。

但浏览器对表单类元素有预定义的颜色，使body颜色无法继承到表单类元素中。

[2] 半透明 opacity

CSS3 中专门设置透明度的属性。opacity 只能给整个元素设置一个透明度，且其透明度直接会继承给其后代元素。

值: value | inherit

value：默认值是 1，可以取 0-1 的任意浮点数。其中，1 表示完全不透明，0 表示完全透明。

兼容性：
IE8-浏览器不支持opacity透明属性，可以使用其专用的滤镜来实现opacity透明属性的透明效果。
filter:alpha(opacity=透明值)，该透明值是0-100之间的任意整数。

opacity: 0.8;
filter:alpha(opacity=80);

兼容性：

IE8-浏览器不支持opacity透明属性，可以使用其专用的滤镜来实现opacity透明属性的透明效果。

filter:alpha(opacity=透明值)，该透明值是0-100之间的任意整数。

opacity: 0.8;

filter:alpha(opacity=80);

对齐方式

CSS文本样式是相对于内容进行的样式修饰。由于在层叠关系中，内容要高于背景。所以文本样式相对而言更加重要。有些人对文本和字体样式之间的不同不太了解，简单地讲，文本是内容，而字体则用于显示这个内容。

[1] 水平对齐 text-align:left | right | center | justify（两端对齐）

～是影响一个元素中的文本内容的水平对齐方式。 // 初始值: left；应用于: 块级元素（包括 block 和 inline-block ）

[两端对齐] 当水平对齐方式为两端对齐时，word-spacing可能会调整，以便文本在整行中正好放下。
如果为letter-spacing指定一个长度值，则letter-spacing不会受两端对齐影响，除非letter-spacing值为normal。

[IE兼容] 对IE7-来说，使用text-align不仅会改变文本的水平对齐方式，也会改变后代块级元素的水平对齐方式。
	.box{
	    width: 200px;
	    height: 200px;
	    background-color: pink;
	    border: 1px solid black;
	    text-align: right;
	}    
	.in{
	    height: 100px;
	    width: 100px;
	    background-color: lightgreen;
	}
	<div class="box">
    		<div class="in">测试文字</div>
	</div>

[两端对齐] 当水平对齐方式为两端对齐时，word-spacing可能会调整，以便文本在整行中正好放下。

如果为letter-spacing指定一个长度值，则letter-spacing不会受两端对齐影响，除非letter-spacing值为normal。

[IE兼容] 对IE7-来说，使用text-align不仅会改变文本的水平对齐方式，也会改变后代块级元素的水平对齐方式。

.box{

width: 200px;

height: 200px;

background-color: pink;

border: 1px solid black;

text-align: right;

}

.in{

height: 100px;

width: 100px;

background-color: lightgreen;

}

</div>

[ 字间隔、字母间隔、文本转换、文本修饰 ] { CSS文本方向（了解）？↓ }

1. 字间隔  word-spacing
    字间隔是指单词间距，用来设置英文单词之间的间距，对中文字符无效。实际上，"字"表示的是任何非空白符字符组成的串，并由某种空白符包围。
    [注意] 单词之间用空格分开，单词之间的间距 = word-spacing + 空格大小。
    [注意] 字间隔可为负值。

    值: <length> | normal | inherit
    初始值: normal(默认为0)

2. 字母间隔  letter-spacing
    字母间隔是指字符间距(即，字符与字符之间的空白)，可为负值。

    值: <length> | normal | inherit
    初始值: normal(默认为0)

3. 文本转换  text-transform
    文本转换用于处理英文的大小写转换。

    值: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit
    初始值: none

总结：在首行缩进(text-index)、水平对齐(text-align)、字间隔(word-spacing)、字母间隔(letter-spacing)、
文本转换(text-transform)、文本修饰(text-decoration)这6种文本样式中，首行缩进(text-index)和水平对齐(text-align)
只能够应用于块级元素(包括block和inline-block)。

1. 字间隔 word-spacing

字间隔是指单词间距，用来设置英文单词之间的间距，对中文字符无效。实际上，"字"表示的是任何非空白符字符组成的串，并由某种空白符包围。

[注意] 单词之间用空格分开，单词之间的间距 = word-spacing + 空格大小。

[注意] 字间隔可为负值。

值: <length> | normal | inherit

初始值: normal(默认为0)

2. 字母间隔 letter-spacing

字母间隔是指字符间距(即，字符与字符之间的空白)，可为负值。

值: <length> | normal | inherit

初始值: normal(默认为0)

3. 文本转换 text-transform

文本转换用于处理英文的大小写转换。

值: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

初始值: none

总结：在首行缩进(text-index)、水平对齐(text-align)、字间隔(word-spacing)、字母间隔(letter-spacing)、

文本转换(text-transform)、文本修饰(text-decoration)这6种文本样式中，首行缩进(text-index)和水平对齐(text-align)

只能够应用于块级元素(包括block和inline-block)。

[2] 垂直对齐 vertical-align { 深入理解 line-height 和 vertical-align？↓ }

vertical-align 用于设置或检索对象内容的垂直对齐方式，应用于行内元素、替换元素和表单元素。也就是说，它不影响块级元素中的内容对齐，只针对于行内元素或行级块状元素，特别是行级块状元素，通常用来控制图片和表达与文字的对齐。

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

常用值：top(顶线) | middle（中线） | baseline（默认值，基线） | bottom（底线）

常用值：top(顶线) | middle（中线） | baseline（默认值，基线） | bottom（底线）

[ inline-block 底部空隙 — 去除图片底侧缝隙 ]

inline-block元素在块级元素中留空隙是因为图像的默认垂直对齐方式是基线对齐(基线对齐在原理上相当于图像底边与匿名文本大写英文字母X的底边对齐)；而匿名文本是有行高的，继承父级元素设置的行高，默认为normal(即font-size的1.2倍)，所以X的底边距离行框有一段距离，这段距离就是图像留出的空隙。简单来讲就是：图片或表单等行级块状元素，其底线会和父级盒子的基线对齐，这样会造成一个问题，就是图片的底侧会有一个空白缝隙。

// 解决方式：方法1（推荐 - CSSRset）：img 添加 display:block; 转换为块级元素，这样就不会存在问题了。方法2：给 img vertical-align:middle | top 等，让图片不要和基线对齐。方法3（文字、图片对齐）：设置文字的行高等于font-size，而不是1.2倍。

1
2
3
4
5

// 解决方式：

   方法1（推荐 - CSSRset）：img 添加 display:block; 转换为块级元素，这样就不会存在问题了。
   方法2：给 img vertical-align:middle | top 等，让图片不要和基线对齐。
   方法3（文字、图片对齐）：设置文字的行高等于font-size，而不是1.2倍。

[3] 首行缩进 text-indent:<length>|<percentage> // 应用于: 块级元素（包括 block 和 inline-block）

首行缩进是将段落的第一行缩进，一般地，中文写作时开头空两格。另，该属性可为负值。

例，text-indent:2em;    // em,当前字体大小，即缩进两个字
text-indent:-10px;
text-indent:20%;    // 以容器的宽度为100%

[ 应用 ]
1. 悬挂缩进
  div{
    width: 200px;
    border: 1px solid black;
    text-indent: -1em;//关键代码
    padding-left: 1em;//关键代码
  }
2. 首字下沉
  div{
    width: 200px;
    border: 1px solid black;
    text-indent: 0.5em;
  }
  div:first-letter{
    font-size: 30px;
    float: left;
  }

例，text-indent:2em; // em,当前字体大小，即缩进两个字

text-indent:-10px;

text-indent:20%; // 以容器的宽度为100%

[ 应用 ]

1. 悬挂缩进

div{

width: 200px;

border: 1px solid black;

text-indent: -1em;//关键代码

padding-left: 1em;//关键代码

}

2. 首字下沉

div{

width: 200px;

border: 1px solid black;

text-indent: 0.5em;

}

div:first-letter{

font-size: 30px;

float: left;

}

格式处理

[1] 自动换行 word-break:normal | keep-all | break-all

CSS3中文字自动换行的处理方法，主要用于处理英文单词。

通过具体设置，不仅可以让浏览器实现半角空格或连字符后面的换行，还可以让浏览器实现任意位置的换行。

normal: 中文到边界上的汉字换行，英文从整个单词换行
break-all: 对于英文长单词来说，会截断单词换行，长单词占据当前行剩余空间。
           但，对于中文的处理，各浏览器不一致。
              [1]firefox及safari: 中文到边界上的汉字换行，且允许标点置于段首
	      [2]IE及chrome: 中文到边界上的汉字换行，但不允许标点置于段首
keep-all: 对于英文长文本不能换行，但对于中文的处理，各浏览器不一致
	      [1]firefox: 在空白符处换行
	      [2]IE及chrome: 在空白符及标点处换行
      	      [3]safari: 不支持

// 移动端目前基本都不支持keep-all值
// 当word-break值为break-all时，word-wrap属性失效；否则两个属性都起作用

拓展：
1. 对于表单元素的长文本来说，使用word-wrap或word-break来强制换行需要设置table-layout:fixed
2. 伪元素换行
    有一个Unicode字符，是专门代表换行符的:0x000A，在CSS中，写作'\000A'，可以简写为'\A'
　　 但是，由于浏览器会合并空白符。因此，需要使用pre来阻止空白符的合并。
		<style>
			dt,dd{display:inline;}
			dd{margin: 0;font-weight:bold;}
			dd+dt::before{content:'\A';white-space:pre;}
			dd+dd::before{content:',';font-weight:normal;}
		</style>
		<dl>
			  <dt>姓名:</dt>
			  <dd>HelloWorld</dd>
			  <dt>邮箱:</dt>
			  <dd>123@qq.com</dd>
			  <dd>123@163.com</dd>  
		</dl>

normal: 中文到边界上的汉字换行，英文从整个单词换行

break-all: 对于英文长单词来说，会截断单词换行，长单词占据当前行剩余空间。

但，对于中文的处理，各浏览器不一致。

[1]firefox及safari: 中文到边界上的汉字换行，且允许标点置于段首

[2]IE及chrome: 中文到边界上的汉字换行，但不允许标点置于段首

keep-all: 对于英文长文本不能换行，但对于中文的处理，各浏览器不一致

[1]firefox: 在空白符处换行

[2]IE及chrome: 在空白符及标点处换行

[3]safari: 不支持

// 移动端目前基本都不支持keep-all值

// 当word-break值为break-all时，word-wrap属性失效；否则两个属性都起作用

拓展：

1. 对于表单元素的长文本来说，使用word-wrap或word-break来强制换行需要设置table-layout:fixed

2. 伪元素换行

有一个Unicode字符，是专门代表换行符的:0x000A，在CSS中，写作'\000A'，可以简写为'\A'

　　但是，由于浏览器会合并空白符。因此，需要使用pre来阻止空白符的合并。

<style>

dt,dd{display:inline;}

dd{margin: 0;font-weight:bold;}

dd+dt::before{content:'\A';white-space:pre;}

dd+dd::before{content:',';font-weight:normal;}

</style>

<dl>

<dd>HelloWorld</dd>

</dl>

[ word-wrap 单词换行 ] // 用来实现长单词或URL地址的自动换行

word-wrap:normal | break-word word-wrap:normal(浏览器只在半角空格或连字符的地方进行换行) word-wrap:break-word(截断单词换行，长单词从下一行开始) // 当white-space的值是nowrap或pre时，word-break和word-wrap属性都失效 // word-wrap在标准中被改为overflow-wrap，但由于兼容问题，一般还是使用word-wrap

1
2
3
4
5
6
7

word-wrap:normal | break-word

word-wrap:normal(浏览器只在半角空格或连字符的地方进行换行)
word-wrap:break-word(截断单词换行，长单词从下一行开始)

// 当white-space的值是nowrap或pre时，word-break和word-wrap属性都失效
// word-wrap在标准中被改为overflow-wrap，但由于兼容问题，一般还是使用word-wrap

拓展理解：浏览器自身带有文本自动换行的功能，文本容器的右侧可以实现自动换行。　　对于英文来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的中间突然换行　　对于中文来说，可以在任何一个文字后面换行，但浏览器碰到标点符号时，通常将标点符号以及其前一个文字作为一个整体进行换行。　　所以实际上，white-space解决不了长单词或URL地址的换行问题。

1
2
3
4
5

拓展理解：
浏览器自身带有文本自动换行的功能，文本容器的右侧可以实现自动换行。
　　对于英文来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的中间突然换行
　　对于中文来说，可以在任何一个文字后面换行，但浏览器碰到标点符号时，通常将标点符号以及其前一个文字作为一个整体进行换行。
　　所以实际上，white-space解决不了长单词或URL地址的换行问题。

[2] white-space:normal | nowrap | pre | pre-wrap | pre-line // 如何处理元素中的空白

// 空白符是指空格、制表符和回车；HTML默认已经把所有空白符合并成一个空格

   normal: 合并空白符，允许自动换行
   nowrap: 合并空白符，不允许自动换行

   pre-line: 合并空白符(不包括换行符)，允许自动换行
   pre: 不合并空白符，不允许自动换行
   pre-wrap: 不合并空白符，允许自动换行(在pre基础上，保留自动换行) 

// pre元素默认带有样式white-space: pre;
// IE7-浏览器不支持pre-line和pre-wrap这两个属性值

// 空白符是指空格、制表符和回车；HTML默认已经把所有空白符合并成一个空格

normal: 合并空白符，允许自动换行

nowrap: 合并空白符，不允许自动换行

pre-line: 合并空白符(不包括换行符)，允许自动换行

pre: 不合并空白符，不允许自动换行

pre-wrap: 不合并空白符，允许自动换行(在pre基础上，保留自动换行)

// pre元素默认带有样式white-space: pre;

// IE7-浏览器不支持pre-line和pre-wrap这两个属性值

文本装饰

[1] 文字阴影 text-shadow:none | [<length>{2,3}&&<color>?]# // IE9-浏览器不支持

text-shadow:h-shadow v-shadow blur color;         // X轴偏移 Y轴偏移 阴影的模糊半径 颜色
    h-shadow：必需，水平阴影的位置，允许负值；
    v-shadow：必需，垂直阴影的位置，允许负值；
    blur：可选，模糊的距离；
    color：可选，阴影的颜色；

例如，text-shadow:1px 2px 3px #f00;

    //多层阴影( 不要加太多层阴影，会有性能问题 )
		text-shadow: 1px 1px blue,5px 5px 5px red;
	
//  了解即可，如果要使用复杂效果 — 可以百度搜索“CSS文字阴影效果”，选择相对合适的，然后，修改样式代码。

text-shadow:h-shadow v-shadow blur color; // X轴偏移 Y轴偏移阴影的模糊半径颜色

h-shadow：必需，水平阴影的位置，允许负值；

v-shadow：必需，垂直阴影的位置，允许负值；

blur：可选，模糊的距离；

color：可选，阴影的颜色；

例如，text-shadow:1px 2px 3px #f00;

//多层阴影( 不要加太多层阴影，会有性能问题 )

text-shadow: 1px 1px blue,5px 5px 5px red;

// 了解即可，如果要使用复杂效果 — 可以百度搜索“CSS文字阴影效果”，选择相对合适的，然后，修改样式代码。

[2] 文本修饰 text-decoration:none | [underline || overline || line-through]

文本修饰用于为文本提供修饰线，文本修饰线的颜色与文本颜色相同。

值: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

1	值: none \| [underline(下划线) \|\| overline(上划线) \|\| line-through(中划线)] \| inherit

注，文本修饰属性无法继承，意味着子元素文本上的任何修饰线与父元素的颜色相同。子元素文本上的修饰线实际上是父元素的，只是正好"经过"而已。互不冲突的文本修饰线可出现多条。

高级设置

[1] 文本溢出 text-overflow

text-overflow:clip | ellipsis                <strong>//&nbsp;</strong>应用于: 块级元素、替换元素、表单元素

    clip: 不显示省略标记(...)，只是简单的裁切，相当于无效果
    ellipsis: 文本溢出时显示省略标记(...)，省略标记插入的位置是最后一个字符
    // 当文本溢出属性应用于表单元素时，需要设置table-layout:fixed

// 该属性兼容性很好，兼容IE6+的主流浏览器及移动端iso和android

text-overflow:clip | ellipsis <strong>// </strong>应用于: 块级元素、替换元素、表单元素

clip: 不显示省略标记(...)，只是简单的裁切，相当于无效果

ellipsis: 文本溢出时显示省略标记(...)，省略标记插入的位置是最后一个字符

// 当文本溢出属性应用于表单元素时，需要设置table-layout:fixed

// 该属性兼容性很好，兼容IE6+的主流浏览器及移动端iso和android

[ 省略标记：文本溢出，不换行，变成 ... ]

white-space:nowrap; overflow:hidden; text-overflow:ellipsis; // 三者必须搭配使用。提到文本溢出，通常想到的就是以上文本溢出的经典代码。 [了解] 实际上，文本换行不一定非要使用white-space；overflow属性值也不一定非要使用hidden 1. 当存在长英文文本时，text-overflow属性起作用的前提是 overflow(或overflow-y或overflow-x):hidden | auto | scroll 2. 当文本为汉字时，text-overflow属性起作用的前提是实现汉字不自动换行可使用word-break: keep-all; 或 white-space: nowrap; overflow(或overflow-y或overflow-x):hidden | auto | scroll

1
2
3
4
5
6
7
8
9
10
11
12

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

// 三者必须搭配使用。提到文本溢出，通常想到的就是以上文本溢出的经典代码。

[了解] 实际上，文本换行不一定非要使用white-space；overflow属性值也不一定非要使用hidden
    1. 当存在长英文文本时，text-overflow属性起作用的前提是
       overflow(或overflow-y或overflow-x):hidden | auto | scroll
    2. 当文本为汉字时，text-overflow属性起作用的前提是
       实现汉字不自动换行可使用word-break: keep-all; 或 white-space: nowrap;
       overflow(或overflow-y或overflow-x):hidden | auto | scroll

[ 多行文本溢出 ] 在webkit浏览器中，有一个不规范的属性-webkit-line-clamp，它可以实现多行文本溢出。

它的值是一个number，设置为几，便可以设置相应数字的文本溢出。

设置多行文本溢出，还需要配合其他样式，样式如下： /*溢出隐藏*/ overflow:hidden; /*旧版本flex*/ display:-webkit-box; /*旧版伸缩流方向为垂直方向*/ -webkit-box-orient:vertical; /*溢出隐藏3行*/ -webkit-line-clamp: 3; 例如： <div style="width:300px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;"> 我是测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字 </div>> // 不要显式地设置高度，而应该让其自适应高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

设置多行文本溢出，还需要配合其他样式，样式如下：
/*溢出隐藏*/
overflow:hidden;
/*旧版本flex*/
display:-webkit-box;
/*旧版伸缩流方向为垂直方向*/
-webkit-box-orient:vertical;
/*溢出隐藏3行*/
-webkit-line-clamp: 3;

例如：
<div style="width:300px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;">
    我是测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试
    文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>>

// 不要显式地设置高度，而应该让其自适应高度

[2] cursor 定义鼠标形状 // 即，设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

在浏览器中，光标对于提供交互反馈很有用，通过在不同的场景中改变光标，就能赋予其不同的含义。

cursor:[,]*[auto | default | none | help | pointer | zoomin | zoom-out | move]

// zoom-in、zoom-out适应于点一下图片放大或缩小的场景

// zoom-in、zoom-out适应于点一下图片放大或缩小的场景

[ 标准样式 ] CSS2 提供了相对较少的选择。

default: 默认光标，通常是一个箭头 auto: 浏览器自动识别的光标 crosshair : 十字线 pointer: 手型指针 move: 移动指针，适应于上下或两边箭头的场景 e-resize: 向东移动指针 ne-resize: 向东北移动指针 nw-resize: 向西北移动指针 n-resize: 向北移动指针 se-resize: 向东南移动指针 sw-resize: 向西南移动指针 s-resize: 向南移动指针 w-resize: 向西移动指针 text: 文本指针 wait: 指示程序正忙 help: 帮助指针 url: 自定义光标的URL，具体见自定义样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

default: 默认光标，通常是一个箭头
auto: 浏览器自动识别的光标
crosshair : 十字线
pointer: 手型指针
move: 移动指针，适应于上下或两边箭头的场景
e-resize: 向东移动指针
ne-resize: 向东北移动指针
nw-resize: 向西北移动指针
n-resize: 向北移动指针
se-resize: 向东南移动指针
sw-resize: 向西南移动指针
s-resize: 向南移动指针
w-resize: 向西移动指针
text: 文本指针
wait: 指示程序正忙
help: 帮助指针
url: 自定义光标的URL，具体见自定义样式

[ 拓展样式 ] CSS3增加了更多的 cursor 的样式值；另，所有拓展样式 IE7- 浏览器都不支持。

cursor:none (not IE8, Safari) cursor:context-menu (not Safari,Firefox,Chrome) cursor:cell (not Safari) cursor:alias (not Safari) cursor:copy (not IE,Safari) cursor:grab (not IE,Safari,Chrome) cursor:grabbing (not IE,Safari,Chrome) cursor:zoom-in (not IE,Safari) cursor:zoom-out (not IE,Safari) cursor:vertical-text cursor:no-drop cursor:not-allowed cursor:all-scroll cursor:ew-resize cursor:ns-resize cursor:nesw-resize cursor:nwse-resize cursor:col-resize cursor:row-resize

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

cursor:none (not IE8, Safari)
cursor:context-menu (not Safari,Firefox,Chrome)
cursor:cell (not Safari)
cursor:alias (not Safari)
cursor:copy (not IE,Safari)
cursor:grab (not IE,Safari,Chrome)
cursor:grabbing (not IE,Safari,Chrome)
cursor:zoom-in (not IE,Safari)
cursor:zoom-out (not IE,Safari)
cursor:vertical-text
cursor:no-drop
cursor:not-allowed
cursor:all-scroll
cursor:ew-resize
cursor:ns-resize
cursor:nesw-resize
cursor:nwse-resize
cursor:col-resize
cursor:row-resize

[ 私有样式 ] 有些浏览器还提供了增加浏览器前缀的私有样式。

cursor:-webkit-grab; cursor: -moz-grab; cursor:-webkit-grabbing; cursor: -moz-grabbing; cursor:-webkit-zoom-in; cursor: -moz-zoom-in; cursor:-webkit-zoom-out; cursor: -moz-zoom-out; // <span class="Apple-tab-span">// safari将-webkit-grab和-webkit-grabbing都解释为default</span>。

1
2
3
4
5
6

cursor:-webkit-grab; cursor: -moz-grab;
cursor:-webkit-grabbing; cursor: -moz-grabbing;
cursor:-webkit-zoom-in; cursor: -moz-zoom-in;
cursor:-webkit-zoom-out; cursor: -moz-zoom-out;

// <span class="Apple-tab-span">// safari将-webkit-grab和-webkit-grabbing都解释为default</span>。

[ 自定义样式 ] 所有浏览器都支持使用后缀为.cur的文件，chrome、firefox、safari还支持使用普通图片制作光标。

// 错误 cursor: url('m.cur'); // 正确 cursor: url('m.cur'),auto; // // 使用URL自定义样式，后面必须跟有一个逗号和某个通用关键字。

1
2
3
4

// 错误
cursor: url('m.cur');
// 正确
cursor: url('m.cur'),auto;      // // 使用URL自定义样式，后面必须跟有一个逗号和某个通用关键字。

[ 场景应用 ] 链接的默认光标是手型指针pointer，通过光标的变化可以让访问者清楚的知道该元素是可点击的。

span[title]{ cursor: help; // 元素的title属性用来提供元素的额外信息，配合help光标可以得到更好的表现方式。 border-bottom: 1px solid gray; } <div><span title="Cascading Style Sheets">CSS</span> is much too interesting</div>

1
2
3
4
5
6

span[title]{
    cursor: help;     // 元素的title属性用来提供元素的额外信息，配合help光标可以得到更好的表现方式。
    border-bottom: 1px solid gray;
}

<div><span title="Cascading Style Sheets">CSS</span> is much too interesting</div>

[3] 防止拖拽文本域 resize // 可以防止火狐、谷歌等浏览器随意的（右下角）拖动文本域。

<textarea></textarea>        // 右下角可以拖动

<textarea style="resize:none;"></textarea>       // 右下角不可以拖动

<textarea></textarea> // 右下角可以拖动

<textarea style="resize:none;"></textarea> // 右下角不可以拖动

[4] 强制继承 inherit // 和父元素一样的值 { 样式关键字（了解）？↓ }

font-size:inhert;    font-family:inhert;    font-weight:inhert;    font-style:inhert;
line-height:inhert;    color:inhert;    text-decoration:inhert;    text-align:inhert;
text-indent:inhert;    white-space:inhert;    white-space:inhert;    word-wrap:inhert;
word-break:inhert;    text-shadow:inhert;

font-size:inhert; font-family:inhert; font-weight:inhert; font-style:inhert;

line-height:inhert; color:inhert; text-decoration:inhert; text-align:inhert;

text-indent:inhert; white-space:inhert; white-space:inhert; word-wrap:inhert;

word-break:inhert; text-shadow:inhert;