CSS入门

CSS的基础选择器

此课程是收费课程,请先购买或加入会员后再访问。

咱们今天要学的是CSS的选择器。CSS的选择器其实有很多种,不过平常开发最主要用到的,就是下面这几种了。我们这节课程会讲到前三个比较基础的选择器,下一节讲另外两个稍微复杂一点点的选择器。那这些选择器,到底是什么东东,且听我一一道来。

  1. 标签选择器
  2. id选择器
  3. class选择器
  4. 后代选择器
  5. 子类选择器

CSS的常用基础选择器

先打开WebStorm,新建一个index.html文件,打一个!号,然后按tab键。这样HTML的基础格式就出来了。接下来我们在body标签里面,放一个p标签和一个h标签

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->
</head>

<body>
<h1>CSS入门课程</h1>
<p>在ITFun学CSS,好开心啊!</p>
</body>
</html>

浏览器默认显示的文字,都是黑色的,这样实在是有点单调了。如果我们现在想要改变P元素的颜色,那就需要用到CSS选择器了。

所谓的选择器,其实就是把你想改变样式的元素,给找出来。

标签选择器

因为我们想改变的是P元素的颜色,所以你需要在HTMLhead标签中加上这样的代码。

<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        p {
            color: red;
        }
    </style>
</head>

刷新一下,果然p标签包含的内容,就变成了红色了。大家在回头看看我们写的这段代码是什么意思。

CSS的标签选择器

首先要在head标签中,添加上一对style标签。style的中文意思就是样式。所有的CSS代码,都要写在这一对style标签之中。

里面的p就是CSS的选择器了。所谓的选择器,说白了,就是你想改变谁,就需要先把这个元素给找出来。我们写了一个p,那么p标签包括起来的内容,就会发生变化。我们把它的颜色变成了红色。如果你想让h标签也变颜色,那我们可以继续加上这样的代码。

<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        p {
            color: red;
        }

        h1 {
            color: yellow;
        }
    </style>
</head>

CSS的标签选择器

但是这样做会有一个缺点,就是网页中所有被你指定的标签都会生效,当你选择h1后,网页中所有的h1都会变成黄色,你若不信,那么我们在页面中,再添加另一个h标签试试。

<body>
<!-- ... -->

<h1>耶耶耶,我学会了~</h1>
</body>

刷新一下,果然这个h1标签中的内容也变成黄色。那么有没有单独就指定网页中某一个元素的方法呢?当然有的~

CSS的标签选择器

id选择器

id选择器,就是给网页上的元素,加上一个id,这个id就相当于这个网页元素的名字。通过你自定义的这个名字,你就能单独给某一个网页元素添加样式了。

举个栗子,咱们先将刚才写的代码都删掉。添加下面的标签

<body>
<h1>貂蝉</h1>
<h1>昭君</h1>
<h1>小猪猪</h1>
</body>

css的id选择器

这里有三个名字了,貂蝉昭君都是有名的大美女。至于小猪猪美不美,大家就仁者见仁智者见智了。现在需求是这样的,如果我只想把昭君同学的名字变成红色,但是其他人的不变色,应该怎么办呢?

这个时候,如果你还通过h1选择器,那么所有的h1都会变色,这肯定就不对了。为了达到需求,就可以通过指定id的方式,来指明只需要改变昭君的颜色。

我们给中间的昭君,加一个id,它的值是beauty

<body>
<!-- ... -->
<h1 id="beauty">昭君</h1>
</body>

接着去style中,加上这样的CSS

<style>
#beauty {
    color: red;
}
</style>

CSS的id选择器

刷新看看,果然只有昭君改变颜色了,其他的h标签,都还是默认的黑色。好,大家注意看了,这里有一个非常奇怪的#号。

这其实是CSS中规定好的,id选择器的写法。也就说,如果你要通过id来找一个元素,就必须在选择器前面加上#号。而且#号和id的名字中间,不能有空格!id选择器,也就是这么用的了,是不是很简单。

class选择器

大家思考一下,有一个小问题。如果我想让昭君貂蝉两位大美女,她们两个变成红色,而小猪猪保持默认的颜色,又应该怎么实现呢?
那你可能第一时间就想到,是不是可以给貂蝉也加一个叫做redid呢?

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        #beauty {
            color: red;
        }
    </style>
</head>

<body>
<h1 id="beauty">貂蝉</h1>
<h1 id="beauty">昭君</h1>
<h1>小肥猪</h1>
</body>
</html>

CSS中id选择器不能重名

刷新浏览器,确实貂蝉昭君确实变成红色了。但这样做实际上是错误的,你看编辑器里面都直接报错了呢。就算浏览器可以正常显示,但也一定不要这样用。原因是

每个页面中,不能存在同名的id

也就说,你让一个元素的idbeauty了。这个页面中,就不能再让别的元素id也叫beauty。现在可能还感觉不到有什么问题,等后面学到JavaScript。如果碰到同名的id,会直接导致程序运行错误的。为了解决这个问题,这就需要用到class选择器了。

class选择器的用法也非常的简单。

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        .beauty {
            color: red;
        }
    </style>
</head>

<body>
<h1 class="beauty">貂蝉</h1>
<h1 class="beauty">昭君</h1>
<h1>小猪猪</h1>
</body>
</html>

HTML中的id全部改成class,再将CSS中的#号改为.号。刷新一下,这样就好了,编辑器中也不会报错了。

CSS的class选择器

class你可以这么理解,class本身有班级的意思,当大家有相同的class,就表示大家是同一类的,都是大美女。当设置好样式后,属于这一类的元素,就会全部改变了。

总结

CSS代码,需要写在head中的style标签里面。CSS代码,由选择器属性构成。

选择器类型 用法举例 说明
标签选择器 p 相同标签全部被选中
id选择器 #pig 不能重复
class选择器 .beauty 可以重复