html标签样式

Bianca427

已于 2022-06-05 22:46:30 修改

阅读量5.1k

点赞数 1

文章标签： html 前端

于 2022-05-31 09:14:25 首次发布

本文链接：https://blog.csdn.net/Bianca427/article/details/124980762

版权

优先级：内联样式 > 内部样式 > 外部样式

在<style>....</style>内设置样式

1、内联样式：写在标签里面

<body>
<!--内联样式 写在标签里面-->
<!--style=背景颜色;width:宽度像素-->
    <div style="background-color: pink;width: 300px">人生苦短，我用python</div>
</body>

2、内部样式《标签选择器》：<style> 标签{ } </style>

功能：同步设置多个标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部样式-->
    <style>
        div{background-color: pink;
            width: 470px;}

    </style>
</head>
<body>
    <div>人的一生为什么要努力？因为最痛苦的事，不是失败，是我本可以</div>
</body>
</html>

标签选择器同步设置多个标签

3、外部样式：新建css样式表，html用Link方法引用

css样式表：


<style>
    div{background-color: pink;width: 200px;}
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外部样式-->
    <link rel="stylesheet" href="01_css基本使用.css">

4、html引用css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外部样式-->
    <link rel="stylesheet" href="01_css基本使用.css">

5、《class选择器》：先定义类（. ABC）-标签内引用类<p class='ABC'>

功能：针对单个标签设置样式，可被多个标签引用

输出：

6、《id选择器》：定义id（#ABC） -标签内通过id属性引用（id='ABC'）

功能：具有唯一性（引用多个会语法报错）

7、《群组选择器/并集标签》：标签1，.类名{background-color：背景颜色, height：高度,width：宽度}

功能：多种标签、自定义类等同时设置样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--    三种写法ul li / .nav  / .nav li -->
        div,p,ul li{color: pink;}
    </style>
</head>
<body>
    <div>熊大</div>
    <p>熊二</p>
    <ul class="nav">
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
    </ul>
</body>

8、《兄弟选择器》：（标签1~标签2）

功能：给标签1后面的所有同级标签2设置样式。

<!--    兄弟选择器-->
    <style>
        div~p{
            background-color: bisque;
            height: 40px;
        }
    </style>
</head>
<body>
    <div>我是第一个div盒子</div>
    <div>
        <p>我是第一个p盒子</p>
    </div>
    <p>第一个p标签</p>
    <p>第二个p标签</p>
    <p>第三个p标签</p>
</body>

兄弟选择器输出：

9、《相邻标签》：（.类名）+标签（必须是相邻且从上往下找）

功能：给小李邻居老王设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*相邻选择器*/
        .div2+p{
            background-color: blueviolet;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="div1">我是第一个div盒子</div>
    <div class="div2">
        <span>我是第一个span盒子</span>
    </div>
    <p>第一个p标签</p>
    <p>第二个p标签</p>
    <p>第三个p标签</p>
</body>
</html>

相邻标签输出：

10、子代选择器：标签1>标签2

功能：给dic标签内的p标签设置样式

子代选择器输出：

11、《后代选择器》

功能：仅给内嵌标签设置样式，不限层数

    <style>
        /*后代选择器*/
        div p{background-color: bisque;height: 50px;}
    </style>
</head>
<body>
    <div>我是第一个div盒子</div>
    <div>
        <span>我是第一个span盒子</span>
        <div>
            <p>我是内嵌的p标签</p>
            <span>
                <p>我也是内嵌的p标签</p>
            </span>
        </div>
    </div>
    <p>第一个p标签</p>
    <p>第二个p标签</p>
    <p>第三个p标签</p>
</body>

后代选择器输出：

12、class相同：需要加工的标签.类名{...样式....}

功能：当拥有相同类的不同标签，针对某个标签需加样式时

    <style>
        /*box类字体蓝色*/
        .box{color:blue}
        /*首先你必须是个div，其次class为box*/
        div.box{
            background-color: palegoldenrod;
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="box">我是一个div盒子</div>
    <span class="box">我是一个span盒子</span>
    <p class="box">我是一个p标签</p>
</body>

class相同输出：

13、伪装选择器：链接标签a：link{color:yellow}

link 超链接点击之前
visited 链接被访问过之后

功能：作用于链接标签当鼠标移动标签时触发...

设置未被点击的时字体颜色：a：link{color:yellow}

设置已被点击的链接字体颜色：a:visited{color: brown}

设置鼠标悬停的字体颜色：a:hover{color: yellow;}

设置鼠标点击未释放字体颜色:a:active{color: blue;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*未被点击的时候*/
        a:link{color: coral;}

        /*已被点击的链接*/
        a:visited{color: brown;}

        /*鼠标悬停背景的样式*/
        a:hover{color: yellow;}

        /*鼠标点击未释放*/
        a:active{color: blue;}
        /*如果这四个选择器都要设置，必须要按照上面的顺序，lvha*/
    </style>
</head>
<body>
    <a href="#">百度一下</a>
</body>
</html>

14、focus伪类选择器：表单标签：focus{样式}

功能：作用于表单标签，当鼠标悬停在表单时触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:focus{ background-color: pink;}
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>

focus伪类选择器输出：当鼠标悬停在表单时背景色为pink