CSS的样式引入方式和选择器

最新推荐文章于 2024-07-25 10:45:42 发布

weixin_44197665

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量78

点赞数

分类专栏： Web前端入门笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_44197665/article/details/109528819

版权

Web前端入门笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

CSS的样式引入方式和选择器

文章目录

CSS的样式引入方式和选择器

引入方式

CSS样式有三种引入方式：外部样式，内部样式，内联样式

内联样式

就是将样式直接写在标签的的style属性里，优先级最高。
但是可读性和代码复用程度最差。

<p style="color: red">内联</p>

内部样式

将样式写在style标签内，然后通过选择器渲染到对应标签上，可读性好，复用性高

<style>
        <!--内部样式-->
        p{
           font-size: 40px; 
        }
    </style>

外部样式

将样式写在CSS文件里然后再需要使用这些样式的html文档中的link标签导入，复用性最高。

    <link rel="stylesheet" href="url">

样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可以在三个不同的位置设置元素的样式属性</title>
    <!--外部样式-->
    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/pc/css/detail_enter-500bc3f487.min.css">
    <!--内部样式-->
    <style>        
        p{
           font-size: 40px; 
           color: aqua;
        }
    </style>
</head>
<body>
   <p>一个用来展示设置样式的演示</p> 
   <!-- 内联样式 -->
   <p style="color:red">一个用来展示设置样式的演示</p> 

</body>
</html>

CSS选择器

CSS通过选择器来选择一组样式要渲染到哪些的DOM元素上，用于内部样式和外部样式。
简单来说，选择器就是选择标签用的。

标签选择器

标签选择器会选择所有这个标签的元素
如下是一个p标签选择器，它会渲染页面上所有的p元素

p {
	font-size: 20px;
	}

会影响到项目的所有这一标签的元素的样式，影响范围很大，谨慎使用

ID选择器

ID选择器只会选择指定ID的元素，以#开头后跟ID的值

#redsample{
            color: red;
        }

由于ID一般是唯一的，这一选择器一般只能选择的一个元素，效率较低，相比于内联样式仅仅起到了分离的作用。

类选择器

类选择器会选择一个类的元素（元素的类由class属性的值决定），.后跟类名，最为常用。

.bluesample{
            color:blue;
        }

属性选择器

属性选择器会选择拥有指定属性的元素，还可以加等号来指定这个属于应该有的值。

[colorsample=greensample]{
            color: green;
        }

派生选择器

派生选择器用于以多个条件选择元素，是数个选择器的结合，常用于通过依据元素在其位置的上下文关系来定义样式
分为后代选择器、子元素选择器、兄弟选择器。

后代选择器

在某类元素的所有后代中再进行选择

p strong{
            font-family: 楷体;
        }

子选择器

不同于后代选择器，只选择子代

p > strong{
            font-family: 楷体;
        }

兄弟选择器

在与某类元素是并列关系的相邻元素中进行选择，注意是相邻

p + strong{
            font-family: 楷体;
        }

样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器样例</title>
    <style>
        /* 普通选择器p{} */
        p{
            font-size: 20px;
        }
        /* 派生选择器p strong{} */
        p strong{
            font-family: 楷体;
        }
        /* ID选择器#id{} */
        #redsample{
            color: red;
        }
        /* 类选择器.item{} */
        .bluesample{
            color:blue;
        }
        /* 属性选择器[property=a]{} */
        [colorsample=greensample]{
            color: green;
        }
    </style>
</head>
<body>
    <p>普通选择器</p>
    <p><strong>派生选择器</strong></p>
    <p id="redsample">ID选择器</p>
    <p class="bluesample">类选择器</p>
    <p colorsample=greensample>属性选择器</p>
</body>
</html>

weixin_44197665

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的样式引入方式和选择器

CSS的样式引入方式和选择器文章目录CSS的样式引入方式和选择器引入方式内联样式内部样式外部样式样例CSS选择器标签选择器ID选择器类选择器属性选择器派生选择器样例引入方式CSS样式有三种引入方式：外部样式，内部样式，内联样式内联样式就是将样式直接写在标签的的style属性里，优先级最高。但是可读性和代码复用程度最差。<p style="color: red">内联</p>内部样式将样式写在style标签内，然后通过选择器渲染到对应标签上，可读性好，复用性高&l
复制链接

扫一扫