CSS基础（一）

CSS基础

简介

CSS，指的是“Cascading Style Sheet（层叠样式表）”，是用来控制网页外观的一门技术。

CSS引入方式

  1. 外部样式表。
  2. 内部样式表。
  3. 行内样式表。

外部样式表：

<link rel="stylesheet" type="text/css" href="文件路径"/>

内部样式表：

<style type="text/css">
	...
</style>

行内样式表：

<div style="color: red;"></div>

对于这3种样式表，在实际开发中，一般都是使用外部样式表。

另一种引入方法：@import方式，与外部样式表很相似。不过在实际开发中，我们极少使用@import方式，而更倾向于使用link方式（外部样式）。原因在于**@import方式是先加载HTML后加载CSS**，而link是先加载CSS后加载HTML。

选择器

1、元素的id和class

在HTML中，id和class是元素最基本的两个属性。一般情况下，id和class都可以用来选择元素，以便进行CSS操作或者JavaScript操作。

id属性具有唯一性，也就是说，在一个页面中相同的id只能出现一次。

可以为同一个页面的相同元素或者不同元素设置相同的class，然后使相同class的元素具有相同的CSS样式。

2、什么是选择器？

选择器，就是指用一种方式把你想要的那个元素选中。只有把它选中了，你才可以为这个元素添加CSS样式。

在CSS中，有很多方式可以把你想要的元素选中，这些不同的方式其实就是不同的选择器。选择器的不同，在于它的选择方式不同，但是它们的最终目的是相同的。

3、最实用的5种选择器

1. 元素选择器

div{
	color: red;
}

元素选择器会选择指定的相同的元素，而不会选择其他元素。

2. id选择器

#box {
	width: 100px;
	height: 100px;
}

我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。

3. class选择器

.lv{
	color: red;
}

class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作。

4. 后代选择器

#father div{
	color: red;
}

后代选择器，就是选择元素内部中某一种元素的所有元素：包括子元素和其他后代元素（如“孙元素”）。

5. 群组选择器

h3,div,p{
	color: red;
}

群组选择器，指的是同时对几个选择器进行相同的操作。