CSS中字体与段落属性
毫无疑问，不管什么网站，文字一定是必不可少。文字可以是网页传播信息的主要手段。那么怎么显示文字，才能更加的美观，那么大家需要了解以下文字属性。
字体属性
| 属性 |
用途 |
语法（一些写法） |
| font-family 设置字体类型 |
1）该属性主要用来指定文字字体类型，例如：仿宋、黑体、宋体 2）可以声明一种字体，也可以声明多种字体。在浏览器进行显示的时候，会根据字体的顺序从前到后，优先选择 |
font-family: "宋体","仿宋","黑体";
|
| font-size 设置字体大小 |
1）该属性表示字号，用来控制字体的大小，一张好的网页，肯定字体的大小是有所区别的。 2）如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em) |
font-size: larger; 值非常多：推荐自己手写数值大小 |
| font-style 设置显示效果 |
设置字体风格，也就是字体显示的样式 |
font-style: normal; nomal：采用标准字体样式进行显示 italic：浏览器以斜体的方式进行显示 oblique：浏览器采用斜体方式显示inherit：规定应该从父元素继承字体样式 |
| font-weight 设置粗细 |
该属性是设置字体的粗细，它可以让你的文字呈现出不同的外观（变粗或变细） |
font-weight: bold; 取值范围在：100-900 bold定义粗体，取值为700 bolder定义更粗的字体，取值在900 lighter定义更细的字体，取值在200 nomal定义正常字体，取值在400 |
| font-variant 设置字母小转大 |
该属性可以将小写字母，全部转换成大写字母进行显示 |
font-variant: normal; Normal：默认值。浏览器会显示一个标准的字体。 small-caps：浏览器会显示小型大写字母的字体。 Inherit：规定应该从父元素继承 font-variant属性的值。 |
| font 字体复合使用 |
字体复合属性： 在网页上，有的时候我们需要对文本信息进行多种样式渲染，这个时候，往往我们就需要定义很多的字体属性，程序员用起来感觉非常的麻烦，就想去找一个能够一次性就完成所有字体属性设置的方案,那么这个方案就是font |
font: font-style font-variant font-weight font-size font-family; 例如： font: normal normal bold 25px "楷体","仿宋"; 注意： 1)必须全部写完，并且严格按照以上顺序才会生效，之间用空格隔开 2)font-style font-variant font-weight这前三个属性之间可以交换顺序，后面两个必须严格按照顺序 |
| color 设置字体颜色 |
设置字体颜色，除了使用系统定义的属性，还可以使用rgb设置，还可以使用#十六进制进行设置 |
color: white; |
文本高级样式
| 属性 |
用途 |
语法（一些语法） |
| text-shadow 阴影文本 |
咱们在显示文字的时候，有的时候需要对某些文字添加阴影效果并且需要设置阴影颜色，而增强网页的整体表现力。这个时候，我们就需要使用CSS定义的text-shadow。 |
text-shadow: length length opacity color; text-shadow: 水平位移 垂直位移 阴影半径 字体颜色; 例如: text-shadow: 0.5em 2px 6em red; 属性之间用空格隔开 第一个属性表示水平位移，如果为负值，阴影向左移，为正值，阴影向右移； 第二个属性表示垂直位移，为负值，阴影向下移，为正值，阴影向上移； 第三个属性表示阴影半径 第四个属性表示字体颜色 |
| text-overflow 溢出文本 |
在网页显示信息的时候，如果指定的显示区域宽度不够，但是显示内容又非常的多，其结果默认将会撑破指定的显示区域，但这种显示就破坏了我们网页的整体感。所以我们需要一种手段，可以将超出显示区域的内容，进行截取或者是....... |
text-overflow: clip; 属性值有三个值： cli：该属性值,代表多余的内容,直接裁切掉，默认值 ellipis：该属性值,代表将多余的内容,使用省略号代替 string：使用给定的字符串来代表被修剪的文本。 注意：必须结合white-space:nowrap;（ 规定段落中的文本不进行换行）和overflow: hidden;（溢出部分隐藏）才会实现效果 |
| word-wrap 自动换行 |
当在一个指定的区域，需要显示非常多的内容，如果这些内容一行显示不完，那么我们可就使用该属性来指定换行。该属性于CSS3.0新增属性 |
word-wrap: normal; 属性值： normal只在允许的断字点换行（浏览器保持默认处理）。 break-word在长单词或 URL 地址内部进行换行。 |
| font-size-adjust 保持字体尺寸 |
有的时候在同一行文字中，由于文字可能采用不同的字体，或者采用不同的CSS样式，这就可能会导致整段文字尺寸不一样，整段文字看起来非常杂乱。此时就需要使用font-size-adjust来统一处理 |
font-size-adjust: none; 属性值： None 默认。如果此字体不可用，则不保持此字体的 x-height。 number小写字母"x"的高度与"当前字体"高度之间的比率,取值0-1之间
|
段落属性
| 属性 |
用途 |
语法（一些语法） |
| word-spacing 单词间隔 |
1）word-spacing 属性增加或减少单词间的空白（即字间隔）。 2）该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。 3）注释：允许使用负值。
|
word-spacing: 15px; 属性值： normal默认。定义单词间的标准空间。 length定义单词间的固定空间。 inherit规定应该从父元素继承 word-spacing 属性的值。
注意：只对英文单词有效，对中文无效 |
| letter-spacing 字符间距 |
对所有字符有效 letter-spacing 属性增加或减少字符间的空白（字符间距）。 该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。 |
letter-spacing: 20px; 属性值： Normal默认。规定字符间没有额外的空间。 Length定义字符间的固定空间（允许使用负值）。 inherit规定应该从父元素继承 letter-spacing 属性的值。 |
| text-decoration 文字修饰 |
在HTML页面中，有些文字需要重点标记，比如加一个下划线，告诉读者这是个比较重要的信息，在CSS中,，text-decoration此属性可以帮助我们给某些文字加文本修饰效果，例如：下划线、删除线、闪烁...... |
text-decoration: underline; 属性值： none默认。定义标准的文本。 underline定义文本下的一条线。 overline定义文本上的一条线。 line-through定义穿过文本下的一条线。 blink定义闪烁的文本。 inherit规定应该从父元素继承text-decoration属性的值。 注： bink大部分浏览器不支持 |
| vertical-align 垂子对齐
|
HTML网页编程中，对齐方式总体来说，可分为水平对齐和垂直对齐。水平对齐一般我用text-align属性来实现，那么垂直对齐，我们就需要使用vertical-align属性。 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
注意：设置这个属性在子元素设置才有效，它才有参照对象 |
vertical-align:属性值; 属性值： baseline默认。元素放置在父元素的基线上。 |
| text-align 水平对齐 |
ext-align 属性规定元素中的文本的水平对齐方式。 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
|
text-align: center; 属性值： left把文本排列到左边。默认值：由浏览器决定。 right把文本排列到右边。 center把文本排列到中间。 justify实现两端对齐文本效果。 inherit规定应该从父元素继承 text-align属性的值。 start文本向行的开始边缘对齐 |
| text-transform 文本转换 |
1）如果在HTML页面中，需要完成大小字母之间的转换，那么就需要使用到该属性。 2）这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。 |
text-transform: 属性值; 属性值： none默认。定义带有小写字母和大写字母的标准的文本。 capitalize文本中的每个单词以大写字母开头。 uppercase定义仅有大写字母。 lowercase定义无大写字母，仅有小写字母。 inherit规定应该从父元素继承 text-transform 属性的值。
|
| text-indent 文本缩进 |
一般的比较正式的文本段落中，都存在“空两格"的说法，其目的主要是说明一个新的段落的开始，在网页编程中，同样存在这样首行缩进的问题。此时需要使用的标签是text-indente。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。 |
text-indent:2em; 1个em相当于一个中文的宽度，只要是长度单位都可以。这些值是随便设定的。 属性值： Length定义固定的缩进。默认值：0。 %定义基于父元素宽度的百分比的缩进。 inherit规定应该从父元素继承 text-indent 属性的值。 |
| line-height 文本行高 |
line-height 属性设置行间的距离（行高）。 该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。 line-height 与 font-size 的计算值之差（在 CSS 中称为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。 原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
|
line-height: 25px; normal默认。设置合理的行间距。 number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length设置固定的行间距。 %基于当前字体尺寸的百分比行间距。 inherit规定应该从父元素继承 line-height属性的值。
注意： 默认的大小为20px，小于20px就缩小间距，大于20px就增大间距，不允许出现负值。 |
| white-space 空白处理 |
HTML页面中，可能存在着非常多的空白区域，比如：空格、制表符、换行符或者其他空白符，它们都有可能会造成在页面中，存在大量的空白区域，那么这些空白区域任何处置?一般来说,浏览器都会自动忽略。但是有时候我们也需要其他处理方案，比如：保留空白区域。
|
white-space: normal; 属性值： normal默认。空白会被浏览器忽略。 Pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 pre-wrap保留空白符序列，但是正常地进行换行。 pre-line合并空白符序列，但是保留换行符。 inherit规定应该从父元素继承 white-space 属性的值。 |
| direction和unicode-bidi 文本反排 |
网页中绝大多数的文字都是采用“从左到右"的正常显示方式，但是也不排除有些部分存在从右到左的阅读显示方法。如果遇到这种情况,就需要使用CSS中定义的direction和unicode-bidi。组合使用。
|
unicode-bidi: bidi-override; unicode-bidi属性值： nomal原来是什么顺序就使用什么顺序 bidi-override表示使用反排技术，它将会严格按照direction指定的方向来完成文本排序 embed作用于inline元素，direction属性的值指定嵌入层，在对象内部进行隐式重排序
dicration属性值： Inherit使用父元素的设置 ltr默认值，left to right，从左到右 rtl从右到左
注：只有 unicode-bidi: bidi-override; 这样dicration的设置才会生效 |