CSS基础二

1.CSS字体

1.字体系列

在 CSS 中，有两种不同类型的字体系列，通用字体系列和特定字体系列（比如 “Times” 或 “Courier”）。
CSS 定义的 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
body {font-family: sans-serif;}

使用特定字体系列，可以使用一个或多个候选字体，或者结合特定字体名和通用字体系列，以保证达到预期或者接近的文档。

1
2
3

h1 {font-family: Georgia;}
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia;} // 多个候选字体
h2 {font-family: Georgia, serif;} // 结合特定字体名和通用字体系列

使用引号:有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。

2.字体加粗

font-weight：normal、bold、bolder、lighter、100、200…800、900、inherit
使用bold关键字可以将文本设置为粗体。

关键字100 ~ 900为字体指定了9级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100对应最细的字体变形，900 对应最粗的字体变形。数字400等价于normal，而700等价于bold。

如果将元素的加粗设置为bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词lighter会导致浏览器将加粗度下移而不是上移。

3.字体大小

font-size用来设置字体的大小。font-size值可以是绝对或相对值。
font-size:XX-small,X-small,small,medium,large,X-large,XX-large,smaller,larger,length,percentage,inherit;
如果没有规定字体大小，普通文本的默认大小是16像素(16px=1em)。

使用像素来设置字体大小
1
p {font-size:14px;}

在 Firefox, Chrome, and Safari 中，可以重新调整以上例子的文本大小，但是在 Internet Explorer 中不行。

使用em来设置字体大小
W3C推荐使用em尺寸单位。浏览器中默认的文本大小是16像素。因此1em的默认尺寸是16像素。
可以使用下面这个公式将像素转换为em：pixels/16=em
1
h1 {font-size:3.75em;}
结合使用百分比和em
在所有浏览器中均有效的方案是为body元素（父元素）以百分比设置默认的font-size值：
1
2
3
4
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

4.风格和变形

font-style：italic（斜体）、oblique（倾斜）、normal、inherit
通常情况下，italic和oblique文本在web浏览器中看上去完全一样。
font-variant: small-caps,normal,inherit
small-caps要求使用小型大写字母文本。

5.font属性

font的前三个值是font-style，font-weight,font-variant这三个值的顺序随意、后两个值font-size/line-height、font-family则一定要以这个顺序，而且font声明中必须有这两个值。

2.CSS文本

1.text-indent

作用：用于首行缩进,针对块级元素。
值：length、百分数、inherit、number
百分数：相对于缩进元素父元素的宽度。即如果对一个div设置了这个属性，则百分数是相对于div的父元素。
继承：有

2.text-align

作用：影响元素中文本行相互之间的对齐方式。
值：left、center、right、justify、inherit。left、center、right导致文本的左中右对齐；justify是两端对齐。
继承：有
作用于：块级元素

3.line-height

作用：文本行基线之间的距离，而不是字体的大小，，确定了将各个元素框的高度增加或减少多少
值：normal、百分数、长度
normal：字体的1.2倍
百分数：相对于元素字体的大小
number：是一个缩放因子，用于解决font-size如果是百分比或者em为单位，会相对父元素的font-size计算出line-height然后由子元素继承，子元素从父元素继承line-height时，继承自父元素的line-height和子元素自身的font-size不匹配。使用缩放因子，子元素就继承的是这个因子而不是计算值，因此子元素再用这个因子计算出line-height的值。
应用：所有元素
继承：有
文本行、内容区和行内框的关系: line-height的值定义行内框的大小；font-size定义内容区的大小；行内框-内容区的部分就是行间距；所有行内框的最高顶部和最低底部就是行框的范围。

4.vertical-align

应用：行内元素和替换元素
值：baseline（默认）、sub、super、bottom、text-bottom、top、text-top、middle、百分数、数值
baseline：一个元素的基线和父元素的基线对齐。如果是图像、输入框这一类的替换元素，则该元素的底部和父元素的基线对齐
sub：使一个元素变成下标，该元素的基线（或是替换元素的底部）会低于父元素的基线，低多少由用户代理决定。super和sub相反
bottom：将元素行内框的底部和行框的底部对齐
text-bottom：指行内文本的底端。替换元素或任何其它类型的非文本元素会有一个默认的文本框。要对齐元素的行内框底端再与这个默认文本框底端对齐。
middle：往往（但并不总是）应用于图片，middle将元素行内框的中点与父元素基线上的0.5ex对齐。
百分数：将元素的基线（或替换元素的底边）相对于父元素基线升高或降低指定的量。这个百分数是相对于该元素line-height的百分数。
总结：可以看到所有垂直对齐的元素都会影响行高。行框的描述是，高度要足以包含最高行内框的顶端和最低行内框的底端。
继承：无

5.word-spacing

作用：字间隔，增加或减少单词之间的间隔
值：normal、inherit、数值
应用：所有元素
继承：有

6.letter-spacing

作用：字母间隔，增加或减少字母之间的间隔
值：normal、inherit、数值
应用：所有元素
继承：有

7.text-transform

作用：处理文本大小写
值：uppercase、lowercase、capitalize、none、inherit
uppercase、lowercase：将文本转换为全大写或全小写字符
capitalize：对每个单词首字母大写
应用：所有元素
继承：有

8.text-decoration

作用：文本装饰
值：none、underline、overline、line-through、blink
underline：对元素加下划线
overline：在文本顶端画一个上划线
line-through：在文本中画贯穿线
blink：文本闪烁
应用：所有元素
继承：无

9.text-shadow

作用：文本阴影
值：三个（color、length[左右偏移]、length[上下偏移]、length[阴影模糊半径]）
应用：所有元素
继承：无

10.white-space

作用：影响用户代理对源文档中的空格、换行和tab字符的处理
值：normal、nowrap、pre、pre-wrap、pre-line、inherit
pre：会保留空格，不换行
nowrap：不会保留空格，不换行
pre-wrap：会保留空格，换行
pre-line：不会保留空格，换行
应用：所有元素
继承：无

3.基本视觉格式化

1.基本概念

(1)正常流：是指西方语言文本从左向右，从上向下显示。如果要让一个元素不在正常流中国，唯一的办法就是使之成为浮动或定位元素。
(2)非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。
(3)替换元素：指用作为其他内容占位符的一个元素。例子：img中的图像
(4)块级元素：在正常流中，会在其框之前和之后生成“换行”所以出于正常流中的块级元素会垂直摆放。
(5)行内元素：不会再之前或之后生成行分隔符，它们是块级元素的后台。
(6)根元素：位于文档树顶端的元素。在HTML中，就是元素HTML。

2.块级元素

水平格式化
水平格式化的“7大属性”是：margin-left,border-left,padding-left,width,padding-right,border-right,margin-left
这七个水平属性的总和要等于父元素的width。
这里面只有width,margin-left,margin-right这三个可以设置为：auto，其他都必须设为特定的值或者默认宽度为0.

如果设置width,margin-left,margin-right中的某个值为auto，而余下两个属性为特定值，则设置为auto的属性由系统计算其值。
如果设置margin-left,margin-right都为auto，它们会被设置为相等的长度，因此将元素在其父元素中居中。
如果设置width和某个外边距为auto，设置为auto的外边距会减为0，width会设置为所需的值，使元素完全填充其包含块。
如果这3个属性全是auto，则两个外边距会被设置为0，width会尽可能宽。
外边距可以为负值。
当水平属性过分受限时，系统会重置右外边距，使满足要求。
width,margin-left,margin-right还可以设置为百分数。
对于替换元素，非替换块元素的规则同样适用于替换块元素。只有一个例外，如果width为auto，元素的宽度则是内容的固有宽度。

垂直格式化
对应于水平格式化，它也有7个属性：
margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom.
同样这七个值必须等于包含元素块的高。
这七个值中只有三个值可以设为auto:height,margin-top,margin-bottom,其他四个必须设为特定的值或默认为0。

如果正常流中的一个块元素的margin-top或者margin-bottom设置为auto，它会自动计算为0。
垂直格式化的另一个重要的是合并垂直外边距（重叠垂直外边距）。
上、下外边距为负时，有一种“拉近”的感觉。

3.行内元素

基本术语和概念
匿名文本，是指所有未包含在行内元素中的字符串。
1
<p>I'm<em>so</em>happy!</p>

序列中I’m和happy!都是匿名文本。
em框，em框在字体中定义，也成为字符框。实际的字形可能比其em框更高或更矮。font-size值确定了各个em框的高度。
内容区，在非替换元素中，内容区可能有两种。内容区可以是元素中个字符的em框串在一起构成的框，也可以是由元素中字符字形描述的框。
行间距，是font-size值和line-height值只差，这个差实际上要分为两半，分别应用到内容区的顶部和底部。为内容区增加的这两部分分别称为版兼具。行内距只应用于非替换元素。
行内框，这个框通过向内容区增加行间距来描述。对于非替换元素，袁术行内框的高度刚好等于line-height的值。对于替换元素，元素行内框的高度则恰好等于内容区的高度，因为行间距不应用到替换元素。
行框，这个包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于最高行内框的上边界，而行框的底边要放在最低行内框的下边界。

内容区类似于一个块级元素的内容框。
行内元素的背景应用于内容区及所有内边距。
行内元素的边框要包围内容区及所有内边距和边框。非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果；也就是所它们不会影响元素行内框的高度。
替换元素的外边距和边框确实会影响该元素行内框的高度，相应地，也可能影响包含该元素的边框高度。

行内非替换元素
注意：

line-height是一个继承属性。
文本都是按基线对齐的。
内边距和边框不影响行框的生成，也不会改变行高。
外边距不会应用到行内非替换元素的顶端和底端，不会影响行框的高度。
设置line-height最好办法是使用一个原始数字，这个数字会成为缩放因子，该因子是一个继承值而非计算值。如果你希望一个文档中所有元素的line-height都是其font-size的1.5倍，可以如下声明：
1
body {line-height: 1.5;}

行内替换元素
一般认为行内替换元素（如图像）有固定的高度和宽度。有固定高度的替换元素可能会导致行框比正常要高，这不会改变行中任何元素的line-height值，只是让行框的高度恰好包含替换元素（以及所有的框属性）。
替换元素的内边距和边框确实会影响行框的高度。设置正外边距会使行内元素行框变高，负的外边距会使行框减小。
实际上，替换元素的下外边距边界与基线对齐，为了解决这个问题，通常有两个办法：

使图像成为块级元素，这样就不会生成行框；
使用一个负的下外边距，元素会被向下拉。

参考网页：W3Cschool CSS教程
参考书籍：《CSS权威指南》，作者：Eric A.Meyer