一起学HTML基础-CSS样式表-基本概念、分类、选择器

一、基本概念：

CSS  (Cascading Style Sheets）层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

Style，样式，即目标显示出来的风格样式，作用是美化页面。

二、样式表分类：

内联式样式表、内嵌式样式表、外联式样式表。

1、内联式样式表：直接写在标签内部，使用Style属性设置样式。例如：设置div及span背景颜色及宽和高，会发现span是无法设置宽和高的，因为默认内容有多少就占用多少，无法设置。

2、内嵌式样式表：作为一个独立区域内嵌在网页里，必须写在head标签里，使用<style type="text/css"></style>标签包裹起来，设置一种标签样式属性，允许body里所有同类标签引用同这个样式属性，无需设置每个标签的样式属性，减少冗余。例如：设置div样式属性，body内所有div都会套用该样式属性。

3、外联式样式表：新建一个CSS文件，用来存放样式表，作为一个单独文件存放。如果要在HTMl文件中调用样式表，需要在HTMl文件中右键→CSS样式表→附加样式表，一般用link连接方式连接。

新建CSS样式表：

写CSS样式表：

关联样式表：空白处右键

4、有些标签有默认的边距，一般写样式表代码的时候都会先去除。前后对比如下：（*——针对所有标签）

三、选择器：

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

（1）标签选择器，用标签名做选择器，比如：p为标签名，用p做选择器，从内嵌式样式表中选择。

（2）class选择器，调用以“.”开头的样式表样式。例如：用“.”命名一个样式表gushi0和gushi1，用class调用

（3）id选择器，调用以“#”开头的样式表样式，class无法调用“#”命名的样式表，id也无法调用“.”命名的样式表。id选择器类似class选择器，id为唯一，区别此处不讲。例如：用“#”命名一个样式表g2，用id调用

（4）复合选择器

a-用“，”隔开，表示并列，使用同样的样式，例如：设置“p,div”表示p标签和div标签都是用指定的样式。

b-用空格隔开，表示后代，例如：“div p”表示div标签中的p标签

c-筛选“.”，例如"p.gushi"表示p标签中执行了class="gushi"的标签，执行样式