CSS格式化排版

文字排版 —— 字体

• 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性，比如body {font-family: "宋体";}
• 使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到文字时会转换成对应的 unicode 码（可以认为是世界上任意一种文字的特定编码）。再根据 HTML 里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体 @font-face，则加载对应字体文件）对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上
  • 阅读：聊一聊字体图标的实现原理
• font-family规定元素的字体系列。它可以把多个字体名称作为一个“回退”系统来保存，如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family属性的值是用于某个元素的字体族名称或及类族名称的一个优先表。浏览器会使用它可识别的第一个值
• 有两种类型的字体系列名称：
  • 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"、"宋体"
  • 通用字体系列：拥有相似外观的字体系列。比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
    • 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
• 默认字体系列：
  • chrome/opera："宋体"
  • firefox："微软雅黑"
  • safari/IE：Times,"宋体"
• 注意：
  • 使用逗号,分割每个值，并始终提供一个类族名称作为最后的选择
  • 不要设置不常用的字体，因为如果用户本地电脑上没有安装我们设置的字体，就会显示浏览器默认的字体。用户是否可以看到我们设置的字体样式取决于用户本地电脑上是否安装了我们所设置的字体。这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路
  • 现在一般网页喜欢设置“微软雅黑”字体，可以写为body{font-family: "微软雅黑";}或body{font-family: "Microsoft Yahei";}，第二种写法比第一种写法兼容性要更好。比如外国人打开网站，他的字体库中就没有“微软雅黑”
  • 在 CSS 中设置字体时，直接写字体中文或英文名称浏览器都能识别，直接写中文的情况下编码（GB2312、UTF-8等）不匹配时会产生乱码。保险的方式是将字体名称用 Unicode 来表示
    • 宋体 SimSun \5B8B\4F53；黑体 SimHei \9ED1\4F53；微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
    • 不用刻意去记忆，打开控制台 escape('微软雅黑')，把 %u 替换成 \，就能看到结果了

font-family: 字体系列1, 字体系列2 ……
//【注意】若浏览器识别第一个字体，则以第一个字体显示；如果不识别，则尝试下一个

font-family: arial, “宋体”, “\5FAE\8F6F\96C5\9ED1”;
//【注意】若写英文字体，一定要把英文字体写在前面，英文字体会影响到英文、数字和标点符号

font-family: Times, 'New Century Schoolbook', 'New York', serif;
//【注意】若字体名中有一个或多个空格，要添加引号。还有当文字是中文时，不加引号会被识别成多个元素

• chrome 默认字体大小 16px, 最小字体 12px。兼容小于12px字体的解决方案

文字排版 —— 字体尺寸、颜色

• 比如使用下面代码设置网页中文字的字体尺寸为12像素，字体颜色为灰色#666（灰色）：body {font-size:12px; color:#666}
• 字体尺寸font-size：

.p1 {font-size: xx-small/x-small/small/medium/large/x-large/xx-large;}  // 设置不同的尺寸，从 xx-small 到 xx-large，默认值 medium
.p2 {font-size: smaller;}  // 设置为比父元素更小的尺寸
.p3 {font-size: larger;}  // 设置为比父元素更大的尺寸
.p4 {font-size: 150%;}  // 设置为基于父元素的一个百分比值
.p5 {font-size: inherit;}  // 从父元素继承字体尺寸

• 颜色color：

// 文字颜色均设置为红色
.p1 {color: red;}  // 颜色名称
.p2 {color: #ff0000;}  // 十六进制的颜色
.p3 {color: rgb(255,0,0);}  // rgb代码的颜色
.p4 {color: rgba(255,0,0,1);}  // rgba代码的颜色，当我们将alpha改为0，则为全透明，此时等同于 .p4{color: transparent;} 
.p5 {color: inherit;}  // 从父元素继承颜色

// 应用于所有元素。有继承性

• 注意：
  • font-size实际上设置的是字体中字符框的高度，实际的字符字形可能比这些框高或矮（通常会矮）
  • 对于font-size，百分数相对于父元素来计算；对于line-height，百分数相对于元素的font-size来计算
  • color是可以继承的，可以把文档中的所有正常文本设置为某种颜色，如通过声明body {color:red;}设置为红色。这会把所有没有其他样式的文本变成红色（如锚<a>就不包含在内，锚有其自己的默认颜色和样式，会覆盖继承的样式）。但浏览器对表单类元素有预定义的颜色，使 body 颜色无法继承到表单类元素中

文字、段落排版

// 粗体
font-weight: bold;  
// 可以看到，如果我们想为文字设置粗体是有单独的CSS样式来实现的，不用为了实现粗体样式而使用h1-h6或strong标签了
// 可设置的属性值包括：normal（默认值，标准字符）、bold（粗体字符）、bolder（更粗的字符）、lighter（更细的字符）、100～900（由细到粗的字符，400==normal，700==bold）、inherit（从父元素继承字体的粗细）


// 斜体
font-style:italic;  
// 可设置的属性值包括：normal（默认值，标准字体样式）、italic（斜体的字体样式）、oblique（倾斜的字体样式）、inherit（从父元素继承字体样式）


// 小型大写字母的字体
font-variant:small-caps; 
// 可设置的属性值包括：normal（默认值，浏览器会显示一个标准的字体）、small-caps（浏览器会显示小型大写字母的字体，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小）、inherit（从父元素继承字体样式）


// 设置添加到文本的修饰
text-decoration: underline;  
// 可设置的属性值包括：none（默认，定义标准的文本）、underline（下边框，文本下的一条线）、overline（上边框，文本上的一条线）、line-througn（删除线，穿过文本的一条线）、blink（闪烁的文本）、inherit（从父元素继承 text-decoration 属性的值）
// 互不冲突的文本修饰线可出现多条。也就是可以写多个值
// 应用于：所有元素。无继承性
// 文本修饰属性无法继承，意味着子元素文本上的任何修饰线与父元素的颜色相同。子元素文本上的修饰线实际上是父元素的，只是正好“经过”而已
// 上划线、下划线也可以通过边框来设置（类似的）
border-bottom: 1px solid black;
border-top: 1px solid black; 


// text-transform：控制文本的大小写
text-transform: uppercase;
// 可设置的属性值包括：none（默认。定义带有小写字母和大写字母的标准的文本）、capitalize（文本中的每个单词以大写字母开头）、uppercase（定义仅有大写字母）、lowercase（定义无大写字母，仅有小写字母）、inherit
// 应用于：所有元素。有继承性


// 中文文字中的段前习惯空两个文字的空白（首行缩进），这个时候就可以考虑使用缩进，text-indent属性用于缩进元素中的首行文本
text-indent:2em;
// 2em的意思就是文字的两倍大小
// 可设置的属性值包括：lenght（定义固定的缩进，默认为：0）、%（percentage，定义基于父元素宽度的百分比的缩进）、inherit
// 应用于: 块级元素（包括 block 和 inline-block）。有继承性
// 注意：如果 text-indent 设置了一个负的极大值，那么里面的文字将会跑出容器，可达到隐藏文字的目的


// 设置如何处理文本中的空白符
// 空白符是指空格、制表符和回车；HTML默认已经把所有空白符合并成一个空格
white-space: pre;
// 可设置的属性值包括：normal（默认，合并空白符，允许自动换行）、nowrap（合并空白符，不允许自动换行，文本会在同一行上继续，直到遇到<br>标签位置）、pre（不合并空白符，不允许自动换行）、pre-wrap（不合并空白符，允许自动换行 ）、pre-line（合并空白符（不包括换行符），允许自动换行）
// 应用于所有元素。有继承性
// <pre> 元素默认带有样式 white-space: pre;
// IE7-浏览器不支持 pre-line 和 pre-wrap 这两个属性值


// 文本换行
/*
浏览器自身带有文本自动换行的功能，文本容器的右侧可以实现自动换行
对于英文来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的中间突然换行
对于中文来说，可以在任何一个文字后面换行，但浏览器碰到标点符号时，通常将标点符号以及其前一个文字作为一个整体进行换行
所以实际上，white-space 解决不了长单词或UTL地址的换行问题
*/

// 用来实现长单词或URL地址的自动换行
word-wrap: break-word;
// 可设置的属性值有：normal（默认。浏览器只在半角空格或连字符的地方进行换行）、break-word（截断单词换行，长单词从下一行开始）
// 应用于所有元素。有继承性
// 当 white-space 的值是 nowrap 或 pre 时，word-break 和 word-wrap 属性都失效
// word-wrap在标准中被改为 overflow-wrap，但由于兼容问题，一般还是使用word-wrap


// CSS3使用 word-break 属性来决定自动换行的处理方法。通过具体的属性设置，不仅可以让浏览器实现半角空格或连字符后面的换行，而且还可以让浏览器实现任意位置的换行
word-break: break-all;
// 可设置的属性值有：normal（默认。中文到边界上的汉字换行，英文从整个单词换行）、break-all（对于英文长单词来说，会截断单词换行，长单词占据当前行剩余空间。但对于中文的处理，各浏览器不一致）、keep-all（对于英文长文本不能换行，但对于中文的处理，各浏览器不一致）
/* 对于中文的处理：
break-all：
    firefox及safari：中文到边界上的汉字换行，且允许标点置于段首
    IE及chrome：中文到边界上的汉字换行，但不允许标点置于段首
keep-all：
    firefox：在空白符处换行
    IE及chrome：在空白符及标点处换行
    safari：不支持    
*/
// 应用于所有元素。有继承性
// 注意：移动端目前基本都不支持 keep-all 值　
// 当 word-break 值为 break-all 时，word-wrap 属性失效；否则两个属性都起作用
// 对于表单元格的长文本来说，使用 word-wrap 或 word-break 来强制换行需要设置 table-layout: fixed;
　

// 文本阴影。类似于盒子阴影，但是并没有阴影尺寸和内部阴影这两个值
// 语法：
text-shadow: none | (h-shadow v-shadow blur color)+;
// 举例：
text-shadow: 2px 2px 4px #000000;
// 可设置的属性值有：none（默认）、h-shadow（必需。水平阴影的位置，允许负值）、v-shadow（必需。垂直阴影的位置，允许负值）、blur（可选。模糊半径，不能为负值）、color（可选。阴影的颜色。默认和文本颜色一致）
// 应用于所有元素。无继承性
// 兼容性：IE9-浏览器不支持
// 多层阴影：
text-shadow: 1px 1px blue,5px 5px 5px red;
// 注意：不要加太多层阴影，会有性能问题


// 指定当文本溢出包含它的元素，应该发生什么
text-overflow：ellipsis;
// 可设置的属性值包括：clip（默认。不显示省略标记 ...，只是简单的裁切，相当于无效果）、ellipsis（文本溢出时显示省略标记 ...，省略标记插入的位置是最后一个字符）、string（使用给定的字符串来带代表被修剪的文本）
// 应用于：块级元素、替换元素、表单元格。无继承性
// 兼容性：该属性兼容性很好，兼容 IE6+的主流浏览器及移动端iOS和Android
// 通常与 overflow:hidden; 和 white-space:nowrap; 联用
// 举例：鼠标悬停显示整个文本
<style type="text/css">
div.hidden{
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: blue;
}

div.hidden:hover{
    overflow: visible;
    color: red;
}
</style>


// line-height：行高是指文本行基线之间的距离。行高 line-height 实际上只影响行内元素和其他行内内容，而不会直接影响块级元素
// 也可以为一个块级元素设置 line-height，但这个值只是应用到块级元素的内联内容时才会有影响。在块级元素上声明 line-height 会为该块级元素的内容设置一个最小行框高度
line-height: 1.5em;
// 可设置的属性值包括：normal（默认。由浏览器来设置合理的行间距）、number（设置数字，此数字会与当前的字体尺寸相乘来设置行间距）、length（设置固定的行间距）、%（基于当前字体尺寸的百分比行间距）、inherit
// 应用于：所有元素。有继承性
// 注意：
    <style type="text/css">
        .a { line-height: 3; font-size: 30px; background-color: green; width: 1000px;}
        .a p { font-size:15px; }
        /* 对比组 */
        .b p { line-height: 300%; font-size: 30px; background-color: green; width: 1000px; }
        .b p { font-size: 15px; }
    </style>
<body>
<div class="a">
    <p>先在父元素中设置 font-size，然后再直接改变 p 标签的 font-fize </p>
</div>
<div class="b">
    <p>前后改变的都是p标签的 font-size </p>
</div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
// 通过百分比设置的行高
var div = divs[0];
var p = div.firstElementChild;
console.log(window.getComputedStyle(p).lineHeight);   // 输出 90px

var div1 = divs[1];
var p1 = div1.firstElementChild;
console.log(window.getComputedStyle(p1).lineHeight);   // 输出 45px
// 百分比设置行高
// 通过父元素设置 font-size，然后再改变 p 标签的 font-size，行高并未发生改变，它是先计算行高再继承
// 直接设置 p 标签的 font-size，当改变字体大小后，行高也会随着改变，这里为 45 px

// em 设置行高
// 同百分比设置行高

// 数字设置行高   比如 .a { line-height: 3; }
// 行高均发生了改变，变为 45px，不事先计算直接继承，继承之后最后再计算

// 如果是直接设置子元素字体大小，无论在子元素中行高是通过哪种方式设置的，行高随着 font-size 的变化而变化
// 如果是先在父元素中设置了行高、字体大小，然后再在子元素中改变字体大小，百分比 以及 em 设置的行高都不会发生改变，它们是先计算行高再继承
// 而通过数字设置的行高不同，它会随着子元素字体大小的变化而变化，它 不事先计算直接继承，继承之后再计算
</script>
</body>


// 中文字间隔、字母间隔设置
letter-spacing:20px;
// 上面这个样式使用在英文单词时，是设置字母与字母之间的间距
// 可设置的属性值包括：normal（默认为 0。规定字符间没有额外的空间）、length（定义字符间的固定空间（允许使用负值））、inherti
// 应用于：所有元素。有继承性


// 英文单词之间的间距
word-spacing:20px;
// 可设置的属性值包括：normal（默认为0。定义单词间的标准空间）、length（定义单词间的固定空间（允许使用负值））、inherit
// 应用于：所有元素。有继承性
// 注意：单词之间用空格分开，单词之间的间距 = word-spacing + 空格大小

深入理解 line-height 和 vertical-align

• 单行文本水平垂直居中

    <style type="text/css">
    div{
        width: 100px;

        /*height: 200px;*/
        line-height: 200px;
        /* 好多地方都写着单行文本垂直居中是将高度和行高设置成一样的值，但高度其实是没有必要设置的。仅仅设置行高就可以，文字在一行中本身就是垂直居中显示的 */

        text-align: center;
        background-color: lightblue;
    }
    </style>
</head>
<body>
    <div>测试文字</div>
</body>

• 图片的垂直居中

    <style type="text/css">
    div{
        line-height: 200px;
        text-align: center;

        /* 设置块级元素的font-size为0，则可以做到图片完全垂直居中 */
        font-size: 0;
        /* 局限性：块级元素里面无法放置文本 */
            
        background-color: lightblue;
    }

    /* 由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显 */
    img{
        width: 100px;
        height: 100px;
        vertical-align: middle;
    }
    </style>
</head>
<body>
    <div>
        <\img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198157536,2660563650&fm=117&gp=0.jpg" alt="girl">
    </div>
    <!-- IE7浏览器在写块级元素包含行内元素时一定要写成换行写法，而不要写在一行 -->
    <!-- 
    正确1：
    <div>
        <\img src="#" alt="#">
    </div>

    正确2：
    <div><\img src="#" alt="#">   这里要折行或空格 
    </div>

    错误：
    <div><\img src="#" alt="#"></div>
     -->
</body>

• 多行文本水平垂直居中

    <style type="text/css">
    div{
        height: 200px;
        text-align: center;
        background-color: pink;     
    }

    span{
        display: inline-block;
        width: 100px;
        line-height: 20px;
        vertical-align: middle;
    }   

    i{
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    </style>
</head>
<body>
    <div>
        <i></i><span>我是特别长的特别长的特别长的特别长的多行文字</span>
    </div>  
</body>

text-shadow 的应用

    <style type="text/css">
    /* 通用设置 */
    div{
        width: 400px;
        margin-top: 10px;
        font: 30px/1.5em "宋体";
        text-align: center;
        border: 1px solid #ccc;
    }

    /* 文字简单阴影效果 */
    div:nth-child(1){
        text-shadow: 5px 5px 5px #60f;
    }

    /* 文字毛玻璃效果 */
    div:nth-child(2){
        box-shadow: 1px 1px 2px 2px #ccc;
        text-shadow: 0 0 10px black;
        color: rgba(0,0,0,0);
    }

    /* 文字外阴影效果 */
    div:nth-child(3){
        background-color: #666;
        color: #fff;
        text-shadow: 0 0 10px red;
    }

    /* 文字辉光效果 */
    div:nth-child(4){
        background-color: #666;
        color: #fff;    
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
    }

    /* 文字雕刻效果 */
    div:nth-child(5){
        background-color: #666;
        color: #000;
        text-shadow: 0 1px 1px #fff;
        font-weight: bold;  
    }

    /* 文字浮雕效果 */
    div:nth-child(6){
        background-color: #666;
        color: #fff;
        text-shadow:  -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
    }

    /* 文字空心效果 */
    div:nth-child(7){
        color: #fff;
        text-shadow: 0px 0px 1px black;
    }

    /* 文字3D效果 */
    div:nth-child(8){
        background-color: #666;
        color: #fff;
        text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8);
    }

    /* 文字火焰效果 */
    div:nth-child(9){
        font-weight: bold;
        color: white;
        text-shadow: 0 0 4px #fefcc9, 2px -2px 6px #feec85, -4px -4px 8px #ffae34, 4px -8px 10px #ec760c, -4px -12px 12px #cd4606, 0 -16px 14px #973716, 2px -18px 18px #451b0e;
    }
    </style>
</head>
<body>
    <div>文字简单阴影效果</div>
    <div>文字毛玻璃效果</div>
    <div>文字外阴影效果</div>
    <div>文字辉光效果</div>
    <div>文字雕刻效果</div>
    <div>文字浮雕效果</div>
    <div>文字空心效果</div>
    <div>文字3D效果</div>
    <div>文字火焰效果</div>
</body>

CSS文本方向

• 一般地，正常网页文本方向都是从上到下，从左到右。实际上，有多种设置文本方向的属性

// text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐
// 比如：text-align: center; 能让 block-level 的元素中的行内元素，替换元素和 inline-block 元素居中
text-align: center/left/right/justify/inherit;      // 默认值：left
// 关于值 justify，它会带来自己的一些问题，它可以使文本的两端都对齐，在两端对齐文本中，文本行的左右两端都放在父元素的内边界上，在打印领域很常见，但在CSS中，是要由用户代理（而不是CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间
// 应用于：block-level元素上（包括了block和inline-block）。有继承性
// 对于IE7-浏览器来说，使用 text-align 不仅会改变文本的水平对齐方式，也会改变后代块级元素的水平对齐方式


// dir：dir是HTML的全局属性，专门用来设置文本的方向
// 值：ltr（默认） | rtl | auto


// direction：指定文本方向／书写方向
direction: rtl;
// 可设置的属性值包括：ltr（默认。文本方向从左到右）、rtl（文本方向从右到左）、inherit
// 应用于所有元素。有继承性
// 想让 direction 样式在 inline 元素上起作用，需要 unicode-bidi 样式的相关设置
// 设置direction样式时，HTML元素的全局属性dir无效


// 在亚洲，尤其像中国这样的东亚国家，存在文字的排版不是水平式的，而是垂直的，例如中国的古诗古文
// writing-mode 原先是IE的私有属性，原先的属性是 lr-tb（左-右，上-下）和 tb-rl（上-下，右-左）。其中 writing-mode: tb-rl; 常用于触发 haslayout
// 但W3C将 writing-mode 属性标准化后，其属性值也发生了变化
// writing-mode：可以实现文字的竖向呈现
writing-mode: vertical-rl;
// 可设置的属性值包括：horizontal-tb（默认。水平方向，元素是从上往下堆叠的）、vertical-rl（垂直方向，阅读的顺序是从右往左）、vertical-lr（垂直方向，阅读的顺序是从左往右）、inherit
// 应用于：除表格类元素之外的所有元素。有继承性
// safari和移动端iOS、android需要添加 -webkit- 前缀；IE浏览器只支持自己的私有属性值
// 设置 writing-mode 时，text-align 属性将失效


// unicode-bidi：一种更健壮的处理文本方向的方式
// 与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言
div{
    direction: rtl;
    unicode-bidi: bidi-override;
}
// 可设置的属性值包括：normal（默认。不使用附加的嵌入层面）、embed（创建一个附加的嵌入层面）、bidi-override（创建一个附加的嵌入层面。重新排序取决于 direction 属性）、initial、inherit、isolate、isolate-override、plaintext
// isolate、isolate-override、plaintext是实验属性值，几乎没有浏览器支持
// 应用于所有元素。无继承性
// unicode-bidi 属性应用于 flex弹性盒模型上有问题，除非伸缩容器只包含一个匿名伸缩项目时有效，其余情况都无效
// 只有当 dir 为 rtl 或 direction 为 rtl 时，unicode-bidi 属性才起作用

光标 cursor

• 在浏览器中，光标对于提供交互反馈很有用。通过在不同的场景中改变光标，就能赋予其不同的含义

// cursor：定义了鼠标指针放在一个元素边界范围内时所用的光标形状
<span style="cursor:url(xx.cur), pointer;">pointer</span><br>
// 应用于所有元素。有继承性

// CSS2提供了相对较少的选择：
/* 
url：自定义光标的URL。所有浏览器都支持使用后缀名为 .cur 的文件，chrome、firefox、safari还支持使用普通图片制作光标。注意：使用URL自定义样式，后面必须跟有一个逗号和某个通用关键字
default：默认光标，通常是一个箭头
auto：浏览器自动识别的光标
crosshair ：十字线
pointer：手型指针
move：移动指针。通常为十字箭头
e-resize：向东移动指针
ne-resize：向东北移动指针
nw-resize：向西北移动指针
n-resize：向北移动指针
se-resize：向东南移动指针
sw-resize：向西南移动指针
s-resize：向南移动指针
w-resize：向西移动指针
text：文本指针
wait：指示程序正忙
help：帮助指针，通常为问号或气球
*/


// CSS3增加了更多的 cursor 的样式值（注意：所有拓展样式 IE7-浏览器都不支持）：
/*
none (not IE8, Safari)：不显示光标
context-menu (not Safari,Firefox,Chrome)：菜单光标
cell (not Safari)：中空十字线
alias (not Safari)：别名光标，由下至上向左弯的箭头
copy (not IE,Safari)：一个箭头，箭头右下角有个绿色背景的加号
grab (not IE,Safari,Chrome)：一个箭头，箭头右下角有个绿色背景的加号
grabbing (not IE,Safari,Chrome)：一个箭头，箭头右下角有个绿色背景的加号
zoom-in (not IE,Safari)：带加号的放大镜
zoom-out (not IE,Safari)：带减号的放大镜
vertical-text：竖向的文字光标
no-drop：一个箭头，箭头右下角有个灰色显示禁止含义的标志
not-allowed
all-scroll：十字箭头
ew-resize：横向的两端箭头
ns-resize：竖向的两端尖头
nesw-resize：西北到东南方向的两端箭头
nwse-resize：东北到西南方向的两端箭头
col-resize：横向的两端箭头，箭头中间有条竖线
row-resize：竖向的两端箭头，箭头中间有条横线
*/

背景 background

• background：背景缩写属性可以在一个声明中设置所有的背景属性

background : [background-image] | [background-color] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-origin] | [background-clip],*

// 可以把上面的缩写拆解成以下形式：
background-image: url1, url2, ..., urlN;
background-repeat : repeat1, repeat2, ..., repeatN; 
backround-position : position1, position2, ..., positionN; 
background-size : size1, size2, ..., sizeN;
background-attachment : attachment1, attachment2, ..., attachmentN;
background-clip : clip1, clip2, ..., clipN;
background-origin : origin1, origin2, ..., originN; 
background-color : color;


//  background多背景（IE8-浏览器不支持）
/*
在使用CSS3之前，每个容器只能指定一张背景图像，因此每当需要增加一张背景图像时，必须至少添加一个容器来容纳它。
使用伪元素显示附加图片其实就是嵌套HTML标签实现多背景图像的变身，通过 :after 和 :before 等伪元素生成附加元素来放置背景图像，表面上比直接嵌套HTML标签更干净一些，但其实是换汤不换药。
通过CSS3的多背景属性，HTML标记就不需要任何修改，在CSS的 background-image 或者 background 属性中列出需要使用的所有背景图像，用逗号分隔开。而且每张图片都具有 background 中的属性
CSS3多背景有层次之分，按照浏览器中显示时图像叠放的顺序从上到下指定，最先声明的背景图像将会居于最上层，最后指定的背景图像将置于最底层
除了背景颜色之外，其他的属性都可以设置多个属性值，前提是元素有多个背景图像存在。
对于不兼容多背景的浏览器来说，多背景属性写在单一背景属性的后面，而且还要确保这张单一背景图像确实可用。这是处理兼容CSS3多背景特性兼容的常用方案。
*/

• 注意：
  • 用逗号隔开每组 background 的缩写值
  • 如果有 size 值，需要紧跟 position 并且用/隔开
  • 如果有多个背景图片，而其它属性只有一个（例如 background-repead 只有一个），表示所有背景图片应用该属性值
  • background-color 只能设置一个
  • 若 background 在 background-origin 和 background-clip 中仅存在一个值，则该值为 background-clip；若存在两个值，则前面为 background-origin，后面为 background-clip
• 具体属性值：

// 设置一个元素的背景颜色
background-color: #ccc;
// 可设置的属性值包括：color（指定背景颜色）、transparent（默认值。透明）、inherit（从父元素继承背景颜色）
// 如果一个元素没有指定的颜色，那么背景就应当是透明的，这样其祖先元素的背景才能可见
// 应用于：所有元素。无继承性
// 注意：元素的背景是元素的总大小，包括填充和边界（但不包括边距）


// 设置一个或多个要使用的背景图像
background-image: url('img_flwr.gif'), url('../images/login_window_logo.png');   // 第二张使用的背景图路径为：此HTML文档路径/images/login_window_logo.png
// 可设置的属性值包括：url（图像的URL，双引号、单引号、无引号都可以，先加入的图像在上层，后加入的依次在下）、none（默认值，无图像北京）、inherit（指定背景图像应该从父元素继承）
// 应用于所有元素。无继承性
// 如果出于某种原因无法加载图像，背景色会取代图像。所以为了保险，总是设置背景色


// 指定如何重复背景图像
background-repeat: repeat-x, no-repeat;  // 用逗号 , 分开，对应相应的背景图片
background-repeat: repeat-x no-repeat, no-repeat;  // 用空格分开，对应水平方向、垂直方向的图像重复方式，这里还是对应两张图片
// 可设置的属性值包括：repeat（默认值，背景图像将向垂直和水平方向重复）、repeat-x（只有水平方向重复）、repeat-y（只有垂直方向重复）、no-repeat（background-image不会重复，只出现一次）、space（平铺的时候留有空格）、round（平铺的同时伸缩）、inherit（指定background-repea属性设置应该从父元素继承）
// space 和 round 这两个CSS3新增属性值 firefox、safari和IE9-浏览器不支持
// 应用于所有元素。无继承性


// 设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment: fixed, scroll;  // 多张背景图可以以逗号 , 分开，对应分别的图片
/* 可设置的属性值包括：
scroll（默认值。背景图片会随着页面其余部分的滚动而移动。但如果它自己是可以滚动的元素，背景图不会随元素内容的滚动而滚动）、
fixed（原图像不会随文档滚动，且原图像的放置由可视区的大小确定，而不是由包含该图像的元素的大小 或在可视区中的位置决定。在浏览器中，随着用户调整浏览器窗口的大小，可视区可能会改变。这会导致背景的原图像随着窗口大小的改变移动位置。所以某种意义上说，图像并不是固定的，它只是在可视区大小不改变的情况下保持固定。注意：IE6-浏览器无法处理非 body 元素上的固定关系）、
local（背景图片会随着页面其余部分的滚动而移动。但如果它自己是可以滚动的元素，背景图会随元素内容的滚动而滚动。local属性值IE8-浏览器不支持）、
inherit
*/


// 设置背景图像的起始位置
background-position: center;  // 多张背景图可以以逗号 , 分开，对应分别的图片，默认值 0% 0%
background-position: right 10px top 20px;
// 可设置的属性值包括：left/center/right top/center/bottom（如果仅指定一个关键字，其他值将会是“center”）、x% y%（第一个值是水平位置，第二个值是垂直。左上角是0％ 0％。右下角是100％ 100％。如果仅指定了一个值，其他值将是50％。默认值为：0％ 0％）、xpos ypos（第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px 0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。我们可以混合使用 ％ 和 positions）、inherit
// 应用于所有元素。无继承性
// 可应用于 sprite


// 背景原点属性主要用来决定背景定位属性的参考原点，即决定背景图片定位的起点
// 在默认情况下，背景图片的背景定位属性总是以元素左上角为坐标原点对背景图片进行背景定位。而背景原点属性可以根据自己的需求来改变背景图片的背景定位起始位置
background-origin: content-box;
// 可设置的属性值包括：padding-box（默认值。决定背景定位起始位置从padding的外边缘开始显示背景图片）、border-box（决定背景定位起始位置从border的外边缘开始显示背景图片）、content-box（决定背景定位起始位置从content的外边缘开始显示背景图片）
// 注意：如果将 background-attachment 设置为 fixed ，background-origin 将不起任何作用


// 背景裁切属性用来定义背景图像的裁剪区域。同背景原点的属性有几分相似
background-clip: content-box;
// 可设置的属性值包括：padding-box背景绘制在填充方框内、border-box（默认值，背景绘制在边框方框内）、content-box（背景绘制在内容方框内）
// 兼容性：IE8-浏览器不支持
// 在 webkit 内核下支持 text 属性
-webkit-background-clip: text;
// 配合 -webkit-text-fill-color: transparent; 的属性可以使文字颜色呈现背景图像的效果


// 背景尺寸
background-size: 80px 60px;  
/* 可设置的属性值包括：
auto（默认值。将保持背景图片的原始高度和宽度）、
lenght（设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个值相当于auto，也就是指定了高度。在这种情况下，auto值设定之后能够让背景图片的高度自动地按照比例缩放）、
percentage（取百分比 %，相对于元素的宽度和 padding 的总和来计算。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个值相当于auto）、
cover（此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。但这种方法会致使背景图片失真。常与 background-position: center; 配合来制作满屏背景效果。缺点是需要制作一张足够大的背景图片，否则在较大分辨率浏览器下会使背景图片失真）、
contain（此时会保持图像的纵横比并将图像缩放成适合背景定位区域的最大大小）
*/
// 兼容性：IE8-浏览器不支持
// 背景尺寸的特性有如下用途:在流体布局或者响应式布局中，确保背景图像能够始终适配容器大小；对于平铺的重复性背景图像，可以确保背景图像不会有截断效果；在流体布局中缩放背景图像来伪造出多列分栏效果；解决Retina屏幕双倍像素下背景图像模糊问题；使用链接或者列表元素的背景图像能和文本一起进行缩放

CSS sprite 是什么？

• CSS sprite 又称之为精灵图
• 原理：把多个小icon合成一个大的图片，使用的时候，元素以这张合成后的大图为背景，通过设置 background-position 的属性来获取指定 icon
• 优点：合并原来图片的请求，减少http的性能消耗。 缺点：CSS sprite不能太大，不然下载图片的时间会过长
• 应用：
  • 制作一张网页的图标
  • 制作动画
• 使用 CSS sprite 可以减少网络请求，提高网页加载性能

关于图片的一些属性：filter

• filter（滤镜）属性：默认值为none，定义了元素（通常是<img>）的可视效果（例如模糊、饱和度）

渐变 gradient

线性渐变

• 渐变实际上是两种或多种颜色之间的平滑过渡。而线性渐变是多种颜色沿着一条直线（称为渐变线）过渡。渐变的实现由两部分组成：渐变线和色标。渐变线用来控制发生渐变的方向；色标包含一个颜色值和一个位置，用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变，通过确定多个色标可以制作多色渐变效果

定义

// 渐变（Gradients）：在两个或多个指定的颜色之间显示平稳的过渡
// CSS3定义了两种类型的渐变：线性渐变（Linear Gradients，向下／向上／向左／向右／对角方向／自定义角度）、径向渐变（Radial Gradients，由它们的中心定义）：linear-gradient、radial-gradient、repeating-linear-gradient、repeating-radial-gradient
// 线性渐变：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
// 实例：
background: linear-gradient(red, blue);   // 由上到下（默认值）的线性渐变
background: linear-gradient(to right, red, purple, blue 50%);    // 从左到右，蓝色出现在50%的位置
background: linear-gradient(to bottom right, red, blue);   // 从左上角到右下角（写成 to right bottom也可以）
background: linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));  // 从左到右（0度的时候从下往上，然后顺时针转动我们设定的角度），起点是完全透明，慢慢过渡到完全不透明的红色

重复渐变

• 重复渐变可以实现线性渐变的重复效果，使色标在渐变线方向上无限重复，实现一些特殊的效果
• 注意：只有当首尾两颜色位置不在0%或100%时，重复渐变才生效

// 纸张效果
    <style type="text/css">
    div{
        width: 400px;
        height: 600px;
        border: 1px solid #ccc;
        margin: 50px;
        text-indent: 2em;
        font: 25px/40px '宋体';
        background-image: repeating-linear-gradient(#f9f9f9, #f9f9f9 6.5%, #ccc 7%);
    }
    </style>
</head>
<body>
<div>你好世界你好世界你好世界你好世界你好世界你好世界你好世界</div>
</body>

多背景

• 使用多背景属性，利用带有透明度的渐变颜色给图片添加渐变的透明效果

    <style type="text/css">
    div{
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
        margin: 50px;
        background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.6)), url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif');
    }
    </style>
</head>
<body>
<div></div>
</body>

应用场景

• 在CSS样式中，渐变相当于背景图片，在理论上可在任何使用url()值的地方采用。比如最常见的 background-image、list-style-image以及border-image。但目前为止，仅在背景图片中得到完美的支持

    <style type="text/css">
    div{
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
        margin: 50px;
        border-image:  linear-gradient(black,green) 1/10px;
        /* 渐变框的大小由borer-width决定，safari浏览器始终实现的都是带有fill参数的表现 */

        background-image: linear-gradient(pink, lightblue, lightgreen);
        /* 渐变框的大小由background-size决定，默认是padding box */
    }

    ul{
        /* 渐变框的大小由 font-size 决定，默认是 1em */
        /* firefox不支持在 list-style-image 中设置 */
        list-style-image: linear-gradient(red, blue);
        font-size: 50px;
    }
    </style>
</head>
<body>
<div></div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>

IE兼容

// IE9-浏览器并不支持该属性，但可以使用IE准专有的滤镜语法来实现兼容
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#color', endColorstr='#color');
/*
GradientType代表渐变线方向，0为垂直(默认)，1为水平
#color代表色标，格式是#aarrggbb，其中aa为透明度，rrggbb为rgb模式的颜色
startColorstr的默认值是#ff0000ff 
endColorstr的默认值是#ff000000
*/
// 由于IE滤镜只支持首尾两个位置，且方向只可以为垂直和水平，所以有很大的局限性
// 举例：
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff0000ff', endColorstr='#ffff00ff');

径向渐变

• 径向渐变，实际上就是椭圆渐变，圆只是一种特殊的椭圆而已。径向渐变从圆心点以椭圆形状向外扩散，渐变的实现由两部分组成：椭圆和色标。椭圆部分用来控制径向渐变的位置、大小和形状等。而色标部分包含一个颜色值和一个位置，用来控制渐变的颜色变化

定义

// 径向渐变：CSS3 径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变
background: radial-gradient(position, shape size, start-color, ..., stop-color);
// 可设置的属性值包括：position（定义圆心位置，可选。默认值为 center。如果提供 2 个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为 50%，即 center。跟 background-position 属性值相似）、shape size（可选。circle 圆形、ellipse 椭圆形，默认值）

重复渐变

• 重复渐变可以实现径向渐变的重复效果，使色标在椭圆方向上无限重复，实现一些特殊的效果
• 注意：只有当首尾两颜色位置不在0%或100%时，重复渐变才生效

    <style type="text/css">
    div{
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
        margin: 50px;
        background-image:repeating-radial-gradient(red 30%, blue 40%)
    }
    </style>
</head>
<body>
<div></div>
</body>

列表 list

// list-style：简写属性，可设置所有的列表属性。默认值为 disc outside none
list-style: none;        // 可以不设置其中的某个值，未设置的属性值会使用其默认值
// 可设置的属性值包括：list-style-type list-style-position list-style-image（按顺序设置）、initial、inherit


// list-style-type：设置列表项标记的类型。默认值为 disc
list-style-type: circle;     // 标记是空心圆
// 可设置的属性值包括：none（无标记）、disc（默认值。实心圆）、circle（空心圆）、square（实心方块）、decimal（数字）、decimal-leading-zero（0开头的数字标记，如01、02、03等）、……


// list-style-position：设置在何处放置列表项标记。默认值为 outside
list-style-position: inside;     
// 可设置的属性值包括：inside（列表项标记放置在文本以内，且环绕文本根据标记对齐）、outside（默认值。保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐）、inherit


// list-style-image：使用图像来替换列表项的标记。默认值为 none
list-style-image: url(http://www.easyicon.net/api/resizeApi.php?id=1199364&size=16);
// 可设置的属性值包括：URL（图像的路径）、none（默认。无图形被显示）、inherit
// 当 list-style-image 不为 none 时，list-style-type 值将被覆盖
// 通常提供一个作为“后路”的标志类型，应付图像未能加载的意外情况

表格 table

// CSS实际上有两种截然不同的边框模型。按布局术语来说，如果单元格相互之间是分隔的，是分隔边框模型在起作用；另一种是合并边框模型，单元格边框会相互合并
// border-collapse：设置表格的边框是否被合并为一个单一的边框，还是像在标准的HTML中那样分开显示
// 可设置的属性值包括：collapse（如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性）、separate（默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性）、inherit（规定应该从父元素继承 border-collapse 属性的值）
border-collapse: collapse;      // 为表格设置合并边框
// 在分隔边框模型中，不能为行、行组、列和列组设置边框
// 在合并边框模型中，表格无法设置内边距 padding，且单元格边框之间也没有间距。单元格之间的边框会在单元格间的假想表格线上居中
// 在合并边框模型中，表格宽度只包含表格边框的一半


// border-spacing：设置相邻单元格的边框间的距离（仅用于“边框分离”模式 border-collapse: separate;）。无指定的默认值
// 可设置的属性值包括：length length（规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距）、inherit
border-spacing:10px 50px;


// empty-cells：设置是否显示表格中的空单元格（仅用于“边框分离”模式 border-collapse: separate;）
// 可设置的属性值包括：hide（不在空单元格周围绘制边框）、show（默认值。在空单元格周围绘制边框）、inherit
empty-cells: hide;

// caption-side：指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素
// 可设置的属性值包括：top（默认值。把表格标题定位在表格之上）、bottom（把表格标题定位在表格之下）、inherit
caption-side：bottom；


// table-layout：用来显示表格单元格、行、列的算法规则
// 可设置的属性值包括：auto（默认值。列宽度由单元格内容设定）、fixed（列宽由表格宽度和列宽度设定）、inherit
table-layout: fixed;

• 表格布局table-layout：
  • 固定表格布局fixed
    • 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局
    • 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关
    • 通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格
  • 自动表格布局auto
    • 在自动表格布局中，列的宽度是由单元格中没有折行的最宽的内容设定的
    • 此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中的所有的内容
  • 该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表

CSS计数器

• 我们对计数器已经不陌生了，有序列表中的列表项标志就是计数器

创建计数器

• 创建计数器的基础包括两个方面，一是能重置计数器的起点，二是能将其递增一定的量

// counter-reset
counter-reset: none; （默认）
counter-reset: <identifier><integer>
// <identifier> 是计数器标识符，是创作人员自己起的一个名字
// <integer> 是重置的数字。如果不设置 <integer> ，则默认重置为 0
// 举例：
counter-reset: c1 4;    // 表示将c1的计数器重置为4
counter-reset: c1 4 c2 0 c3 -5; // 表示将c1重置为4,将c2重置为0,将c3重置为-5
couter-reset: c1;   // 将c1重置为0


// counter-increment
counter-increment: none;  （默认）
counter-increment: <identifier><integer>
// <identifier> 是计数器标识符，是创作人员自己起的一个名字
// <integer> 是递增的数字。如果不设置 <integer>，则默认递增为 1
// 举例：
counter-increment: c1 4;    // 表示将c1计数器的递增设为4    
counter-increment: c1 4 c2 0 c3 -5; //表示将c1递增设为4,将c2递增设为0,将c3递增设为-5    
couter-increment: c1;   // 将c1计数器的递增设为1

使用计时器

• 具体使用计数器需要结合使用content属性和counter()函数

// counter() 函数
/*
counter() 函数接受两个参数，而且两参数之间用逗号 , 来分隔
第一个参数是计数器标识符，第二个参数设置计数器风格（可省略），与列表中 list-style-type 值相同
同样的，可以使用多个 counter() 函数
*/
content: counter(c1, upper-roman);  //表示使用大写罗马字母格式的计数器c1 

DOMO

• 层级目录演示：

    <style type="text/css">
    body,h2,h3,p{
        margin: 0;
    }    

    #oShow{
        counter-reset: c2;
    }

    #oShow h2{
        counter-reset: c3 cp;
        counter-increment: c2;
    }

    #oShow h3{
        counter-reset: cp;
        counter-increment: c3;    
        text-indent: 2em;
    }

    #oShow p{
        counter-increment: cp; 
        text-indent: 4em;   
    }

    #oShow h2:before{
        content: counter(c2);
    }

    #oShow h3:before{
        content: counter(c2) '.' counter(c3);
    }

    #oShow p:before{
        content: counter(c2) '.'  counter(c3)  '.' counter(cp);    
    }
    </style>
</head>
<body>
<div id="oShow">
    <h2>第一章</h2>
        <h3>第一部分</h3>
            <p>第一节</p>
            <p>第二节</p>
        <h3>第二部分</h3>
            <p>第一节</p>                
    <h2>第二章</h2>
        <h3>第一部分</h3>
            <p>第一节</p>
            <p>第二节</p>
        <h3>第二部分</h3>
        <p>第一节</p>                
    <h2>第三章</h2>
        <h3>第一部分</h3>
            <p>第一节</p>
            <p>第二节</p>
        <h3>第二部分</h3>
            <p>第一节</p>                
</div>    
</body>