CSS-引入方式，选择器

最新推荐文章于 2024-08-14 09:51:48 发布

夜丶光

最新推荐文章于 2024-08-14 09:51:48 发布

阅读量233

点赞数

分类专栏： web前端文章标签： css web前端

本文链接：https://blog.csdn.net/lcconsider/article/details/60744144

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

web前端技术：HTML（结构）、CSS（外观）、JavaScript（行为）
CSS: 指层叠样式表 (Cascading Style Sheets)

HTML引入CSS的三种方式：

外部样式表（优先使用）
内部样式表
内联样式表（除非特殊）

<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <style type="text/css">
            h2 {
                color:green;
            }
        </style>
    </head>
    <body>
        <h1>外部样式表</h1>
        <hr/>
        <h2>内部样式表</h2>
        <hr/>
        <h3 style="color:gray;">内联样式表</h3>
    </body>
</html>

style.css文件

h1 {
    color:red;
}

选择器：选择的方式
Id：唯一
class：不唯一
样式：指的就是选择器、属性、属性值

常用的选择器：

元素（元素名）
id （#id）
class（.class名）

<html>
    <head>
        <style type="text/css">
            h1 {
                color:green;
            }
            #h2 {
                color:red;
            }
            .h3_class {
                color:gray;
            }
        </style>
    </head>
    <body>
        <h1>元素选择器</h1>
        <hr/>
        <h2 id="h2">id选择器</h2>
        <hr/>
        <h3 class="h3_class">class选择器</h3>
    </body>
</html>

可能还会用到的其他的选择器

子元素选择器（父选择器子选择器)
相邻选择器（A选择器+B选择器)
群组选择器(A选择器，B选择器···)

<html>
    <head>
        <style type="text/css">
            #f1 .p1 {
                color:green;
            }
            #f2+div {
                color:red;
            }
            #f2,h1 {
                color:gray;
            }
        </style>
    </head>
    <body>
        <h1>群组选择器</h1>
        <div id="f1">
            <p class="p1">子元素选择器</p>
            <p class="p2">段落</p>
        </div>
        <div id="f2">
            <p class="p1">群组选择器</p>
            <p class="p2">群组选择器</p>
        </div>
        <div>
            <p>相邻选择器</p>
        </div>
    </body>
</html>