HTML5和CSS3基础教程(第8版）-读书笔记(3)

第11章 用CSS 进行布局

网站设计主要有两大类型：固定宽度和响应式。

对于固定（fixed）布局，整个页面和每一栏都有基于像素的宽度。顾名思义，不管是使用移动电话和平板电脑等较小的设备查看页面，仍是使用桌面浏览器并对窗口进行缩小，它的宽度都不会改变。

响应式 页面也称为 流式（fluid 或liquid）页面，它使用百分数定义宽度，容许页面随显示环境的改变进行放大或缩小。除了具备流动栏，响应式页面还能够根据屏幕尺寸以特定方式调整其设计。

11.5　盒模型

CSS 处理网页时，它认为每一个元素都包含在一个不可见的盒子里。这就是盒模型，这里的盒子由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。

 

关于 CSS 的 width 属性对元素所显示宽度的影响，有两种处理方式。（不包含任何将其与邻近元素隔开的外边距。）

（1）默认的处理方式实际上有些有悖于常理。浏览器中元素的宽度与其width 属性值并不一致（除非它没有内边距和边框）。CSS 中的宽度指示的是内边距里内容区域的宽度。而元素在浏览器中的显示宽度则是内容宽度、左右内边距和左右边框的总和。显示高度与之相似，只不过计算的是上下内边距和边框值。

 

（2）另外一种方式则更为直观。使用这种方式的话，元素的显示宽度就等于width 属性的值。内容宽度、内边距和边框都包含在里面。height属性与之相似。要使用这种模式，仅需对元素设置 box-sizing: border-box;。

 

11.6　  控制元素的显示类型和可见性

默认状况下，元素会按照它们在HTML 中自上而下出现的次序显示（这称为文档流，document flow），并在每一个非行内元素的开头和结尾处换行。

1. 指定元素的显示方式display:

• block：让元素显示为块级元素；
• inline：让元素显示为行内元素；
• inline-block，让元素显示为行内元素，同时具备块级元素的特征，便可觉得元素的四条边设置width、height、margin、padding等属性；
• none，隐藏元素，并将其从文档流中彻底移除。

设置为 display: inline; 的元素不接受 padding 的设置，但 padding-top 和padding-bottom会越界进入相邻元素的区域，而不是局限于该元素自己的空间

2. 控制元素可见性

visibility 属性的主要目的是控制元素是否可见。与 display 属性不一样的是，使用visibility 隐藏元素时，元素及其内容应该出现的位置会留下一片空白区域。隐藏元素的空白区域仍然会在文档流中占据位置。

• hidden：让元素不可见，但在文档流中保留它；
• visible：让元素显示出来。

11.7　设置元素的高度和宽度

       能够为不少元素设置高度和宽度，如分块内容、段落、列表项、div、图像、video、表单元素等。

同时，能够为短语内容元素（默认以行 内方式显示）设置 display: block; 或display: inline-block;，再对它们设置宽度或高度。、

 

设置元素高度或宽度：

(1) 输入 width: w，其中的w 是元素内容区域的宽度，能够表示为长度（带单位，如 px、em 等）或父元素的百分数。或者使用auto 让浏览器计算宽度（这是默认值）。

(2) 输入 height: h，其中的h 是元素内容区域的高度，只能表示为长度（带单位，如 px、em 等）。或者使用 auto 让浏览器计算高度（这是默认值）。

还有min-width、min-height、 max-width 和 max-height 属性用来设置最小和最大尺寸。

width 和 height 不是继承的。

 若是不显式设置宽度和高度，浏览器就会使用 auto。对于大多数默认显示为块级元素的元素，width 的 auto 值是由包含块的宽度减去元素的内边距、边框和外边距计算出来的。

11.8　在元素周围添加内边距

       内边距就是元素内容周围、边框之内的空间。能够改变内边距的厚度，不能改变它的颜色或纹理。显示在内边距区域的颜色和纹理是元素的背景，是经过background、background-color或者 background-image 设置的。

 

内边距的值可使用像素、百分数、em 或 rem的组合。

padding 的简记法：同 border 和 margin 属性同样，padding 也可使用简记法，从而没必要使用padding-top、padding-right 等属性为每一个边都单独设定内边距。

• padding: 5px;——使用一个值，这个值就会应用于所有四个边。
• padding: 5px 9px;——使用两个值，则前一个值会应用于上下两边，后一个值会应用于左右两边。
• padding: 5px 9px 11px;——使用三个值，则第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边
• padding: 5px 9px 11px 0;——使用四个值，它们会按照时钟顺序，依次应用于上、右、下、左四个边。

也能够输入 padding-top: x;、padding-right: x;、padding-bottom: x;或者padding- left: x; 单独为一个边添加内边距。

11.9　设置边框

       能够在元素周围建立边框，或针对元素的某一边设置边框，并设置它的厚度、风格和颜色。

1. 定义边框风格

输入 border-style: type，其中的type能够是none、dotted （点线）、dashed （虚线）、solid （实线）、double （双线）、 groove （槽线）、ridge （脊线）、 inset （凹边）或outset （凸边）。

2. 设置边框宽度

输入 border-width: n，这里的n 是须要的宽度（含单位，如4px）。

3. 设置边框颜色

输入border-color: color，这里的color是颜色名称、十六进制值或 RGB、HSL、RGBA、 HSLA颜色。

4. 使用简记法同时设置多个边框属性border。

能够指定全部三种边框属性（如 border:1px solid 和 border-right: 2px dashed green;）。

border-top、border-right、border-bottom 或 border-left 将边框效果限制在某一条边上。

border-property，这里的property 能够是style（风格）、width（宽度）或color（颜色），仅使用单个属性设置边框。

 

border 简写属性及各个边框属性（border-width、border-style 和 border-color）都可接受一至四个值。

若是使用一个值，那么它会应用于所有四个边；

若是使用两个值，那么前一个值会应用于上下两边，后一个值会应用于左右两边；

若是使用三个值，那么第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边；

若是使用四个值，那么它们会按照时钟顺序，依次应用于上、右、下、左四个边。

要让边框显示出来，至少必须定义边框样式。若是没有定义样式，就不会显示边框。边框样式的默认值是border-style: none。

11.10　设置元素周围的外边距

       外边距是元素与相邻元素之间的透明空间。

设置元素外边距的方法：

• 输入 margin: x，其中的x 是要添加的空间量，能够表示为长度、相对父元素宽度的百分数或auto。
• 也能够输入margin-top: x;、 margin-right: x;、margin-bottom: x;或者 margin-left: x; 为元素的一条边应用外边距。

 

若是元素位于另外一个元素的上面，对于相互接触的两个 margin（即元素相互接触的下外边距和上外边距），仅使用其中较大的一个，另外一个外边距会被叠加。左右外边距不叠加。

外边距不是继承的。

当 em 值用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是相对于父元素的字体大小的。

对于内边距和外边距的设置， 建议使用相对单位。

若是要对内边距和外边距使用百分数，一般不会将它们用于上下边距的值，由于这样的值是基于其包含块的宽度的。

11.11　使元素浮动

能够经过 float 属性使元素浮动在文本或其余元素上。可使用这种技术让文本环绕在图像或者其余元素周围，也可使用这种技术建立多栏布局等。

让文本环绕元素float:

• left：让元素浮动到左边，其余内容围绕在它右边；
• right：让元素浮动到右边，其余内容围绕在它左边；
• none：让元素彻底不浮动。（none是默认值，所以只有在特定状况下须要覆盖某个浮动元素的样式规则时才须要用到它。）

使用 width 属性显式地设置元素的宽度，以便有空间放置围绕它的内容。

float 属性不是继承的。

11.12　控制元素浮动的位置

浮动的元素对文档流的影响与非浮动元素的影响是不一样的。浮动元素会让接下来的内容环绕在它周围。不过，它并不会影响父元素或其余祖先元素的高度，所以从这一点来讲，它不属于文档流的一部分。

可使用 clear 属性清除浮动效果。

控制元素浮动位置clear:

• left：阻止元素浮动在该元素的左边；
• right：阻止元素浮动在该元素的右边；
• both：阻止元素浮动在该元素的左右两边；
• none（默认值）：容许元素浮动在该元素的左右两边。

若是要让浮动元素的祖先元素在高度上包含浮动元素，并消除浮动，可使用clearfix或overflow 方法替代。

要使用clearfix 方法，只须要在样式表中引入.clearfix 的规则，而后为浮动元素的父元素（该元素为但愿清除浮动的元素）添加clearfix 类.

clearfix:before,

.clearfix:after {

 content: " ";

  display: table;

}

.clearfix:after {

 clear: both;

}

.clearfix {

 *zoom: 1;

}

 

使用overflow 建立自清除浮动元素

.container {

  overflow: hidden;

}

应该将clear属性添加到不但愿环绕浮动对象的元素上。而 clearfix 和overflow 方法是应用于浮动元素的父元素或祖先元素的。

浮动元素的 display 属性会变成display: block;，哪怕将其设置为 display: inline;（不管是浏览器的默认样式仍是手动显式设置），该属性值依然为 block。

11.13　对元素进行相对定位

每一个元素在页面的文档流中都有一个天然位置。相对于这个原始位置对元素进行移动就称为相对定位。周围的元素彻底不受此影响。

记住，既要指明采用相对位置，还要给出偏移量。

偏移天然流中元素的步骤：

(1) 输入position: relative;。

(2) 输入 top、right、bottom 或 left。再输入 :d，这里的d 是但愿元素从它的天然位置偏移的距离，能够表示为绝对值（如10px）、相对值（如 2em）或百分数。值可负可正。

其余元素不会受到偏移的影响，仍然按照这个元素原来的盒子进行排列。设置了相对定位的内容可能与其余内容重叠，这取决于top、right、bottom 和 left 的值。

使用相对定位、绝对定位或固定定位时，对于相互重叠的元素，能够用 z-index属性指定它们的叠放次序。

对元素设置 position: static，能够覆盖 position: relative 设置。static 是元素的默认值，这就是元素出如今常规文档流中的缘由。

定位不是继承的。

11.14　对元素进行绝对定位

       经过对元素进行绝对定位，即指定它们相对于 body或最近的已定位祖先元素的精确位置，可让元素脱离正常的文档流。

       这与相对定位不一样，绝对定位的元素不会在原先的位置留下空白。

这与让元素浮动也不一样。对于绝对定位的元素，其余元素不会环绕在它的周围。事实上，其余内容不知道它的存在，它也不知道其余内容的存在。

对元素进行绝对定位的步骤：

(1) 输入position: absolute;。

(2) 根据须要，输入 top、right、bottom或 left。再输入 :d，这里的d 是但愿元素相对于其祖先元素偏移的距离（如 10px 或 2em）或相对于其祖先的百分数。

(3) 根据须要，对但愿成为绝对定位参照体的祖先元素添加 position: relative;。若是跳过这一步，将对元素相对于body 计算偏移量。

因为绝对定位的元素脱离了文档流，所以它们可能会相互重叠，或与其余元素重叠。

若是不为绝对定位的元素指定偏移量，这个元素将显示在它的天然位置上，但不会影响后续元素在文档流中的位置。

 

还有一种定位类型称为固定定位。当访问者滚动浏览器窗口时，页面内容一般随之上下移动。若是对元素设置 position: fixed;，它就会固定在浏览器窗口中。当访问者上下滚动浏览器窗口时，该元素不会随之移动，页面的其他部分仍照常滚动。

使用相对定位、绝对定位或固定定位时，可使用 z-index 属性指定相互重叠的元素的叠放次序。

对元素设置position: static 将覆盖position: absolute; 的设置。

11.15　在栈中定位元素

       当你开始使用相对定位、绝对定位和固定定位之后，极可能发现元素相互重叠的状况。

在栈中定位元素：

输入 z-index: n，其中的n 是表示元素在定位过的对象堆中的层级的数字。

z-index 的值越大，元素在堆中就越高。

z-index 属性仅对定位过的元素（即设为绝对定位、相对定位或固定定位的元素）有效。

z-index 属性不是继承的。

11.16　处理溢出

元素并不老是包含在它们本身的盒子里。可使用 overflow 属性控制元素在盒子外面的部分。

决定浏览器如何处理溢出overflow:

• visible：让元素盒子中的全部内容可见，这是默认项；
• hidden：隐藏元素盒子容纳不了的内容；
• scroll：不管元素是否须要，元素上添加滚动条；
• auto：让滚动条仅在访问者访问溢出内容时出现。

overflow 属性不是继承的。

11.17　垂直对齐元素

使元素垂直对齐vertical-align:

• baseline：使元素的基准线对齐父元素的基准线；
• middle：使元素位于父元素中央；
• sub：使元素成为父元素的下标；
• super：使元素成为父元素的上标；
• text-top：使元素的顶部对齐父元素的顶部；
• text-bottom：使元素的底部对父元素的底部；
• top：使元素的顶部对齐当前行里最高元素的顶部；
• bottom：使元素的底部对齐当前行里最低元素的底部；
• 元素行高的百分比，能够是正数，也能够是负数；
• 某个值（正负都可，单位为像素或 em）分别按照特定的值向上或者向下移动元素。

可使用 vertical-align 设置表格单元格中内容的对齐方式。除了表格之外，vertical-align 属性仅适用于行内元素，不能应用于块级元素。

11.18　修改鼠标指针

修改指针形状cursor:

• pointer表示停留在连接上时一般显示的指针形状（）、default表示箭头（）、crosshair（）、move（）、wait（）、help（）、text（）或 progress（）；
• auto 显示特定情形下一般使用的指针形状；
• x-resize 显示双向箭头，这里的x 是其中一个箭头须要指向的方向，能够是 n（北）、nw（西北）、e（东），等等。例如，e-resize 指针显示成 。

不一样浏览器、不一样系统的指针形状可能有细微的差别。

第12章 构建响应式网站

响应式 Web 设计（responsive Web design）方法植根于如下三点：

  ‰ 灵活的图像和媒体。图像和媒体资源的尺寸是用百分数定义的，从而能够根据环境进行缩放。

  ‰ 灵活的、基于网格的布局，也就是流式布局。对于响应式网站，全部的width 属性都用百分数设定，所以全部的布局成分都是相对的。其余水平属性一般也会使用相对单位（em、百分数和 rem 等）。

‰ 媒体查询。使用这项技术，能够根据媒体特征（如浏览器可视页面区域的宽度）对设计进行调整。

12.2　建立可伸缩图像

制做可伸缩图像的步骤：

(1) 对任何想作成可伸缩图像的图像，在HTML 的 img 标签中省略 width 和 height 属性。

(2) 在样式表中，为每一个想作成可伸缩图像的图像应用 max-width: 100%。

       图像缩放的可用空间是由其父元素创建的内容区域。若是父元素有水平方向上的内边距，可用空间就会相应减少。

       必定要使用 max-width: 100% 而不是width: 100%。它们都能让图像在容器内缩放，不过，width: 100% 会让图像尽量地填充容器，若是容器的宽度比图像宽，图像就会放大到超过其原本尺寸，有可能会显得较为难看。

       不要忘了对图像进行优化，让文件尺寸尽量小。

       可使用 background-size 属性对背景图像进行缩放（对 IE8 无效）。

       还可使用 video, embed, object { max-width: 100%; } 让 HTML5 视频及其余媒体变成可伸缩的（一样也不要在 HTML中为它们指定 width 和 height）。

12.3　建立弹性布局网格

建立弹性布局须要使用百分数宽度，并将它们应用于页面里的主要区域。

可使用下面的公式计算须要使用的百分数：

要指定的宽度（以像素为单位）／容器宽度（以像素为单位）＝值

建立弹性布局的步骤：

对于须要某个宽度实现预期布局的元素，设 置 width: percentage;，其中 percentage表示你但愿元素在水平方向上占据容器空间的比例。一般说来，没必要设置 width: 100%;，由于默认设置为 display: block; 的元素（如 p 以及其余不少元素）或手动设置为 display: block; 的元素在默认状况下会占据整个可用空间。

做为可选的一步，对包含整个页面内容的元素设置 max-width: value;，其中 value表示你但愿页面最多可增加到的最大宽度。一般，value以像素为单位，不过也可使用百分数、em 值或其余单位的值。

若是父元素有水平方向上的内边距，它为子元素创建的容器就会变小。

还能够对元素设置基于百分数的margin 和 padding 值。也可使用em 值。内边距和外边距的 em 值是相对于元素的font-size 的，而基于百分数的值则是相对于包含元素的容器的。

对于设置了body { font-size: 100%; } 的页面，对 font-size、margin、padding 和max-width 使用 em 值还有一个好处——若是用户更改了浏览器默认字体大小，那么页面也会跟着变大或变小。

将 box-sizing 属性设置为 border-box，就能够很方便地对拥有水平方向内边距（使用 em 或其余的单位）的元素定义宽度，而没必要进行复杂的数学计算来找出百分数的值。

12.4　理解和实现媒体查询

可使用三种方式针对特定的媒体类型定位 CSS：

第一种方式是使用 link 元素的 media属性，位于 head 内。

 

第二种方式是在样式表中使用 @media 规则。

 

第三种方式，即便用 @import 规则（会影响性能）。

 

媒体查询加强了媒体类型方法，容许根据特定的设备特性定位样式。要调整网站的呈现样式，让其适应不一样的屏幕尺寸，采用媒体查询特别方便。

下面列出了能够包含在媒体查询里的媒体特性：

  ‰ width（宽度）

  ‰ height（高度）

  ‰ device-width（设备宽度）

  ‰ device-height（设备高度）

‰ orientation（方向）

  ‰ aspect-ratio（高宽比）

  ‰ device-aspect-ratio（设备高宽比）

  ‰ color（颜色）

  ‰ color-index（颜色数）

  ‰ monochrome（单色）

  ‰ resolution（分辨率）

  ‰ scan（扫描）

  ‰ grid（栅格）

还有一些非标准的媒体特性，如-webkit-device-pixel-ratio （WebKit①设备像素比） -moz-device-pixel-ratio（Mozilla②设备像素比）

除了 orientation、scan 和 grid 之外，上述属性都可添加 min- 和 max- 前缀。min-前缀定位的是“大于等于”对应值的目标，而 max- 前缀定位的则是“小于等于”对应值的目标。

 

如下是媒体查询的基本语法。

•  指向外部样式表的连接：

 <link rel="stylesheet" media="logic type and (feature: value)" href="your-stylesheet.css" />

•  位于样式表中的媒体查询：

@media logic type and (feature: value) {

   /* 目标CSS样式规则写在这里 */

}

  ‰ logic（逻辑）部分是可选的，其值能够是 only 或 not。only 关键字能够确保旧的浏览器不读取余下的媒体查询，同时一并忽略连接的样式表。not 关键字能够对媒体查询的结果求反，让其反面为真。例如，使用 media="notscreen" 会在媒体类型为 screen 之外的任何类型时加载样式表。

  ‰ type（类型）部分是媒体类型，如screen、print 等。

‰ feature: value 对是可选的，但一旦包含它们，它们必须用括号包围且前面要有 and 这个字。feature 是预约义的媒体特性，如 min-width、max-width 或者 resolution。对 color、color-index和monochrome特性来讲，value 是可选的。

 

可使用 and 将多个特性和值的组合串接起来，还能够建立一系列媒体查询（使用逗号分隔每一个媒体查询）。在用逗号分隔的媒体查询列表中，若是有一个媒体查询为真，则整个媒体查询列表为真。

12.6　兼容旧版IE

       是 Internet Explorer 8 及如下的版本不支持媒体查询。这意味着这些浏览器只会呈现媒体查询之外的样式，即基准样式。

对于 IE8（及更早的版本），有三种解决方法：

• 什么都不作。让网站显示基本的版本。
• 为它们单首创建一个样式表，让它们显示网站最宽的版本（不会造成响应式的网页）。一种作法是复制一份常规的样式表，将其命名为 old-ie.css 之类的文件名。将媒体查询语句去掉，但保留其中的样式规则。在 HTML中添加条件注释，从而让不一样的浏览器都能找到正确的样式表。
• 若是但愿页面有响应式的效果，就在页面中引入 respond.min.js。

第13章 使用Web字体

CSS 规则 @font-face 为 Web 字体创造了可能，该样式规则容许 CSS 连接到服务器上的一种字体供网页使用。

第14章 使用CSS3进行加强

 

14.2　理解厂商前缀

CSS3 规范要达到 W3C 的推荐标准（即定稿）状态要通过数年。浏览器则一般在W3C 开发标准的过程当中就会提早实现这些特性。在包含某个特性的初始阶段，浏览器一般会使用厂商前缀实现这类特性。这样，每一个浏览器均可以引入本身的 CSS 属性支持方式，从而能够获取反馈，并且一旦标准发生改变也不会形成影响。

 

每一个主流浏览器都有其自身的前缀：-webkit-（Webkit/Safari/旧版本的Chrome）、-moz-（Firefox）、-ms-（Internet Explorer）、-o-（Opera）。应该将前缀放在 CSS 属性名的前面。现在，在多数状况下，咱们通常只须要-webkit 前缀。

14.3　为元素建立圆角

使用CSS3，能够在不引入额外的标记或图像的状况下，为大多数元素（包括表单元素、图像，甚至段落文本）建立圆角

1. 为元素建立四个相同的圆角

• -webkit-border-radius: r，这里的r 是圆角的半径大小，表示为长度（带单位）。
• border-radius: r，这里的r 是圆角的半径大小。这是该属性的标准短形式语法。

2. 为元素建立一个圆角

• -webkit-border-top-left-radius: r，这里的r 是左上方圆角的半径大小，表示为长度（带单位）。
• border-top-left-radius:  r。建立左上方圆角。这是该属性的标准长形式语法。

此外，还能够单首创建其余方位的圆角：

  ‰ 建立右上方圆角：用 top-right 替换

  ‰     建立右下方圆角：用 bottom-right 替

  ‰     建立左下方圆角：用 bottom-left 替

3. 建立椭圆形圆角

• -webkit-border-radius: x/y，其中x 是圆角在水平方向上的半径大小， y 是圆角在垂直方向上的半径大小，均表示为长度（带单位）。
• border-radius: x/y

4. 使用border-radius 建立圆形

• -webkit-border-radius: r，这里的r 是元素的半径大小（带长度单位）。要建立圆形，可使用短形式的语法，r 的值应该等于元素高度或宽度的一半。
• border-radius: r，这是标准的无前缀语法。

 

不支持 border-radius 的旧的浏览器仅会以方角呈现元素。

border-radius 仅影响施加该样式的元素的角，不会影响其子元素的角。所以，若是一个子元素有背景，该背景就有可能显示在一个或多个父元素的角的位置，从而影响圆角样式。

有时元素的背景（这里讲的不是子元素的背景）会透过其圆角。为了不这种状况能够在元素的border-radius 声明后面增长一条样式规则：background-clip: padding-box;。

border-radius 属性不是继承的。

14.4　为文本添加阴影

       使用text-shadow元素，能够在不使用图像表示文本的状况下，为段落、标题等元素中的文本添加动态的阴影效果。

1. 为元素的文本添加阴影text-shadow:

分别输入表示 x-offset（水平偏移量）、y-offset（垂直偏移量）、 blur-radius （模糊半径）和color的值（前三个值带长度单位，四个值之间不用逗号分隔）。

2. 为元素的文本添加多重阴影text-shadow:

（1）分别输入 x-offset、y-offset、blur-radius 和 color 的值（前三个带长度单位，四个值之间不用逗号分隔）。blur-radius 的值是可选的。

（2）输入 ,（逗号）。

（3）对四种属性使用不一样的值重复上述步骤。

3. 将text-shadow 改回默认值

输入 text-shadow: none;。

 

text-shadow属性不须要使用厂商前缀。

x-offset 和 y-offset 值能够是正整数，也能够是负整数。blur-radius 值必须是正整数。这三个值均可觉得 0。

不能像边框和背景那样单独地指定四个属性值。

text-shadow 属性是继承的。

 

14.5　为其余元素添加阴影

使用 text-shadow 属性能够为元素的文本添加阴影，使用 box-shadow 属性则能够为元素自己添加阴影。它们的基础属性集是相同的，不过box-shadow 还容许使用两个可选的属性——inset 关键字属性和 spread 属性（用于扩张或收缩阴影）。

若是你但愿兼容旧版 Android、Mobile Safari 和 Safari 浏 览器，那么 box-shadow 须要加上 -webkit- 厂商前缀。

box-shadow 属性接受六个值：带长度单位的 x-offset 和 y-offset、可选的带长度单位的 blur-radius、可选的 inset 关键字、可选的带长度单位的 spread 值及 color 值。若是不指定 blur-radius 和 spread 的值，则设为0。

 

1. 为元素添加阴影

• -webkit-box-shadow:分别输入表示 x-offset、y-offset、blur-radius、spread 和color 的值（前四个值均带长度单位）。
• box-shadow: 分别输入表示 x-offset、y-offset、blur-radius、spread 和color 的值。

2. 建立内阴影

• -webkit-box-shadow:分别输入表示 x-offset、y-offset、blur-radius、spread 和 color 的值（前四个值均带长度单位）。
• -webkit-box-shadow: 输入 inset，再输入一个空格，分别输入表示 x-offset、y-offset、blur-radius、spread 和 color 的值（前四个值均带长度单位）。
• box-shadow: 

3. 为元素应用多重阴影

• -webkit-box-shadow:

(1)    分别输入表示 x-offset、y-offset、blur-radius、spread 和 color 的值（前四个值均带长度单位）。若是有必要能够将 inset 关键字包含在内。

(2)    输入,（逗号）。

(3)    对每种属性使用不一样的值重复上述步骤。

• box-shadow:

4. 将box-shadow 改回默认值

• -webkit-box-shadow: none;。
• box-shadow: none;。

 

可使用负的spread 值，让整个阴影比应用样式的元素小一些。

inset关键字可让阴影位于元素内部。

box-shadow 属性是不继承的。

14.6　应用多重背景

       为单个HTML元素指定多个背景是CSS3引入的一个特性。

1. 为单个元素应用多重背景图像

(1) 输入 background-color: b，这里的b 是但愿为元素应用的备用背景颜色。

(2) 输入 background-image: u，这里的u是绝对或相对路径图像引用的 URL 列表（用逗号分隔）。

(3) 输入 background-position: p，这里的p 是成对的 x-offset 和 y-offset（能够是正的,也能够是负的；带长度单位或者关键字，如 center top）的集合，用逗号分隔。对于第 (2) 步中指定的每一个 URL，都应有一组 x-offset 和 y-offset。

(4) 输入 background-repeat: r，这里的r 是 repeat-x、repeat-y 或 no-repeat 值，用逗号分隔，第 (2) 步中指定的每一个 URL 对应一个值。

 

对于多重背景图像，可使用标准的短形式语法，即便用逗号分隔每组背景参数.

 

指定多重背景不须要使用厂商前缀。

14.7　使用渐变背景

       渐变背景也是 CSS3 中的新特性，经过它能够在不使用图像的状况下建立从一种颜色到另外一种颜色的过渡。

       使用 CSS 建立渐变有两种主要的方式：线性渐变和径向渐变，每种方式都有不一样的必选参数和可选参数。除非指定一种颜色向另外一种颜色过渡的位置，不然浏览器会自行决定不一样颜色之间的过渡。

       根据渐进加强的原则，最好为不支持背景渐变属性的浏览器提供一个备用选项。在CSS 中，它能够位于背景渐变规则的前面。

1. 建立备用背景颜色

输入background: color 或者background- color: color，这里的color 能够是十六进制数、RGB 值以及其余任何支持的颜色名称，另外也可使用图像。最好不要将 RGBA、HSL 或 HSLA 值做为备用背景颜色，由于IE8 及之前的版本不支持。

2. 定义线性渐变background: linear-gradient(参数);

3. 定义径向渐变background: radial-gradient(参数);

4. 指定颜色

输入至少两种颜色，每一个颜色之间用逗号分隔。指定的第一个颜色出如今渐变的开始位置，最后一个颜色出如今渐变的结束位置。对于径向渐变，它们分别为最里边的颜色和最外边的颜色。

5. 指定颜色和颜色的中止位置

       根据“指定颜色”中的说明进行操做。若是须要，对每一个颜色值指定一个百分数以控制颜色出如今渐变中的位置。这个值能够是负数，也能够是大于100% 的数。

 

 

14.8　为元素设置不透明度

       opacity: o，这里的o 表示元素的不透明程度（两位小数，不带单位）。

       opacity的默认值为1。该属性值可使用 0.00（彻底透明）至 1.00（彻底不透明）之间的两位小数。例如，pacity:.09;、opacity: .2; 或者 opacity: 75;。小数点前的0是可选的。

       opacity 属性与使用 RGBA 或 HSLA设置的 alpha 透明背景色是两个容易混淆的概念。opacity影响的是整个元素（包括其内容），而background-color: rgba(128,0,64,.6); 这样的设置仅影响背景的透明度。

       Internet Explorer 9 以前的版本并不原生支持 opacity 属性，但对于它们，可使用专有的滤镜效应.。

       不管显示成什么样子，opacity 属性并非继承的。opacity 的值小于 1 的元素的子元素也会受到影响，但这些子元素的opacity 值仍为1。

14.9　生成内容的效果

:before 和 :after 伪元素与 content 属性结合使用，从而建立所谓的生成内容（generated content）。生成内容指的是经过 CSS 建立的内容，而不是由HTML 生成的。

不过，生成内容并非为页面添加段落或标题。使用生成内容能够添加符号，建立用于添加样式的空内容元素，还能够作不少其余的事情。

14.10　使用sprite 拼合图像

浏览器一般很快就能够将文本显示出来，但图像每每会减慢页面的加载速度。这一现象在移动设备上尤其明显。为了解决这一问题，能够将多个图像拼合成单个背景图像（sprite），再经过 CSS 控制具体显示图像的哪一部分。其中的秘密就是 background-position 属性。

第15章 列表

HTML 包含专门用于建立项目列表的元素。你能够建立普通列表、编号列表、符号列表以及描述列表，能够在一个列表中嵌套另一个或多个列表。

全部的列表都是由父元素和子元素构成的。父元素用于指定要建立的列表的类型，子元素用于指定要建立的列表项目类型。

下面列出了三种列表类型以及组成它们的元素：

• 有序列表，ol为父元素，li为列表项。
• 无序列表，ul为父元素，li为列表项。
• 描述列表，dl 为父元素，dt 和 dd 分别表明 dl 中的术语和描述。描述列表在 HTML5以前称为定义列表。

 

除非使用CSS另行指定，有序列表中的项目使用阿拉伯数字（一、二、3 等）进行编号。

默认状况下，无序列表的项目前面显示实心的圆点。

15.2　选择标记

       建立列表时，不管是有序列表仍是无序列表，均可以选择出如今列表项目左侧的标记的类型。

1. 选择标记

       在样式表中，输入 list-style-type:marker，这里的marker是如下属性值中的一种：

‰   disc（圆点，●）    、  circle（圆圈，○） 、   square（方块，■）、

   decimal（数字，一、二、3……）、

   upper-alpha（大写字母，A、B、C……）、

   lower-alpha（小写字母，a、b、c……）、

  ‰ upper-roman（大写罗马数字，Ⅰ、Ⅱ、Ⅲ、Ⅳ……）、

   lower-roman（小写罗马数字，i、ii、iii、iv……）。

2.显示无标记列表

在样式表规则中，输入list-style-type: none。

15.3　使用定制的标记

在目标列表或列表项的样式规则中，

(1)    输入list-style: none; 以取消常规的标记。

(2)    输入 background: url(image.ext) repeat-type horizontal vertical;，其中

image.ext 是要做为定制标记的图像的路径和文件名，

repeat-type 是 no-repeat、repeat-x 和repeat-y 中的一种（一般设为 no-repeat），horizontal 和vertical 值表示列表项目中背景图像的位置。

(3)    输入 padding-left: value;，这里的value 应不小于背景图像的宽度，以防列表项目的内容覆盖到定制标记的上面。

默认标记在默认状况下位于列表项目的外面，而定制标记显示在列表项目的里面，由于定制标记是为列表项目自己应用的背景图像。

15.4　选择列表的起始编号

1. 设置整个列表编号方案的初始值

在 ol 开始标签中输入 start="n"，这里的n 表示列表的初始值。

2. 修改有序列表中某列表项目的编号

在目标 li 项目内输入 value="n"，这里的n 表明该列表项目的值。

 

若是使用 start 和 type，请始终使用数字。即使决定使用字母或罗马数字对列表进行编号，也应使用数字。

value 属性的值会覆盖 start 属性的值。

列表能够包含一个以上的带 value 属性的 li。

15.5　控制标记的位置

控制标记位置list-style-position:

• inside： 让标记缩在文本块内。
• outside： 让标记显示在列表项目文本的左边（这是默认的设置）。

若是列表项目中的文本显得较为拥挤，则能够经过设置 line-height 增大文本行间距。

list-style-position属性是继承的。

15.6　  同时设置全部的列表样式属性

CSS 也为 list-style 提供了简写形式。它将 list-style-type、list-style-position 和较少使用的list-style-image放到了一条属性中。

能够指定三个list-style 属性，也能够指定其中的任意一个，指定多个属性时顺序任意。任何没有显式地指定的属性都会设为其默认值（list-style-type 的默认值为 disc，list-style-image 的默认值为 none，list-style-position的默认值为outside）。

list-style 属性是继承的。这也是咱们能够将它应用到父元素ol 或 ul 上的缘由。

15.8　建立描述列表

       HTML 提供了专门用于描述成组出现的名称（术语）及其值之间关联的列表类型。

       根据 HTML5 规范，“由名称及其值构成的组合能够是术语和定义、元数据主题和值、问题和答案，以及任何其余的名 – 值组。”

每一个列表都包含在 dl 中，其中的每一个名 – 值组都有一个或多个 dt 元素（名称或术语）以及一个或多个 dd 元素（它们的值）。