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