网页设计基础7.ppt

第七讲  CSS之”文字与色彩” 使用css控制字体 网页上的字体对页面样式起了不可忽视的影响，在css中，我们通过与font相关的一些属性控制字体。 字体 什么是 font-family 我们已经知道font-family使用来控制页面字体样式的，并且我们拥有多种font-family的选择，但是，究竟font-family 是什么含义，为什么不直接用font, 还要加个family呢？ family中有很多成员，那么一种font-family是不是也包含多个成员呢？ Serif Family serif family包括一系列字体，这些字体的字母在笔画的末端都具有截线。 Sans-serif family 单词“sans”在法语中的含义是“没有”，所以Sans-serif字体就是指笔画末端没有截线的字体。 Sans-serif字体的粗细几乎是单一的。 Monospace Family 前缀“mono-”的含义是“相等的”，所以这类字体的特点是各个字符的间距是固定不变的。 Cursive Family 这类字体的特点是看上去很像是手写出来的，比较适合做标题。 Fantasy Family 这类字体的特点是带有奇幻色彩，可以下载安装后使用。 常见web字体 字体大小 参考答案body{ font-size: 14px;}h1{ font-size: 21px;}h2{ font-size: 17px;} 字体大小单位px--像素 字体大小单位%--百分比 字体大小单位em—字体高 字体大小单位keyword—关键词 可以使用xx-small,x-small,small,medium,large,x-large,xx-large等关键词来定义字体大小 关键词定义字体的大小依次递增20％ 一般地，small约为12px 字体颜色 字体颜色取值—关键词 Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 字体颜色取值—RGB比例 字体颜色取值—16进制色彩代码 常用色彩代码 字体粗细 body{ font-weight: bold;}a{ font-weight: lighter;}h1{ font-weight: bolder;} 字体装饰 body{ text-decoration: line-through;} 文字行高 字符间的空白 课堂练习 为bodyshop.html制作一个外部css-bodyshop.css,实现如右图的字体样式： 1、“市场价格”呈灰色删除 2、“本站价格”字体大小 1.75em,红色,加粗 课后作业 解释下列css属性的含义 font-family font-size color font-weight text-decoration Line-height Letter-spacing 上机练习 见课程网站实验七 body{ font-size: 12px; } h1{ font-size: 150%; } %定义的字体大小，实际上是以浏览器默的字体大小为参数，计算出的相对的字体大小。任意浏览器的默认字体是16px em指字体高，任意浏览器的默认字体高是16px 所以 1em=16px，12px=0.75em em有如下特点： 1. em的值并不是固定的 2. em会继承父级元素的字体大小 body{ font-size: small; } body{ font-family: “宋体”,”黑体”;  font-size:0.75em; color:red;} 通过color（注意不是font-color）来设置字体颜色。颜色的取值可以是关键词，RGB比例，或者16进制的色彩代码。 白色white 以上是常见的颜色关键词 通过设定R(红色), G(绿色),B(蓝色) 三原色的比例,来取 值色彩,例如 RGB(125,154,239) 通过一个16进制数来取值色彩,例如 #7d9aef,其中#表示这是一个16进制数 body{ font-family: “宋体”,”黑体”;  font-size:0.75em; color:red; font-weight:bold;} 通过font-weight来设置字体粗细。 font-weigh