标签：font 字体大小 样式 repeat 模板 background 文本 选择器 CSS
0 前言
本文介绍CSS中为文本添加样式，包括字体、粗体/斜体、字体大小、行高、颜色、背景等等。
参考书为人民邮电出版社的《HTML5与CSS3基础教程》。
1 字体
1.1 字型
模板：
选择器 {
font-family： name；
}
其中“name”为字型的名称，一般会写若干个，当第一个不能用的时候顺延至第二个，以此类推。
例：
h1{
font-family: arial, helvetica, sans-serif;
}
在OS X系统中，Genava和Gill Sans很常见。
OS X和Windows上默认都有的字体： Arial、Comic Sans MS、Courier New、 Georgia、 Impact、Trebuchet MS、Times New Roman和Verdana。
1.2 粗体
模板：
选择器 {
font-weight: bold;
}
或者输入100~900之间的100的整数。400表示正常，700表示粗体。
除bold外，还有bolder（更粗）、lighter（更细）
1.3 字体大小
模板：
选择器 {
font-size: 数值px/em;
}
px即像素值，em表示相对父元素的倍数
例：
body{
font-size: 100%；/* 16px */
}
h1{
font-size: 1.75em; /* 28/16px*/
}
h2{
font-size: 20px;
}
其中，h1的字体大小是父元素（body）的1.75倍（即1.75em），也就是16*1.75=28px，h2的字体大小是20像素。
1.4 行高
段落的行间距。
模板：
选择器 {
font-size: 1.0625em;
line-height: 数值;
}
数值为纯数字，没有单位，行高=数字*字体大小（font-size）。
1. 5 字体简记
把字体、粗体、字体大小、行高等放在一起。
模板：
选择器{
font: [字型] [粗细] [小型大写字母] 字体大小 行高;
}
其中，中括号里面的是可选项。
字型：normal、italic或oblique
粗细：normal、bold、bolder、lighter或100的倍数
小型大写字母：normal、small-caps
1.6 间距
字间距：word-spacing，单词之间的距离
字偶距：letter-spacing，字母之间的距离
选择器{
word-spacing: 2em;
letter-spacing: 7px;
}
1.7 缩进
p {
text-indent: 2em;
}
1.8 大小写
模板：
选择器{
text-transform: uppercase;
}
值有四种：
captitalize：每个单词的首字母大写
uppercase：所有字母大写
lowercase：所有字母小写
none：保持原来样子
1.8 小型大写字母
字母大写，体积和小写字母相同。
选择器{
font-variant: small-caps;
}
值有两种：
small-caps：小型大写字母
none：取消小型大写字母
1.9 划线
下划线、上划线和删除线
选择器{
text-decoration: underline;
}
值有四种：
underline：下划线
overline：上划线
line-through：删除线
none：取消划线
1.10 空白属性
让浏览器显示HTML中的空格。
选择器{
white-space: pre;
}
值有三种：
nowrap：所有空格不断行
pre：让浏览器显示原文本中所有的空格和回车
normal：按正常方式处理空格
2 颜色
模板：
选择器{
color: 数值;
}
颜色的数值有三种形式：
（1）颜色名称。例如：blue
（2）rgb形式。例如：rgb(89, 0, 127)
（3）十六进制形式。例如：#59007f
第三种较为常见。
举例：
h2{
color: blue;
color: rgb(89, 0, 127);
color: #59007f;
}
3 背景
模板：
选择器{
background-color: 数值1;
background-image: url(image.png);
background-repeat: repeat;
background-attachment: fixed;
}
颜色的形式同上面的color。
url是图像的路径及名称。
background-repeat表示是否重复，有四个值：repeat、repeat-x、repeat-y和no-repeat。
background-attachment表示图像是否随页面滚动，有两个值：fixed（图像会附着在浏览器窗口上）、scroll（图像会移动）。
可整合到一起，如下：
选择器{
background: [所有属性];
}
所有可能的属性用空格隔开，顺序无所谓。
标签：font,字体大小,样式,repeat,模板,background,文本,选择器,CSS 来源： https://blog.csdn.net/sinat_41909065/article/details/100177932
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。