HTML引入CSS的方法和示例

麦田2年前 (2020-05-12)工作笔记277

HTML和CSS是不同的两种语言,但是它们对网页同时产生作用。


网页(WebPage)= 内容(html) + 表现(css) + 行为(javascript),因此需要把CSS引入HTML一起使用,让浏览器识别并正确调用CSS。当浏览器读取样式表时,要依照文本格式来读,而且当CSS样式表放在不同的地方,所产生的作用范围也是不同的。在HTML中,主要用四种方法引入CSS:行内式、内嵌式、导入式和链接式。


行内式


即在标记的style属性中设定CSS样式,这种方式本质上没体现出CSS的优势,因此不推荐使用。但是某些情况可以使用,比如只有少量的HTML内容需要指定特殊的CSS样式。示例如下:


<p style="color:red">这段文字颜色是红色</p>


<font color="#CC0000">这段文字颜色是红色</font>


<font color="#CC0000" size="5em">大号红字</font>


<span style="background:#D8D8BF">这段文字的背景颜色是黄绿色</span>


<h2 style="background-color: #FF6633">标题背景颜色</h2>


<p style="background-color: #999900">行内元素,控制段落</p>


<strong style="font-size:30px;">行内元素,strong 比 em 效果要强</strong>


<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素,div 块级元素</div>


<em style="font-size:2em;">行内元素,em 强调</em>


用span设置一个行内样式按钮:


<span style="cursor: pointer;border-radius: 4px;background-color: #cccccc;padding: 10px 20px;display: inline-block;font-size: 20px;"><a href="http://www.mtdsj.com/" >背景灰色的字体随网页的链接按钮</a></span>


<span style="cursor: pointer;border-radius: 4px;background-color: #cc0000;color: #FFFFFF;padding: 10px 20px;display: inline-block;font-size: 20px;">字体为白色的红色按钮</span>


嵌入式

和行内式相似,适合单独页面使用,css内容写在和之间,示例如下:


<style type=”text/css”>

    P{ color:red }

</style>

导入式

<!-- 导入外部样式:在内部样式表的<style></style>标记之间导入一个外部样式表,导入时用@import。 -->  

<style type="text/css">  

 @import "jisuan.css";  

</style>

链接式

这是最常用的引入方式,效率高,代码美观,维护方便,最能体现DIV+CSS中的内容与显示分离的思想,都是优点!示例如下:


<link href="css.css" rel=”stylesheet” type=”text/css” />

小问题:CSS括号内写到最后一个样式的时候,分号是否需要省略?


可以省略,但是注意添加样式时要加上!

相关文章

网站第二次被入侵记录

今天发现网站底部有一段陌生的代码:<script src="**https://greenindex.dynamic-dns.net/jqueryeasyui.js**"&g...

制作网站图标ICO

网站图标ico的作用1、网站设置一个图标,可以让浏览者迅速的从众多网页标签中找到你的网站;2、如果收藏在浏览器收藏夹,有一个网站图标,浏览者可以迅速的找到你的网站;3、添加网站图标,提升网站形象,让人...

批量修改和批量替换的技巧

大约2007年,我才开始学会使用批量替换,这是一种神奇的功能!批量修改和替换的软件Dreamweaver、UltraReplace、推荐:Notepad++批量替换的技巧:1、普通的替换很简单,就不详...

网站设置301重定向的方法

因为各种原因,比如更换域名,老域名要跳转到新域名。这种情况要设置301跳转(301重定向),301跳转的最大意义是可以把老域名的权重转移到新域名。所以说,设置301跳转是最常见,最重要的跳转方式。30...

网站结构经验谈

网站有大有小,结构也有所不同,麦田的经验如下:1、小型网站(页面在1000以下)麦田建议的结构是完全扁平化,所有网页文件都放在根目录中,包含:index、list、fenlei、neirong…2、中...

Markdown写静态网站指南

使用Markdown写静态网站需要注意:1、模板格式已经写好,只需要替换相应内容,不要打乱格式;2、理解标题、标签、关键词的含义;标题title:就是本文的主题内容的一句话总结,全文是围绕这个主题开展...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。