首页 > 代码库 > 4.4 样式表的3类应用

4.4 样式表的3类应用

CSS是3个字母,恰巧CSS的种类也有3种,分别是内嵌样式表、行内(嵌入)样式表和外部样式表文件。

本节单词记忆:标签 1.link 2.import 属性 1.rel

网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。

一、内嵌样式表

内嵌样式表使用格式如下:

<HEAD>
<STYLE type="text/css">
    样式规则
</STYLE>
</HEAD>
 

如果希望本网页内的所有同类标签都采用统一样式,这时应采用内嵌样式。

示例1:

<STYLE type="text/css">
P
{ font-family:"隶书";
font-size:18px;
color:#FF0000;
}
</STYLE>
</HEAD>
……
<P>床前明月光,</P>
<P>疑是地上霜。</P>
<P>我是郭德刚,</P>
<P>低头思故乡。</P>
……
 

所有的段落都采用 P 样式,保证样式统一。

二、行内(嵌入)样式表

如果希望某段文字和其他段落文字显示风格不一样,该如何解决? 使用行内(嵌入)样式表可以解决。

语法:

<P style = "color:red;font-size:30px;font-family:隶书;"> 
本段<P>标签采用了行内样式
<P>

 示例2:

<HTML>
<HEAD>
<TITLE>行内样式表</TITLE>
</HEAD>
<BODY style=" background-color:#CCCCCC">
<P><IMG src="http://www.mamicode.com/libai.jpg" width="140" height="170" align="left"></P>
<H2>静夜思</H2>
<H3>作者:李白</H3>
 <P style="color:#FF0000; font-size:18px; font-family:隶书; border-bottom-style:dashed ">床前明月光,<BR>
 疑是地上霜。<BR>
 我是郭德刚,<BR>
 低头思故乡。</P>
 <P>注释:
静夜思:宁静的夜晚所引起的乡思。
疑:怀疑,以为。
举:抬、仰。</P>
</BODY>
</HTML>

行内样式使用范围更小,只适用于某一个标签,对其他标签不起作用。效果如图1所示:

行内样式表
图1 行内样式表

三、外部样式表

如果希望一个网站中多个页面的样式保持一致,如何解决?使用外部样式表文件样式表可以解决。

根据样式文件与网页的关联方式又分为:

● 链接(LINK )外部样式表

● 导入(@import)外部样式表

链接(LINK )外部样式表使用LINK(链接)标签,使用步骤为:

第一步:创建样式表文件newstyle.css

第二步:把样式文件和网页绑定

第三步:浏览查看各网页

语法:

<HEAD>
<LINK href="http://www.mamicode.com/newsyle.css" rel="stylesheet" type="text/css">

<!--引入的样式文件-->
</HEAD>

使用@import导入 ,语法:

<HEAD>
<STYLE TYPE="text/css">
@ import newstyle.css;
</STYLE>
</HEAD>
 

本节作业:

使用外链样式表制作如下图网页。

html基础 外链样式表 作业

注意事项:

1.第一行的背景为平铺的背景图片,按钮为背景图片。

2.注意文本框边框样式,超链接样式的使用

网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧!

点击下载第四章案例及作业资源 返回《HTML入门经典》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/html/jc/523.html