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

4.4 样式表的3类应用

2024-07-08 20:19:47   215人阅读

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


联系
我们