《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.4 编辑文本格式

简介: 本节书摘来自异步社区《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》一书中的第3章,第3.4节,作者:何新起 更多章节内容可以访问云栖社区“异步社区”公众号查看。

本节书摘来自异步社区《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》一书中的第3章,第3.4节,作者:何新起 更多章节内容可以访问云栖社区“异步社区”公众号查看。

3.4 编辑文本格式

Dreamweaver中的文本格式设置与使用标准字处理程序类似。可以为文本块设置默认格式设置样式(段落、标题1、标题2等)、更改所选文本的字体、大小、颜色和对齐方式,或者应用文本样式(如粗体、斜体、代码和下划线)。

3.4.1 设置文本字体
输入文本后,可以在【属性】面板中对文本的大小、字体和颜色等进行设置。设置文本属性的具体操作步骤如下。

1 在【属性】面板中【CSS】选项卡的【字体】下拉列表中选择“编辑字体列表”选项,如图3.37所示。


364e09bc64256d074f7b3d65d6de9c097bc4a4ec

2 在对话框中的【可用字体】列表框中选择要添加的字体,单击Snap19按钮添加到左侧的【选择的字体】列表框中,在【字体】列表框中就会显示新添加的字体,如图3.38所示。重复以上操作即可添加多种字体。若要取消已添加的字体,可以在【字体列表】选中该字体组合,相应的多个字体会出现在【选择的字体】列表框中,然后选中要取消的字体,单击Snap19按钮即可。

3 完成一个字体样式的编辑后,可进行下一个样式的编辑。若要删除某个已经编辑的字体样式,可选中该样式单击按钮。完成字体样式的编辑后,单击【确定】按钮确认修改并关闭该对话框。

4 这里选择【字体】为“宋体”,弹出【新建CSS规则】对话框,在对话框的【选择器类型】中选择“类(可应用于任何HTML元素)”,在【选择器名称】中输入名称“.contenta”,在【规则定义】中选择“仅限该文档”,如图3.39所示。


5af6060d74414c4c80945e3fd8d2602a66ff38c6


21ac241661200b5abbec5f4c89e7a557e101b7b9

3.4.2 设置文本大小
选择一种合适的字体,是决定网页美观、布局合理的关键,在设置网页时,应对文本设置相应的字号。选中要设置字号的文本,在【属性】面板中的【大小】下拉列表中选择字号的大小,或者直接在文本框中输入相应大小的字号,如图3.40所示。

a718e2de565b8a16e9ef786b6109a46deaab4f33

3.4.3 设置文本颜色
还可以改变网页文本的颜色,设置文本颜色的具体操作步骤如下。

1 选中设置颜色的文本,在【属性】面板中单击【文本颜色】按钮,打开如图3.41所示的调色板。

2 在调色板中选中所需的颜色,光标变为形状,单击鼠标左键即可选取该颜色。单击【确定】按钮,设置文本颜色,如图3.42所示。


b098689e0cb92e17de8bdce16150627b94d92f5e


4581c8092ed75384a10953fc0178ae2b943f671c

如果调色板中的颜色不能满足需要时,单击按钮,弹出【颜色】对话框,在对话框中选择需要的颜色即可。
HTML代码分析
1.字体属性face
Face属性规定的是字体的名称,如中文字体的【宋体】、【楷体】、【隶书】等。可以通过字体的face属性设置不同的字体,设置的字体效果必须在浏览器中安装相应的字体后才可以正确浏览,否则有些特殊字体会被浏览器中的普通字体所代替。

语法:

<font face="字体样式">……</font>

说明:

face属性用于定义该段文本所采用的字体名称。如果浏览器能够在当前系统中找到该字体,则使用该字体显示。

2.字号属性size
文字的大小也是字体的重要属性之一。除了使用标题文字标记设置固定大小的字号之外,HTML语言还提供了< font >标记的size属性来设置普通文字的字号。

语法:

<font size="文字字号">……</font>

说明:

size属性用来设置字体大小,它有绝对和相对两种方式。Size属性有1到7个等级,1级最小,7级的字体最大,默认的字体大小是3号字。可以使用“Size=?”定义字体的大小。

提示

< font >标记和它的属性可影响周围的文字,该标记可应用于文本段落、句子和单词,甚至单个字母。
3.颜色属性color
在HTML页面中,还可以通过不同的颜色表现不同的文字效果,从而增加网页的亮丽色彩,吸引浏览者的注意。

语法:

<font color="字体颜色">……</font>

说明:

它可以用浏览器承认的颜色名称和十六进制数值表示。

相关文章
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
107 1
|
5月前
|
自然语言处理 前端开发 JavaScript
Playwright系列课(2) | 元素定位四大法宝:CSS/文本/XPath/语义化定位实战指南
本文是Playwright系列第二课,详解元素定位四大核心技术:CSS选择器、文本定位、XPath和语义化定位,结合实战演示各方法应用场景。重点解析Playwright智能定位器(Locator)的独特优势——自动等待与重试机制,通过预检元素可操作性(可见/可点击)有效规避网络延迟导致的脚本失效,显著提升自动化测试稳定性。
|
6月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
10月前
|
前端开发
Css实现文本超出长度隐藏并用三个点结尾
Css实现文本超出长度隐藏并用三个点结尾
247 17
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
343 57
|
12月前
|
移动开发 前端开发 JavaScript
HTML(HyperText Markup Language,超文本标记语言)
HTML(HyperText Markup Language,超文本标记语言)
374 11
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
3285 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
102 0
CSS3几何透明层文本悬停变色源码
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
581 3
前端基础(五)_CSS文本文字属性、背景颜色属性