Day9
一、CSS学习
1 行间式
css样式书写在标签的style全局属性中，一条样式格式为 样式名: 样式值 单位;，可以同时出现多条样式
<!-- 关键代码 --> <!-- 给div标签设置宽高背景颜色 --> <div style="width: 200px; height: 200px; background-color: orange;"></div>
2 内联式
css样式书写在head标签内的style标签中，样式格式为 css选择器 { 样式块 }，样式块由一条条样式组成
<!-- 关键代码 --> <head> <style> /* css语法下的注释语法 */ /* 设置页面中所有h2标签宽高背景颜色 */ h2 { width: 50px; height: 50px; background-color: orange; } /* 设置页面中所有h3标签宽高背景颜色 */ h3 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <h2></h2> <h2></h2> <h3></h3> <h3></h3> </body> 3-3 外
3 外联式
css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件（建议在head标签中引入）
- css文件夹下的my.css
/* html文件会引入该css文件，设置所有引入了html文件中的所有p标签宽高背景颜色 */
p {
width: 50px;
height: 50px;
background-color: orange;
}
- 根目录下的first.html
<!-- 关键代码 --> <head> <!-- rel="stylesheet"：引入的是层级样式表，也就是css文件 type="text/css"：引入文件采用的是css语法书写文本类型代码 href="css/my.css"：采用相当路径引入目标css文件 --> <link rel="stylesheet" type="text/css" href="css/my.css"> </head> <body> <!-- 该页面中的p标签样式都被my.css文件控制 --> <p></p> <p></p> </body>
- 根目录下的second.html
<head> <link rel="stylesheet" type="text/css" href="css/my.css"> </head> <body> <!-- 该页面中的p标签样式也都被my.css文件控制 --> <p></p> <p></p> </body>
4 css优先级
总结
行间式控制样式最直接，但是样式多了直接导致页面可读性变差，且样式相同的标签样式也需要各自设置，复用性差；
内联式可以用一套样式块同时控制多个标签，具有样式的复用性，但是css样式代码还是写在html文件中，在项目开发下，代码量剧增，导致html文件变得臃肿，不利于代码维护；
外联式将css样式移到外部css文件中，不仅避免项目开发下html文件的臃肿问题，同时具有一套代码块控制多个标签，一个css样式文件服务于多个html两种复用性的好处，但是在学习阶段代码量不大时，样式不需要服务于多个html页面时，前面两种方式显然显得更便利。
在行间式中，写在标签内部的样式自然是用来控制该标签的样式，那写在内联式和外联式中的样式又是通过什么样的联系来控制对应页面中标签的样式呢？答案就是用于建立css与html之间联系的css选择器。
