HTML引入CSS的方法和示例
2020-01-25
HTML和CSS是不同的两种语言,但是它们对网页同时产生作用。
网页(WebPage)= 内容(html) + 表现(css) + 行为(javascript),因此需要把CSS引入HTML一起使用,让浏览器识别并正确调用CSS。当浏览器读取样式表时,要依照文本格式来读,而且当CSS样式表放在不同的地方,所产生的作用范围也是不同的。在HTML中,主要用四种方法引入CSS:行内式、内嵌式、导入式和链接式。
行内式
即在标记的style属性中设定CSS样式,这种方式本质上没体现出CSS的优势,因此不推荐使用。但是某些情况可以使用,比如只有少量的HTML内容需要指定特殊的CSS样式。示例如下:
这段文字颜色是红色
大号红字
这段文字的背景颜色是黄绿色
嵌入式
和行内式相似,适合单独页面使用,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括号内写到最后一个样式的时候,分号是否需要省略?
可以省略,但是注意添加样式时要加上!