パート 2----CSS 実践技術 第 6 章、テキストの書式設定
バックアップ フォントを指定します:
font-family:Arial,Helvetica,sans-serif; 訪問者が最初のフォントをインストールしない場合、ブラウザーはバックアップ フォントが見つかるまで、リストの下方向の検索を続けます。
フォント名に複数の単語が含まれる場合は、二重引用符で囲む必要があります
font-family:"Times New Roman",Times,serif;
sans-serif font
注: あなた自身の美学が最良のガイドです。
等幅フォント
その他のフォント
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) )、ブラウザのベースのフォント サイズが調整されていない場合、キーワードは基本的に括弧内のフォント サイズと同じになります
書式設定された単語と文字
フォントスタイル:斜体
フォントの太さ:標準
大文字
テキスト変換:すべての文字を大文字にするtext-transform: lowercase; すべての文字を小文字にする
text-transform:capitalize; 各単語の最初の文字を大文字にする
小文字
フォント-variant:small-caps; 文字を大文字に設定しますが、小文字と同じサイズになります
テキスト装飾
text-decoration --> 下線、上線、線引き、点滅、なし 文字間隔と単語間隔
word-spacing: 単語の間隔、正の数値が増加、負の数値が減少
text-shadow --> からの水平オフセットテキストの左側または右の距離）、垂直オフセット（テキストの上または下の距離）、影のぼかし、影の色
カンマ (,) で区切って複数のシャドウを定義できます。
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属性可以调整项目符号与其文本之间的距离，使用该属性时，要创建一个应用于
网络上免费的图标和项目符号： 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不支持
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值来定位背景图片。使用两个值：一个值指明图片左侧和容器左侧之间的距离，另一个指明图片顶边和样式顶边之间的距离（第一个控制水平方向，第二个控制垂直方向）
以百分比时要讲究技巧，如果能够使用关键字或精确值达到效果，建议不要使用百分比
使用百分比一样要提供两个值：一个值指明水平方向的定位，一个指明垂直方向的定位。
百分比值是被格式化的元素百分比
可以与精确值混用
background-position: 5px 50%;
background-attachment属性有两个选项：scroll和fixed
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);}注：为了创建看起来比较自然的渐变，终止色应该与起始色相同。
使用CSS渐变生成器（ www.colorzilla.com/gradient-editor/）帮助轻松创建出大多数类型的渐变（重复渐变除外）
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
