CSS零基础学习札记(二) _HTML/CSS

CSS零基础学习笔记(二)
使用CSS样式控制页面的方法包括：
1、行内样式
2、内嵌样式表
3、外部样式表

<!--行内样式-->
<h2>test</h2>
<p style ="color: #ff0000; font-size: 24px" /> test </p>
<!--内嵌样式表-->
<head>
<style type ="text/css">
p{
  color: red;
}
</style>
</head>
<!--外部样式表-->
<!--1、链接外部样式表-->
<head>
  <link href ="url" rel ="stylesheet" type ="text/css" />
</head>
<!--2、导入外部样式表-->
<head>
<!--
  @import url("外部样式表CSS文件的路径和名称");
-->
</head>

链接外部样式表和导入外部样式表的区别：
1、加载顺序不同
当一个页面被加载时，使用<link>标签引用的CSS会同时被加载,而使用@import引用的
CSS会等页面全部被下载完再加载.
2、兼容性的区别
@import是CSS2.1提出的使用方式,有些老的浏览器并不支持.比如IE4以下浏览器
3、使用DOM控制页面样式的区别
当页面使用JavaScript控制DOM改变页面样式时,使用<link>标签支持,而@import并不
是DOM可控制的,另外,<link>属于XHTML标签,而@import完全是CSS提供的一种方式.

样式的优先级：
从高到低：
1、行内样式表
2、内嵌样式表
3、链接外部样式表
4、导入外部样式表