本博客为本人学习笔记，参考书为《Head First HTML与CSS》，如有不对，请见谅。
认识新词汇:
font-family定制页面中使用的字体：Verdana,Geneva,Arial,sans-serif;
font-size控制字体大小：14px,21px;
font-weight影响字体粗细：lighter,normal,bold,bloder;
color设置颜色；
text-decoration为文本增加更多风格：none,underline,overline,line-through;
一、设置字体
字体系列：
font-family共有5组字体：
1.sans-serif系列：没有衬线的字体，比serif系列在计算机上更容易读取；
2.Serif系列：有衬线的字体（新闻报纸的文字排版）；
3.Monospace系列：包含固定宽度的字符，主要用于显示软件代码；
4.Cursive系列：看似手写（标题可用，有趣）；
5.Fantasy系列：含有某种风格的装饰性字体。
使用CSS指定字体系列：
body {
font-family:Verdana,Geneva,Arial,sans-serif;
}
创建一个首选字体列表，两种、三种都可以，希望大多数浏览器有你的第一选择，至少保证浏览器能提供其中一种。
增加Web字体：
@font-face{
font-family:Emblema One;
src:url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/Emblema One-Regular.woff") ，
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/Emblema One-Regular.ttf")；
}
h1{
font-family:"Emblema One",sans-serif;
}
增加Web字体及在css中使用Web字体。
二、调整字体大小
px
按像素指定大小
%
相对于另一个字体大小指出这个字体大小
em
相对比例因子
body {
font-size: 14px;
}
h1{
font-size: 150%;
}
h2{
font-size: 1.2em;
}
关键字
把字体大小指定为：xx-small，x-small，small,medium,large,x-large,xx-large。浏览器会把关键字转为像素值，它会使用浏览器中定义的默认值完成转换。每个大小约比前一个大20%。推荐small,medium。
三、改变字体粗细
font-weight：lighter 相对稍细
font-weight：normal 正常
font-weight：bold 粗体
font-weight：bloder 相对稍粗
也可以设置为100-900之间中的一个数（100的倍数）font-weight：200
四、为字体增加风格
斜体文本 （多用）
向右倾斜，另外衬线还有弯曲。
font-style：italic
倾斜风格
普通文字向右倾斜。
font-style：oblique
五、指定颜色
Web颜色是按构成颜色的红、绿、蓝三个分量所占数值（0-100%）来指定的。
css只定义了大约150个颜色。
按名指定颜色
16种：Aqua,Black,Blue,Fuchsia,Gray,Green,Lime,Maroon,Navy,Olive,Pueple,Red,Silver,Teal,White,Yellow。
body {
background-color:Blue;
}
用红绿蓝值指定颜色
body {
background-color:rgb(80%,40%,20%);
}
用十六进制码指定颜色
十六进制码以#开头，共6位，前两位代表红色，中间两位代表绿色，后两位代表蓝色。
eg:#cc6600
其中红色十六进制为cc转化为十进制为12*16+12=204；
绿色十六进制为cc转化为十进制为6*16+6=102；
蓝色十六进制为cc转化为十进制为0*16+0=0；
则表示为rgb(204,102,0)。
如何找到Web颜色使用在线颜色表
搜索HTML color charts。
六、文本装饰
下划线、上划线和删除线都是装饰。
em {
text-decoration:line-through;
}
这使em元素上有一条穿过的线。
em {
text-decoration: underline overline;
}
这使em元素有一个下划线和一个上划线。只有同时指定，才会有累加效果。
颜色为#888888的细虚线下边框为：border-bottom:thin dotted #888888
em {
text-decoration: none;
}
这使em元素没有任何装饰。
相关文章
您阅读本篇文章共花了：
发表评论