轻松学HTMLCSS之文字.pptx

,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2020/2/7,#,单击此处编辑母版标题样式,第,3,章 文字,文字是网页中传达信息的最常用的方式。任何网页元素都无法代替文字的作用。它不仅是网站信息传递的主要载体，也是网页中必不可少的重要视觉艺术传达符号。文字设计的好坏会直接影响到整个网站的视觉传达效果。本章将详细讲解网页中文字的使用。,3.1,网页中的文字,由于网页的自身特点，在网页中使用文字需要考虑诸多因素，如文字的编码、文字的字体、文字的表示。一旦忽略这些因素，会对信息传达的造成各种障碍。下面依次讲解这些因素。,3.1.1,文字编码,字符集,在计算机中，所有的信息都是使用数字表示的。对于非数字的的内容必须按照一定的规则进行编码，才能进行保存。而网页的文字，同样是采用编码的形式进行保存。由于全世界存在众多的语言，所以文字形式也各不相同。由于历史原因，对于各种文字有多种编码形式。下面依次讲解最常用的基本编码模式。,（,1,）,Unicode,联盟开发了,Unicode,标准。,（,2,）,GBK,是汉字编码标准之一。,（,3,）,GB2312,一般用于简体中文，与,Unicode,都是,字符集。,1.,使用,HTML,标签设置文字编码,HTML,并没有提供专门的标签设置文字编码。用户只能在,标签中进行设置。设置方法如下：,2.,使用,Dreamweaver,设置文字编码,在,Dreamweaver,中，用户可以直接以界面化得方式进行设置。打开,HTML,文档。在“属性”面板中，单击“页面属性”按钮，进行设置。,3.1.2,文字的字体,字符集决定文字在计算机内部的编码。但是文字的具体显示，则由字体所决定。换句话说，字体决定一个文字编码在屏幕显示出来的字。在网页设计过程中，我们常用的文字字体的类型有宋体、黑体、楷体和,Wingdings,。其中，,Wingdings,字体是网页中特殊的字体。下面详细讲解该类字体。,Wingdings,字体,Wingdings,是一个符号字体系列，它将许多字母渲染成各式各样的符号。下面我们介绍几种常用的给大家，如图,3.2,所示。,Wingdings2,下面我们介绍几种常用的给大家，如图,3.3,所示,。,Wingdings3,Wingdings3,则包含了箭头形状的全部种类，下面我们介绍几种常用的给大家，如图,3.4,所示,。,1.,使用,HTML,设置文字字体,在,HTML,中，我们使用字体标签,font,来对字体、字符集进行设置。语法规则如下：,2.,使用,Dreamweaver,设置文字字体,在,Dreamweaver,中，用户可以直接以界面化得方式进行设置。打开,HTML,文档。在“属性”面板中，单击“页面属性”按钮，进行设置。,3.,使用,CSS,设置文字字体,在,CSS,中，我们通常使用,标签对字体进行设置，使用格式如下：,3.1.3,文字的表达,网页中，,HTML,标签也由文字构成的。当用户要表达的内容中包含网页标签，就不会被显示出来。为了避免这种情况，,HTML,中提供了特殊文字,字符实体。字符实体的语法如下：,文字的表达,下面介绍几种最常用的几种字符实体，如表,3.1,所示,。,3.2,字体属性设置,文字是网页中最常见的一种元素，使用范围也最广。下面我们就来介绍有关文字的属性设置。,3.2.1,文字大小,在,HTML,中，我们通常使用,标签来设置文字的大小，使用格式如下：,对于“字体大小”我们从以下两个方面介绍：,1.,绝对大小,2,.,相对大小,使用不同方法设置字体大小,1.,使用像素,来设置字体大小，使用格式如下,：,2.,使用,em,来设置字体,大小,。,使用,em,单位，可以在所有浏览器中调整文本的大小。换算公式：,pixels/16=em,，使用格式如下,：,3.2.2,文字颜色,为网页内容加上色彩，可以更好地表达内容的主题。网页内容包含链接文字和普通文字，这里我们着重讲解如何设置普通文字的颜色，在后面的章节中再详细介绍链接文字颜色的设置。,在,HTML,中，我们通常使用,标签来设置文字颜色，使用格式如下：,在,CSS,中，通常我们是这样设置文字颜色的：,3.2.3,文字对齐方式,网页内容的排放有时要求整齐统一；有时要求活泼大方；有时要求错落有致，从而可以看出对齐方式的设置对网页的重要性。,在,HTML,中，我们通常设置,align,属性，使用格式如下：,在,CSS,中，我们通常使用,text-align,属性设置文本对齐方式，使用格式如下：,CSS,字体属性,CSS,字体属性的具体描述如表,3.3,所示：,属性,描述,font,简写属性。作用是把所有针对字体的属性设置在一个声明中,font-family,设置字体系列。,font-size,设置字体的尺寸。,font-style,设置字体风格。,font-variant,以小型大写字体或者正常字体显示文本。,font-weight,设置字体的粗细。,3.3,文本格式化,文本格式化是针对网页设计中所用到的文本的格式设置，下面我们就来介绍有关文本格式化的相关知识。,3.3.1,定义粗体文本,粗体文字是使文字在显示的时候，笔画加粗。通常，采用该方式是为了让文字着重表现。在,HTML,中，可以使用,和,两种方式进行加粗，同时，,CSS,也提供了,bold,属性，供我们使用，语法如下：,3.3.2,定义着重文字,着重文字是使文字在显示的时候，字体形态变倾斜，与其他文字形成鲜明的对比，加深读者的印象。在,HTML,中，可以使用,和,标签两种方式进行着重表现，同时在,CSS,中也可以设置,italic,属性，达到着重表现文字的效果，语法如下：,3.3.3,定义计算机代码,计算机代码标签可用在显示计算机,/,编程代码的编写中，使得读者更容易辨别区分。在,HTML,中，可以使用,等标签进行设置，语法如下：,3.3.4,预格式文本,格式化输出，是指在,和,标签之间的内容按原文件的格式输出，空格换行不会忽略，尤其是在计算机代码中。,在,HTML,中，使用,标签对文件中的空行和空格进行严格控制，语法如下：,3.3.5,定义地址,定义地址是指在网页设计过程中，通过编写代码使某个地址具体呈现出来，或者作为连接，在,HTML,中，使用语法如下：,3.3.6,文字方向的定义,文字方向的定义，是我们为了添加文字的表现效果，自定义文字的一种方向，在,HTML,中，我们使用的是,标签来定义文字方向，语法如下：,3.3.7,块引用,块作为,HTML,文件中的重要元素集，包含了,address,（地址），,blockquote,（块引用），,form,（交互表单）等，对块的引用我们有两种，一种是长的引用，我们一般使用,blockquote,标签，另一种是短的引用，我们常用,q,标签定义，语法规则如下：,3.3.8,标签总结,下面给出一些常用的标签，如表所示。,1.,文本格式化,标签,标签,描述,标签,描述,定义粗体文本,定义大号字,定义着重文字,定义斜体字,定义小号字,定义下标字,定义上标字,定义插入字,定义删除字,标签总结,2.,计算机输出,标签,3.,引用、引用和术语定义,标签,描述,标签,描述,定义计算机代码,定义键盘码,定义计算机代码样本,定义打字机代码,定义变量,定义预格式文本,标签,描述,标签,描述,定义缩写,定义首字母缩写,定义地址,定义文字方向,定义长的引用,定义短的引用语,定义引用、引证,定义一个定义项目,3.4,段落,段落在网页的设计过程中使用频率较高，下面我们就来介绍有关段落的设置及其相关属性。,3.4.1 HTML,段落,HTML,文档可分割为若干段落。段落是通过,标签定义的，语法规则如下：,3.4.2,段落的行间距,设置段落中的行间距对一段文字的美观起到了决定性的作用。而设置段落的行间距有很多种方式，下面我们介绍在,CSS,中常用的两种方式。,1.,使用像素值设置行间距，使用格式,：,2,.,使用百分比设置行间距，设置格式如下,：,3.4.2,标题的表示,HTML,标题是通过,-,等标签进行定义的。其中从,h1,到,h6,，标题字体逐渐减小，其中,定义最大的标题，,定义最小的标题。语法规则如下：,3.4.3,HTML,水平线,标签在,HTML,页面中创建水平线，在网页设计的过程中，可使用,hr,元素用于内容的分割。语法规则：,3.4.4,HTML,折行,1.,标签是换行标签，可以在不产生一个新段落的情况下进行换行，语法规则,：,2.,在元素中禁止文本折,行,，,使用规则,：,3.5,列表,列表在网页的设计过程中也是使用率较为频繁的，下面我们就来详细介绍有关列表的相关知识。,3.5.1,无序列表,无序列表是一个项目的列表，我们用粗体圆点（典型的小黑圆圈）进行标记该列项目，语法规则：,无序列表,为了是无序列表可以更加简洁、美观，我们可以更改列表项来达到目的。在,HTML,中，通过,type,属性来更改无序列表中的列表样式。使用格式如下：,3.5.2,有序列表,有序列表也是一列项目，列表项目使用数字进行标记，语法规则：,有序列表,在,HTML,中，通过,type,属性来更改无序列表中的列表样式。使用格式如下：,3.5.3,定义列表,自定义列表是项目及其注释的组合，语法规则：,3.5.4 CSS,列表,在,CSS,中，列表属性允许防止、改变列表项标志，或者将图像作为列表项标志。,1.,列表类型,要影响列表的样式，最简单的办法就是改变其标志类型。修改列表项的标志类型，我们可以使用属性,list-style-type,：,2.,列表项图像,有时，常规的标志是不够的。你可能想对各标志使用一个图像，这时我们可以使用,list-style-image,属性来制作，使用格式如下：,3.,列表标志位置,在,CSS2.1,版本中，通过,list-style-position,属性可以确定标志出现在列表项的内容之外还是内容的内部。使用方法是：,CSS,列表,为了,简单起见，我们将以上,3,个列表样式属性合并为一个方便的属性：,list-style,，具体如下,：,CSS,列表属性的具体描述如表,3.7,所示。,属性,描述,属性,描述,list-style,简写属性。用于把所有用于列表的属性设置于一个声明中。,List-style-positon,设置列表中列表项标志的位置。,List-style-image,将图象设置为列表项标志的位置。,List-style-type,设置列表项标志的类型。,3.5,.,5,示例概括,经过前面几个小节的学习，我们已经对列表有了一个初步的了解，下面我们再给出几个具体的示例，以便大家更具体的了解如何定义更美观的列表。,列表,标签的,总结,下面给出列表标签的总结，如表,3.8,所示。,标签,描述,标签,描述,定义无序列表,定义有序列表,定义列表项,定义定义列表,定义定义项目,定义定义描述,3.6,小结,本章学习了有关字体的标签、列表标签的知识。通过学习，可以了解到一些常用的和不常用的标签。常用标签需要牢牢掌握并且灵活运用，而不常用的标签希望读者可以有所了解。其中，每个标签都有特定的意义，不可以随意使用。,