CSS基础(一)——语法和选择器 css基本选择器

童靴们，从这篇文章开始我们进入CSS的学习了，不知道你们HTML的课程学习的怎么样。一定要多看多练，把基础打好。

（关注小白前端，才能持续收到文章推送！）

废话不多说，下面带大家一起学习CSS。

CSS简介

css的英文全称Cascading Style Sheets，中文叫层叠样式表。它是用来表现HTML文件样式的计算机语言。它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS的特点是为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。它可以实现修改一个小的样式更新与之相关的所有页面元素。

CSS 语法

css的结构是由选择器，一条或多条声明组成的。每条声明是由属性和属性值组成的。属性是你想要设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。声明和声明之间被分号分开。

selector {property:value}

给大家举个栗子，给h3添加字体颜色为红色：

css样式如下：

h3 {color:#f00;}

童靴们看上边的栗子，h3就是选择器，color为设置的样式属性，#f00是属性值。

如果你想接着为h3添加样式，直接在分号后边写就可以，例如设置字号为24px;

h3 {color:#f00;font-size:24px;}

选择器的分组

在网页中，不免好多元素有相同的样式，那么我们可以对选择器进行分组，使分组的元素分享同一组样式。

p,h3{color:#f00;}

上面的例子，所有的p元素和h3元素字体颜色设置成红色。

继承

在CSS中，子元素可以继承父元素属性。

body中两个子元素分别是h3和p,给body元素添加属性，设置字体颜色为红色。

给body添加color属性

在浏览器中显示：

子元素继承父元素属性

通过CSS继承，h3元素和p元素继承了父元素body的属性。

CSS 选择器

小编先介绍应用最多的几种选择器。后续文章中会带大家认识更多的选择器。

1.标签选择器

直接使用标签名称作为选择器。(上边讲到的内容都是使用的标签选择器)

div {color:#00f;}

2.id选择器

在之前的文章中小编给大家总结过和css相关的属性，不知道大家有木有做笔记呢。

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。

如下，给h3和p各自定义一个属性（id属性是唯一的）

给元素定义id属性

为元素添加样式：

使用id选择器为元素添加样式

在浏览器中显示：

3.类选择器

类选择器以一个点号显示。

我们把上面的例子id属性改成class属性：

给元素添加class属性

使用类选择器添加样式：

类选择器用一个小点定义

在浏览器中显示：

4.派生选择器

派生选择器其实是其他选择器的一种组合形式。依据元素在其位置的上下文关系来定义样式的。

添加样式：

使用派生选择器，根据元素的上下文关系确定某个元素的样式，使代码看起来更加的整洁。

在浏览器中显示：

今天的内容讲到这里了，大家看着例子练习一下吧。

你必须非常努力，才能看起来毫不费力！

关注小白前端，才能持续收到文章推送！