HTML学习 — CSS基础_htncss-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_67614925/article/details/124663611

这篇博客详细介绍了CSS的基础知识，包括内联样式、内部样式表和外部引用三种样式添加方式，并强调了外部样式表在多页面应用中的优势。此外，还详细讲解了各种选择器的用法，如标签选择器、类选择器、ID选择器，以及后代选择器、子选择器等，帮助读者理解如何精确选取和应用CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

样式
选择器

样式

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部区域使用"style"元素
来包含CSS 外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

    <h3 style="color: greenyellow">路飞</h3>
    <h3 style="color: rgb(255, 47, 172)">索隆</h3>
    <h3 style="color: rgb(255, 161, 47)">山治</h3>

在这里插入图片描述

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过style标签定义内部样式表:

 <head>
    <style>
        h3 {color: red;}
    </style>
 </head>
 <body>
    <h3>路飞</h3>
 </body>

在这里插入图片描述

外部引用

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
注意：外部文件必须是以css为后缀名的文件。

h3{
    color: green;
}

<head>
    <link rel="stylesheet" href="./3.1.css">
</head>
<body>
    <h3>路飞</h3>
    <h3>索隆</h3>
    <h3>山治</h3>
</body>

在这里插入图片描述

选择器

CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类。

标签选择器

标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。

<head>
    <style>
        h3 {
            color: red;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <h3>路飞</h3>
    <h3>路飞</h3>
    <h3>路飞</h3>
</body>

在这里插入图片描述

类选择器

类选择器使用**‘.’**(英文点号)进行标识，后面紧跟类名。

<head>
    <style>
        h3 {
            color: red;
            font-size: 2em;
        }

        .h3 {
            font-size: 5em;
            color: brown;
        }
    </style>
</head>
<body>
    <h3>路飞</h3>
    <h3>路飞</h3>
    <h3 class="h3">路飞</h3>
</body>

在这里插入图片描述

ID选择器

id选择器使用**‘#’**进行标识，后面紧跟id名。

<head>
    <style>
        h3 {
            color: red;
            font-size: 1em;
        }

        .fei {
            color: blue;
            font-size: 2em;
        }

        .h3 {
            font-size: 5em;
            color: brown;
        }

        #lu {
            font-size: 3em;
            color: green;
        }
    </style>
</head>
<body>
    <h3>路飞</h3>
    <h3 class="fei">路飞</h3>
    <h3 class="h3" id="lu">路飞</h3>
</body>

在这里插入图片描述

后代选择器

在CSS中，后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时，内层的元素就成为外层元素的后代。如元素B嵌在元素A内部，B就是A的后代。而且，B的后代也是A的后代，就像家族关系。

<head>
    <style>
       ul a{
           text-decoration: line-through;
       }
    </style>
</head>
<body>
    <a href="">00</a>
    <ul>
        <a href="">11</a>
        <li><a href="">22</a></li>
        <li><a href="">33</a></li>
        <a href="">11</a>
    </ul>
    <a href="">55</a>
</body>

在这里插入图片描述

子选择器

子代选择器使用**‘>’**表示，如ul>li{ }，表示匹配第二个选择器，且为第一个选择器的元素的后代。

<head>
    <style>
       ul > a{
           text-decoration: line-through;
       }
    </style>
</head>
<body>
    <a href="">00</a>
    <ul>
        <a href="">11</a>
        <li><a href="">22</a></li>
        <li><a href="">33</a></li>
        <a href="">11</a>
    </ul>
    <a href="">55</a>
</body>

在这里插入图片描述

直接相邻选择器

相邻选择器使用+号表示，如p+a{ }，表示匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a的元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

<head>
    <style>
       #two + p{
           font-size: larger;
           color: red;
       }
    </style>
</head>
<body>
    <p>路飞</p>
    <p id="two">索隆</p>
    <p>山治</p>
    <p>乔巴</p>
    <p>乌索普</p>
</body>

在这里插入图片描述

间接相邻选择器

相邻选择器使用+号表示，如p~a{ }

<head>
    <style>
       #two ~ p{
           font-size: larger;
           color: red;
           background-color: blue;
       }
    </style>
</head>
<body>
    <p>路飞</p>
    <p id="two">索隆</p>
    <p>山治</p>
    <p>乔巴</p>
    <p>乌索普</p>
</body>

在这里插入图片描述

属性选择器

属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

<head>
    <style>
       input[type=text]{
           width: 400px;
           height: 50px;
           border-radius:10px 10px 10px 10px;
       }
    </style>
</head>
<body>
   <input type="text" name="" id="" placeholder="请输入账号">
   <input type="password" name="" id="">
</body>

在这里插入图片描述

公共选择器

<head>
    <style>
       [type=text],[type=password]{
           width: 400px;
           height: 50px;
           border-radius:10px 10px 10px 10px;
       }
       [type=text]{
           border: 10px solid red;
       }
       [type=password]{
           border: 10px solid blue;
       }
    </style>
</head>
<body>
   <input type="text" name="" id="" placeholder="请输入账号">
   <input type="password" name="" id="">
</body>

在这里插入图片描述

通配符选择器

通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。

<head>
    <style>
       *{
           font-size: larger;
           color: crimson;
           background-color: blanchedalmond;
       }
    </style>
</head>
<body>
   <a href="">路飞</a>
   <ul>
       <li>索隆</li>
       <li>山治</li>
   </ul>
   <p>乔巴</p>
   乌索普
</body>

在这里插入图片描述

伪类选择器

在这里插入图片描述

<head>
    <style>
        a {
            text-decoration: none;
        }

        /* 鼠标未访问前的颜色 */
        a:link {
            color: red;
        }

        /* 鼠标已访问后的颜色 */
        a:visited {
            color: green;
        }

        /* 鼠标悬停时的颜色 */
        a:hover {
            color: black;
        }

        /* 鼠标选择时的颜色 */
        a:active {
            color: blue;
        }
        img:hover{
            width: 600px;
            cursor:pointer;
            box-shadow:  50px 50px 50px 50px red;
        }
        img:active{
            border-radius: 50px 50px 50px 50px;
            border-radius: 50px 50px 50px 50px;
        }
    </style>
</head>
<body>
    <a href="https://wwww.baidu.com">百度</a>
    <img src="/html/img/01.jpg" alt="" height="300px">
    <a href="https://wwww.jd.com">京东</a>
</body>

伪对象选择器

在这里插入图片描述

<head>
    <style>
       ul > li{
           list-style: none;
       }
       input:active + span{
           background-color: green;
       }
       input:active + span::after{
           background-color: red;
           content: '航海王';
       }
        
    </style>
</head>
<body>
    <form action="" method="get">
        <fieldset>
            <legend>海贼王</legend>
            <ul>
                <li><label><input type="radio" name="onepiece" value="1"><span>路飞</span></label></li>
                <li><label><input type="radio" name="onepiece" value="2"><span>索隆</span></label></li>
                <li><label><input type="radio" name="onepiece" value="3"><span>山治</span></label></li>
            </ul>
        </fieldset>
    </form>
</body>