文字在网页中的应用.pptxVIP

网页设计案例教程案例说明 文字是网页中最为重要的元素，同样，对网页中文字的修饰也是至关重要的。在第2章中，我们已经学会了如何在网页中插入文字、段落和标题等。本案例中，我们将通过制作个人博客首页，学习如何运用CSS对文字进行美化和修饰，包括设置文字的字体、字号、颜色和加粗效果等。构建HTML结构案例步骤1.步骤 01步骤 02步骤 03将本书附赠素材“第3章”文件夹拷贝至本地磁盘创建的“My Web”站点的根目录中。打开“文件”面板，在刚拷贝的文件夹“第3章\task1”中新建一个名为blog-lx.html的网页文档，并在文档窗口中将其打开。打开task1文件夹中名为“文字”的文本文件，将文字内容复制粘贴到blog-lx.html文档代码视图中的body/body标签对中。案例步骤案例步骤添加段落。将其他没有添加标题标签但需要划分段落的文本，分别使用段落标签对p/p括起来。添加水平线。在最上方的1号标题“日志”后面添加水平线标签hr。步骤 07步骤 06步骤 05提取正文内容。为各摘要段落的标签设置class（类）属性并指定属性值（类别名）为“zw”，以方便后面使用CSS的类选择器对日志正文进行单独修饰。表3-1 涉及的HTML标签标签描述标签描述body/body网页主体标签h4/h44号标题标签h1/h11号标题标签p/p段落标签h3/h33号标题标签hr水平线标签设置CSS样式案例步骤2.步骤 01指定在HTML页面中引入CSS样式表的方法。此处使用内嵌样式，在head/head标签对之间添加如下标签。style type=text/css!/style案例步骤使用CSS对整体页面进行设置。在步骤1中输入的!-- --语句之间输入如下语句。body{ background-color:#CCCCCC; /*设置整个页面的背景颜色为灰色*/ margin:0px 30px; /*设置整个页面的上下边距为0px，左右边距为30px*/ font-size:18px; /*整体设置文字大小为18px*/}步骤 02 margin属性叫做外边距，用来设置元素与元素之间的距离，属于CSS布局中较常用到的属性。在步骤3中会用到padding属性，它叫做填充（或内边距），用来设置块元素中的元素（如文字）同块边框之间的距离。案例步骤设置页头的“日志”（1号标题h1）标题效果。继续在步骤2输入的代码下面输入以下代码。步骤 03h1 { font-family: 黑体; /*设置文字字体为黑体*/ font-weight: bolder; /*设置文字加粗*/ color: #FFFFFF; /*设置文字颜色为白色*/ letter-spacing:1em; /*设置文字之间的字间距为一个文字大小*/ background-color: #FF0000; /*设置背景颜色为红色*/ padding: 10px; /*设置文字的内边距为10像素*/}案例步骤知识库继续在下面设置各日志标题（3号标题h3）效果，代码如下。标题标签属于块元素，其作用范围为标题段落所在的整个区域（相当于一个“块”），所以为标题设置的背景色会铺满整个标题所在区域。另外，可利用“padding”属性设置标题的内边距，即标题文字与标题块边框间的距离。属于块元素的HTML标签包括段落标签p、标题标签h和div标签等。步骤 04h3 { font-weight: bold; /*设置文字加粗*/ color: #FF0000; /*设置文字颜色为红色*/}案例步骤继续在下面设置文字“分类……”（4号标题h4）的效果，代码如下。h4{ text-align: right; /*文字右对齐*/ color: #FFFFFF; /*文字颜色为白色*/ font-family: 华文新魏; /*文字字体为华文新魏*/ font-style:oblique; /*文字倾斜*/}步骤 05 text-align属性用于设置块元素标签（如p、div、h1 ~ h6等）中内容的水平对齐方式，包括居中（center）、居左（left）、居右（right）对齐3种方式。案例步骤继续在下面设置类别名为“zw”的段落文字效果，代码如下。步骤 06步骤 07.zw{ font-family: 宋体; }保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。支撑知识点一、CSS文字样式常用属性 设置字体：font-family； 设置字号：font-size； 设置斜体：font-style； 设置加粗：font-weight； 设置颜色：color； 设置变体：font-variant； 组合设置字体属性：font。设置文字字体1. 属性为