一、字体的一些属性及定义
| 属性 | 定义 |
|---|---|
| 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
调整字体大小有四种不同的表示方法：
- 用像素值
px来表示：font-size: 100px;
body{
font-size: 100px;
}
- 用
%来表示：font-size: 130%;
body{
font-size: 20px;
}
h1{
font-size: 130%;
}
如果没有给h1设置字体的大小，就继承父级元素body的属性，字体大小为20px。此规则中h1的字体大小则为父级元素字体大小的130%。
- 用
em来表示：font-size: 1.3em;
body{
font-size: 50px;
}
h1{
font-size: 1.3em;
}
- 用关键字来表示：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;
}
