css三种引入方式与标签选择器

已于 2022-09-18 10:21:50 修改
阅读量358 收藏
点赞数 3
文章标签： css 前端 html
于 2022-09-01 09:09:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43765641/article/details/126573212
版权

目录

css三种引入方式

选择器

        标签选择器：

        class选择器：

        id选择器： 

        后代选择器：

        子代选择器：

        组合选择器：

        通配符选择器:

css三种引入方式

1、行间样式：权重最高1000，在标签的style属性中写css样式。

2、内部引入方式：在head中写style标签，然后在style标签中写css样式。

3、外部引入方式：使用link引入外部css文件，css样式写在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>css三种引入方式</title>

    <!-- 外部引入方式 -->
    <link rel="stylesheet" href="yr.html">

    <!-- 内部引入方式 -->
    <style>
        div{
            width: 100px;
        }
    </style>
</head>
<body>
    <!-- 行间样式 -->
    <div style="width: 100px">
    </div>
    
</body>
</html>

  选择器

标签选择器：

        权重为1。

        语法：标签名{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>选择器</title>
    <style>
      
        /* 标签选择器 */
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
      

    </style>
</head>
<body>
    
    <div class="div1">
        <p>
            <span>CSDN1</span>
        </p>  
        <span>CSDN2</span>
    </div>

    <div id="words" style="margin-top: 20px"></div>
    
</body>
</html>

class选择器：

       1、 特点：一个标签可以有多个class名。多个标签可以有相同的class名。

       2、 权重为10。

              语法：.class名{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>选择器</title>
    <style>
      
        /* 标签选择器 */
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
       /* class选择器 */
       .div1{
            width: 120px;
            height: 200px;
            background-color: aquamarine;
        }   
      

    </style>
</head>
<body>
    
    <div class="div1">
        <p>
            <span>CSDN1</span>
        </p>  
        <span>CSDN2</span>
    </div>

    <div id="words" style="margin-top: 20px"></div>
    
</body>
</html>

id选择器： 

       1、 特点：id名是唯一的，一个标签只能有一个id。不同标签id名不能相同。

       2、权重为100。

             语法：#+id名{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>选择器</title>
    <style>
      
        /* 标签选择器 */
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
       /* class选择器 */
       .div1{
            width: 120px;
            height: 200px;
            background-color: aquamarine;
        }  
        /* id选择器 */
        #words{
            width: 140px;
            height: 140px;
            background-color: gold;
            
        }
      

    </style>
</head>
<body>
    
    <div class="div1">
        <p>
            <span>CSDN1</span>
        </p>  
        <span>CSDN2</span>
    </div>

    <div id="words" style="margin-top: 20px"></div>
    
</body>
</html>

 后代选择器：

        权重为几个选择器权重相加。

        语法：父选择器   子选择器{css样式}

  孙代span和子代span都属于div1后代

<!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>选择器</title>
    <style>
      
        /* 标签选择器 */
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

         /* 后代选择器 */
         .div1 span{
            color: red;
        }   
    
    </style>
</head>
<body>
    
    <div class="div1">
        <p>
            <span>CSDN1</span>
        </p>  
        <span>CSDN2</span>
    </div>

    <div id="words" style="margin-top: 20px"></div>
    
</body>
</html>

 子代选择器：

        权重为几个选择器权重相加。

        语法：父代选择器>子代选择器{css样式}

   只选中子代span

<!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>选择器</title>
    <style>
      
        /* 标签选择器 */
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

         /* 子代选择器 */
         .div1>span{
            color:red;
        }
    
    </style>
</head>
<body>
    
    <div class="div1">
        <p>
            <span>CSDN1</span>
        </p>  
        <span>CSDN2</span>
    </div>

    <div id="words" style="margin-top: 20px"></div>
    
</body>
</html>

组合选择器：

        权重为每个选择器单独计算。

        语法：选择器1，选择器2......{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>选择器</title>
    <style>
      
        /* 标签选择器 */
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        /* 组合选择器 */
       .div1,#words{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
       }
    </style>
</head>
<body>
    
    <div class="div1">
        <p>
            <span>CSDN1</span>
        </p>  
        <span>CSDN2</span>
    </div>

    <div id="words" style="margin-top: 20px"></div>
    
</body>
</html>

 通配符选择器:

        权重最小

        语法：*{css样式}

辰辰辰辰宸
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS-外部引入方法
w20180341314的博客
02-15 1670
CSS
css的引入方式和选择器
qq_52016943的博客
05-31 475
1.css介绍 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 2.css的引入方式 ......
在vue中的style标签内如何引入外部的css文件
08-12 3701
代码】在vue中的style标签内如何引入外部的css文件。
css选择器
qq_45863001的博客
08-19 256
CSS的引入方式： - 内联样式(行内样式 style)： 缺点：样式与结构冗余 优点：优先级较高 内联样式表就是把css代码直接写在现有的HTML标签中，具体的使用方法如下面所示： <div style="color:red">设置文字的颜色为红色</div> 这种样式只会对当前标签起作用，在测试的时候可以使用，不能对样式进行复用，不方便后期维护，不推荐使用。 - 内部样式表： 缺点：样式的复用率较低 优点：样式与结构分离 将样式表编写到head中的style
CSS的三种引入方式：外部样式、内部样式和行内样式
热门推荐
Ahua_Core的博客
03-07 2万+
CSS的三种引入方式：外部样式、内部样式和行内样式外部样式链接式：link标签导入式：@import链接式与导入式的区别内部样式行内样式样式优先级 外部样式 即CSS代码保存在外部，HTML文件通过链接式link或者 导入式@import引用这个外部样式表。 <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title> <!--链接式:推荐
Html引入外部css ＜link＞标签 @import
kfepiza的博客
02-27 2206
type=“text/css” 可以不写。
CSS几种引入方式和选择器的总结
qq_21921805的博客
06-06 323
一、层叠样式表 介绍 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 引入方式 1.行内样式 ————标签样式 结合style，加上对应样式 <h1 st.
web外部引入css的两种方式
Endorphincuan的博客
10-10 1373
用css设置web样式时，有行内样式、内部样式和外部样式。对于较为复杂的网页，较多使用的是外部样式，因为这样才真正实现了内容与样式的分离效果。本篇文章就介绍了关于css设置外部样式时的两种引入方法
css的三种不同的引入方式解析
kaiser010的博客
05-26 555
1、行内式引入：将style属性直接赋值到猴哥html标签上来达到控制html的目的，这种引入CSS的方式是分散灵活方便，但缺乏整体性和规划性，不利于后期的修改和维护，当需要修改网站的样式时，一个相同的修改可能涉及多个地方，维护成本高。链接样式是指在外部定义CSS样式表并形成以.CSS为扩展名文件，然后在页面中通过<link>链接标记链接到页面中，而且该链接语句必须放在页面的<head>标记区。3、外部引入：将代码单独写在一个独立的css文件中，然后引入进html文件中。2）、使用@import。
CSS——css外部样式文件的引入
狂野的鬼
03-30 6874
CSS外部样式的两种引入方式
qq_43811093的博客
02-29 3530
前端入门学习笔记（持续更新中） 两种方法 <link href="style.css" rel="stylesheet" type="text/css" /> <style> @import url('style.css'); </style> 区别 1.从属关系区别   link是HTML提供的标签，不仅可以加载CSS文件，还可以定义其它属性；@impor...
css的4种引入方式--内联样式（标签内style）、内部样式表（＜style＞）、外部样式表（＜link＞、@import）
heshihu2019的博客
12-07 1456
1.内联样式（Inline Styles）：可以直接在HTML元素的style属性中定义CSS样式。
【前端】CSS（引入方式+选择器+常用元素属性+盒模型+弹性布局）
最新发布
WengJM的博客
04-03 1454
层叠样式表（Cascading Style Sheets）对元素位置的排版进行精确控制，实现结构和样式的分离CSS 控制页面的展示效果HTML决定页面的结构。
CSS系列之文件引入方式
StayAlive1887的博客
07-28 1554
在index.html需要引用main.css文件，使用link标签引入css文件，link标签的href属性指定css文件的路径，这里使用的是相对路径。 /* 这里的css文件在一个style的文件夹中，名为main.css */将css代码写在标签内，style标签可放在html文档的任意位置，一般放在标签下。color:red;>美味烧烤烤肉
在style标签中，vue项目引入style文件，外部css文件
qq_43305958的博客
08-20 1万+
在style标签中，vue项目引入style文件，外部css文件一、css是什么？二、使用步骤1.使用style标签引入2.在style标签内使用@import导入总结 一、css是什么？ CSS （层叠样式表） 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的
CSS的引入方式
qq_33962481的博客
12-03 136
目录内部样式表行内样式表外部样式表(常用) 内部样式表 内部样式表示写到html页面内部, 是将所有的CSS代码抽取处理, 单独放到一个行内样式表 在元素标签内部的style属性中设定CSS样式, 适合修改简单样式 <div style="color: red; font-size: 12px;">哈哈哈哈</div> 外部样式表(常用) 样式单独写到CSS文件中. 之后把CSS文件引入到HTML页面中 引入外部样式表分为两步 : 新建一个后缀名为.css的样式文件, 把所以CS
CSS：链接外部css样式时候link标签使用方法
weixin_43731793的博客
06-12 2万+
1、link实例 <link rel="stylesheet" href="img/divcss5.css" type="text/css" /> 链接外部css样式时候link标签的内容结构解释——css引用 href值为外部资源地址，这里是css的地址 rel定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet type规定被链接文档的 MIME 类...
HTML中head标签内的使用标签详解
weixin_30701575的博客
01-14 1786
一、head包含元素简介 <head>元素包含了所有的头部标签元素，在head中你可以插入脚本（scripts）,样式文件（CSS）,及各种meta信息，可以添加到头部区域的元素为 <title> 定义网页的标题(浏览器工具栏标题，搜素引擎结果页面标题，收藏夹标题) <meta> 用来定义页面的特殊信息（页面关键字，页面描述） ，描述了一些基本的元数据 ...
css的三种引入方式
前端开发,HTML5,css3,JavaScript,node.js,vue
11-19 5958
css的三种引入方式,行内样式就是直接把css样式添加在HTML标签中,作为style样式的属性值 内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，但是我们通常写在head标签里面。 外链式是把css样式写入.css文件内，然后通过link标签链接。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值