轻松学HTMLCSS之文字.pptx

第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所示：,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所示。,3.5.5 示例概括,经过前面几个小节的学习，我们