第10章CSS对文本和图片的控制.pptVIP

机械工业出版社 网页设计与制作 刘瑞新 吴丰 主编 机械工业出版社 第10章 CSS对文本和图片的控制 10.1 文本控制 10.1.1 字体 字体具有两方面的作用：一是传递语义功能，二是美学效应。由于不同的字体给人带来不同的风格感受，所以对于网页设计人员来说，首先需要考虑的问题就是准确的选择字体。 h2{font-family:黑体;} p {font-family:微软雅黑, 宋体, Arial, Verdana, Time New Roman;} 10.1 文本控制 10.1.2 字体的尺寸 1．绝对字体尺寸（absolute-size） 绝对字体尺寸是根据对象字体进行调节的，包括xx-small、x-small、small、medium、large、x-large和xx-large七种字体尺寸，这些尺寸都没有精确定义，只是相对而言的. 2．相对字体尺寸（relative-size） 相对字体尺寸指的是相对于父对像中字体尺寸进行相对调节，包括larger和smalle两个属性值。 3．长度单位（length） 长度单位是由浮点数字和单位标识符组成的长度值，不可为负值，是一个固定的值。长度单位分为绝对长度和相对长度两种. 10.1 文本控制 10.1.3 字体的粗细 CSS样式中使用font-weight属性设置字体的粗细，它包含normal、bold、bolder、lighter、100、200、300、400、500、600、700、800和900多个属性值，数字值400相当于关键字normal，700等价于bold。 10.1 文本控制 10.1.5 字体的颜色 在CSS样式中，对文字增加颜色修饰十分简单，只需添加color属性即可。color属性的语法格式为“color:颜色值;”，这里颜色值可以使用多种书写方式： color:red; /*规定颜色值为颜色名称的颜色*/ color: #000000; /*规定颜色值为十六进制值的颜色*/ color:rgb(0,0,255); /*规定颜色值为rgb代码的颜色*/ color:rgb(0%,0%,80%); /*规定颜色值为rgb百分数的颜色*/ 10.1 文本控制 10.1.6 字体的修饰 使用CSS样式可以对文本进行简单的修饰，例如给文字添加下划线、顶划线和删除线，它是通过text-decoration属性来实现这些效果的。 h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration:blink} h5 {text-decoration: none} 10.2 段落样式 10.2.1 首行缩进 在Web页面中，将段落的第一行进行缩进，同样是一种最常用的文本格式化效果。在CSS样式中text-indent属性可以方便地实现文本缩进。该属性值可以为百分比数字或者由浮点数字和单位标识符组成的长度值，允许为负值。 style type=text/css p {text-indent: 24px;} /*设置段落缩进24px*/ /style h2大宋文化主题公园/h2 p开封清明上河园以《清明上河园》为蓝本，按照图中布局，采用宋代营造法式，结合现代建筑方法，集中再现了原图的购物景观和民俗风情。/p p景区内设驿站、民俗风情、特色食街、宋文化展示、花鸟鱼虫、繁华京城、休闲购物和综合服务等八个功能区，还有校场、虹桥、民俗、宋都等四个文化区。游览清明上河园，可以跨虹桥，登上善门，游鸿福寺，浏览文绣院，下榻古驿站，就餐孙羊正店，还可以观党民间杂耍、木兰织房，当然还有闻名中外的开封小吃。/p 10.2 段落样式 10.2.2 首字下沉 在许多杂志的排版中经常出现首字下沉的效果，所谓首字下沉指的是设置段落的第一行第一个字的字体变大，并且向下一定的距离，而段落的其它部分保持不变。 p:first-letter { float:left; /*设置浮动，其目的是占据多行空间*/ font-size:2em; /*设置下沉字体大小为其他字体的2倍*/ font-weight:bold; /*设置首字体加粗显示*/ } 10.2 段落样式 10.2.3 行高 段落中两行文字之间垂直的距离称为行高。在CSS样式中，使