第一章 - CSS选择器

引言

前面我们学习了HTML的一些基础知识，了解了HTML是前端开发中用于书写结构的标签，我们在浏览网页时，会看到页面内容的各种好看的样式，这些样式的实现是通过CSS来实现的，CSS的主要使用场景就是美化网页，布局页面的CSS也是一种标记语言。

CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形(宽度，边框样式，边距等)以及版面的布局和外观显示样式。

下面讲解一些CSS的基础内容

1. CSS选择器

1.1 选择器的作用

选择器就是根据不同的需求把不同的标签选出来，简单来说就是用来选标签的。

1.2 选择器的分类

在CSS中，可以根据选择器的类型将选择器分为基础选择器和复合选择器两大类，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的，其中：

• 基础选择器：由单个选择器组成，包括：标签选择器，类选择器，id选择器和通配符选择器
• 复合选择器：由两个或多个基础选择器通过不同的方式组合而成的，包括：后代选择器，子选择器，并集选择器，伪类选择器等。

下面对这两种选择器分别进行介绍，首先看基础选择器

2. CSS基础选择器

2.1 标签选择器(div p span a img等)

标签选择器(元素选择器)是指用HTML标签名称作为选择器，按标签名称进行分类，为页面中某一类标签指定统一的CSS样式

2.2 类选择器(class)

如果想要差异化选择不同的标签，单独选一个或某几个标签，可以使用类选择器

<div class="box">我是盒子</div>

这里的class就是设置的类名，注意，类选择器可以设置多个类名，中间用空格隔开即可

<div class="box nav">包含多类名</div>

2.3 id选择器

id选择器是唯一的，id的名字不能重复。

<div id="box">我是盒子</div>

[注]id选择器和类选择器的区别

1.类选择器好比人的名字，每个人可以有多个名字，同时一个名字也可以被多个人使用。

2. id选择器相当于每个人的身份证号码，全国唯一，不能重复。

3. id选择器和类选择器最大的不同在于使用次数上。

2.4 通配符选择器(*)

将所有标签统一修改样式,通常在样式中添加下面的代码。

* {
    padding: 0;
    margin: 0;
}

3. CSS字体属性

CSS字体属性用于定义字体系列，大小，粗细和文字样式(如斜体)

3.1 字体系列

css使用font-family属性定义文本的字体系列

3.2 字体大小

font-size: 20px;

• px(像素)大小是我们网页的最常用的单位
• 谷歌浏览器默认的字体大小为16px
• 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
• 可以给body指定整个页面文字大小
• 标题标签比较特殊，需要单独指定文字大小

3.3 字体粗细

font-weight: normal | bold