结构 html，样式 css，行为 js 相分离 css 相当于装修材料，cascading style sheet(层叠 样式 表)
注释 <!-- --> 作用： ①备注 ②调试
1）行间样式：
<div style=" width: 100px; height: 100px; background-color: #ece;">2）页面级css
<head> <style type="text/css"> div{ width:100px; height:100px; background-color:greed; } </style> </head> <body> <div></div> </body>3)外部css文件
<head> <link rel="stylesheet" type="text/css" href="text.css"> </head> <body> <div></div> </body> 浏览器一般是下载一行执行一行，在下载到<link rel = “stylesheet” type = “text/css” href = “”>这个时，应该是同时下载 css 和 html，也就是异步加载在计算机中：异步是指的同时进行，同步是指先一个，后一个（与生活相反）*1）id选择器(一个元素只能有一个 id 值，一个 id 只对应一个元素)
<body> <div id="only">123</div> </body> #only{ background-color: darkseagreen; }2)class选择器(一个 class 可以对应多个元素,一个元素可以对应多个class） 例如：
<div id="only">123456</div> <div class="demo demo1">9876544</div> <div class="demo1">195345</div> #only { background-color: darkseagreen; } .demo1 { background-color: #ffeecc; color: #f40; } .demo { background-color: purple; }3）标签选择器 语法格式 标签名{} 例如
<span>123</span> <div> <span>\1475283</span> </div> } span { olor: #f40; font-weight: bold; background-color: #ffeecc; }如果想选择<div>就写 div{}，如果想选择<span>就写 span{}，不管被套多少层，都会被选择出来，而且是选择全部
4）通配符选择器 语法格式 *{ }
*是任意的意思，此处是 all，所有的标签（包括和）
<span>123</span> <div> <span>\1475283</span> </div> <strong>124365</strong> * { background-color: green; }