前端学习笔记7 CSS为文本添加样式

为文本添加样式

  使用CSS可以修改文本的字体、大小、粗细、倾斜、行高、前景和背景颜色、间距和对齐方式，可以决定是否为文本添加下划线或删除线可以将文本转化为全部使用大写字母、全部使用小写字母或使用小型大写字母。

选择字体系列

  设置字体的方法：在样式表中需要的选择器之后，输入font-family: name;，这里的name是首选字体的名称。

/* 由于font-family是继承属性，而我们对body元素设置了Geneva字体，该样式会应用到其他元素。通过对h1和h2元素设置Gill Sans字体，覆盖了继承属性。代码中的字体名称可以用小写，如`font-family: geneva` */
body {
    font-family: Geneva;
}
h1,h2 {
    font-family: "Gill Sans";
}

  虽然font-family: name;的属性是继承的，但是有几个元素不会继承父元素的字体设置，其中有表单的select、textarea和input元素。不过可以强制它们继承父元素的字体设置，代码为input, select, textarea { font-family: inherit; }。

指定替代字体

  尽管可以指定自己想要的任何字体，但这些字体不一定在每个系统上都能显示出来。所以在font-family属性中列举一种以上的字体。浏览器会使用列表中第一个已安装的访问者系统内的字体或Web字体。

body {
    font-family: Geneva, Tahoma, sans-serif;
}
h1,
h2 {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}

  字体列表称为字体栈(font stack)，通常字体栈至少包含三个字体。

OS X 和 Windows 上默认共有的字体
Arial
Comic Sans MS
Courier New
Georgia
Impact
Terbuchet MS
Times New Roman
Verdana

  使用font-family: sans-serif，这种方法会让所有的操作系统使用无衬线字体，即Windows的浏览器显示Arial，而 OS X 的浏览器则显示Helvetica。

  系统通常都具有下列表示类属的字体名称对应的字体：serif、sans-serif、cursive、fantasy和monospace。因此标准的做法是在字体栈的末尾指定上述字体名称中的一种。到目前为止，serif和sans-serif是用得最多的，因此它们分别对应于最为常见的两类字体。serif通常对应Windows上的Times New Roman和 OS X 上的Times。sans-serif通常对应Windows上的Arial和 OS X 上的Helvetica。

创建斜体

  浏览器通常让一些HTML元素(如cite、em和i)默认以斜体显示，因此不必在CSS中对这些元素设置斜体。有时候我们需要让一些内容以斜体显示，但是上述元素在语义上来讲都不合适，这时用CSS的font-style属性可以让任何元素中的文本以斜体显示。

body {
	font-family: Geneva, Tahoma, Verdana, sans-serif;
}
h1,
h2 {
	font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}
p {
	font-style: italic;
}

  取消斜体可以输入font-style: normal;，font-style属性是继承的。想取消斜体的一个可能原因是，要从在父元素中继承了斜体格式的段落中对某些文字进行强调。

应用粗体格式

  可以为任何格式添加或取消粗体。添加和取消粗体使用font-weight属性。输入bold让文本显示为具有平均加粗值的粗体。这一属性值适用于大多数情况。或者输入100~900之间100的倍数，其中400代表正常粗细，700代表粗体。如果使用的是具有多种粗细版本的字体，这种方法就很有用(有些Web字体就采用了这种方法)。或者输入bolder(更粗)或lighter(更细)以设置相对当前粗细的值。

body {
	font-family: Geneva, Tahoma, Verdana, sans-serif;
}
h1,
h2 {
	f