目录
实验一、内联式和外联式冲突，内联式位于外联式上方先解析。--- 由外联式决定
实验二、内联式和外联式冲突，外联式位于内联式上方先解析。--- 由内联式决定
CSS样式表
当HTML读到一个样式表时，浏览器会根据他来格式化HTML文档。
HTML文件内引入样式表的三种方式
- 外部样式表（外联式）
使用场景：当样式需要应用于很多页面时，外部样式表将是理想的选择。
在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。
<link> 标签在（文档的）头部：<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>/* mystyle.css 文件 */ hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} div { width: 200px; height: 200px; background-color: brown; }注意：
- 外部样式表可以在任何文本编辑器中进行编辑。
- 文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
- 不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
- 在外部css文件中，属性值满足的是css语法。
- 属性值用key: value形式赋值,value具有单位
- 属性值之间用;隔开(一般独行分开赋值)
- 格式: 选择器{样式块}
- 将html与css文件建立联系:html通过link标签链接外部css(一般head中链接)
- 内部样式表（内联式）
使用场景：当单个文档需要特殊的样式时，就应该使用内部样式表。
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>注意：
- 内联式一般创建在style标签内(style标签一般作为head的子标签)
- 属性值需要满足的是css语法。用key: value形式赋值,value具有单位
- 属性值之间用;隔开(一般独行分开赋值)
- 格式: 选择器{样式块}
- 内联样式（行间式）
使用场景：由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>注意：
- 行间式一般创建在标签头部的style属性内。
- 属性值满足的是css语法，属性值用key: value形式赋值,value具有单位
- 属性值之间用;隔开
三种引入方式的优先级
- 三种方式内容属性不冲突（不重复）
当三种方式没有重复属性的设定，即每一类属性，为不同位置的唯一值，则协同布局。
<!-- html文件 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三种引入优先级</title> <style type="text/css"> div { width: 100px; } </style> <link rel="stylesheet" type="text/css" href="1.css"> </head> <body> <div style="background-color: yellowgreen"></div> </body> </html>/*css文件*/ div{ height: 100px; }
- 当三种方式存在相同属性（冲突）
结论：当三种方式存在相同属性，则采用覆盖赋值。按照顺序从HTML文件从上到下执行，后者属性覆盖前者属性。理论上行间式作为最后一个被解析的位置。
实验一、内联式和外联式冲突，内联式位于外联式上方先解析。--- 由外联式决定
<!-- html文件 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三种引入优先级</title> <style type="text/css"> div { width: 100px; height: 100px; background-color: red; } </style> <link rel="stylesheet" type="text/css" href="1.css"> </head> <body> <div></div> </body> </html>/*css文件*/ div{ width: 200px; height: 200px; background-color: green; }
实验二、内联式和外联式冲突，外联式位于内联式上方先解析。--- 由内联式决定
<!-- html文件 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三种引入优先级</title> <link rel="stylesheet" type="text/css" href="1.css"> <style type="text/css"> div { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div></div> </body> </html>/*css文件*/ div{ width: 200px; height: 200px; background-color: green; }
实验二、三种方式并存冲突。--- 由行内式决定
<!-- html文件 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三种引入优先级</title> <link rel="stylesheet" type="text/css" href="1.css"> <style type="text/css"> div { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div style="width: 300px;height: 300px;background-color: yellow"></div> </body> </html>/*css文件*/ div{ width: 200px; height: 200px; background-color: green; }
- 通过！important改变单个优先级
当属性值内存在“！important ”关键字的时候，优先使用该类方式导入属性值。
使用方式：位于key：velue！importtant；注意：
- 适用于单个强调，多处出现important，没有任何意义。
- 仅仅首先使用带有 ‘ important ’ 的单个属性，而不是存在‘ important ’ 的应用方式。
<!-- html文件 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三种引入优先级</title> <link rel="stylesheet" type="text/css" href="1.css"> <style type="text/css"> div { width: 100px; height: 100px; background-color: red!important; } </style> </head> <body> <div style="width: 300px;height: 300px;background-color: yellow"></div> </body> </html>/*css文件*/ div{ width: 200px; height: 200px; background-color: green; }
