本文主要是介绍CSS - Styling text，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
CSS 有两类属性来设置文本样式： Font styles & Text layout styles
Font styles 影响文字的字体，文字的大小，文字是否是粗体、斜体、等等
Text layout styles 影响文字间的空格，和其他的布局样式，是否允许被操作。例如：每行文字和每个文字之间的空格，文字在文本盒子中以何种方式对齐。
注意：元素中的文字是一个一个独立的单元，不能选择和样式设定一段文字，若要如此操作，需使用 <span> <strong> 将某一段文字包裹起来，或者使用伪类。::first-letter(选择文字的第一个字母) ::first-line(选择文字的首行) ::seletion(选择被光标高亮显示的部分)
Fonts
Color
设置文字的颜色
p {color: red;
}Font families
使用 font-family 属性设置文字的字体，此属性值可以指定一个字体，或者一系列字体。浏览器会使用可用的字体显示文字，若都不适用，浏览器会以浏览器默认字体显示文字。
p {font-family: arial;
}p {font-family: "Trebuchet MS", Verdana, sans-serif;
}Web safe fonts 以下几种为相对安全的网页字体： Arial, Courier New, Georgia, Times New Roman, Trebuchet MS, Verdana
Font size
font-size 属性，px, em(1em 表示该元素字体大小同该元素的父元素所设置的字体大小形同), rem(基本同 em 相同，不同的是，1em 表示该元素字体尺寸同根元素所设置的字体尺寸相同 <html> IE8 以及其以前的版本不支持此单位)
html {font-size: 10px;
}h1 {font-size: 2.6rem;
}p {font-size: 1.4rem;color: red;font-family: Helvetica, Arial, sans-serif;
}Font style, font weight, text transform, and text decoration
font-style: normal(普通样式) italic(斜体) oblique(类似斜体)
font-weight: normal(不加粗) bold(加粗) lighter(更细一些) bolder(更粗一些) 100-900(加粗值设置)
text-transform: none(文字无变形) uppercase(大写) lowercase(小写) capitalize(首字母大写)
full-width: 使图像型文字可以自适应宽度
text-decoration: none(文字无装饰) underline(下划线装饰) overline(上划线装饰) line-throught(文字中间划线，类似删除线)
Text drop shadows
使用 text-shadow 来向文字添加阴影，此属性有4个分离的值。
text-shadow: 4px 4px 5px red;1-水平方向阴影长度 2-垂直方向阴影长度 3-阴影的模糊率(默认值为 0 不模糊) 4-阴影的颜色(默认值 black)
p.shadow {text-shadow: -1px -1px 1px #aaa, 0px 4px 1px rgba(0, 0, 0, 0.5), 4px 4px 5px rgba(0, 0, 0, 0.7), 0px 0px 7px rgba(0, 0, 0, 0.4);
}Text layout
Text alignment
text-align: 用以控制文字在容器中的对齐方式。left(居左对齐) right(居右对齐) center(居中对齐) justify(使文字扩散开来，改变单词之间的间隙，以使所有行的文字居右相同的宽度)
Line height
line-height: 设置每行之间的高度，它可以接受无单位的设定值
Letter and word spacing
letter-spacing: 设定字母间距 word-spacing: 设定单词间距
p::first-line {letter-spacing: 2px;word-spacing: 4px;
}
这篇关于CSS - Styling text的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
