CSS-字体及颜色样式

一、字体的一些属性及定义

属性	定义
font-family	定制页面中使用的字体
font-size	控制字体大小
color	控制字体颜色
font-weight	控制字体粗细
text-decoration	为文本增加上划线/下划线/删除线

例子：

body{
font-family: Verdana, Genevs, Arial, sans-serif;
}

body{
font-size:14px;
}

body{
color:red;
}

body{
font-weight:bold;
}

body{
text-decoration: underline;
}

二、字体系列

• font-family指定字体系列

fant-family5个字体系列例子

一组候选字体：

body{
font-family: Verdana, Genevs, Arial, sans-serif;
}

Verdana是我们编写时最希望浏览器显示的字体，其次是Genevs、Arial,但由于用户的电脑上不一定装有这些字体，在最后我们要放一个通用的候选字体sans-serif。

• font-family:sans-serif;和font-family:"sans-serif"的区别
• font-family: sans-serif;代表的是一种普通的sans-serif字体族
• font-family: "sans-serif";代表的是一种叫“sans-serif”的字体
• 增加Web字体，使用@font-face属性
  例子：

@font-face{
font-family: "Emblema One";
src:
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff");
}

src指定“Emblema One”这个字体的地址，浏览器可从这个地址中找到“Emblema One”字体。

三、调整字体大小——font-size
调整字体大小有四种不同的表示方法：

1. 用像素值px来表示：font-size: 100px;

body{
font-size: 100px;
}

2. 用%来表示：font-size: 130%;

body{
font-size: 20px;
}
h1{
font-size: 130%;
}

如果没有给h1设置字体的大小，就继承父级元素body的属性，字体大小为20px。此规则中h1的字体大小则为父级元素字体大小的130%。

3. 用em来表示：font-size: 1.3em;

body{
font-size: 50px;
}
h1{
font-size: 1.3em;
}

4. 用关键字来表示：xx-small，s-small，small，medium，large，x-large，xx-large

body{
font-size: small;
}

最小的为xx-small，每个大小比前一个大小大约20%，small通常定义为12px。

四、设置字体的粗细——font-weight
为body设置粗体：

body{
font-weight: bold;
}

如果子级元素继承了父级元素的粗体样式，想要去除粗体：

h1{
font-weight: normal；
}

五、把文本变为斜体

1.font-style: italic;(斜体)
2.font-style: obliqute;(倾斜)

通常使用font-style: italic斜体

六、指定Web颜色

• 用颜色名指定

body{
background-color: red;
}

• 用红、绿、蓝的值指定，255是红、绿、蓝的度量单位

1.
body{
background-color: rgb(80%, 40%, 10%);
}
2.
body{
background-color: rgb(204, 102, 25);
}

• 使用十六进制码来指定颜色

body{
background-color: #cc6600
}

前面两位cc代表红，中间66代表绿，最后两位00代表蓝

• 简写规则：如果每一组中数字相同，则可简写。例如：#ccbb00=#cb0，如果为#ccbb10则不能简写。

七、为文本增加上划线/下划线/删除线——text-decoration

1.增加删除线
em{
text-decoration: line-through;
}
2.增加下划线和上划线
em{
text-decoration: underline overline;
}
3.去除继承父级元素的装饰
em{
text-decoration: none;
}