CSS零基础学习笔记(二)

最新推荐文章于 2024-09-09 19:00:27 发布

iteye_13867

最新推荐文章于 2024-09-09 19:00:27 发布

阅读量84

点赞数

分类专栏： Web 文章标签： css

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[color=darkred][b]使用CSS样式控制页面的方法包括：[/b][/color]
[i]1、行内样式
2、内嵌样式表
3、外部样式表[/i]


<!--行内样式-->
<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>

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

[color=darkred][b]样式的优先级：[/b][/color]
[color=darkblue]从高到低：[/color]
1、行内样式表
2、内嵌样式表
3、链接外部样式表
4、导入外部样式表

iteye_13867

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS零基础学习笔记(二)

[color=darkred][b]使用CSS样式控制页面的方法包括：[/b][/color][i]1、行内样式2、内嵌样式表3、外部样式表[/i][code="html"]test test p{ color: red;} [/code][color=darkred][b]链接外部...
复制链接

扫一扫