python网站创建006：常见CSS样式

好度

已于 2023-11-27 21:06:23 修改

阅读量113

点赞数

分类专栏： python网站创建文章标签： python css 开发语言前端

于 2023-07-31 01:21:00 首次发布

本文链接：https://blog.csdn.net/qq_42623386/article/details/132014598

版权

python网站创建专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1. 给标签添加样式有三种方式(在标签上添加、在head中添加、通过独立文件添加)。其中(在head中添加、通过独立文件添加)是有选择器存在的

直接在标签上添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <div style="color:red;">hello</div>


</body>
</html>

class选择器(适用于某一个标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .xx{
        color:red;
        }
    </style>
</head>
<body>
    <div class="xx">hello</div>
</body>
</html>

标签选择器(适用于某一种选择器)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
        color:red;
        }
    </style>
</head>
<body>
    <!--只会适用于div标签-->
    <div class="xx">hello</div>
    <a>你好</a>
</body>
</html>

id选择器(适用于某一个标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #n1{
        color:red;
        }
    </style>
</head>
<body>
    <!--只会适用于div标签-->
    <div id="n1">hello</div>
    <a>你好</a>
</body>
</html>

后代选择器(适用于通过祖父关系标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div li{
        color:red;
        }
    </style>
</head>
<body>
    <!--只会运用于div下的li标签-->
    <div id="n1">
        <ul>
            <li>广西</li>
        </ul>
    </div>
    
    <ul>
        <li>广西</li>
    </ul>

</body>
</html>

class和后代选择器结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .n1 li{
        color:red;
        }
    </style>
</head>
<body>
    <!--只会运用于class="n1"下的li标签-->
    <div class="n1">
        <ul>
            <li>广西</li>
        </ul>
    </div>

    <ul>
        <li>广西</li>
    </ul>

</body>
</html>

指定直属关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div > a{
        color:red;
        }
    </style>
</head>
<body>

    <div>
        <ul>
            <li>
                <a>广西</a>
            </li>
        </ul>
        <!--只会运用于这个div下一级的a标签-->
        <div>
            <a>广西</a>
        </div>
    </div>

</body>
</html>

分组选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div,h1,span{
        color:red;
        }
    </style>
</head>
<body>
    <!--运用于div、h1、span标签-->
    <div>广西</div>
    <h1>广西</h1>
    <span>广西</span>

</body>
</html>

属性选择器(适用于有相同属性的标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        input[type="text"]{
        color:red;
        }
    </style>
</head>
<body>
    <!--只会运用于拥有 type="text" 的input标签-->
    <input type="text"/>
    <input type="password"/>

</body>
</html>

通过独立文件添加样式：首先新建一个.css文件，并把样式写上

好度

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
python网站创建006：常见CSS样式

1. 给标签添加样式有三种方式(在标签上添加、在head中添加、通过独立文件添加)。其中(在head中添加、通过独立文件添加)是有选择器存在的直接在标签上添加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&lt...
复制链接

扫一扫