📄 0053.htm
字号:
<html>
<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1 {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
<p align="center"><big><strong>学写层叠样式表</strong></big></p>
<div align="right">---（文/田涛）</div>
层叠样式表(CSS)是W3C组织新近批准的一个辅助HTML设计的新特性,它能够使你保持整个HTML的统一外观。过去当你在设置文本时,为了保持整个段落都使用相同的外观,你不得不为每一段设置属性,很麻烦。如果你使用了CSS,那么你可以在设置文本之前,就指定整个文本的属性,比如颜色、字体大小等等,这样,你就能获得统一的文本外观了。
<br>
一、层叠样式表的分类 <br>
1. 外部样式表 <br>
外部样式表将管理整个Web页的外观,当你在设计HTML时,首先要对整个外观定义一个CSS文件(扩展名为CSS),然后通过链接来使用,格式如下:
<br>
<HTML> <br>
<HEAD> <br>
<TITLE> <br>
XXXXXX (网页标题) <br>
</TITLE> <br>
<LINK REL=Stylesheet href="http://www.xxx.net/style.css"
Type="text/css" <br>
</HEAD> <br>
2. 内嵌样式表 <br>
内嵌样式表将影响某一个页面的外观,使用格式如下: <br>
<HTML> <br>
<HEAD> <br>
<TITLE> <br>
XXXXXX <br>
</TITLE> <br>
<Style> <br>
<!-- <br>
H1 {font-size: x-large; color: green} <br>
H2 {font-size: large; color:blue} <br>
.note {font-size:small} <br>
#footer {font-family: serif} <br>
--> <br>
</Style> <br>
3. 内含样式表 <br>
内含样式表改变页面某一段的外观,格式如下: <br>
<HTML> <br>
<HEAD> <br>
<TITLE> <br>
XXXXXX <br>
</TITLE> <br>
</HEAD> <br>
<BODY> <br>
<P Style="color: red"> <br>
XXXXX (文本内容) <br>
</P> <br>
</BODY> <br>
</HTML> <br>
如果同时使用上面三个样式表,将会对网页有什么影响呢?顾名思义,层叠样式表是一层层的,也就是说可以设置整个Web页的样式,也可以针对某一页或者某一页中的一段。正如大家知道的,内部的样式表将不受外部样式表的影响,简单地说,越里面的样式表级别越高,越不受其它样式表影响。
<br>
二、层叠样式表的基本语法 <br>
CSS和HTML同样比较简单好学,其基本语法是: <br>
H1 { font-size: large; color:red } <br>
上面H1代表的是文字标题的属性设置,而font-size设置字体大小 ,在该例子中把字体设置成大字体;而color设置文字的颜色,在该例子中,颜色是红色。有了这个思想,其它标签也是相同的,比如:
<br>
H1 {font-size: x-large; color:green} <br>
H2 {font-size:large; color:blue} <br>
H3 {font-size:16pt;color:red} <br>
如果上面的属性都是相同的,你也可以简化成以下格式: <br>
H1,H2,H3 {font-size:large; color:red} <br>
这样三类标题将使用相同的设置。 <br>
三、层叠样式表的扩充语法 <br>
设置字体字形 <br>
{font-family: XXX} <br>
设置字体的粗细 <br>
{font-weight: XXX} <br>
设置字体大小 <br>
{font-size: XXX} <br>
设置字体的颜色 <br>
{color: red} <br>
指定页面背景颜色 <br>
{background-color: red} <br>
指定某一个图片为背景 <br>
{background-image: url(/images/xxx.JPG)} <br>
指定文字是否下划线 <br>
{text-decoration: none} <br>
指定文本的对齐方式 <br>
{text-align: left} <br>
指定网页上、下、左、右的边缘距离 <br>
{margin: 3cm} <br>
指定段落间的上下距离 <br>
{padding: 18px} <br>
四、层叠样式表中的Class和ID <br>
在使用层叠样式表时,你可能会根据网页需要随时使用不同的样式表,也可能在几处地方都使用相同的样式,那么你就可以使用Class
或ID。你可以先定义一个Class或ID,然后在使用时只需指明你的Clas s或ID名就可以了,例如:
<br>
.tiantao {font-size: large} <br>
上面.tiantao是Class名,当然你可以起任何名字,定义好以后,就可以使用了。
<br>
<HTML> <br>
<HEAD> <br>
<TITLE> <br>
XXXXXX <br>
</TITLE> <br>
<Style> <br>
<!--- <br>
.tiantao H1 {font-size: x-large; <br>
color: green} <br>
--> <br>
</Style> <br>
</HEAD> <br>
<BODY> <br>
<DIV Class=tiantao> xxxxxx(文本内容) </DIV> <br>
</BODY> <br>
</HTML> <br>
需要注意的是,如果文本段落跨越不大,可以使用DIV定义,反之用
SPAN定义。 <br>
ID实际上与Class非常类似,只是ID只能被调用一次,而Class则次数不限。
<br>
五、层叠样式表的应用 <br>
层叠样式表的出现给我们设计网页带来了很大的灵活性。目前IE
及Netscape浏览器都支持层叠样式表,目前不少HTML设计工具也都支持层叠样式表,FrontPage98就是其中一个不错的工具。在FrontPage9
8中,你可以方便地使用三种层叠样式表,在这里,你可以给任何对象使用层叠样式表,不管是图片还是文字,并且在使用过程中,不需要你记住层叠样式表的语法,只需要你单击下拉菜单进行选择,只是到了更详细设置时,需要通过FrontPa
ge98的样式表内插工具进行人工书写。如果想了解更详细的CSS语法,可以访问网站
htt p://w3c.org/style /。(作者E-mail: tiantao@public.wh.hb.cn) </span>
</table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -