第二部分----CSS实用技术 第6章，文本格式化
指定备用字体：
font-family:Arial,Helvetica,sans-serif;
当访问者没有安装第一种字体时，浏览器会在列表中继续往下搜寻，直到找到备用字体。
若字体名称中包含多个单词，则必须用双引号将它们括起来
font-family:"Times New Roman",Times,serif;
sans-serif字体看起来干净而简洁，所以常被用于标题。sans-serif字体包括Arial、Helvetica、Verdana
注：自己的审美观才是好的指导。
monospaced（等宽）字体经常用于显示计算机代码。
Arial Black、Arial Narrow、Impact字体， 特别注意：Arial Black、Impact字体只有一种形式，没有斜体，在使用这些字体时一定要将font-weight和font-style设为normal，不然浏览器会绞尽脑汁去想这些文字应该是啥样的。
指令较多，后续补充
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属性可以调整项目符号与其文本之间的距离，使用该属性时，要创建一个应用于
网络上免费的图标和项目符号： 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/）帮助轻松创建出大多数类型的渐变（重复渐变除外）
c/s-Architektur und b/s-Architektur
So lösen Sie javascriptvoid(o)
Der Unterschied zwischen Threads und Prozessen
Warum ist mein Telefon nicht ausgeschaltet, aber wenn mich jemand anruft, werde ich aufgefordert, es auszuschalten?
Wort erzwungener Zeilenumbruch
vbnet-Tutorial
So passen Sie die Mausempfindlichkeit an
Linux-Befehl zum geplanten Herunterfahren
