零点起飞学HTML+CSS之网站中的文本样式.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2012/12/31,#,第,3,章 网站中的文本样式标签,一个网站是由文字、图片、视频、音频等元素组成的。而且文字是网站构成和表现网站的重要元素。通过文字浏览者可以看到网站所要传达的信息和所需的信息。一个好的网站，文字样式的设置是非常重要的，它直接影响网站的整体效果。,3.1,设置标题字体,标题是一段内容的简介。通过标题，我们就可以了解文章内容所要表达的重点，所以标题是网站中的必要部分。有了标题后，为了可以吸引到更多的浏览者阅读网站内容，就得对标题字体做出修饰，使标题更明显和漂亮，更容易被浏览者注意到。,3.1,设置标题字体,标题字体标签是以几种固定的字号来显示标题。它的设置是通过,来实现的，将要显示的标题文字包含在,和,里面即可。其语法结构如下所示。,标题文字,3.1,设置标题字体,使用,可以用来区分标题的大小。通常情况下，默认第一个标题为,，其字体是最大的，当后面多增加一个标题，后面的标题字体就会变小，依此类推。,3.2,设置网页文字样式,标题字体定义完，就要开始定义网页中文字的样式，,标签是专门定义网页文字的标签。它可以定义文字的字体、字号、颜色等属性。在这一节将详细讲解,标签里的字体大小,和字体风格,。,3.2.1,设置文本大小,设置字体大小可以使用,标签里的,属性，,属性用来设定文本字号取值范围是,17,。其语法结构如下所示。,文本内容,3.2.2,设置文本字体,标签中的,属性是用来设定文本所使用的字体，它和,标签一样都是写在,里面的。通过设置不同的字体，可以使网站更加漂亮，更加的吸引浏览者。其语法形式如下所示。,文本内容,3.3,文本布局标签,一个网页中的文本不仅要设置好它的样式，还要对文本进行布局。通过对文本的布局来达到网站内容的清晰整洁的效果。做好文本布局，可以让浏览者更好的接受网站的内容。这一节将学习常用的文本布局标签。,3.3.1,缩进标签,是段落缩进标签，用来对文本内容的缩进。,标签是对一整段内容的缩进，而不是首行的缩进，它会在整段的左右两边都进行缩进。其语法结构如下所示。,一段文本内容,3.3.2,保留格式标签,标签可定义预格式化的文本，用来保留文本中空格和换行。就算在代码中不使用空格和换行的标签，而是手动对它进行空格和换行，浏览器显示出来的效果也和代码中的效果相同。其语法如下所示。,文本内容,3.3.3,使用内联行,内联行,是在不改变原来格式的情况下，对放在内容里的某些字进行修饰，或对内容中某些段落的修饰。其语法结构如下所示。,内容,3.4,基于物理样式的文本标签,物理样式，是指标签本身就说明了所修饰文字的效果的样式。使用物理样式的好处是，浏览器会严格遵照标签的样式显示文本。因此在不希望浏览器改变样式的情况下就可以使用物理样式来设置文本内容。,34.1,加粗标签,加粗标签,就是把正常显示的字体表现为比较粗比较明显的的字体。通常需要强调的文字，会使用粗体来表现。其语法结构如下所示。,加粗文字,3.4.2,斜体标签,斜体就是把正常显示的字体表现为偏斜的字体。通常需要强调的文字，也会以斜体来表现，来达到想要的强调的效果。其语法结构如下所示。,斜体文字,3.4.3,下划线标签,/,下划线,标签就是在文字下增加一条细线，对文字进行标记，以区别于其他的文字。其语法结构如下所示。,需要标注下划线的文字,3.4.3,下划线标签,/,标签是对文字进行标记，让其显示出下划线的效果。对比于,标签，定义不同，而显示的效果是相同的。语法形式如下所示。,需要标注下划线的文字,3.4.3,下划线标签,/,和,标签不同的是,标签多出了两个属性值：,cit,和,datetime,。这两个属性值只是为了让设计师在代码里可以很容易看到其修改的详细信息，在效果上体现不出这两个属性值的效果。,cit,属性指出原文档或者信息的链接，该属性通常用来指出这篇文章在此处被改动的原因。,datetime,属性指出做修改的时间。,3.4.4,删除线标签,/,是删除线标签，它会在文字中间增加一条细线，对文字进行标记，区别于其他的文字。通常用于对需要删除的文字做标记。其语法结构如下所示。,需要删除的文本内容,3.4.4,删除线标签,/,标签也是删除线标记，与,标签在定义上有所不同，不过显示的效果是一样的。浏览器把,标签的删除标记默认成为文字加上删除线，而,标签则是明确规定了是对文字加上删除线，浏览器不用去理会有没有删除的意义。语法形式如下所示。,文字,3.4.5,等宽字体效果,在,标签里，文字间是以等宽字体来显示的。其语法结构如下所示。,等宽显示的文字,3.4.6,设置上标,有时候在数学表达式中，经常会出现上标文字，即一段文字以小字体的方式显示在另一段文字的右上角。当时在,Dreamweaver,中并不能直接写出上标的格式。如果想写上标，可以使用,标签。其语法结构如下所示。,表示为上标的文字,3.4.7,设置下标,下标是一段文字以小字体的方式显示在另一段文字的右下脚下标,标签和上标,标签的写法是一样的，用法也是一样的。其语法结构如下所示。,表示为下标的文字,3.5,基于逻辑样式的文本标签,和物理样式不同，,逻辑样式是指要,浏览器自己理解标签的意思，然后再显示出标签的效果。因此在不同浏览器下，标签显示的效果也是不同的。不过它可以让浏览器自己选择一种最佳的显示效果。下面我们来详细讲解这些标签。,3.5.1,引用标签,引用标签,是指引用同样的宽度来显示字体，和,标签的使用效果相似。区别于,标签，,标签是用来定义样本的文本的，它会遵循输入的文本格式来显示文本。语法形式如下所示。,文本内容,3.5.2,变量名称定义标签,标签表示变量的名称，是为网页上出现的变量名称制订的格式。,标签里的内容通常都是以斜体显示的。其语法形式如下所示。,变量名称,3.5.3,文献参考标签,标签通常表示它所包含的文本对某个参考文献的引用，例如书籍或者杂志的标题。通常将内容显示为斜体效果。其语法结构如下所示。,文献参考名称,3.5.10,设置小号字体,标签是让浏览器呈现小号字体效果。包含在,标签内的内容将会根据浏览器的设置来显示小号的字体。这里的小号字体相当于,font,里面的,size,为,1,时的字体。其语法结构如下所示。,文本文字,3.5.11,设置大号字体,标签和,标签的用法一样，它是让浏览器显示比页面中其它字体大一号的字体。,标签还可以同时进行多个嵌套，但需要注意的是,标签在进行多个嵌套的情况下，在最里层的字体会自动再变大一号。其语法结构如下所示。,文本文字,3.6,本章小结,本章对网页中设置文本样式的标签进行了讲解。详细介绍了如何设置标题样式、网页文字样式以及基于物理样式和逻辑样式的文本标签。文本标签是网页中最基本、也是最重要的标签。因此读者要认真学习本章内容，为以后制作完整网站打好基础。,