CSS3秘笈第三版涵盖HTML5学习笔记6~8章

第二部分----CSS实用技术

第6章，文本格式化

指定备用字体：

font-family:Arial,Helvetica,sans-serif;

当访问者没有安装第一种字体时，浏览器会在列表中继续往下搜寻，直到找到备用字体。

若字体名称中包含多个单词，则必须用双引号将它们括起来

font-family:"Times New Roman",Times,serif;

sans-serif字体

sans-serif字体看起来干净而简洁，所以常被用于标题。sans-serif字体包括Arial、Helvetica、Verdana

注：自己的审美观才是好的指导。

monospaced字体

monospaced（等宽）字体经常用于显示计算机代码。

其他字体

Arial Black、Arial Narrow、Impact字体，特别注意：Arial Black、Impact字体只有一种形式，没有斜体，在使用这些字体时一定要将font-weight和font-style设为normal，不然浏览器会绞尽脑汁去想这些文字应该是啥样的。

使用Web字体

指令较多，后续补充

Web字体的CSS部分十分简单，只需要两个命令：
1、@font-face指令负责告诉浏览器字体名称以及到哪里下载

2、@font-family定义Web字体的方式，与使用已安装字体是一样的

Font Squirrel提供了一个非常好用的在线工具，可以生成所需的字体格式，www.fontsquirrel.com/fontface/generator，不仅可以生成适当的字体，还能提供一个范例HTML文件，以及一个基础的CSS样式表

语法：

@font-face{
     font-family:"League Gothic";
     src:url('fonts/League_Gothic-webfont.ttf');
}

用CSS设定文本尺寸的3种方法：keyword、percentage、em

CSS提供了7种keyword：xx-small（9px）、x-small（10px）、small（13px）、medium、large（18px）、x-large（24px）、xx-large（32px），在没有调整过浏览器基准字号时，关键字基本等于括号中的字号

格式化词语和字母

斜体粗体

font-style:italic;     斜体

font-style:normal;     非斜体

font-style:oblique;     斜体

font-weight:bole;     粗体

font-weight:normal;     非粗体

大写化

text-transform:uppercase;     将所有字母大写

text-transform:lowercase;     将所有字母小写

text-transform:capitalize;     每个单词首字母大写

text-transform:none;          不改变文本大小写

小型大写字母

font-variant:small-caps;     将字母设置为大写，但大小与小写字母一样

文本修饰

text-decoration --> underline、overline、line-through、blink、none

字母间距和字词间距

letter-spacing：字母间距，正数增加，负数减少

word-spacing：字词间距，正数增加，负数减少

文本阴影

text-shadow  -->  水平偏移量（离文本左侧或右侧距离）、垂直偏移量（离文本上方或下方距离）、阴影模糊度、阴影颜色

text-shadow: -4px 4px 3px #999;

第一个-4px表示将阴影放在文本左侧4px处（正数表示放右边），第二个4px表示将阴影放在文本下方4px处（负值表示上方），第三个3px定义阴影模糊度，0px完全不模糊，产生一个清晰的阴影，值越大越模糊，第四个值表示颜色

可以定义多个阴影，用逗号(,)分开

text-shadow:-4px 4px 3px #999,1px -1px 2px #888;

格式化段落

行间距

line-height，可以使用pixel、em、percentage表示，还可以使用数字表示行间距

使用百分比的行高，百分比不会被继承，计算出的值才会被继承。假设网页字号设为10px，行高为150%，则所有标签将继承15px行高，而不是150%，如果更改字号，则会使文本出现混乱。使用数字则会使所有标签都使用同一个基本比例式高。

对齐文本

text-align   -->   left、right、justify、center

首行缩进并去除边距

text-indent（文本缩进），margin（边距）

text-indent也可以使用百分比，不过不是根据字号，而是根据包含该段落的元素的宽度相关。

margin控制段落之间的距离，也可以使用百分比，不过与text-indent使用百分比结果一样

格式化段落首字母或首行

使用伪元素:first-letter（首字母）和:first-line（首行），从技术上讲，这些都不是CSS属性，而是决定CSS属性要用于段落哪一部分的一种选择器。

列表样式

列表类型，参看：HTML5与CSS3基础教程第八版学习笔记11-15章，第十五章

（1）disc（实心圆点）

（2）circle（空心圆圈）

（3）square（实心方块）

（4）decimal（数字1、2、。。。）

（5）decimal-leading-zero（数字01、02、03。。。有前导0，比HTML5与CSS3基础教程第八版学习笔记11-15章新增）

（6）upper-alhpa（大写字母A、B、。。。）

（7）lower-alpha（小写字母a、b、。。。）

（8）upper-roman（大写罗马数字I、II、III。。。）

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

可以使用list-style-type控制。

给项目符号和项目序号定位

使用list-style-position控制项目符号的位置。可以让它显示在文本之外（list-style-position:outside;），或显示在文本内（list-style-position:inside;）

利用padding-left属性可以调整项目符号与其文本之间的距离，使用该属性时，要创建一个应用于<li>标签的样式，这种方法只有list-style-position设为outside才有效

网络上免费的图标和项目符号：www.cssjuice.com/38-free-icon-checkpoints/

.testClass{
    list-style-image:url(image/bullet.gif);     /* 不需要使用引号将路径包含 */
}

第7章，margin、padding和border

对浏览器而言，任何标签都是里面装有东西的盒子

盒模型

参看：HTML5与CSS3基础教程第八版学习笔记11-15章，第十一章

padding指内容与其边框线之间的空间

border指盒子周边的直线

background-color用来填充边框内部空间的，包括padding区域

margin指一个标签和另一个标签之间的间隔

margin、padding在使用percentage时，浏览器是以外围元素的宽度为基础计算空间量的。

边距冲突

当元素的bottom margin碰到另一个元素的top margin时，浏览器会应用他们之间较大的一个值，而不是将两个值相加。

例：一个无序列表的bottom margin为20px，与列表相连的段落top margin为30px，最终浏览器使用30px来分隔，而不是50px

行内盒子、块级盒子及其他显示设置

对于行内盒子，浏览器不能对其进行top/bottom margin、top/bottom padding的设置

使用display属性改变元素盒子

display:inline;     使块级元素像行内元素

display:block;     使行内元素像块级元素

display有无数种可能选项，大部分在所有浏览器都不起作用，inline-block值在当前浏览器中有效

添加边框

border通过三个属性进行控制：color（颜色）、width（宽度）、style（样式）

可以统一设置所有方向的边框，也可以单独设置单方向上的边框，使用border-top、border-bottom、border-right、border-left

还可以单独设置单方向上的单个属性，例：border-top-color、border-top-width、border-top-style，其三个方向也有类似属性

还能够设置多方向的单属性，例：border-color:green yellow red blue，其他两个属性也有类似用法

设置背景色

.testClass{
    background-color:rgb(109,218,63);
}

创建圆角

使用border-radius属性

CSS3允许你给任何元素都设计圆角，一定要确保该元素有背景色或者边框，否则将看不到任何圆角

border-radius:0 30px 10px 5px;     第一个值左上角，第二个值右上角，第三个值右下角，第四个值左下角

border-radius也可以接受一个值，两个值，三个值，接受的值将会作为半径，在元素对应角画圆。

还可以创建椭圆角：border-radius:20px/40px;     第一个是从轨迹中心点到左边或右边的半径，第二个是从轨迹中心点到上边或下边的距离

还可以混合使用圆角和椭圆角

还可以单独设置：border-top-left-redius:10px;

注：IE8及更早不支持border-radius属性，iOS的Safari3.2和Android Browser2.1需要提供厂商前缀-webkit-

供应商前缀

1、-webkit-：用于Chrome、Safari以及其他基于WebKit的浏览器

2、-moz-：用于Mozilla Firefox

3、-o-：用于Opera

4、-ms-：用于IE

添加阴影

box-shadow任何现代浏览器都支持，包括IE9，只是画出的阴影比其他浏览器细，IE8及更早版本会完全忽略

box-shadow:-4px 6px 8px #999;

第一个值表示水平偏移量，正值阴影移右边，负值阴影移左边，第二个表示垂直偏移量，正值阴影在下方，负值在上方，第三个是阴影半径，决定阴影的模糊度和宽度，值为0完全不模糊，值越大越模糊且更宽，第四个是颜色值，grba值看起来更好。

box-shadow包括两个可选值，inset关键字和阴影尺寸（spead）。inset告诉浏览器阴影画在方框内。还可以添加阴影尺寸作为第4个值（在阴影半径和阴影颜色之间）

box-shadow与text-shadow一样可以设置多个阴影，方法与text-shadow类似

确定高度和宽度

使用百分比值都是以样式外围元素为基准

利用box-sizing属性调整盒子的宽度

box-sizing属性提供了以下3个选项：

1、content-box是浏览器定义元素的屏幕宽度和高度的一种方法。这是默认行为，不需要为content-box定义任何值

2、padding-box告诉浏览器当在一个样式中设置了width或height时，应该包含padding作为该值的一部分。例：假设一个元素的left/right padding为20px，width为100px，实际上内容区域的宽度将只有60px

3、border-box值包含了padding厚度和border厚度

注：IE8及更新版本支持box-sizing，IE7不支持

用overflow属性控制溢出

visible，浏览器通常的做法

scroll，添加滚动条，无论是否需要都会添加

auto，与scroll一样，不过，只会在需要的时候出现

hidden，隐藏任何超出的内容

高度和宽度的最大化和最小化

max-height，最大高度

max-width，最大宽度

min-width，最小宽度

min-height，最小高度

用浮动元素包围内容

使用float属性可以把元素移到左边或右边，元素下方的内容会上移，包围浮动元素。

3种选项：left、right、none

background-color、border不能像其他网页元素一样浮动。假设让一个元素附到右边，侧边栏下方的内容通常应该上移将它包围起来。但若内容设置了背景或边框，背景或边框就会出现在浮动侧边栏的下方。可以对浮动元素下方的背景或边框添加overflow:hidden规则。

停止浮动

使用clear属性可以指示元素不要包围浮动项目。

接受以下选项：

left、样式将落至左浮动元素下方，但扔将环绕右浮动对象

right、样式将落至右浮动元素下方，但仍将环绕左浮动元素

both、样式将落至浮动样式下方

none、关闭清除，让项目包围左右浮动元素

第8章，给网页添加图片

添加背景图片

background-image属性是使网站看起来美观的关键

以下三种格式都是可以的：

.testClass{
    background-image:url(image/example.gif);
    background-image:url("image/example.gif");
    background-image:url('image/example.gif');
}

可以使用相对路径，相对路径是相对于样式表的路径，而不是相对于要设置的HTML页面的路径

控制重复

使用background-repeat属性指定图片如何平铺

1、repeat是默认设置，将背景图从左到右、从上到下平铺，直到填满整个空间

2、no-repeat只显示图片一次

3、repeat-x是沿着X轴水平重复某一张图

4、repeat-y是沿着Y轴垂直地重复某一张图

定位背景图片

background-position属性，可使用多种方式来精确控制图片位置。可通过3种不同方法来设定，keyword、精确值、percentage

关键字

left、fight、center控制水平

top、center、bottom控制垂直

精确值

可以用pixel或em值来定位背景图片。使用两个值：一个值指明图片左侧和容器左侧之间的距离，另一个指明图片顶边和样式顶边之间的距离（第一个控制水平方向，第二个控制垂直方向）

percentage百分比值

以百分比时要讲究技巧，如果能够使用关键字或精确值达到效果，建议不要使用百分比

使用百分比一样要提供两个值：一个值指明水平方向的定位，一个指明垂直方向的定位。

百分比值是被格式化的元素百分比

可以与精确值混用

background-position: 5px 50%;

固定图片

background-attachment属性有两个选项：scroll和fixed

background-origin和background-clip属性

background-origin属性可以调整图片起点。有三个选项：

1、border-box将图片放在border的左上角

2、padding-box将图片放在padding区域的左上角

3、content-box将图片放在内容区域的左上角

通常来说，背景图片会铺满某个元素的整个区域，包括border和padding区域的背面，但是，利用background-clip来定义图片显示位置，有以下选项：

1、border-box让图片显示在内容区域的后面，包括border区域的背后

2、padding-box所有背景图片都只能显示到元素的padding区域和内容区域

3、content-box限制背景图片只显示在内容区域

缩放背景图片

CSS3还可以调整背景图片尺寸，background-size属性，可以利用值或关键字来设置这个尺寸：

1、用一个高度值和宽度值来设置图片尺寸

.testClass{
    background-size:100px 200px;
    background-size:100px auto;
    background-size:100% 100%;     /* 使用百分比值，让图片缩放完全适应背景 */
}

2、关键字contain会迫使图片进行尺寸调整，以保持图片的长宽比

background-size:contain

3、关键字cover会迫使图片的宽度或高度进行调整，以便适应元素的宽度或高度

background-size是修改背景图片尺寸的唯一方法。IE8不支持

background快捷方式可以使用较新的CSS background属性，但由于IE8不支持一些新属性，如果都用一个background设置，会导致其他有效属性也变得无效，而且目前尚未有浏览器能够在一个声明中同时处理background-position和background-size值，为此，最好用正常的、可接受的快捷属性创建一个声明，再在快捷声明之后单独添加CSS3新属性声明

免费图片网站

www.morguefile.com、www.sxc.hu、http://openphoto.net、http://search.creativecommons.org、www.flickr.com/creativecommons、http://picasaweb.google.com

项目符号或导航栏增色图标

Some Random Dude网站免费提供了一套图标：www.somerandomdude.com/work/sanscons/

趣味的平铺图案

ColourLovers.com网站（www.colourlovers.com/patterns）、Pattern4u网站（www.kollermedia.at/pattern4u）、Squidfingers网站（http://squidfingers.com/patterns）

图案生成器

BgPatterns网站（http://bgpatterns.com）、StripeGenerator2.0网站（www.stripegenerator.com）、PatternCooler网站（www.patterncooler.com）

使用多张背景图片

使用

.testClass{
    background-image:url(scrollTop.jpg),
                     url(scrollBottom.jpg),
                     url(scrollMiddle.jpg);
}

可以放一行，不过格式最好有

由于背景一般会平铺，为此还需要包含一个background-repeat属性：

.testClass{
    background-repeat:no-repeat,
                      no-repeat,
                      repeat-y;
}

值都是一一对应的，不过，太麻烦，容易混乱，为此使用快捷方法：

.testClass{
    background:url(scrollTop.jpg) center top no-repeat,
               url(scrollBottom.jpg) center bottom no-repeat,
               url(scrollMiddle.jpg) center top repeat-y;
}

在IE8中可以使用:before和:after伪类来实现上述功能

使用渐变色背景

线性渐变

使用关键字：

.testClass{
    background-image:linear-gradient(left,black,white);/* 从元素左边以黑色开始，渐变到元素右边以白色结束 */
    background-image:linear-gradient(top left,black,white);/* 从元素左上角开始到元素右下角，黑色开始白色结束 */
}

还可以使用程度值：0~360

使用方法：

.testClass{
    background-image:linear-gradient(45deg,rgb(0,0,0),rgb(204,204,204));
}

颜色站

渐变使用的颜色不只是两种，可以为其添加多种颜色：

.testClass{
    background-image:linear-gradient(45deg,black,white,black);
    background-image:linear-gradient(left,#900,#FC0 10%,#FC0 90%,#900);
}

10%应用到第二种颜色，告诉浏览器，需要让颜色到达元素宽度10%位置处，同样地，90%告诉浏览器需要一直保持橘黄色到元素宽度90%处然后在转变。

注：许多浏览器需要提供供应商前缀才能使用CSS新属性，IE9及更早版本还不支持渐变

不只可以使用百分比，还可以使用pixel和em，不过百分比更灵活

重复线性渐变

在这里，pixel更有用。

用指定颜色站定义一种渐变，然后重复模式，将它平铺到背景中。

.testClass{
    background-image:repeating-linear-gradient(bottom left,#900 20px,#FC0 30px,#900 40px);
}

效果：

非常棒哦。。。。

径向渐变

最简单语法：

.testClass{
    background-image:radial-gradient(red,blue);/* 创建了一个适合颜色高度和宽度的椭圆形，渐变中心处于元素中心 */
}

添加关键字"circle"还可以创建圆形渐变：

.testClass{
    background-image:radial-gradient(circle,red,blue);
}

浏览器一般是从元素中心点开始绘制径向渐变的中心，但可以利用与background-position属性相同的关键字和值来定位渐变中心点。

.testClass{
    background-image:radial-gradient(20% 40%,circle,red,blue);/* 从元素左边20%处以及元素上方40%处开始 */
}

为了指明渐变尺寸，可以使用以下4个关键字之一：

1、closest-side告诉浏览器，渐变从中心点一直延伸到离中心点最近的那一边。

.testClass{
    background-image:radial-gradient(20% 40%,circle closest-side,red,blue);
}

2、closest-corner用于测量渐变宽度，指的是从它中心点到最近元素角的距离

.testClass{
    background-image:radial-gradient(20% 40%,circle closest-corner,red,blue);
}

3、farthest-side用于测量圆形半径，即从它中间点到元素最远那一边的距离

.testClass{
    background-image:radial-gradient(20% 40%,circle farthest-side,red,blue);
}

4、farthest-corner用于测量圆形半径，即从它中间点到元素最远角的距离

.testClass{
    background-image:radial-gradient(20% 40%,circle farthest-corner,red,blue);
}

与线性渐变一样，可以使用颜色站，一样需要供应商前缀

重复径向渐变

.testClass{
    background-image:repeating-radial-gradient(circle,red 20px,orange 30px,yellow 40px,red 50px);
}

注：为了创建看起来比较自然的渐变，终止色应该与起始色相同。

用Colorzilla轻松创建渐变

使用CSS渐变生成器（www.colorzilla.com/gradient-editor/）帮助轻松创建出大多数类型的渐变（重复渐变除外）