CSS基础（一）——CSS选择器与常用属性

pro1822

已于 2022-03-25 21:33:31 修改

阅读量1.3k

点赞数

分类专栏： HTML+CSS基础文章标签： css

于 2022-03-25 21:32:38 首次发布

本文链接：https://blog.csdn.net/qq_41523175/article/details/123743907

版权

HTML+CSS基础专栏收录该内容

15 篇文章 6 订阅

订阅专栏

一、什么是CSS？

CSS指层叠样式表（Cascading Style Sheet）

用来设计网页的样式的，是在html的基础上进一步美化网页的一项技术。

二、CSS语法

（1）入门

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo01</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <h1>hello world!</h1>
</body>
</html>

其中，h1叫作选择器。

（2）四种选择器

选择器分为四种：

1、元素选择器：h1，

2、类选择器：【.test】

3、id选择器：【#test】

4、通配符选择器：*

看一个案例就明白了~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo01</title>
    <style>
        h1{
            color: red;
        }
        .test1{
            color: blue;
        }
        #test2{
            color: yellow;
        }
        *{
            color: black;
        }
    </style>
</head>
<body>
    <h1>hello world!</h1>
    <h1 class="test1">hello world!</h1>
    <h1 id="test2">hello world!</h1>
</body>
</html>

分析：

第一个h1，使用的是元素选择器，设置颜色为红色。

第二个h1，使用的是类选择器，设置颜色为蓝色。

第三个h1，使用的是id选择器，设置颜色为黄色。

将这三个选择器全部注释掉，通配符选择器就发生作用了，如下图，三个h1都变为黑色了。

    <style>
        /* h1{
            color: red;
        }
        .test1{
            color: blue;
        }
        #test2{
            color: yellow;
        } */
        *{
            color: black;
        }
    </style>

由此，我们可以发现，如果对于某一标签，有多个选择器作用于它的话，最后只能有一个老大说了算。

在此之前，我们先来了解一下，插入css的三种途径。

三、创建CSS的三种途径 + 优先级

（1）内部样式表

该途径，即为我们上面所使用的，就不再介绍，可以和下面两种进行对比。

（2）内联样式

我们来看一个案例：

<h1 style="color: pink;">hello world!</h1>

1、在标签内，写上style=“”。

2、在引号内，写上修饰属性即可。

（3）外部样式表

前面两种方法，我们都是在当前html文件下，插入一段css的代码。

那如果我们的css代码比较多的话，就影响代码的美观了，所以，我们将样式提取到外部文件里，在外部文件进行样式的编辑。

即引用外部css文件来修饰本html页面。

话不多说，我们来看一个案例。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo01</title>
    <link rel="stylesheet"type="text/css"href="demo01.css">
</head>

<h1 class="test3">hello world!</h1>

并且创建一个新文件，Demo01.css，放在同级目录下：

在Demo01.css当中，编写样式代码：

.test3{
    color: green;
}

至此，我们已经学习完了三种插入css代码的途径。

我们回到刚刚的问题，谁才是老大？

我们直接给出结论：

1、内联样式 > 内部样式表 > 外部样式表

即

老大：<h1 style="color: pink;">hello world!</h1>

老二：

<head>
    <style>
    </style>
</head>

老三：<link rel="stylesheet"type="text/css"href="demo01.css">

2、覆盖原则：

什么是覆盖原则呢？按照浏览器读代码的顺序，如果有多个选择器对于一个标签有作用的话，那么，最终使用的是最后一个作用。

就好像一张桌子，我先给它刷上红色的油漆，后来我不满意，我又给它刷上蓝色的油漆，再后来，我觉得蓝色的不好看，我又给它刷上了绿色的油漆。最后，这张桌子就是绿色的。

css选择器也是这样，浏览器解释到这一行代码的时候，诶，发现我要刷上红色的油漆，所以这张桌子就是红色的。再往下解释代码的时候，又发现了，这个臭码农又要我刷上蓝色的油漆，那我只好再刷上蓝色的油漆，最后，又看到一行代码（可恶的程序员！），要我刷上绿色的油漆，于是乎，桌子就是绿色的了~

四、常用的css属性

1、字体大小——font-size

Chrome浏览器中，font-size最小值为12px

2、字体颜色——color

3、宽度——width

4、高度——heigh

5、背景颜色——background-color

6、文本水平居中——text-align="center"

7、文本行高——line-height="100px"

话不多说，直接上代码~

<head>
    <style>
        .test4{
            font-size: 50px;
            color: red;
            background-color: yellow;
            text-align: center;
            line-height: 200px;
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>

    <h1 class="test4">hello world!</h1>
    <img src="../picture/head.jpg" alt="">

不做解释！