上书房之CSS

第一章 CSS简介

CSS (Cascading Style Sheets)是层叠样式表的缩写，样式定义了如何显示HTML元素。向HTML文档添加样式通常有三种方式：外部样式表、内部样式表、内联样式。
（1）外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。外部样式表将样式定义在.css文件中，在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部，浏览器会从文件.css 中读到样式声明，并根据它来格式文档。

<head>
    <meta charset="UTF-8">
    <title>html示例</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
</head>

（2）内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。

    <head>
        <meta charset="UTF-8">
        <title>html示例</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>
            body {
                background-image:url("images/back40.gif");
            }
            hr {
                color:sienna;
            }
            p {
                margin-left:20px;
            }
        </style>
    </head>

（3）内联样式（慎用）
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

第二章 CSS语法

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明（由键值对组成）。
选择器通常是您需要改变样式的 HTML元素。每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS语法结构

h1 {
    font-family: "微软雅黑";
    color: blue;
    font-size: 12px;
}

第三章 CSS选择器

3.1. 元素选择器

元素选择器是CSS最常见的选择器。换句话说，文档的元素就是最基本的选择器。

body {
  color: blue;
  font-size:35px;
  display: block;
}

3.2. 分组选择器

如果多个元素拥有相同的样式，可使用分组选择器，多个元素用逗号分隔。

h2, p {
    color:gray;
}

说明：如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。

3.3. 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。
只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
（1）普通类选择器
语法：类选择器前面后一个点（.），后面跟选择器的名称。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            .content{
                color: black;
            }
        </style>
    </head>
    <body>
        <div class="content">
            This is the first content.
        </div>
        <p class="content">
            This is the second content.
        </p>
    </body>
</html>

（2）结合元素的类选择器
类选择器可以结合元素选择器来使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            div.content{
                color: black;
            }
            p.content{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="content">
            This is the first content.
        </div>
        <p class="content">
            This is the second content.
        </p>
    </body>
</html>

（3）多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        .important {
            font-weight:bold;
        }
        .warning {
            font-style:italic;
        }
        .important.warning {
            background:silver;
        }
        </style>
    </head>
    <body>
        <p class="important warning">
            This paragraph is a very important warning.
        </p>
    </body>
</html>

3.4. id选择器

id选择器允许以一种独立于文档元素的方式来指定样式，使用html元素的id来指定其样式。
语法：id选择器以#开头，后面跟元素的id。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            #content{
                color: black;
            }
        </style>
    </head>
    <body>
        <div id="content">
            This is content.
        </div>
    </body>
</html>

说明：

id选择器只能使用一次
不能使用词列表

3.5. 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。
（1）简单属性选择器
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
示例1：如果希望把包含标题（title）的所有元素字体设置为蓝色，可以写作：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        [title] { /*对所有包含title的元素设置该样式*/
            color: blue;
        }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com" title="百度一下">Baidu</a>
        <a href="http://www.sohu.com" title="用搜狐，知天下">Sohu</a>
    </body>
</html>

示例2：只希望对包含某个属性的某类元素设置对应的样式，可以写作：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        a[title]{ /*只对a标签包含title的元素设置该样式*/
            color: blue;
        }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com" title="百度一下">Baidu</a>
        <span title="用搜狐，知天下" onclick="location.href='http://www.sohu.com'">Sohu</span>
    </body>
</html>

示例3：可以根据多个属性进行选择，即同时具有某些属性的元素设置元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        a[href][title]{ /*只对a标签同时包含href和title属性的元素设置该属性*/
            color: orangered;
        }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com" title="百度一下">Baidu</a>
        <a href="http://www.sohu.com">Sohu</a>
    </body>
</html>

（2）属性值选择器
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
示例1：希望将指向某个特定链接的标签a变成红色，可以这样写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        a[href="http://www.baidu.com"]{ /*只对a标签指向http://www.baidu.com的元素设置该属性*/
            color: orangered;
        }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com" title="百度一下">Baidu</a>
        <a href="http://www.sohu.com">Sohu</a>
    </body>
</html>

示例2：与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        a[href="http://www.baidu.com"][title="百度一下"]{ /*只对a标签指向http://www.baidu.com且title的值为百度一下的元素设置该属性*/
            color: orangered;
        }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com" title="百度一下">Baidu</a>
        <a href="http://www.sohu.com">Sohu</a>
    </body>
</html>

（3）部分属性值选择器
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
示例：假设想选择class属性中包含important的元素，可以用下面这个选择器做到这一点：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        p[class~="important"]{ /*将class元素包含important内容的p元素设置该元素*/
            color: red;
        }
        </style>
    </head>
    <body>
        <h3>可以应用样式：</h3>
        <p class="important warning">This is a paragraph.</a>
        <p class="important">This is a paragraph.</a>
        <hr />
        <h3>无法应用样式：</h3>
        <p class="warning">This is a paragraph.</a>
    </body>
</html>

说明：如果忽略了波浪号，则说明需要完成完全值匹配。
部分值属性选择器与点号类名记法的区别：该选择器等价于我们在类选择器中讨论过的点号类名记法。也就是说，p.important 和 p[class="important"] 应用到HTML文档时是等价的。那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是class。
例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：

img[title~="Figure"] {
    border: 1px solid gray;
}

属性选择器列表

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

3.6. 后代选择器

后代选择器又称为包含选择器，可以选择作为某元素后代的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            h1 strong {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>百度不会再以<strong>竞价方式</strong>对搜索结果进行排名</h1>
        <p>百度不会再以<strong>竞价方式</strong>对搜索结果进行排名.</p>
    </body>
</html>

说明：后代选择器两个元素之间的层次间隔可以是无限的。
例如，如果写作ul em，这个语法就会选择从ul元素继承的所有em元素，而不论em的嵌套层次多深。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            ul em {
                color: red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>List item 1
                <ol>
                    <li>List item 1-1</li>
                    <li>List item 1-2</li>
                    <li>List item 1-3
                        <ol>
                            <li>List item <em>1-3-1</em></li>
                            <li>List item <em>1-3-2</em></li>
                            <li>List item <em>1-3-3</em></li>
                        </ol>
                    </li>
                    <li>List item 1-4</li>
                </ol>
            </li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </body>
</html>

3.7. 子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            h1>strong {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>百度推出继百度百家之后的媒体平台:<strong>百度发布平台</strong></h1>
            <h1>百度推出继百度百家之后的媒体平台:<em><strong>百度发布平台</strong></em></h1>
        </div>
    </body>
</html>

3.8. 相邻元素选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            div.content > header + p{
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <header>文章标题</header>
            <p>
                文章内容第一段文章内容第一段文章内容第一段文章内容第一段文章内容第一段。
            </p>
        </div>
    </body>
</html>

3.9. 伪类

CSS伪类用于向特殊状态的选择器添加特殊效果，
(1) 锚伪类。
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上（此伪类不止限于超链接上，其他元素也可使用）
a:active 选定的链接
注意：在CSS定义中，a:hover必须被置于a:link和a:visited之后才是有效的；a:active必须被置于a:hover之后才是有效的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            a:link{
                color: blue;
            }
            a:visited{
                color: yellowgreen;
            }
            a:hover{
                color: deepskyblue;
            }
            a:active{
                color: red;
            }
        </style>
    </head>
    <body>
        <a href="http://www.apple.com/">苹果官网</a>
        <a href="http://hd.mi.com/y/05031d/index.html">小米官网</a>
    </body>
</html>

(2) :focus伪类向拥有键盘输入焦点的元素添加样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            input:focus{
                background-color: lightyellow;
            }
        </style>
    </head>
    <body>
        <input type="text" placeholder="请输入用户名" id="form-field-userName" />
        <input type="password" placeholder="请输入密码" id="form-field-password" />
        <input type="checkbox" /> 记住我
    </body>
</html>

(3) :first-child伪类，匹配其它元素的第一个子元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            ul > li:first-child{
                color: red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </body>
</html>

3.10. 伪元素

CSS伪元素用于向某些选择器设置特殊效果。常用的伪元素如下：
(1) :first- line
向文本的首行添加特殊样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            p:first-line{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>
            第一行内容第一行内容第一行内容第一行内容第一行内容。<br />
            第二行内容第二行内容第二行内容第二行内容第二行内容。<br />
            第三行内容第三行内容第三行内容第三行内容第三行内容。<br />
        </p>
    </body>
</html>

(2) :first-line
向文本的首行添加特殊样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            p:first-letter {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>ABCD</p>
    </body>
</html>

(3) :before
在元素之前添加内容。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            h1:before {
                content: url(css/img/logo.png)
            }
        </style>
    </head>
    <body>
        <h1>上书房</h1>
    </body>
</html>

(4) :after
在元素之后添加内容。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            h1:after {
                content: url(css/img/logo.png)
            }
        </style>
    </head>
    <body>
        <h1>上书房</h1>
    </body>
</html>

第四章 CSS样式

4.1. 背景

CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
(1) 背景色
使用background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            .content {
                background-color: lightcoral;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <p>文章内容</p>
        </div>
    </body>
</html>

(2) 背景图
使用background-image属性为元素设置背景图。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            body {
                background-image: url(css/img/backgroud.jpg);
            }
        </style>
    </head>
    <body>
    </body>
</html>

(3) 背景重复
如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            body {
                background-image: url(css/img/backgroud.jpg);
                background-repeat: no-repeat; /*repeat-x,repeat-y,no-repeat*/
            }
        </style>
    </head>
    <body>
    </body>
</html>

(4) 背景定位
可以利用background-position属性改变图像在背景中的位置。CSS为background-position属性提供了3中方式改变图像在背景中的位置：

关键字
可以使用background-position关键字：top、bottom、left、right和center改变图像在背景中的位置。

<style>
    body {
        background-image: url(css/img/backgroud.jpg);
        background-repeat: no-repeat;
        background-position: left; /*top、bottom、left、right、center*/;
    }
</style>

百分数值

<style>
    body {
        background-image: url(css/img/backgroud.jpg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }
</style>

长度值

<style>
    body {
        background-image: url(css/img/backgroud.jpg);
        background-repeat: no-repeat;
        background-position: 50px 100px;
    }
</style>

(5) 背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。可以通过background-attachment属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。

<style>
  body {
    background-image: url(css/img/backgroud.jpg);
    background-repeat: no-repeat;
    background-position: 50px 100px;
    background-attachment:fixed
  }
</style>

关于背景的所有样式可声明在同一个属性background中。

<style>
    body {
        background: orangered url(css/img/backgroud.jpg) no-repeat 50px 100px fixed;
    }
</style>

4.2. 文本

CSS文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等等。
(1) 缩进文本
CSS提供了text-indent属性实现对段落文本首行的缩进。

<style>
    p{
        text-indent: 2em;
    }
</style>

(2) 水平对齐
使用text-align属性实现文本内容的对其方式，常用的有4个值：
left: 文本左对齐
right: 文本右对齐
center: 文本居中对齐
justify: 文本两端对齐

<style>
    p{
        text-align: left;
    }
</style>

(3) 单词间隔
使用word-spacing 属性可以改变单词之间的标准间隔。其默认值normal与设置值为 0 是一样的。

p{
    word-spacing: 30px;
}

(4) 字母间隔
使用letter-spacing属性可以改变单词之间的标准间隔。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            p.word-spacing {
                word-spacing: 5em;
            }
            
            p.letter-spacing {
                letter-spacing: 5em;
            }
        </style>
    </head>
    <body>
        <p class="word-spacing">
            hello world!
        </p>
        <p class="letter-spacing">
            hello world!
        </p>
    </body>
</html>

(5) 字符转换
使用text-transform来实现文本内容大小写的转换。
none: 对文本不做任何修改。
uppercase: 将文本内容转换为大写。
lowercase: 将文本内容转换为小写。
capitalize: 将文本内容的每个单词第一个字母转换为大写。
(6) 文本装饰
使用text-decoration来实现文本一些特殊的样式。
none: 对文本内容不追加任何效果。
underline: 对元素内容加下划线。
overline: 对元素内容加上划线。
line-through: 对元素内容加删除线。
(7) 处理空白符
使用white-space处理对源文档中的空格、换行符和tab字符的处理。

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

4.3. 字体

CSS字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
(1) 字体系列
使用font-family属性定义文本的字体系列。
在CSS中，有两种不同类型的字体系列名称：
通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
Serif字体
Sans-serif字体
Monospace字体
Cursive字体
Fantasy字体
所有的系统都应提供一个通用字体系列，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            .font-family1{
                font-family: sans-serif;
            }
            .font-family2{
                font-family: "微软雅黑";
            }
            .font-family3{
                font-family: "宋体"
            }
        </style>
    </head>
    <body>
        <p class="font-family1">
            阿里巴巴
        </p>
        <p class="font-family2">
            阿里巴巴
        </p>
        <p class="font-family3">
            阿里巴巴
        </p>
    </body>
</html>

(2) 字体风格
使用font-style属性最常用于规定斜体文本。
该属性有三个值：
normal: 文本正常显示
italic: 文本斜体显示
oblique: 文本倾斜显示
(3) 字体加粗
使用font-weight属性设置文本的粗细。使用bold关键字可以将文本设置为粗体。关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
(4) 字体大小
使用font-size属性设置文本的大小。有font-size可使用3种方式对字体进行大小的设置。
px: 像素（px）是相对于显示器屏幕分辨率而言的相对长度单位，但对于IE浏览器无法调整使用px作为单位的字体大小。
em: 相对于当前对象内文本的字体尺寸，也是相对长度单位。em有两个特点，其一、em的值并不是固定的；其二、em会继承父级元素的字体大小。
任意浏览器的默认字体高都16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，我们在写CSS的时候，需要注意两点：

body选择器中声明Font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。
比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            body {
                font-family: sans-serif;
                font-size: 62.5%;
            }
            
            .content {
                font-size: 1.2em;
            }
            
            .p1 {
                font-size: 1.2em;
            }
            
            .p2 {
                font-size: 1.2em;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="p1">
                <p class="p2">
                    阿里巴巴
                </p>
            </div>
            <p class="p2">
                阿里巴巴
            </p>
        </div>
    </body>
</html>

rem（推荐使用）: rem是CSS3新增的一个相对单位，这个单位与em的区别在于，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

4.4. 列表

列表分为无序列表（ul）和有序列表（ol）两种，在一个无序列表中，列表项的标志是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
(1) 修改列表项的标志类型
使用list-style-type属性，修改用于列表项的标志类型。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            ul{
                list-style-type: disc;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </body>
</html>

list-style-type属性值

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

(2) 设置列表图标
如果不想使用标志符，可使用list-style-image属性为列表添加图标。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            ul li{
                list-style-image: url(css/img/diy/3.png);
            }
        </style>
    </head>
    <body>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </body>
</html>

(3) 设置列表标志位置（不常用）
使用list-style-position属性设置在何处放置列表项标记。

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

4.5. 表格

使用CSS来设置表格的样式可极大的改善表格的外观。
(1) 表格边框
使用border属性来设置表格的边框。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            table, th, td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>公司名称</th>
            </tr>
            <tr>
                <td>李彦宏</td>
                <td>男</td>
                <td>百度</td>
            </tr>
            <tr>
                <td>马云</td>
                <td>男</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>雷军</td>
                <td>男</td>
                <td>小米科技</td>
            </tr>
        </table>
    </body>
</html>

(2) 折叠边框
使用border-collapse属性设置是否将表格边框折叠为单一边框。

table{
    border-collapse: collapse;
}

(3) 表格的宽度与高度
使用width和height属性定义表格的宽度和高度。

table{
    border-collapse: collapse;
    width: 100%;
}
th, td{
    height: 30px;
}

(4) 表格文本对齐
使用text-align和vertical-align属性设置表格中文本的水平与垂直方向的对齐方式。

th, td{
    height: 30px;
    text-align: right;
    vertical-align: bottom;
}

(5) 表格内边距
如需控制表格中内容与边框的距离，可为td和th元素设置padding属性。

th, td{
    padding:15px;
}

第五章 CSS盒子模型

5.1. 盒子模型概述

CSS的盒子模型（Box Model）规定了元素框处理元素内容、内边距、边框和外边距的方式。

盒子模型

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。背景应用于由内容和内边距、边框组成的区域。在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

5.2. 内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。padding 属性定义元素边框与元素内容之间的空白区域，接受长度值或百分比值，但不允许使用负值。
如果希望div元素的各边都有10个像素的内边距，设置方式如下：

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        .content{
            background-color: lightcoral;
            width: 130px;
            padding: 20px;
        }
        </style>
    </head>
    <body>
        <div class="content">
            测试内边距演示内容
        </div>
    </body>
</html>

单边内边距的属性
可通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

padding-top
padding-right
padding-bottom
padding-left

5.3. 边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border属性允许你规定元素边框的样式、宽度和颜色。
(1) 边框样式
边框样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
使用border-style属性定义边框的样式：

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        .content{
            border-style: solid;
            width: 200px;
            padding: 20px;
        }
        </style>
    </head>
    <body>
        <div class="content">
            测试内边距演示内容
        </div>
    </body>
</html>

border-style样式

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

定义单边样式
如果您希望为元素框的某一个边设置边框样式，而不是设置所有4个边的边框样式，可以使用下面的单边边框样式属性：

border-top-style
border-right-style
border-bottom-style
border-left-style

(2) 边框宽度
通过border-width属性为边框指定宽度。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        .content{
            border-style: solid;
            border-width: 1px;
            width: 200px;
            padding: 20px;
        }
        </style>
    </head>
    <body>
        <div class="content">
            测试内边距演示内容
        </div>
    </body>
</html>

通过下列属性分别设置边框各边的宽度：

border-top-width
border-right-width
border-bottom-width
border-left-width

(3) 边框颜色
使用border-color属性设置边框颜色。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        .content{
            border-style: solid;
            border-width: 1px;
            border-color: red;
            width: 200px;
            padding: 20px;
        }
        </style>
    </head>
    <body>
        <div class="content">
            测试内边距演示内容
        </div>
    </body>
</html>

定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：

border-top-color
border-right-color
border-bottom-color
border-left-color

5.4. 外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        .content1{
            border-style: solid;
            border-width: 1px;
            border-color: red;
            width: 200px;
            padding: 20px;
            margin: 10px;
        }
        .content2{
            border-style: solid;
            border-width: 1px;
            border-color: red;
            width: 200px;
            padding: 20px;
            margin: 10px;
        }
        </style>
    </head>
    <body>
        <div class="content1">
            测试内边距演示内容1
        </div>
        <div class="content2">
            测试内边距演示内容2
        </div>
    </body>
</html>

值复制

p {
    margin: 0.5em 1em 0.5em 1em;
}

p {
    margin: 0.5em 1em;
}

通过值复制，您可以不必重复地键入这对数字，CSS定义了一些规则，允许为外边距指定少于4个值。规则如下：

如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin-top
margin-right
margin-bottom
margin-left

第六章 CSS定位

CSS有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中元素的位置由元素在HTML中的位置决定。块级元素从上到下一个接一个地排列，块级元素之间的垂直距离是由块级元素的垂直外边距计算出来。行内元素在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平元素称为行框（LineBox），行框的高度总是足以容纳它包含的所有行内框。

6.1. 相对定位

设置为相对定位的元素框会以元素的原始位置为起始点，然后通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        .content1{
            background-color: #B92C28;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        .content2{
            position: relative;
            left: 10px;
            top: 20px;
            background-color: #C8E5BC;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        .content3{
            background-color: #FBF069;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        </style>
    </head>
    <body>
        <div class="content1">
            内容1
        </div>
        <div class="content2">
            内容2
        </div>
        <div class="content3">
            内容3
        </div>
    </body>
</html>

定位前

定位后

6.2. 绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
        .content1{
            background-color: #B92C28;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        .content2{
            position: absolute;
            left: 10px;
            top: 20px;
            background-color: #C8E5BC;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        .content3{
            background-color: #FBF069;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        </style>
    </head>
    <body>
        <div class="content1">
            内容1
        </div>
        <div class="content2">
            内容2
        </div>
        <div class="content3">
            内容3
        </div>
    </body>
</html>

6.3. 浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。在CSS中，我们通过float属性实现元素的浮动。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            .news {
                background-color: lightyellow;
                border: solid 1px red;
                width: 900px;
            }
            .news img {
                float: left;
            }
            .news p {
                float: right;
            }
            .clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="news">
            ![](css/img/backgroud.jpg)
            <p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>
            <div class="clear"></div>
        </div>
    </body>
</html>

说明：在实际移动互联网项目中，页面的布局最常使用的是Bootstrap框架，而不用自己实现复杂的布局。

最后编辑于：2017.12.05 04:31:50

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,686评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,668评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,160评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,736评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,847评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,043评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,129评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,872评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,318评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,645评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,777评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,470评论 4赞 333
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,126评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,861评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,095评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,589评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,687评论 2赞 351