css优先级和四种接入方式

来源：互联网发布：淘宝上的vr才39靠谱吗编辑：程序博客网时间：2024/06/05 06:27

css优先级和四种接入方式

（一）css选择器具有优先级，优先级顺序就是：控制的越精细就越高。

比如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>css 控制段落</title><meta http-equiv="Content-Type" content="text/html; charset= utf8" /><style>p{color: red;}.text2{color: yellow;}#text1{color: blue;}div p{color: pink;}div #text1{color: black;}</style></head>    <body><div><p id="text1" class="text2">hello</p></div></body></html>

优先级顺序：

p < class < id < div中的 id

（二）css四种接入方式

1.外部链接一个css文件，我们在HTML文件头部分标明：

注：./mycss.css 是指在html文档同目录下的css文件(./可以省略)，如果是上一级目录就是 ../mycss.css

例子：主css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>新建网页</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="./mycss.css" /></head>    <body>    <div>hello</div>    </body></html>

调用的css

div{width: 100px;height: 100px;background: blue;}

效果显示：

2.在头部直接写入css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>新建网页</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>div{width: 100px;height: 100px;background: blue;}</style></head>    <body>    <div>hello</div>    </body></html>

3.外接多个css文件时，导入

具体的用法，以第一个为例，意思就是说，我调用的css可以导入另外一个css文件

实例：

主程序：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>主程序</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="./mycss.css" /></head>    <body>    <div id="text">hello</div>    </body></html>

mycss:

@import url(mycss2.css);div{width: 100px;height: 100px;background: gray;}

mycss2:

#text{border:10px solid blue;}

效果显示：

4.直接在标签里写入对这个标签的css控制

0 0