一.CSS基础选择器-CSDN博客

本文链接：https://blog.csdn.net/weixin_47971713/article/details/115317936

本文详细介绍了CSS的基础知识，包括CSS的作用、语法规范和选择器的使用。通过实例展示了标签选择器、类选择器、ID选择器和通配符选择器的运用，强调了CSS在网页美化中的重要性，以及结构与样式的分离原则。此外，还探讨了类选择器的多类名使用和ID选择器的独特性质。

摘要由CSDN通过智能技术生成

一.CSS简介:

美化网页,也是一种标记语言(文字内容,图片外形,以及版面的布局)
CSS最大的价值:HTML做结构,CSS写样式,相分离

1.CSS语法规范:

在这里插入图片描述

注意事项都在注释中哦,嗯哼,有时间再来整理,先学一遍

<!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>体验css的语法规范</title>
    <style>
        /* 1.选择器{样式} */
        /* 给谁改样式{改成什么样式} */
        p {
            color: rgb(27, 88, 129);
            /*修改了文字颜色 */
            font-size: 20px;
            /*修改了文字的大小*/
        }
    </style>
</head>

<body>
    <p>梦想很远,但又很近.</p>
</body>

</html>

2.css代码风格

在这里插入图片描述

二.CSS选择器

CSS选择器就是用来选择标签的
在这里插入图片描述

1.标签选择器:标签名作为选择器

 <style>
        /* 1.选择器{样式} */
        /* 给谁改样式{改成什么样式} */
        p {
            color: antiquewhite;
            /*修改了文字颜色 */
            font-size: 20px;
            /*修改了文字的大小*/
        }

        div {
            color: aqua;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>梦想很远,但又很近.</p>
    <div>一步一步,慢慢靠近!</div>
</body>

上述代码结果展示图
在这里插入图片描述

2.类选择器

不可用标签名做标签选择器

<div></div>就是一个盒子
在这里插入图片描述

代码展示:

<style>
    /* 2.类选择器 */
    /* 类选择器口诀:样式点定义  结构类(class)调用   一个或多个  开发最常用*/
    /* 谁想来调用,class+类名 */
    .huyang {
        color: red;
    }

    .gaoleng {
        color: orange;
    }

    .shangxin {
        color: yellow;
    }

    .dengdeng {
        color: greenyellow;
    }

    .yexu {
        color: lightblue;
    }

    .youqiji {
        color: plum;
    }

    .keneng {
        color: blanchedalmond;
    }
</style>


<body>
    <ul>
        <li class="huyang">每个人都有属于自己的一片森林</li>
        <li class="gaoleng">也许我们从来不曾走过</li>
        <li class="shangxin">但它一直在那里</li>
        <li class="dengdeng">总会在哪里</li>
        <li class="yexu">迷失的人迷失了</li>
        <li class="youqiji">相逢的人会再相逢</li>
    </ul>
    <div class="keneng">村上春树</div>
</body>

这个彩虹色让我想起了我的彩虹袜子,哈哈哈哈
在这里插入图片描述
代码展示:

<style>
    /* 3.多类名使用 */
    /* `将相同的样式放在一个box里面,改的时候很容易全部修改 */
    /* 这些标签都可以调用这个公共的类,然后再去调用自己独有的类 */
    /*这样做不仅节省了代码,修改起来也非常方便*/
    .box {
        width: 100px;
        height: 100px;
        font-size: 30px;
    }

    .abc {
        /* 背景颜色 */
        background-color: greenyellow;
    }

    .efg {
        background-color: grey;
    }
</style>

<body>
    <div class="box abc">1</div>
    <div class="box efg">2</div>
    <div class="box abc">3</div>
</body>

在这里插入图片描述

3.id 选择器

类选择器和id 选择器区别:
(1)id选择器只能被用一次,而类选择器可以被用多次
(2)id是以'#'来定义的
在这里插入图片描述

在这里插入图片描述
代码展示如下:

<style>
    #keke {
        color: aquamarine;
    }
</style>

<head>
    <div id='keke'>青青草原</div>
</head>

在这里插入图片描述

id选择器口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用

4.通配符选择器

* 定义,表示选中页面中所有的元素
包括一切的标签,比如<span>,<div>,<li>,<ul>,<html>等等

代码展示:

<style>
    * {
        color: black;
        background-color: darkorange;
    }
</style>

<body>
    <div>谈恋爱真的好难呀~</div>
    <span>同意楼上的说法</span>
    <ul>
        <li>谁说得,我就有甜甜的恋爱</li>
    </ul>

</body>

</html>

在这里插入图片描述