首页 > 代码库 > 4.4 样式表的3类应用
4.4 样式表的3类应用
CSS是3个字母,恰巧CSS的种类也有3种,分别是内嵌样式表、行内(嵌入)样式表和外部样式表文件。 本节单词记忆:标签 1.link 2.import 属性 1.rel 网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。 一、内嵌样式表 内嵌样式表使用格式如下: <HEAD> 如果希望本网页内的所有同类标签都采用统一样式,这时应采用内嵌样式。 示例1: <STYLE type="text/css"> 所有的段落都采用 P 样式,保证样式统一。 二、行内(嵌入)样式表 如果希望某段文字和其他段落文字显示风格不一样,该如何解决? 使用行内(嵌入)样式表可以解决。 语法: <P style = "color:red;font-size:30px;font-family:隶书;"> 示例2: <HTML> 行内样式使用范围更小,只适用于某一个标签,对其他标签不起作用。效果如图1所示: 图1 行内样式表 三、外部样式表 如果希望一个网站中多个页面的样式保持一致,如何解决?使用外部样式表文件样式表可以解决。 根据样式文件与网页的关联方式又分为: ● 链接(LINK )外部样式表 ● 导入(@import)外部样式表 链接(LINK )外部样式表使用LINK(链接)标签,使用步骤为: 第一步:创建样式表文件newstyle.css 第二步:把样式文件和网页绑定 第三步:浏览查看各网页 语法: <HEAD> <!--引入的样式文件--> 使用@import导入 ,语法: <HEAD> 本节作业: 使用外链样式表制作如下图网页。 注意事项: 1.第一行的背景为平铺的背景图片,按钮为背景图片。 2.注意文本框边框样式,超链接样式的使用。 网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧! 点击下载第四章案例及作业资源 返回《HTML入门经典》教程列表 |
编辑:网页学习网 |
本文地址:http://www.lodidance.com/html/jc/523.html |