CSS零基础学习札记(二)
日期：2014-05-17 浏览次数：20686 次
CSS零基础学习笔记(二)
使用CSS样式控制页面的方法包括：
1、行内样式
2、内嵌样式表
3、外部样式表
链接外部样式表和导入外部样式表的区别：
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、导入外部样式表
使用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、导入外部样式表
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
