Python 45 css三种引入方式以及优先级

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一：css三种引入方式

三种方式为：行间式 | 内联式 | 外联式

行间式
  1.在标签头部的style属性内
  2.属性值满足的是css语法
  3.属性值用key：value形式赋值，value具有单位
  4.属性值之间用;隔开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种引入方式</title>
</head>
<body>
<div style="width: 100px; height: 100px; background-color: yellow">
</div>
</body>
</html>

内联式
  1.在style标签内(style标签一般作为head的子标签)
  2.属性值满足的是css语法
  3.属性值用key：value形式赋值，value具有单位
  4.属性值之间用;隔开(一般独行分开赋值)
  5.格式:选择器{样式块}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种引入方式</title>
<style>
div {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

外联式
   1.在外部css文件中
2.属性值满足的是css语法
   3.属性值用key：value形式赋值，value具有单位
   4.属性值之间用;隔开(一般独行分开赋值)
   5.格式:选择器{样式块}
   6.将html与css文件建立联系：html通过link标签连接外部css(一般head中连接)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种引入方式</title>
<link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
<div></div>
</body>
</html>#输入上面内容后再创建一个新的以 .css 为后缀的样式文件，例如 01.css 文件内容如下：div {
width: 200px;
height: 200px;
background-color: green;
}

二：三种引入方式优先级

注：三种方式间没有优先级
                 1.三种方式协同布局
                  2.不重复的属性一定是唯一位置的唯一值
                  3.重复的属性采用覆盖赋值，保留最后位置的属性值
                  4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
                  5.!important会影响优先级

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种引入优先级</title>
<link rel="stylesheet" type="text/css" href="o2.css">
<style>
div {
width: 100px;
height: 100px;
background-color: yellow!important;
}
</style>
</head>
<body>
<div style="background-color: yellowgreen"></div>
</body>
</html> #输入上面内容后再创建一个新的以 .css 为后缀的样式文件，例如 01.css 文件内容如下：
div {
width: 100px;
height: 100px;
background-color: yellowgreen;
}