* 概念：Cascading Style Sheets 层叠样式表
* 层叠：多个样式可以作用在同一个HTML的元素上，同时生效
* 好处：
* 功能强大
* 将内容的展示和样式控制分离
* 降低了耦合度，解耦
* 让分工协作更加容易
* 提高开发的效率
* CSS的使用：CSS和HTML的结合方式
* 内联样式：
* 在标签内使用 style 属性指定CSS代码（耦合度高，不推荐使用）
* 内部样式：
* 在<head>标签内，定义<style>标签，<style>标签体的内容就是CSS代码
* 外部样式：
* 将CSS代码抽取到外部文件中，并在HTML文件中定义<link>标签进行引入，或在<style>标签体内写入 @import"文件名"
* 注意：三种方式的作用范围越来越大，优先级越来越小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { color: blue; } </style> <link rel="stylesheet" href="a.css"> <style> @import "a.css"; </style> </head> <body> <!-- 内联样式 * 在标签内使用style属性指定css代码 --> <div style="color: darkred">hello css</div> <!-- 内部样式 * 在head标签内定义style标签，style标签的标签体内容就是css代码 --> <div>hello css</div> <p>hello css</p> <dav>hello css</dav> <!-- 外部样式 * 定义css的资源文件 * 在head标签内，定义link标签，引入外部的资源文件 --> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扩展选择器</title> <style> .cls1 { color: yellow; } div #ppp { font-size: 30px; } div > p { border: 1px solid; } input[type="text"] { border: 10px solid; } a:link { color: pink; } a:hover { color: green; } a:active { color: yellow; } a:visited { color: red; } </style> </head> <body> <div class="cls1">aaa</div> <div> <p id="ppp"> 传智播客 </p> <div> 德玛西亚 </div> </div> <input type="text"> <p>黑马程序员</p><br> <a href="#">传智播客</a><br><br><br> <a href="#">传智播客</a> </body> </html>
原文：https://www.cnblogs.com/zhaochuming/p/12800824.html
