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; }
