CSS-1-CSDN博客

本文链接：https://blog.csdn.net/Nozomi9967/article/details/141962753

1.内部样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内部样式</title>

        <!-- style写在head中，写在body中也行，但是系统会自动归进head里 -->
        <style>
            h1
            {
                color: aqua;
                font-size: 330px;
            }
            image
            {
                width: 400px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <h1>我是NOZOMI</h1>

    </body>
</html>

2.外部样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部样式</title>

        <!-- 外部样式    rel是relation的意思 -->
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <h1>我是NOZOMI</h1>

    </body>
</html>

优先级 ：

行内样式>内部样式=外部样式

3.语法规范

4.选择器

1.统配选择器

作用：可以选中所有html元素

语法：

*{

属性：属性值

}

2.元素选择器

作用：选中特定元素

语法：

标签名{

}

3.类选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>类选择器</title>

        <!-- '.'+自已定义的class类名 -->
        <style>
            .test
            {
                color: aqua;
                font-size: 330px;
            }
        </style>
    </head>
    <body>

        <h1 class="test">我是NOZOMI</h1>

    </body>
</html>

4.id选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>id选择器</title>

        <!-- '#'+自已定义的id -->
        <style>
            #test
            {
                color: aqua;
                font-size: 330px;
            }
        </style>
    </head>
    <body>

        <h1 id="test">我是NOZOMI</h1>

    </body>
</html>

不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>区别</title>

        <style>
            .stress
            {
                color: aqua;
            }
            .bigsize
            {
                font-size: 330px;
            }
        </style>
    </head>
    <body>

        <p class="stress bigsize">我是NOZOMI</p>

    </body>
</html>

5.子选择器

<html>
    <head>
        <meta charset="UTF-8">
        <title>子选择器</title>

        <style>
            .nozomi>span
            {
                color: cornflowerblue;
            }
        </style>
    </head>
    <body>

        <p class="nozomi">nozomi的son是<span>biyue</span></p>

    </body>
</html>

6.后代选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>后代选择器</title>

        <style>
            /* 后代选择器是选择所有的子代 */
            .nozomi span
            {
                color: cornflowerblue;
            }
        </style>
    </head>
    <body>

        <p class="nozomi">nozomi的son是<span>biyue</span>和<span>biyueyue</span></p>

    </body>
</html>

7.交集选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>交集选择器</title>

        <style>

            /* 标签+类名 */
            p.handsome
            {
                color: cornflowerblue;
            }

            /* 也可以 */
            .cute.girl
            {
                color: blueviolet;
            }

            /* 后面的覆盖前面的，指的是这里的顺序 */
            .blue
            {
                color: blue;
            }

            .red
            {
                color: red;
            }

        </style>
    </head>
    <body>

        <p class="handsome">Nozomi</p>

        <p class="cute girl">biyue</p>

        <p class="red blue">lovely couple</p>

    </body>
</html>

8.并集选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>并集选择器</title>

        <style>

            .handsome,
            .cute{
                color: burlywood;
                font-size: large;
            }
            
        </style>
    </head>
    <body>

        <p class="handsome">Nozomi</p>

        <p class="cute">biyue</p>

    </body>
</html>

9.兄弟选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>兄弟选择器</title>

        <style>

            /* 与div紧紧相邻的p元素，相隔一个不行，在上面也不行 */
            div+p{
                color: aqua;
            }

            /* 用法：我想要除主页外的li元素红色 */
            li+li{
                color: red;
            }
           
            
        </style>
    </head>
    <body>

        <div>Nozomi</div>
        <p>biyue</p>

        <ul>
            <!-- 因为主页的li元素，没有li跟它是兄弟，菜单1有主页跟它是兄弟，2有1跟它是兄弟 -->
            <li>主页</li>
            <li>菜单1</li>
            <li>菜单2</li>
        </ul>

    </body>
</html>

10.属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>

        <style>
            /* 第一种   所有带有title属性的元素*/
            [title]{
                color: red;
            }

            /* 第二种  所有title='0721'的元素 */
            [title='0721']{
                color: antiquewhite;
            }

            /* 第三种  所有title值以a开头的元素 */
            [title^='a']{
                color: black;
            }

            /* 第四种  所有title值以c结尾的元素 */
            [title$='c']{
                color: blueviolet;
            }

            /* 第五种  所有title值内有b的元素 */
            [title*='b']{
                color: blue;
            }
            
            
        </style>
    </head>
    <body>

        <div title="0721">NOZOMI</div>
        <div title="ace">NOZOMI</div>
        <div title="wc">NOZOMI</div>
        <div title="rbr">NOZOMI</div>

        
    </body>
</html>

11.伪类选择器

1.动态伪类

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动态伪类</title>

        <style>

            /* 注意：此顺序是固定的，顺序反了的话会因为逻辑被覆盖 */
            /* hover和active不仅只有超链接可用，其它标签也可，比如span */

            /* link-未被点击 */
            a:link{
                color: bisque;
            }

            /* visited-已被点击 */
            a:visited{
                color: black;
            }

            /* hover-鼠标悬浮在上面，出现的颜色 */
            a:hover{
                color: aqua;
            }

            /* active-鼠标点击时，出现的颜色 */
            a:active{
                color:red;
            }
            
        </style>
    </head>
    <body>

        <a href="https://www.baidu.com" >去百度</a>

        
    </body>
</html>

2.结构伪类

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>结构伪类-1</title>

        <style>

            /* div的p类型子元素，同时是第一个儿子，如果div的第一个儿子是span，那么都无法选中 */
            /*如果想要p类型里的第一个---first-of-child */
            div>p:first-child{
                color: red;
            }
            
            
        </style>
    </head>
    <body>
        <div>
            <span>A</span> <!-- 不会变红 -->
            <p>B</p>    <!-- 不会变红 -->
            <p>C</p>
            <p>D</p>
        </div>

        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>结构伪类-1</title>

        <style>

            /* div的p类型后代元素，同时是第一个儿子，这里的p的父亲是谁无所谓，但必须是第一个儿子 */
            div p:first-child{
                color: red;
            }
            
            /* 同时，这样也行 */
            p:first-child{
                color: antiquewhite;
            }
            
        </style>
    </head>
    <body>

        <!-- A和B都会变红 -->
        <div>
            <p>A</p>    
            <div>
                <p>B</p>
            </div>
            <p>C</p>
            <p>D</p>
        </div>

        
    </body>
</html>

3.否定伪类

4.UI伪类

4.目标伪类

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>目标伪类</title>

        <style>

            div{
                width: 300px;
                height: 300px;
                background-color: aqua;
            }

            /* 作用是将跳转到的div变红 */
            div:target{
                color: red;
            }
           
            
        </style>
    </head>
    <body>

        <a href="#one">去看第1个</a>
        <a href="#two">去看第2个</a>
        <a href="#three">去看第3个</a>
        <a href="four">去看第4个</a>

        <div id="one">1</div>
        <div id="two">2</div>
        <div id="three">3</div>
        <div id="four">4</div>

        
    </body>
</html>

5.语言伪类