978 字
5 分钟
CSS学习笔记
序
也是来到了CSS章节
本篇将语法和CSS选择器放到了一篇里
CSS语法
CSS分为三种：
- 内联样式
- 内部样式
- 外联样式
其与c++等语言中变量的作用域很相似 一般内联样式是作为标签属性出现的，例如：
<p style="color: blue;">aaa</p>一般标签都会有一个style属性。内联样式的优先级是最高的，它会覆盖其余两种CSS样式
内部样式写在head标签内，其使用styel标签包裹
而外部样式写在外部的.CSS文件中，并在head中使用link进行应用
示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<!--👇这个就是外部的文件进行引用--> <link rel="stylesheet" href="./CSS/styel.css">
<!--👇内部样式写在style标签中--> <style> p{ color: rgb(224, 154, 33); font-size: 16px; } </style></head><body> <p>这是一个应用的CSS的p标签。其使用内部样式<br> 内部样式：写在head标签里的方式</p>
<h1 style="color: blue;">这是一个h1标签，使用内联样式<br> 内联样式：以标签的属性呈现的</h1>
<h2>这是一个应用外部样式的h2标签</h2> <p>使用外部样式需要使用link标签进行引用</p>
<p style="color: black;">内联样式>内部样式>外部样式<br> 使用时大的会覆盖小的<br> 类似于C++中变量的有效范围</p>
</body></html>/*这是CSS文件的内容，在html中使用link进行引用*/h2{ color: blueviolet;}实际效果是这样的：
CSS选择器
CSS选择器有很多:
- 元素选择器
- 类选择器
- ID选择器
- 通用选择器
- 子元素选择器
- 后代选择器（包含选择器）
- 并集选择器（兄弟选择器）
- 伪类选择器
上文使用的一直是元素选择器
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style> h1{ color: burlywood; } .aaa{ color: aqua; } #bbb{ color: blue; }
*{ font-family: 'KaiTi'; font-weight: bolder; } /*子元素选择器*/ .father > .son1{ background-color: rgb(233, 112, 85); } /*后元素选择器*/ .father p{ color: rgb(51, 98, 3); }
/*相邻元素选择器*/ h3 + p{ color: rgb(4, 4, 250); }
#ccc:hover{ background-color: rgb(99, 99, 241); }
</style></head><body> <h1>这是一个元素选择器</h1>
<h2 class="aaa">这是类选择器，使用.</h2> <h2>这是类选择器的对比</h2> <h2 id="bbb">这是id选择器,使用#<br> id选择器>类选择器</h2>
<p>*为通用选择器，一般为全选，</p>
<div class="father">
<p class="son1">这是一个子元素选择器示例</p> <p class="son2">这是另一个子元素选择器示例</p>
<div> <p class="son11">这是一个后代</p> </div> <p>可以明显看到，后代选择器包含子代，而子代不包含后代<br> （注：子代选择器是有背景的，后代选择器是改颜色的）</p>
</div>
<h1>相邻元素选择器</h1> <p>这是一个p标签</p> <h3>这是h3标签</h3> <p>这是另一个p标签</p> <p>我们会发现，相邻元素选择器会选择其后面紧挨着的一个标签</p>
<p>伪类元素选择器</p> <p id="ccc">可以实现鼠标悬效果</p></body></html>图：
思考
.为类，那么类选择器使用.来使用
.aaa{ color: aqua;}#为id，那么id选择器使用#来使用
#bbb{ color: blue;}*为通用选择器
*{ font-family: 'KaiTi'; font-weight: bolder;}.father > .son是子代选择器的用法
.father > .son1{ background-color: rgb(233, 112, 85);}后代选择器不用>而是直接使用空格
.father p{ color: rgb(51, 98, 3);}注意，后代选择器包括子代，但是子代选择器不会包括后代
相邻元素选择器使用+
h3 + p{ color: rgb(4, 4, 250);}伪类选择器使用#表示，后面接:来表示效果
例如，以下为实现鼠标悬停后更换背景颜色（ccc是一个类名）
#ccc:hover{ background-color: rgb(99, 99, 241);}差不多就这些