以前看前端时候的一些小笔记。

背景知识

常用的web字体格式及各自的文件的拓展名

Woff（web开放字体格式)：已经发展为web字体的一个标准，大多数现代浏览器都对woff提供了很好的支持。

托管web字体：

前提工作

*如何为页面增加web字体：
s1找到一个字体:访问提供字体的网站
s2确保有所需字体的所有格式:首先woff，其次推荐ttf（IE除外）
s3把字体文件放在服务器上或找字体在线服务托管字体文件：需要字体文件的URL
s4在CSS中增加@font-face属性：把该规则放在CSS文件的最上面。利用font-family属性为这个字体创建一个名字；利用src属性告诉浏览器哪里可以得到这个字体<注意如何书写>，浏览器会尝试加载每一个src URL指定的字体文件，直到找到它能支持的一个文件。
s5在CSS中使用font-family名
s6加载页面：一旦加载，浏览器就会为该字体分配指定的名字

注意点

• 用户的计算机往往使用不同的操作系统，安装不同的字体。
  处理方法1：在font-family属性的字体列表里指定所有用户机器上都可用的字体，最后提供一个字体系列名。
  处理方法2：使用web字体向用户的浏览器提供一种字体。
• TTF和WOFF在IE8及以前的版本中不可用。
• 可以把@font-face规则看出一个内置的CSS规则，而不是一个选择器规则。
• @font-face规则告诉浏览器：要加载由src URL指定的字体文件。浏览器会尝试加载每一个sr文件，直到找到它能支持的一个文件。一旦加载，就会为这个字体分配font-family属性中指定的名字。
• 各个浏览器中，关键字的定义不一定相同。
• 如果用像素指定字体大小，老版本的IE将不支持文本缩放。
• 如果没有指定字体大小，浏览器只能得到默认字体大小（通常是16像素），标题也是默认的比例，这取决于浏览器。
• 在body中使用%或em时，字体大小的默认字体大小的百分之多少。
• 使用相对字体大小让你的页面更可维护。
• 倾斜文本并不是使用一组专门设计的倾斜字符，而是由浏览器将正常文字倾斜。斜体额倾斜文本这两种风格有时看起来一样，有时不一样，这取决于选择的字体和浏览器。在不区分的情况下，任选一种使用即可。
• 指定颜色的方法有很多，但最终都是要告诉浏览器一个颜色中红、绿、蓝分量分别是多少。
• CSS中颜色名不区分大小写。有16钟基本颜色和150种扩展颜色可用颜色名方法指定。
• 可以使用text-decoration属性为文本创建一个下划线。有下划线的文档通常会被用户误以为是连接文本，所以要谨慎使用这个属性。
• 可用一个照片编辑应用的颜色选择工具或某个在线web工具找到你想要的一个颜色的十六进制码。
• 如果颜色的十六进制码中每一位都相同，则这些颜色都是灰色，从深灰到浅灰色（#111111～#eeeeee）。
• 默认地，背景图像会平铺，也就是反复重复来填满整个背景空间。Background-repeat可以控制这种平铺行为。
• 把边框设置为锯齿型：使用dashed边框，把边框颜色设置为与页面背景色一致。
• 不同浏览器对thin、medium、thick的具体大小可能有不同定义。
• 内容一定时，内容的宽度变窄，高度自然就变长了。
• 内容区、内边距、边框、外边距都指定了，加在一起就是整个元素（盒子）的宽度。一旦设置一个元素的宽度，它不会延伸来占满浏览器窗口的整个宽度。
• 一个块元素的默认宽度是“auto”，会延伸占满可用的所有空间（考虑到边距和边框之后）。如果没有内外边距和边框，内容的宽度就是盒子的宽度。
• 一般来说，一个元素的高度是默认的，也就是auto，浏览器在垂直方向上会延伸内容区，使所有内容都可见。可以显示地设置一个高度，不过会有风险，如果你指定的高度不够大，不足以放下内容，内容底部有可能“溢出”到其他元素中。所以一般不用指定元素的高度。
• <div>的默认内边距为0像素。
• Text-align属性只能在块元素上设置，直接在内联元素上使用则不起作用。它会对块元素中的所有内联内容对齐，它适用于任何类型的内联元素对齐。

属性

1.为文本增加样式

@font-face规则：获取一个web字体，为他分配一个font-family名。可用@font-face定制多个字体：确保服务器上有相应的字体文件（想让web用户看到你的网页时），为每个字体单独创建一个font-face规则，分别指定唯一的名字。Src属性告诉浏览器哪里可以得到该字体，对浏览器可识别的每一个文件，要分别指定一个src值（属性值：url(路径)），用逗号分隔。Font-family属性为这个字体创建一个名字。

font-family：定制页面中使用的字体。每个font-familyb包含一组有共同特征的字体。共有5个字体系列：Serif（有衬线）、sans-serif（没有衬线，容易识读）、monospace（每个字符的宽度固定统一，通常用于显示软件代码）、cursive（看似手写的字体）、fantasy（含有某种风格的装饰性字体）。

Font-family属性实际上是一个字体优先列表（用逗号分隔每个字体，字体名包含多个单词则在两边加上双引号），第一个最希望使用，最后是该系列字体的系列名（并不是具体的字体名，取代它的是浏览器定义的该字体系列的默认字体）。

font-size：控制字体大小。属性值：Px法（告诉浏览器字母高度是多少像素、像素数与px间不能有空格）；%法（相对于父元素的字体大小）；em法（相对于父元素的字体大小）；关键字法（xx-small、x-small、small、medium、large、x-large、xx-large，small通常定义为12像素，通常后面的比前面的大20%）。如何指定字体大小：通常选择一个关键字（small或medium）作为body中的字体大小，其他元素大小用%或em来相对指定。

color：为文本设置颜色。属性值：颜色名；红绿蓝（rgb）的分量(百分比或0到255之间的一个数)(格式：rgb(80%,40%,0%)或rgb(204,102,0) )；十六进制码（总以#开头，每两位分别代表颜色的红黄蓝分量，每两位数字表示一个0到255的数。如果每一组分量的两位数字都相同，则可以使用简写。）

Font-weight：控制字体的粗细。属性值：bold粗体、normal正常体、bolder相对父元素稍粗（没有多少字体支持）、lighter相对父元素稍细(没有多少字体支持)。

Font-style：为文本增加倾斜风格。属性值：italic斜体（不是所有字体都支持）、oblique倾斜文本。

Text-decoration：为文本增加更多风格。属性值：underline(下划线)、overline(上划线)、line-through(从文本中间穿过的横线)、none(让文本没有装饰)。想设置多个装饰时，在属性里用空格隔开不同的值即可。

Line-height:调整页面文本的行高（行间距）。属性：像素、em、百分值。可以直接对该属性使用一个数，而不是em或%，表示行高是自己字体大小的几倍，不是父元素字体大小的几倍。

Width:只指定元素内容区的宽度。属性值：像素、百分数（宽度计算为所在容器宽度的一个百分比）。

```Text-align``:确定文本的对齐方式。只能在块元素上设置，会对块元素中的所有内联内容对齐，直接在内联元素上使用则不起作用。这个属性可以由所有嵌套的块元素继承。属性值：center(居中)、

2.盒模型的边框增加样式

Border-color 、 border-width、border-style：调整盒模型中边框的颜色、宽度、样式。

Border-top(right、bottom、left)-color(width、style)：指定某一边的边框。

Border-(top、bottom)-(left、right)-radius:创建圆角。属性值：像素、em（边框半径的度量相对于字体大小。）

border-color:属性值：颜色名、rgb值、16进制编码。

Border-width:属性值：关键字（thin、medium、thick）、像素。

Border-style：属性值：solid(实线)、dotted（虚线）、double(双线)、dashed（破折线）、groove(槽线)、insert（内凹线）、outset(外凸线)、ridge(脊线)。

3.盒模型的内外边距

Padding：对内容四周设置相同的内边距。可设为像素数或百分数。

Padding-left（right）：重新设置左（右）边距。（顺序很重要。先设置总体的内边距。）

Margin：对内容四周设置相同的外边距。可设为像素数或百分数。

Margin-left(right)：同上。

4.盒模型的背景图像

Background-image：为一个元素增加背景图像。属性值：url(相对路径或绝对路径) ，不需要加双引号 。

Background-position：设置图像的位置。属性值：按像素、百分数、关键字（top、left、right、bottom、center）指定（用空格隔开属性值）。

Background-repeat：控制背景图像的平铺行为。属性值：repeat（默认行为：图像在水平和垂直方向上重复）、no-repeat(图像只显示一次，不重复)、repeat-x（只在水平方向上重复）repeat-y（只在垂直方向上重复）、inherit（和父元素一样）。

简写

字 体 ：font: font-style font-variant font-weight font-size /line-height font-family;
用空格分隔各个属性名，顺序不重要，但它们必须出现在font-size属性前面。这些属性的值都是可选的，可以指定这些值的任意组合。
font-size:必须指定字体大小
/line-height:该属性可选，若使用，则在font-size属性后面加一个/即可
font-family:强烈建议指定一些候选字体，属性值之间用逗号分隔

对应到简写形式中：font:small/1.6em Verdana,Helvetica,Arial,sans-serif;

内（外）边距：padding: 0px 20px 30px 10px ;(顺时针)

Padding: 20px ; (四边值相同)

Padding: 0px 20px ;（上下及左右组内值都相同时）

边 框: ```border: thin solid

007e7e ;```（可采用任何顺序）

背 景 ：background: white url(images/clock.gif) repeat-x ;（可采用任何顺序）