CSS样式

一、CSS背景

    1、背景色background-color属性
        {background-color:color;}
        可以为所有元素设置背景色，这包括body一直到em和a等行内元素。
        background-color不能继承，其默认值是 transparent。

    2、背景图像background-image属性
        {background-image:url();}
        理论上讲，甚至可以向textareas和select等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。
        另外还要补充一点，background-image也不能继承。事实上，所有背景属性都不能继承。

    3、背景重复background-repeat属性
        {background-repeat:repeat;}
        no-repeat、repeat-x、repea-y

    4、背景定位background-position属性
        {background-position:position;}
        A、关键字
            top、bottom、left、right、center
        B、百分数值
            %
        C、长度值
            px、cm

    5、背景关联background-attachment属性
        scroll、fixed

二、CSS文本

    CSS文本属性可定义文本的外观。
    通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

    1、缩进文本
        text-indent
        注意：一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
        提示：如果想把一个行内元素的第一行"缩进"，可以用左内边距或外边距创造这种效果。

        A、使用负值
            text-indent还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如"悬挂缩进"，即第一行悬挂在元素中余下部分的左边。不过在为text-indent设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距。

        B、使用百分比值
            text-indent可以使用所有长度单位，包括百分比值。
            百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为20%，所影响元素的第一行会缩进其父元素宽度的20%。假设父元素的宽度为500px，那20%，即100个像素。

        C、继承
            div#inner {text-indent:10%;}
            <div id="inner">some text. some text. some text.
                <p>this is a paragragh.</p>
            </div>
            这里看似情况不必应用到继承，可直接使用p元素定义缩进，但假设如果div里包含多个元素，这些元素都需要缩进，那一个个定义缩进繁琐，直接应用父级元素定义即可。

    2、水平对齐
        text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
        值left、right和center会导致元素中的文本分别左对齐、右对齐和居中。
        <CENTER>不仅影响文本，还会把整个元素居中。
        justify在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。

    3、字间隔
        word-spacing属性可以改变字（单词）之间的标准间隔。其默认值normal与设置值为0是一样的。
        word-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为word-spacing设置一个负值，会把它拉近。

    4、字母间隔
        letter-spacing属性与word-spacing的区别在于，字母间隔修改的是字符或字母之间的间隔。
        与word-spacing属性一样，letter-spacing属性的可取值包括所有长度。默认关键字是normal（这与letter-spacing:0相同）。输入的长度值会使字母之间的间隔增加或减少指定的量。

    5、字符转换
        text-transform属性处理文本的大小写。这个属性有 4 个值：
        none
        uppercase
        lowercase
        capitalize
        默认值none对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase和lowercase将文本转换为全大写和全小写字符。最后，capitalize只对每个单词的首字母大写。

    6、文本装饰
        text-decoration属性5 个值，这是一个很有意思的属性，它提供了很多非常有趣的行为。
        none
        underline
        overline
        line-through
        blink
        不出所料，underline会对元素加下划线，就像HTML中的U元素一样。overline的作用恰好相反，会在文本的顶端画一个上划线。值line-through则在文本中间画一个贯穿线，等价于HTML中的S和strike元素。blink会让文本闪烁，类似于Netscape支持的颇招非议的blink标记。
        可以在一个规则中结合多种装饰。如超链接既有下划线，又有上划线。
        如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。text-decoration值会替换而不是累积起来。

    7、处理空白符
        white-space属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

        A、值pre
            如果将white-space设置为pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像XHTML的pre元素一样；空白符不会被忽略。
            如果white-space属性的值为pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。

        B、值nowrap
            与之相对的值是nowrap，它会防止元素中的文本换行，除非使用了一个br元素。在CSS中使用nowrap非常类似于HTML4中用<td nowrap>将一个表单元格设置为不能换行，不过white-space值可以应用到任何元素。

        C、值pre-wrap和值pre-line
            CSS2.1引入了值pre-wrap和pre-line，这在以前版本的CSS中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。
            如果元素的white-space设置为pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line与pre-wrap相反，会像正常文本中一样合并空白符序列，但保留换行符。

        D、总结
            下面的表格总结了white-space属性的行为：
            值    空白符    换行符    自动换行
            normal  合并    忽略    允许
            pre      保留    保留    不允许
            nowrap    合并    忽略    不允许
            pre-wrap    保留    保留    允许
            pre-line    合并    保留    允许

    8、文本方向
        direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。
        注释：对于行内元素，只有当unicode-bidi属性设置为embed或bidi-override时才会应用direction属性。
        direction属性有两个值：ltr和rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值rtl。

三、CSS字体系列
    CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

    1、CSS 字体系列
        在 CSS 中，有两种不同类型的字体系列名称：
        通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
        特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）

        除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
        Serif 字体
        Sans-serif 字体
        Monospace 字体
        Cursive 字体
        Fantasy 字体

    2、指定字体系列
        我们可以通过结合特定字体名和通用字体系列来解决这个问题：
        h1 {font-family: Georgia, serif;}
        也可以为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接：
        p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}

        使用引号
        您也许已经注意到了，上面的例子中使用了单引号。只有当字体名中有一个或多个空格（比如 New York），
        或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
        单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号。

    3、字体风格
        font-style 属性最常用于规定斜体文本。
        该属性有三个值：
        normal - 文本正常显示
        italic - 文本斜体显示
        oblique - 文本倾斜显示
        italic 和 oblique 的区别
        斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

    4、字体变形
        font-variant 属性可以设定小型大写字母。
        小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
        normal
        small-caps

    5、字体加粗
        font-weight 属性设置文本的粗细。
        使用 bold 关键字可以将文本设置为粗体。
        关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
        如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

    6、字体大小-font-size
        使用 px 来设置字体大小
        在 Firefox, Chrome, and Safari 中，可以重新调整以上例子的文本大小，但是在 Internet Explorer 中不行。

        使用 em 来设置字体大小
        如果使用 em 单位，则可以在所有浏览器中调整文本大小。

        结合使用百分比和 EM
        在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

四、CSS 列表
    CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

    1、列表类型
        要修改用于列表项的标志类型，可以使用属性 list-style-type
        circle, square, upper-roman, lower-alpha

    2、列表项图像
        有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到
        url()

    3、列表标志位置
        CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
        inside, outside

    4、简写列表样式
        为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style
        li {list-style : url(example.gif) square inside}

五、CSS 表格
    CSS 表格属性可以帮助您极大地改善表格的外观。

    1、表格边框
        如需在 CSS 中设置表格边框，请使用 border 属性。
        table, th, td
        {
            border: 1px solid blue;
        }

    2、折叠边框
        border-collapse 属性设置是否将表格边框折叠为单一边框。
        table
        {
            border-collapse:collapse;
        }

    3、表格宽度和高度
        通过 width 和 height 属性定义表格的宽度和高度。
        table
        {
            width:100%;
        }
        th
        {
            height:50px;
        }

    4、表格文本对齐
        text-align 和 vertical-align 属性设置表格中文本的对齐方式。
        td
        {
            text-align:right;
        }
        td
        {
            height:50px;
            vertical-align:bottom;
        }

    5、表格内边距
        如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性。
        td
        {
            padding:15px;
        }

    6、表格颜色
        下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色。
        th
        {
            background-color:green;
            color:white;
        }

六、CSS 轮廓
    1、outline
        outline 在一个声明中设置所有的轮廓属性
        outline: outline-color outline-style outline-width

    2、outline-color
        outline-color 设置轮廓的颜色
        #000000 black rgb(0,0,0)

    3、outline-style
        outline-style 设置轮廓的样式
        dotted dashed solid double groove ridge inset outset

    4、outline-width
        outline-width 设置轮廓的宽度
        thin thick 100px cm em