CSS入门二

一、单位和值

颜色

1、使用有限的颜色名。

2、使用十六进制的颜色值。

颜色名、RGB颜色（百分百颜色、数字颜色、十六进制颜色、短十六进制颜色）

长度单位

英寸(in)、里面(cm)、毫米(mm)、磅(pt)、pica(pc)印刷术语

使用绝对长度、相对长度单位(em、ex和px)

em和ex

css中,一个"em"就是给给定字体的font-size的值，如果某个元素的字体尺寸为14个磅，那么这个元素的一个em就同14个磅一样。

em设置的字体尺寸是相对于父元素的。

像素px

百分比值——百分号%

语音浏览器

角度值：定义发错声音的位置。

时间值：用于指明语音元素间的延迟，可以用毫秒或秒。

频率值：用于指定语音浏览器能够产生的频率。

二、文本属性

文本缩进

段落首行的缩进（indent）。

    text-indent

    允许值            <长度> | <百分比>

    初始值              0

    可否继承          否

    适用于              块级元素

    注意：百分比是相对于父元素的宽度。

    P {text-indent:0.25in;} 任何段落首行缩进四分之一英寸。

文本对齐

    text-align

    允许值            left | center | right | justify

    初始值              与用户代理有关

    可否继承          是

    适用于              块级元素

默认西方语言，是从左到右，即文本从左边空白处一次排序。希伯来语或阿拉伯语缺省是right。

justify：两端文本对齐格式。

CSS中无连字符。

处理空白

    white-space

    允许值            pre | nowrap | normal

    初始值            normal

    可否继承        否

    适用于            块级元素

影响浏览器对单词和文本行间空白的处理方式。

HTML将任何空白压缩成单个空白符。

p {white-space:normal;}

浏览器忽略多余的空白，任何额外的空白符及回车符会被浏览器完全忽略。

pre：元素内的空白不被忽略。

nowrap：阻止文本呗包裹在块级元素里。

行高

行高（line-height）指的是文本行的基线间的距离。

    line-height

    允许值            <长度>| <百分比> | <数字> | normal

    初始值             normal

    可否继承          是

    适用于              所有元素

 注意：百分比是值相对元素的字体尺寸。

纵向对齐

   vertical-align

    允许值             baseline | sub | super | bottom | text-bottom | middle | top | text-top | 百分比

    初始值             baseline

    可否继承         否

    适用于             内联元素

 注意：百分比是值相对元素的行高。

基线对齐 baseline 元素的基线同父元素的基线对齐（即文本底部与父元素的底部对齐）。

下标 sub  元素的基线（底端）相对于父元素的基线降低了。

上标 super 元素的基线（底端）相对于父元素的基线升高了。

底端对齐 bottom 元素的内联框的底端同行框的底端对齐。

text-bottom 文本行底端。替换元素或根本没有文本的任何元素都会被忽略。

顶端对齐 top  与bottom的效果刚好相反

text-top 同text-bottoom相反

中间对齐 middle 适合于图像，使元素的纵向的中点对齐本行的中间

百分比  使元素的基线（元素底端）根据给定值升高或降低，所指定的百分比作为行高的值的百分比数来计算

文本间隔和字母间隔

文本间隔

文字和字母间隔就是插入或删除文字或字母间的间隔的方式。

    word-spacing

    允许值            <长度>| normal

    初始值             normal

    可否继承          是

    适用于              所有元素

缺省值normal为0。

字母间隔

    letter-spacing

    允许值            <长度>| normal

    初始值             normal

    可否继承          是

    适用于              所有元素

间隔、对齐和字体尺寸

文字间隔和字母间隔收到文本对齐的值的影响

如果某元素被设置成两端间隔对齐，那么字母和文字间隔可以被改变，以允许两端完全对齐，反过来，它也可以改变制作者对文本间隔和字母间隔的声明值。

文本转换

处理文本大小写的方法。

    text-transform

    允许值             uppercase | lowercase | capitalize | none

    初始值             none

    可否继承          是

    适用于              所有元素

uppercase和lowercase是将整个文本改为大写或小写

capitalize是使每个文字的第一个字母大写

文本修饰

    text-decoration

    允许值            none | [ underline || overline || line-through || blink ]

    初始值             none

    可否继承          否

    适用于              所有元素

underline 下划线

overline 上划线

line-through 删除线

blink 文本闪烁

三、字体属性

使用一般的字体系列

    font-famliy

    允许值            [[<系列名> | <一般系列> ],] * [<l系列名>|<一般系列>]

    初始值             与用户代理有关

    可否继承          是

    适用于              所有元素

如果用户没有某一种字体，则通过将具体的字体名同一般字体系列组合，文档将尽量以接近制作者意图的方式显示。

H1 {font-family : Garamond,serif;}

如果读者没有安装Garamond字体，而安装了Times字体，则用户代理就可用Times来显示H1元素。

使用引号

只有当字体名中有一个或多个空白时,引号才能在font-famlity的声明中使用，或字体名中包含了如“%”或“$“等等的符号时。

H2 { Wedgie,‘Karrank%’,klingon,fantasy;}

至于使用哪种引号，单引号和双引号都可以，如果再style属性中设置一条font-famlity规则，那么规则内就必须使用单引号。

字体加粗

    font-weight

    允许值            normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

    初始值             normal

    可否继承          是

    适用于              所有元素

更粗的字体通常都会有更显著的视觉效果

bold/bolder字体加粗

lighter 字体变细

字体尺寸

    font-size

    允许值             xx-small | x-small | smal | medium | large | x-large | xx-large | smaller | larger | <长度> | <百分比>

    初始值             medium

    可否继承         是

    适用于             所有元素

注意：百分比是指对于父元素的字体尺寸的百分比。

绝对字体尺寸 xx-small | x-small | smal | medium | large | x-large | xx-large |  都没有精确定义

相对尺寸 smaller | larger使元素的尺寸相对于其父元素的绝对尺寸变大或变小，而且使用和计算绝对尺寸时所用的一样的缩放因子

百分比尺寸 从与父元素那里继承的尺寸相关

字体尺寸和继承：可被继承，但继承的是计算值，而不是百分比

使用长度单位

样式和变形

字体样式

    font-style

    允许值             italic | oblique | normal

    初始值             normal

    可否继承         是

    适用于             所有元素

   italic 斜体

  oblique 倾斜

字体变形

    font-variant

    允许值             small-caps | normal

    初始值             normal

    可否继承         是

    适用于             所有元素

small-caps 请求使用小型大写字母文本

使用缩略方式

字体属性

    font

    允许值             [<字体风格> || <字体变形> || <字体加粗> ]?<字体尺寸>[/<行高>]?<字体系列>

    初始值             参见哥哥独立的属性

    可否继承         是

    适用于             所有元素

字体匹配

三、颜色和背景

元素的前景：元素的文本和元素的边框

使用颜色属性和使用边框属性中的一种来设置边框颜色。

边框颜色（border-color）属性以及其他的一些属性，如border-top，border-right，border-bottom，border-left和border

元素的背景：所有前景色后面的空间，直到边框的边缘，内容框和填充都是元素背景的一部分。

设置背景色：background-color 和 background

前景色

最简便的办法是color属性

     color

       允许值          <颜色>

       初始值          与用户代理有关

       是否继承      是

       适用于          所有元素

背景颜色

     background-color

       允许值          <颜色> | transparent

       初始值          transparent

       是否继承      否

       适用于          所有元素

默认 transparent 透明

背景图像

     background-image

       允许值          <url> | none

       初始值          none

       是否继承      否

       适用于          所有元素

按方向重复图像

     background-repeat

       允许值          repeat | repeat-x | repeat-y | no-repeat

       初始值          no-repeat

       是否继承      否

       适用于          所有元素

背景位置

     background-position

       允许值          [<百分比> | <长度> ] {1,2} | [ top | center| bottom] || [ left | center | right ]

       初始值          0% 0%

       是否继承      否

       适用于          块级元素和替换元素

注意：百分比是指相对于元素的初始图像的一个点的值

长度值  相对于元素的左上角的偏移量，背景图像上的偏移点也是左上角的那个点

关键字只能单独使用，百分比却可以和长度值组合使用。

背景附件

     background-attachment

       允许值          scroll | fixed

       初始值          scroll

       是否继承      否

       适用于          所有元素

使背景图像固定在视野范围内，以避免出现滚动而消失的效果

综合

     background

       允许值          <背景颜色> | <背景图像> | <背景重复> | <背景附件> | <背景位置

       初始值          参见各属性

       是否继承      否

       适用于          所有元素

注意：背景位置中可以出现百分比