教你学用样式表！ -pc6资讯

您的位置：首页 → 网络冲浪 → 网络技术 → 教你学用样式表！

教你学用样式表！ 时间：2004/10/8 16:48:00来源：本站整理作者：蓝点我要评论(0): 　　　　如何将CSS 加诸于网页

您可以利用下列 3 种方式，将 CSS 指定的格调加诸于网页上：

1. 在 HTML 档案里加一个超连结，连到外在的 CSS 档

这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（副档名为 .CSS）定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。

它的写法是： < HTML>

< HEAD>

< TITLE>

本页标题

< /TITLE>

< LINK REL="stylesheet"

HREF="http://www.xyz.com/xyz.css"

TYPE="text/css">

< /HEAD>

此种方法 Navigator4 支援得仍十分 Buggy，请小心使用。

2. 在 HTML 档案的 < HEAD>…….< /HEAD> 标签间，加一段 CSS 的叙述文

这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身 HTML 档内加注的 CSS 。

如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。

它的写法是： < HTML>

< HEAD>

< TITLE>

本页标题

< /TITLE>

< STYLE TYPE="text/css">

< !--

BODY {font: 12pt}

H1 {font: 16pt}

P {font-weight: bold;

color: green}

-->

< /STYLE>

< /HEAD>

< BODY>

开始本页内容…

< /BODY>

< /HTML>

特别值得注意的是，为了防止不支援 CSS 的浏览器误将标签间的 CSS 风格叙述当成普通字串，而展现于网页上，您最好将 CSS 的叙述文字插入标签之间。

3. 在 HTML 档的字里行间中，随时有需要，随时加一小段 CSS 的叙述指定

这个方法适用于指定网页内的某一小段文字的呈现风格。

导览器除了会展现出外在的 CSS 档与此 HTML 档内定义的 CSS 风格（如果有的话），同时还会展现字里行间的 CSS 风格。

如果字里行间的 CSS 叙述与内在定义的 CSS 或外在连结的 CSS 叙述相冲突的话，导览器的展现将以字里行间的 CSS 叙述为主。

它的写法是： < HTML>

< HEAD>

< TITLE>

本页标题

< /TITLE>

< /HEAD>

< BODY>

< P STYLE="color: red">

开始本页内容…

< /P>

< /BODY>

< /HTML>

上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会盖过外在连结的 CSS ，字里行间的 CSS 会盖过内在定义的 CSS 。

如何对多个页面统一修改

最好的办法是使用一个外联的样式表文件。

即把网页中所有的样式都定义在一个CSS文件中，然后在 …中用：

的方法连接这个样式文件，

以后只需要修改这个文件里面的样式，就可以改变整个站点的风格了。

另外Dreamweaver2中在站点管理画面，可以使用替换功能，把站点或着

目录下面的全部文件中的某一个段文字替换成另外一段文字的。

CSS技术在网页设计中的运用

多层模式表单（Cascading Style Sheet, CSS）是一种为超文本置标语言(HyperText Markup Language, HTML)提供增强补充服务的技术，可对每一个HTML的置标(tag)做精雕细刻的修饰。只用HTML制作的网页，对页面内各部分的修饰能力有限且语句烦锁，CSS正是弥补这一缺陷的有力技术，它语句、文法简单，只要在源码中插入STYLE语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能，使网页更加生动活泼，从而获得满意的效果。

---- CSS在HTML中以STYLE标识出现，其格式为：一对代表CSS 技术的STYLE置标，内放被修饰的HTML置标，置标的CSS属性放于紧随其后的一对大括号内，每个属性赋值用":"，多个属性之间用";"隔开，例：

< style >
a{text-decoration:none; color:yellow}
a:hover{text-decoration:underline; color:urple}
p{font-size:20; background:red; color:blue}
< /style >

---- 将如上代码插入任一HTML文档后，刷新显示，则所有锚点变为普通字体，颜色为黄，但当鼠标移至其上时，则锚点的提示字符变为带下划线的紫色字体；整个文档中被置标P包围的文字将以红底蓝字、字体大小为20个象素的形式出现。如果其中某段文字需另加修饰，可以单独的的形式出现，例如

< p style="font-size:30; font-weight
:bolder; background:white;color:blue" >
…………….
< /p >

---- 则此段文字白底蓝字，30个象素大小，且字体加粗。随后是一个带有CSS技术的HTML文档的完整例子：

< html >
< head >
< title > 如何使用CSS < /title >
< /head >
< body >
< style >
a{text-decoration:none; background:red; color:yellow}
a:hover{text-decoration:line-through; background:lime}
h1{text-align:center; font-weight:900;
border-style:ridge; border-width:medium; border-color:red}
p.first{font-size:15; font-face:楷体;
color:blue; border-style:dotted;
border-width:thin; border-color:blue}
p.second{font-size:20; word-spacing:10; background:aqua}
< /style >
< h1 > 带连框的题头1 < /h1 >
< a href=mailto:wow20000@hotmail.com?subject=CSS >
鼠标移至此处, 背景变化
< /a >
< p > 未加CSS修饰的段落 < /p >
< p class=first > 指定CSS修饰的段落 < /p >
< p class=second > 指定另一种CSS修饰的段落 < /p >
< /body >
< /html >

---- 从上例的显示可以看出，CSS是HTML的一个补充，几乎可以对每一个HTML置标进行扩充，使网页充满活力，显示出更加完美的效果。

学写层叠样式表

层叠样式表(CSS)是W3C组织新近批准的一个辅助HTML设计的新特性,它能够使你保持整个HTML的统一外观。过去当你在设置文本时,为了保持整个段落都使用相同的外观,你不得不为每一段设置属性,很麻烦。如果你使用了CSS,那么你可以在设置文本之前,就指定整个文本的属性,比如颜色、字体大小等等,这样,你就能获得统一的文本外观了。
　　一、层叠样式表的分类
　　1. 外部样式表
　　外部样式表将管理整个Web页的外观,当你在设计HTML时,首先要对整个外观定义一个CSS文件(扩展名为CSS),然后通过链接来使用,格式如下:
　　
　　
　　 <BR>　　XXXXXX　(网页标题) <BR>　　
　　　　
　　2. 内嵌样式表
　　内嵌样式表将影响某一个页面的外观,使用格式如下:
　　
　　
　　 <BR>　　XXXXXX <BR>　　
　　
　　3. 内含样式表
　　内含样式表改变页面某一段的外观,格式如下:
　　
　　
　　 <BR>　　XXXXXX <BR>　　
　　
　　
　　

　　XXXXX (文本内容)
　　

　　
　　
　　如果同时使用上面三个样式表,将会对网页有什么影响呢?顾名思义,层叠样式表是一层层的,也就是说可以设置整个Web页的样式,也可以针对某一页或者某一页中的一段。正如大家知道的,内部的样式表将不受外部样式表的影响,简单地说,越里面的样式表级别越高,越不受其它样式表影响。
　　二、层叠样式表的基本语法
　　CSS和HTML同样比较简单好学,其基本语法是:
　　H1 { font-size: large; color:red　}
　　上面H1代表的是文字标题的属性设置,而font-size设置字体大小 ,在该例子中把字体设置成大字体;而color设置文字的颜色,在该例子中,颜色是红色。有了这个思想,其它标签也是相同的,比如:
　　H1 {font-size: x-large; color:green}
　　H2 {font-size:large; color:blue}
　　H3 {font-size:16pt;color:red}
　　如果上面的属性都是相同的,你也可以简化成以下格式:
　　H1,H2,H3 {font-size:large; color:red}
　　这样三类标题将使用相同的设置。
　　三、层叠样式表的扩充语法
　　设置字体字形
　　{font-family: XXX}
　　设置字体的粗细
　　{font-weight: XXX}
　　设置字体大小
　　{font-size: XXX}
　　设置字体的颜色
　　{color: red}
　　指定页面背景颜色
　　{background-color: red}
　　指定某一个图片为背景
　　{background-image: url(/images/xxx.JPG)}
　　指定文字是否下划线
　　{text-decoration: none}
　　指定文本的对齐方式
　　{text-align: left}
　　指定网页上、下、左、右的边缘距离
　　{margin: 3cm}
　　指定段落间的上下距离
　　{padding: 18px}
　　四、层叠样式表中的Class和ID
　　在使用层叠样式表时,你可能会根据网页需要随时使用不同的样式表,也可能在几处地方都使用相同的样式,那么你就可以使用Class 或ID。你可以先定义一个Class或ID,然后在使用时只需指明你的Clas s或ID名就可以了,例如:
　　.tiantao {font-size: large}
　　上面.tiantao是Class名,当然你可以起任何名字,定义好以后,就可以使用了。
　　
　　
　　 <BR>　　XXXXXX <BR>　　
　　
　　
　　
　　
xxxxxx(文本内容)

　　
　　
　　需要注意的是,如果文本段落跨越不大,可以使用DIV定义,反之用 SPAN定义。
　　ID实际上与Class非常类似,只是ID只能被调用一次,而Class则次数不限。
　　五、层叠样式表的应用
　　层叠样式表的出现给我们设计网页带来了很大的灵活性。目前IE 及Netscape浏览器都支持层叠样式表,目前不少HTML设计工具也都支持层叠样式表,FrontPage98就是其中一个不错的工具。在FrontPage9 8中,你可以方便地使用三种层叠样式表,在这里,你可以给任何对象使用层叠样式表,不管是图片还是文字,并且在使用过程中,不需要你记住层叠样式表的语法,只需要你单击下拉菜单进行选择,只是到了更详细设置时,需要通过FrontPa ge98的样式表内插工具进行人工书写。

文章评论

查看所有0条评论>>