CSS (Cascading Style Sheets) 层叠样式表
css写在哪css有这三种写法 内部样式、外部样式、行内样式
内部样式
<head>
<style type="text/css">
/*这里写css代码*/
</style>
</head>
//style标签可以加上`type="text/css"`这条属性，用于告诉浏览器这里是什么格式的代码，但是在HTML5规范中可以不用写。
外部样式单独创建以.css后缀的文件，然后通过link标签引入，link通常放置于头部:
<head>
<link href="CSS文件的路径" rel="stylesheet" type="text/css">
</head>
行内样式/内联样式
<body>
<div style="css代码">卡卡西</div>
</body>
三种方式比较
| 样式表 | 优点 | 缺点 | 使用情况 | 使用场景 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现结构与样式分离，不便于维护，不可以重复利用 | 极少 | 某个标签需要单独的样式设置时使用 |
| 内部样式表 | 部分结构与样式分离，较便于维护 | 没有彻底实现结构与样式分离，不可以重复利用 | 一般 | css代码量不多，且和当前页面联系紧密不需要复用时使用 |
| 外部样式表 | 完全实现结构与样式分离，可重复利用 | 如果代码量较少情况下，引入法更麻烦 | 最多，推荐 | css代码量大时，或者需要重复利用时使用 |
选择器
id选择器
<div id="content"></div> #content{background:#096;}
class选择器
<div class="content"></div> .content{background:#096;}
标签选择器
<div></div> div{background:#096;}
后代选择器
<div>
<p>卡卡西</p>
<div>
div p{
color:#096;
}
通配选择符
<div>
<span></span>
</div>
#{
background-color:#096;
}
选择器权重
!important > 行内 > id > class|属性|伪类 > 标签 > 通配符|兄弟|相邻兄弟|子代 > 继承先比较级别，级别一样比较各级别选择器出现的次数当两个选择器权重一样时，以最后出现的为准
颜色
1.颜色
2. rgb(x,y,z)
3. rgba(x,y,z,opacity)
4. 十六进制(#...)
5.HSL 值 HSLA
- H 色相 （ 0 - 360 相当于一个圆形）
- S 饱和度 （0% - 100%）0就是灰色设置啥都不好使
- L 亮度 （0% - 100%） 0 黑色 100 白色