目录
实验一、内联式和外联式冲突,内联式位于外联式上方先解析。--- 由外联式决定
实验二、内联式和外联式冲突,外联式位于内联式上方先解析。--- 由内联式决定
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; }