这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
一、本堂课重点内容
1.CSS简介及用法
2.CSS工作原理
3.CSS基本用法
4.选择器及其用法
二、详细知识点介绍
1.CSS简介
CSS是什么
CSS(Cascading Style Sheets)称为层叠样式表，在前端基础工具中承担着定义页面元素样式的作用，例如设置字体和颜色，设置位置和大小，以及添加动画效果等功能。
为什么要使用CSS
实现内容与样式的分离，便于团队开发
样式复用，便于网站的后期维护
页面的精确控制，让页面更精美
2.CSS工作原理
CSS代码通过加载HTML和解析HTML，创建DOM树，再通过加载和解析CSS，将样式添加到已创建的DOM树中，并最终在页面中展示出来。
3.在页面中使用CSS
在页面中使用CSS有三种方法：外链式、嵌入式、行内式
- 外链式需要单独创建一个 .css 文件，并在需要更改样式的HTML文件中引用，引用位置处于head标签之中。
- 嵌入式同样写在head标签之中，用style标签括起来。
- 内联式则是写在需要更改样式的内容标签之中，可以直接写入样式。
举例如下：
<!-- 外链式 -->
<link rel="stylesheet" href="style.css">
<!-- 嵌入式 -->
<style>
p{
/* 文字颜色 */
color: coral;
/* 字体大小 */
/* CSS中只要涉及尺寸的属性，必须要有单位，其中px表示像素 */
font-size: 30px;
/* 背景颜色 */
background-color: rgb(128, 128, 128);
/* 宽高：整个段落 */
width: 630px;
height: 50px;
</style>
<!-- 内联式 -->
<div style="color: aqua; width: 300px;">Example</div>
总结：以上三种CSS的基本使用语法在最终展示时没有区别，但是作为开发者，为了方便使用和简单易懂，通常小案例中用内嵌式；项目中用外联式；行内式配合js使用。
4.选择器及其用法
选择器（Selector）的作用是找出页面中的元素，以便给他们设置样式。
我们可以使用多种方式选择元素：
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
各类选择器介绍:
- 通配选择器：基本样式为
*{
color: red;
font-size: 20px;
}
通配选择器能够匹配到页面中所有的元素。
2. 标签选择器：
基本样式为将通配选择器中的*换成具体的元素标签，比如标题标签h1或者段落标签p。
3. id选择器：使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配,以标签的id属性作为样式应用的依据，是一对一的关系。此时需要在前面的元素标签里提前定义id。
4. 类选择器：使用自定义的名称以.号作为前缀，然后再通过HTML标签的class属性调用类选择器，以标签的class属性作为样式应用的依据。
注意事项：
-调用时不能添加.号
-同时调用多个类选择器时，用空格分隔
-类选择器名称不能以数字开头
5. 属性选择器：给某一标签内的某一属性设置样式，用[]包住属性作为选择器。例如处理input标签的disabled属性时，可以给被禁用的表单内容设置样式。属性选择器举例如下：
<!-- 直接用[]选中属性 -->
<input value="student" disabled />
<style>
[disabled]{
background: #eee;
color: #999;
</style>
<!-- 指定特定标签的特定属性 -->
<input type="password" value="123456" />
<style>
input[type="password"]{
border-color: red;
color: red;
</style>
<!-- 可以指定特定的属性以特定条件作为开头、结尾时才被选中 -->
<a href="#top">回到顶部</a>
<a href="a.jpg">查看图片</a>
<style>
<!-- ^=表示此属性为#开头才被选中 -->
a[href^="#"] {
color: #f54767;
background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
padding-left: 1.1em;
}
<!-- $=表示此属性为.jpg结尾时才被选中 -->
a[href$=".jpg"] {
color: deepskyblue;
background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
padding-left: 1.2em;
}
</style>
6.伪类选择器:根据不同的状态显示不同的样式，不基于标签和属性定位元素，伪类分为状态伪类和结构性伪类。
五种状态伪类：
- link 未访问的链接
- visited 已访问的链接
- hover 鼠标悬浮到链接上，即移动在链接上
- active 选定的链接被激活
- focus 选定的输入框样式
结构性伪类：
- first-child 列表的第一个元素
- last-child 列表的最后一个元素
组合器：给两个不同标签都加上class属性，既可以同时使用样式，也可以指定其中一个标签使用样式。
7.组合：组合器有若干种组合规则和相应语法，如直接组合、后代组合、亲子组合、兄弟选择器、相邻选择器。如下：
选择器组：即一组选择器，选择具体标签时可一次选择多个标签，中间用
，隔开即可。
三、实践练习例子
选择器实践——伪类：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css_selector</title>
<style>
/* 直接用[]选中属性 */
[disabled]{
background: #eee;
color: #999;
</style>
<style>
/* 指定特定标签的特定属性 */
input[type="password"]{
border-color: red;
color: red;
</style>
<style>
/* 可以指定特定的属性以特定条件作为开头、结尾时才被选中 */
/* ^=表示此属性为#开头才被选中 */
a[href^="#"] {
color: #f54767;
background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
padding-left: 1.1em;
}
/* $=表示此属性为.jpg结尾时才被选中 */
a[href$=".jpg"] {
color: deepskyblue;
background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
padding-left: 1.2em;
}
</style>
</head>
<body>
用户名：<input type="password" value="123456" /><br>
密码：<input value="student" disabled /><br>
<a href="#top">回到顶部</a><br>
<a href="交换余生.jpg">查看图片</a>
</body>
</html>
运行结果：
四、课后个人总结
在这节课中，我对于css有了初步的了解，css通过各种选择器选中页面中的元素，并通过强大的样式类型丰富页面中元素的样式。在实践的过程中，我实现了css的三种语法，熟悉了各种类型的选择器的用法，并且实现了不同的样式。在今后的学习中，更要注重css与前端其它的部分相结合。
