css入门1-选择器

<%相遇既是缘分%>

已于 2022-11-27 19:47:25 修改

阅读量575

点赞数 1

分类专栏： CSS HTML 文章标签： css html css3

于 2022-11-13 17:45:56 首次发布

本文链接：https://blog.csdn.net/New__Horizons/article/details/127834392

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

css入门1-选择器

前端三驾马车html（骨骼）+css（皮肤）+javascript（衣服）
要对html进行样式设置，那么就离不开css选择器，你得先找到html标签位置，然后才能进行各种样式设置

选择器1：标签选择器，标签名{},例子 body{}：这里以选择body标签对其样式设置为例

<!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>
        /* 选择body对其样式设置，设置背景颜色为蓝色 */
        body{  background-color: aqua;}
    </style>
</head>
<body>
</body>
</html>

效果图背景颜色为蓝色
在这里插入图片描述

选择器2：id选择器，#id值{}，例子 #body1{}

<!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选择器-id选择器</title>
    <style>
        /* 
        选择body对其样式设置,通过#id值获取标签位置，
        注意！！！一个网页多个标签的id名有且仅有1个id名，不可以重复，
        */
        #body1{
            /*设置背景颜色为蓝色*/
            background-color: aqua;
        }
    </style>
</head>
<body id="body1">
</body>
</html>

设置背景：
在这里插入图片描述

选择器3：类选择器 .class值{},例子 .word1{}

<!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>
        /* 
        选择body对其样式设置,通过.class值获取标签位置，
        注意！！！一个网页多个标签可以共用一个class名，
        */
        .word1{
            /* 设置字体颜色 */
            color: red;
        }
    </style>
</head>
<body>
    <p class="word1">中国</p>
    <p class="word1">地球</p>
    <p class="word1">宇宙</p>
</body>
</html>

效果图设置字体颜色红色：
在这里插入图片描述

选择器4：后代选择器标签+空格+标签{}，例子：body p{}

<!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>
        body p{
            /* 设置字体颜色 */
            color: blue;
        }
    </style>
</head>
<body>
    <p class="word1">中国</p>
    <p class="word1">地球</p>
    <p class="word1">宇宙</p>
</body>
</html>

效果图设置字体颜色蓝色
在这里插入图片描述

选择器5：并列选择器，例子p,span,div{ }

<!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>
        p,span,div{
            /* 设置字体颜色 */
            color:green;
        }
    </style>
</head>
<body>
    <p class="word1">中国</p>
    <span class="word1">地球</span>
    <div class="word1">宇宙</div>
</body>
</html>