运用HTML,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制、创建特殊效果,就必须要用到CSS.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。考虑到用FrontPage制作网页的人较多,同时它对其他网页编辑器的使用者也有一定的借鉴作用,

  因此,我就讲解一下如何在frontpage2000中运用css设置网页字体。

   我们可以用css设置出无数种网页字体,但万变不离其宗,任何的变化都要遵循css的基本语法。因此我们先来了解一下css的基本语法,它是这样子的:HTML 标志 { 标志属性:属性值;标志属性:属性值;标志属性:属性值;…… }。设置字体时,只要正确的更改字体属性的属性值,就可以达到目的。字体属性共分五种:字族(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size),此外font属性是一个总体属性,可一一指定以上各种属性和属性值。它们的功能与属性值如下:

  1、字族(font-family)

  功能:通过font-family指定字体类型用于改变HTML标志或元素的字体,你可设置一个可用字体清单。浏览器由前向后选用字体。

  其语法为:h1 {font-family: 字体类型,字体类型,字体类型}

  2、字体风格(font-style)

  功能:使文本显示为扁斜体或斜体等?属性值:normal-普通、italic-斜体、oblique-偏斜体

  语法为:h1{font-style:属性值}

  3、字体变形(font-variant)

  功能:使文本中的小写字母显示为字体较小的大写字母,常用于设计特殊的标题。

  属性值:normal(普通)和small-caps(小型大写字母)

  语法为:h1{font-variant:属性值}

  4、字体加粗(font-weight)

  功能:用于设置字体笔划的粗细。

  属性值:正常度 - normal

  相对度 - bold, bolder, light, lighter

  渐变度 - 100, 200, 300, 400(相当于normal), 500, 600, 700(相当于 bold、 lighter、 bolder、以及数值100-900。

  语法为:h1 < font-weight: 属性值> 

  5、字体大小(font-size)

  功能:改变字体大小。

  属性值:长度 - 用毫米(mm),厘米(cm),英寸(in),磅(pt),象素(px),pica(pc),ex(小写字母x的高度)或em(字体高度)作为度量单位。

  百分比 - 相对于其父元素字体大小的百分比。绝对尺寸分为xx-small, x-small, small, medium, large, x-large, xx-large七种,它们以各种字体的medium尺寸成比例缩放,每一级1.5倍。相对尺寸:有larger和smaller两种,根据字体原来的大小来决定缩放以后的大小。百分比:把字体设置成原来尺寸的百分比值,可以任意指定数值。

  语法为:{font-size:属性值}

  6、字体(font)

  功能:简写属性,提供了对字体所有属性进行设置的快捷方法。

  属性值:字体属性值为前面已列出的值,,内容的顺序为:font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分属性,属性值间用空格分开。

  语法:{font:属性值1 属性值2 ...属性值n}

  下面我就给大家举一个例子:把“网络化这三个字设置为加粗的字体首先在页面打入“网络化这三个字,由于字体的粗细是由“字体加粗这个属性决定的,所以在进入html编辑模式找到这些字后,就在它们的前后分别加上“字体加粗及其属性值的代码,如:<span style="font-weight: 700">网络化</span>

  完成以上步骤后,“网络化这三个字就由普通字体变为加粗的字体。如果要修改为其他的字体,只要更换代码中的字体属性以及属性值即可。

  我曾在上面提到font属性是一个总体属性,并可以快捷地设置字体的所有属性。以下这个例子就是给大家讲解如何给文字定义多种属性。我依然以“网络化这三个字作为设置对象,只是这次将它改为16磅的偏斜字体。设置的步骤与上面相似,但代码要改为:<span style="font: oblique 16pt ">网络化</span>

  完成后,这三个字就同时具有了两种属性。比较以下两副图就可以看出修改前后的不同。

  在这里还需要说明的是虽然frontpage2000也可以更改字体的大小与字形,但它却不能像css这样精确地控制字体,如frontpage2000就不能将字体大小设置为16磅。如果将以上的代码直接copy入html编辑页面中,就会使<>""这几个符号变为奇怪的字符,所以在应用中还是直接键入为好。

  以上介绍的是如何在页面中对某些文字的字体进行设置,但如果要对整个或几个页面的字体进行设置就要运用到以下的方法:

  一、当只是要定义当前网页的样式,可使用嵌入的样式表。嵌入的样式表是一种级联样式表,“嵌在网页的 <HEAD> 标记符内。嵌入的样式表中的样式只能在同一网页上使用。

  二、当要在站点上所有或部份的网页上一致地应用相同样式时,可使用外部样式表。在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页外观的一致性。如果您决定更改样式,您只需在外部样式表中作一次更改 ,则该更改就会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名,例如 1.css。

下面就以如何把网页的所有文字设为流行的9磅字为例,给大家讲解如何运用以上两种方法。

  如果只设置当前页面,就要运用嵌入的样式表,这时只需进入html编辑页面,在<head>与</head>中加入以下代码:

<style type="text/css">

BODY {FONT-SIZE: 9pt}

TH {FONT-SIZE: 9pt}

TD {FONT-SIZE: 9pt}

</style>

  完成后即可见到效果。

  如果要使一些网页应用相同的设置,就要使用外部样式表。首先在frontpage中新建一个样式表,具体步骤是依次点击文件--新建--网页,在弹出窗口中点击样式表,并选择普通样式表。然后,键入以下代码:

BODY {FONT-SIZE: 9pt}

TH {FONT-SIZE: 9pt}

TD {FONT-SIZE: 9pt}

  注意:如果直接拷贝进去,会产生多余代码。

  将此文件保存在站点目录下。编辑网页时,点击格式--样式表链接,在弹出窗口中选择以上文件即可。

  上面所讲述的仅仅是css的一些简单应用,只要你能够深入的了解css,并熟练的运用它,就能将你的网页创造得更加完美。

网页字体在Frontpage2000制作网页中的讲解的更多相关文章

  1. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  2. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  3. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  4. 怎么使用dreamweaver制作网页教程 dw建站设计网页

    对于网页制作相关专业人士一定对dreamweaver有所认识,下面小编就问大家总结一下相关网页制作的一些步骤,喜欢的朋友可以一起来学习一下   Dreamweaver这一款专业的网页制作软件,相信相关 ...

  5. 【学习笔记】HTML基础:使用html制作网页

    一.初识HTML 1.什么是HTML? Hyper Text Markup Language(超文本标记语言) 扩展XML:Extendsible  Markup Language(可扩展性标记语言) ...

  6. 推荐几款制作网页滚动动画的 JavaScript 库

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

  7. Type.js – 帮助你更好的控制网页字体排版

    Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就 ...

  8. [Mugeda HTML5技术教程之14]案例分析:制作网页游戏

    本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...

  9. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

随机推荐

  1. 吴恩达机器学习笔记48-降维目标:数据压缩与可视化(Motivation of Dimensionality Reduction : Data Compression & Visualization)

    目标一:数据压缩 除了聚类,还有第二种类型的无监督学习问题称为降维.有几个不同的的原因使你可能想要做降维.一是数据压缩,数据压缩不仅允许我们压缩数据,因而使用较少的计算机内存或磁盘空间,而且它也让我们 ...

  2. Eclipse 中 Maven 项目 pom.xml 提示错误 org.codehaus.plexus.archiver.jar.Manifest.write(java.io.PrintWriter)

    从SVN上下载到Eclipse工作空间的项目一直报如下错误,进行一下Maven ---> Update Project... 就不报错了,但是过一会又会报错 查找资料初步确定是Eclipse中自 ...

  3. Redis 搭建文档,备份及认证

    wget http://download.redis.io/releases/redis-3.0.6.tar.gz为了方便管理,将Redis文件中的conf配置文件和常用命令移动到统一文件中[root ...

  4. Linux的用户管理(基础篇)

    用户相关 临时切换用户: su 用户名 完全切换用户: su – 用户名 查看当前登入的用户名: whoami 查看当前用户下的一切环境变量: env 登出当前登入的用户: logout 查看系统的用 ...

  5. BeautifuSoup的使用

    BeautifulSoup是一个模块,该模块用于接收一个HTML或XML字符串,然后将其进行格式化,之后遍可以使用他提供的方法进行快速查找指定元素,从而使得在HTML或XML中查找指定元素变得简单.

  6. 剑指offer【05】- 用两个栈实现队列(java)

    题目:用两个栈实现队列 考点:栈和队列 题目描述:用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 解题思路:每次psuh是时先将stack2清空放入stck1(保 ...

  7. 禁用feign retryer

    为什么要禁用retryer?其实主要是为了Debug,禁用feign retryer有两面性,如果接口做好幂等性,retry不影响,但是总有一些意外发生,比如:有一个实例发生了故障而该情况还没有被服务 ...

  8. 权限控制和OAuth

    目录 1 权限控制是什么 1.1 ACL 1.2 RBAC 1.2.1 名词术语 1.2.2 RBAC定义 1.2.3 RBAC分类 1.2.3.1 RBAC0 1.2.3.2 RBAC1 1.2.3 ...

  9. 【原创】驱动加载之OpenSCManager

    SC_HANDLE WINAPI OpenSCManager( _In_opt_ LPCTSTR lpMachineName, _In_opt_ LPCTSTR lpDatabaseName, _In ...

  10. .net core Identity集成IdentityServer(3) 一键登出

    在客户端程序, 我们补充一键登出操作. 使用了idsv之后, 退出的操作需要删除本地cookie, 然后去请求认证服务器, 也删除认证服务器的cookie. 官网给的退出的代码 public asyn ...