初步理解CSS | 青训营笔记

这是我参与 $\lceil$ 第四届青训营 $\rfloor$ 笔记创作活动的第2天

课程的重点内容

**1. CSS的基本认识
2. CSS选择器 3. 伪类 4. 组合选择器 5. 选择器组 6. 总结

一、CSS的基本认识

1、CSS诞生背景：随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

2、CSS（Cascading Style Sheets）层叠样式表，CSS是第一个含有“层叠”丰意的样式表语言，这种层叠的方式可以使作者和读者都可以灵活地加入自己的设计。

3、CSS的作用：对指定元素可以进行：设置字体和颜色；设置位置和大小；添加动画效果

4、CSS的写法：如结构如下图，由选择器Selector、声明Declaration(包括：属性Property、属性值Value)组成。那么我们如何在页面中使用呢？

5、使用CSS：三种使用方式

外链式：通过link链接的方式，将CSS文件引入
嵌入式：通过在代码文件里设立style标签，在里面定义CSS选择器
内联式：通过对指定HTML元素标签的style属性直接进行赋值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <style>
        h1 {
          color: orange;
          font-size: 24px;
        }
        p {
          color: gray;
          font-size: 14px;
          line-height: 1.8;
        }
    </style>
</head>
    <body>
      <h1>h1橙色标题</h1>
      <p>绿色的字体</p>
    </body>
</html>

6、CSS的工作实现

二、CSS选择器selector

1、作用：找出页面中的元素，以便给它们设置样式。

2、寻找页面元素的几种selector类型：

通配选择器：使用通配符 * 命名选择器，对所有页面中的元素都生效。

标签选择器：CSS效果作用于对应的标签元素

id选择器： CSS效果作用于带有相应id的属性值的元素，注意定义id selector前写 #

类选择器:CSS效果作用于带有相应类class的属性值的元素，注意定义类 selector前写 .

属性选择器:CSS效果作用于带有相应,属性的元素，注意定义属性 selector前加 []

三、伪类

1、什么是伪类：不基于标签和属性定位元素的选择器

2、伪类的分类：

状态伪类：依据当前属性的不同状态，显示不同的CSS效果

<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

（下图的example.com被鼠标悬停，触发hover状态；a:hover选择器将在此时作用于元素）

（如果定义为:focus选择器，则表示任意标签的元素在focus状态下都会被作用）

结构伪类：依据标签元素结构的定位

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

四、组合选择器

下图是组合选择器的选择规则

（组合选择器可以更准确的定位元素，为设计者提供了更多样的样式设计）

<article>
  <h1>h1标题</h1>
  <p>article的亲子元素</p>
  <section>
    <h2>h2标题 </h2>
    <p>h2的相邻元素</p>
    <p>红红火火恍恍惚惚</p>
  </section>
</article>

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

五、选择器组

选择器间用，逗号隔开

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

六、总结

本次课程内容主要介绍了CSS是什么、干什么、怎么使用、使用方式。虽然很基础，但是系统的了解过后，还是增添了许多新的认识。对于后续的学习和理解有很大的帮助。

其实选择器selector的各种各样的写法，都离不开本质目的：定位元素，因此想要掌握更全面的selector写法，可以去学习CSS selector语法。

显然，了解了本质更容易寻找学习的方向。知识很多，但时间有限，注重基础的学习。

下篇笔记，深入理解CSS

基础不牢，地动山摇

TO BE CONTINUED

CSS初步理解 | 青训营笔记