CSS引入方式（外部样式表、内部样式表、行内样式表）；CSS选择器

最新推荐文章于 2024-03-05 09:45:32 发布

听风吹过04

最新推荐文章于 2024-03-05 09:45:32 发布

阅读量1.6k

点赞数 6

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

本文链接：https://blog.csdn.net/qq_61657066/article/details/129675282

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了CSS样式表的三种形式：行内样式通过style属性定义，适用于特定需求；内部样式在标签中定义，利于代码维护；外部样式通过.css文件引入，实现结构和样式的完全分离。此外，还详细讲解了CSS选择器，包括标签选择器、类选择器和ID选择器的使用方法和优先级规则。

摘要由CSDN通过智能技术生成

1.行内样式表

行内（内联）样式：在标签的开始标签里面添加style属性，属性值中添加css样式代码

<div style="color:red;background-color: blue;">
        我就像一个蘑菇，处在阴暗的地方，随便怎么成长，长的起来就优秀，长不起来就溃败
</div>

好处：哪里需要就写在哪；

缺点：多个样式相同时，需要重复书写。

2.内部样式表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

         /* 标签选择器 */
        div {
            color: red;
            background-color: pink;
        }

    </style>
</head>

<body>
    <div>.我就像一个蘑菇，处在阴暗的地方，随便怎么成长，长的起来就优秀，长不起来就溃败</div>
</body>

</html>

好处：结构和样式分离，架构清晰，利于后期代码维护可以批量设置选中的标签样式；

缺点：结构和样式没有完全分离

3.外部选择器

先创建一个后缀名为.css的文件，在里面通过选择器书写css代码，再在head标签通过link标签引入css文件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/外部样式.css">
</head>

<body>
    <div>.我就像一个蘑菇，处在阴暗的地方，随便怎么成长，长的起来就优秀，长不起来就溃败</div>
</body>

</html>

div {
    color: red;
    background-color: pink;
}
/* css文件 */

好处：样式和结构代码完全分离，一处改处处改；

注意：

相同的选择器三个样式的优先级内联>内部=外部，

内部和外部看代码的顺序就近原则：谁离标签更近

4.CSS选择器

标签选择器、类选择器、id选择器

（1）标签选择器

通过标签名找到指定标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 标签选择器，通过标签名找到指定标签 -->
     <style>
        p{
            color: red;
        }
        div{
            color: green;
        }
    </style>
</head>
<body>
    <p>吼吼吼吼或或或或或或或</p>
    <div>1112665456455645456</div>
</body>
</html>

（2）类选择器（class选择器）

类选择器：通过标签上的class名找到相应的标签，从而使不同类型的标签可以提取公共样式

格式： .class名{
               属性：属性名；
               属性：属性名；
               属性：属性名；
               ……

}

注：如果标签上作用多个类选择器的样式，可以设置多个class名，中间用空格隔开。

选择器中间没有空格代表并且的意思，注意p2段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!-- 类选择器
格式： .class名{
               属性：属性名；
               属性：属性名；
               属性：属性名；
               ……
                   }
 -->
     <style>
        .op{
            color: red;
        }
        .od{
            background-color: pink;
        }
        /* 选择器中间没有空格代表并且的意思 */
        .op.od{
            font-size: 30px;
        }
     </style>
</head>
<body>
    <p class="op od">吼吼吼吼或或或或或或或</p>
    <p class="od">wwwwwwwwwwwwwwwwwwwww</p>
    <p class="op os od">p2p2p2p2p2p2p2p2</p>
    <div class="op">1112665456455645456</div>
</body>
</html>

（3） id选择器

id选择器：通过标签上的id名找到指定标签；

id是唯一的，只能找到页面中指定标签。

格式：#id名{

属性：属性值；

}

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    #p1{
        font-size: 50px;
    }
 </style>
</head>
<body>
    <p id="p1">wwwwwwwwwwwwwwwwwwwwww</p>
    <p>asdadasdasdasdsadasdsadas</p>
    <div>dasdasdasddsadawfeggdfgfdg</div>
</body> 



</html>

注：1.id选择器命名规则：

（1）以数字、字母、-和_组成；

（2）不能以数字开头

（3）不能包含特殊符号（因为特殊符号会有特殊的用法）

2.选择器权重：id选择器>类选择器>标签选择器

（注意和外部样式、内部样式、行内样式的差别）

听风吹过04

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
CSS引入方式（外部样式表、内部样式表、行内样式表）；CSS选择器

行内（内联）样式：在标签的开始标签里面添加style属性，属性值中添加css样式代码2.内部样式表 3.外部选择器：先创建一个后缀名为.css的文件，在里面通过选择器书写css代码，再在head标签通过link标签引入css文件。4.CSS选择器标签选择器、类选择器、id选择器（1）标签选择器通过标签名找到指定标签
复制链接

扫一扫

专栏目录