如何在Frontpage2003中运用css设置网页字体

css|frontpage|网页

  在网页界面的设计过程中,许多人考虑最多的是用什么图形与色彩来装饰网页,或是在网页上加上什么动画特效;而对于网页的字体却不太重视。结果往往是有些网站的字体不是太小就是太大,严重影响阅览;而有的网站整页用的都是标准字体,毫无个性而言。其实,字体作为网站内容的载体,有其独特的重要性,是不应该忽视的。

  运用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,并熟练的运用它,就能将你的网页创造得更加完美。

时间: 2024-10-27 04:41:10

如何在Frontpage2003中运用css设置网页字体的相关文章

如何用css设置网页字体

css|网页 在网页界面的设计过程中,许多人考虑最多的是用什么图形与色彩来装饰网页,或是在网页上加上什么动画特效:而对于网页的字体却不太重视.结果往往是有些网站的字体不是太小就是太大,严重影响阅览;而有的网站整页用的都是标准字体,毫无个性而言.其实,字体作为网站内容的载体,有其独特的重要性,是不应该忽视的. 运用Html,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到css.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效

如何在 HTML 中应用 CSS基础详解

接下来用这个 index.html 将在下文讲解中用到. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h2>h2 tag</h2> <div class="class1">class1</div&

如何在word中文字上方设置有颜色的横线

如何在word中文字上方设置有颜色的横线          1.首先输入"添加有颜色的横线"八个字,然后选中文字,切换到"开始"选项卡中的"字体"选项组,单击"拼音指南"按钮. 2.弹出"拼音指南"对话框,先点击"消除读音",再点击"组合"按钮. 3.然后在"拼音文字"区域中输入"_____"符号,再单击"确定&quo

ci-如何在PHP中实现权限设置

问题描述 如何在PHP中实现权限设置 我是PHP初学者,在做一个文章管理系统,存在三种角色(超管(一个),一般管理员,普通用户),不懂如何设置权限,求各位大神给个解答的方法!谢谢 解决方案 简单的判断下就可以了 参考:http://www.jb51.net/article/29671.htmhttp://www.jb51.net/article/36217.htm 解决方案二: 为注册的用户设置id 用id进行判断

margin-为何在IE中给DIV设置magin-top会出现滚动条

问题描述 为何在IE中给DIV设置magin-top会出现滚动条 我用的IE版本挺高,是IE11,下面是我的代码,很简单,我margin-top:100px,居然这样都会出现滚动条,那岂不是一用margin-top就得出滚动条? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta charset="utf-8"

如何在CODE中使用代码在网页中打开一个新窗口?

问题描述 如何在CODE中使用代码在网页中打开一个新窗口?protectedvoidBtnAddContact_Click(objectsender,EventArgse){if(Page.IsValid){}}备注说明:在HTML中可以直接使用window.open这个我知道 解决方案 解决方案二:Response.Write("<script>window.open</script>");解决方案三:这样啊,我的意思是,还没有别的,不用写<script

《众妙之门——网页排版设计制胜秘诀》——第3章 设置网页字体的5 项原则和方法3.1 系统地进行网页版式设计

第3章 设置网页字体的5 项原则和方法 设置网页字体时,有一些基本的方法.指南和目的.总体来说,网页的版式应当具有可读性.易访问性.可用性和品牌特色.这四个方面相互作用,使网页设计达到与用户沟通和交互的目的. 为使网页富有表现力并给人留下深刻的印象,网页版式的设计有许多方法.让我们进一步看一些网页版式设计的原则.规则和方法-当你学习如何在网页上完成有效的字体设置时,可以把它们当作一个开端. 3.1 系统地进行网页版式设计 在网页设计中,每个版面上的元素都需要同时实现各种各样的目标.创建的每个标题

wpf-WPF 中如何在.cs中加入自定义添加的字体?

问题描述 WPF 中如何在.cs中加入自定义添加的字体? WPF 中如何在.cs中加入自定义添加的字体? 自定义添加的字体的ttf文件放在项目中 解决方案 可以在打包程序的时候加上你的字体,然后安装到用户计算机中 解决方案二: 没办法在后台加吗?在.xaml里面可以加入并显示出来,但是在.cs中就不知道怎么弄了.

网页制作中关于CSS设置字体的问题

css|网页|问题 电脑不知道什么时候就会有问题,有时可能看到很多网页字体都变了,不是宋体了,看上去比较难看.这是由于没有设置网页的字体的原因造成的. 这样的问题,我发现很多人都犯,写CSS时都不喜欢设置字体.电脑出问题字体不知道怎么就变样了,所以写CSS时还是设置一下网页的字体吧. 1.在CSS设置字体怎么设置? 答:在CSS文件中加入这一行. body{font-family:Verdana, "宋体", Arial,Sans;} 2.你为什么把"Verdana"