CSS3 Secrets の第 3 版は、HTML5 学習ノート_html/css_WEB-ITnose の第 6 章から第 8 章までをカバーしています。

パート 2----CSS 実践技術 第 6 章、テキストの書式設定

バックアップ フォントを指定します:

font-family:Arial,Helvetica,sans-serif; 訪問者が最初のフォントをインストールしない場合、ブラウザーはバックアップ フォントが見つかるまで、リストの下方向の検索を続けます。

フォント名に複数の単語が含まれる場合は、二重引用符で囲む必要があります

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

sans-serif font

sans-serif フォントはすっきりしていて簡潔に見えます。なのでタイトルによく使われます。サンセリフ フォントには、Arial、Helvetica、Verdana が含まれます

注: あなた自身の美学が最良のガイドです。

等幅フォント

等幅 (等幅) フォントは、コンピューター コードを表示するためによく使用されます。

その他のフォント

Arial Black、Arial Narrow、Impact フォント 特記事項: Arial Black および Impact フォントには 1 つの形式しかなく、斜体はありません。これらのフォントを使用する場合は、font-weight と font-style を必ず標準に設定してください。 . 、そうでない場合、ブラウザはテキストがどのように見えるべきかを理解するために知恵を絞ります。

Web フォントを使用する

多くの手順がありますが、後で追加します

Web フォントの CSS 部分は非常に単純で、必要なコマンドは 2 つだけです:

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 つの方法: キーワード、 CSS は 7 種類のキーワードを提供します: xx-small (9px)、x-small (10px)、small (13px)、medium、large (18px)、x-large (24px)、xx-large (32px) )、ブラウザのベースのフォント サイズが調整されていない場合、キーワードは基本的に括弧内のフォント サイズと同じになります

書式設定された単語と文字

イタリック太字

font-style:italic

font-スタイル:標準

フォントスタイル:斜体

フォントの太さ:標準

大文字

テキスト変換:すべての文字を大文字にする

text-transform: lowercase; すべての文字を小文字にする

text-transform:capitalize; 各単語の最初の文字を大文字にする

小文字

フォント-variant:small-caps; 文字を大文字に設定しますが、小文字と同じサイズになります

テキスト装飾

text-decoration --> 下線、上線、線引き、点滅、なし 文字間隔と単語間隔

文字間隔: 文字間隔、正の数値が増加、負の数値が減少

word-spacing: 単語の間隔、正の数値が増加、負の数値が減少

Text-shadow

text-shadow --> からの水平オフセットテキストの左側または右の距離）、垂直オフセット（テキストの上または下の距離）、影のぼかし、影の色

text-shadow: -4px 4px 3px #999; 最初の -4px は影を配置することを意味しますテキストの左側に 4 ピクセル (正の値は右側に配置することを意味します)、2 番目の 4 ピクセルはテキストの下に影を 4 ピクセル配置することを意味します (負の値は上を意味します)、3 番目の 3 ピクセルは影のぼかしを定義します。0 ピクセルはぼかしません。すべて、明確なシャドウを生成し、値が大きいほどぼやけます。

カンマ (,) で区切って複数のシャドウを定義できます。

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属性可以调整项目符号与其文本之间的距离，使用该属性时，要创建一个应用于25edfb22a4f469ecb59f1190150159c6标签的样式，这种方法只有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/）帮助轻松创建出大多数类型的渐变（重复渐变除外）