css选择器介绍

2023-12-13 05:59:03

css选择器介绍

01 css概念介绍

  • 用于更改标签的视觉效果

02 css格式

  • 选择器 {属性1：值1；属性2：值2}

03 三种样式

1.内联样式

  • 直接写在标签的style属性中。

    • 优点：简单明显
    • 缺点：无法重复使用代码
<img src="image-20231212183411453.png" alt="图片加载失败">
    <div style="color: blue">芙芙真可爱</div>
  • 效果图

在这里插入图片描述

2.内部样式

  • 在html文件的<head> </head>标签域中，添加<style> <style>标签，将css代码书写其中。

  • 优点：可以通过选择器重复使用代码

  • 缺点：选择器的使用较为繁琐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fufu{
            color: gold;
        }

    </style>
</head>
<body>
    <img src="image-20231212183411453.png" alt="图片加载失败">
    <div style="color: blue">芙芙真可爱</div>
    <div class="fufu">芙芙爱吃通心粉</div>
</body>

</html>
  • 效果图

在这里插入图片描述

3.外联样式

  • 在html文件的<head> </head>标签域中，通过<link>标签，引入一个.css文件，该文件的书写格式和【内部样式】相同。

  • 可以通过选择器重复使用代码

    • 优点：当项目中css属性过多时减少单个文件大小

  • 案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="fu.css">
    <style>
        .fufu{
            color: gold;
        }

    </style>
</head>
<body>
    <img src="image-20231212183411453.png" alt="图片加载失败">
    <div style="color: blue">芙芙真可爱</div>
    <div class="fufu">芙芙爱吃通心粉</div>
    <div class="fu">水神芙宁娜</div>
</body>

</html>}

在这里插入图片描述

4.样式优先级介绍

  • 内联 > 内部 / 外部
  • 内联优先级最大
  • 内部和外部优先级取决于css代码上下文顺序，靠后的大，会覆盖前一个选择器的相同属性。

04 三种选择器介绍

1.元素选择器

匹配到标签名相同的标签，更改样式。

语法：

  • 标签：<标签> </标签>
  • css：标签名 { /* css代码 */ }
<style>
     div{
            color: royalblue;
        }
        span{
            color: blue;
        }
</style>

<body>
   <div>水神</div>
    <span>枫丹</span>
</body>
  • 效果图

在这里插入图片描述

  • 优点：同时设置所有同类型标签
  • 缺点：无法单一设置，不常用

2.id 选择器

匹配到id名相同的标签，更改样式。

语法：

  • 标签：<标签 id="id名" >
  • css：#id名 { /* css代码 */ }

注意：一个html文档中，不能出现两个同id的标签。

案例

<style>
    #f1{
            color: blue;
        }
</style>

<body>
    <div>
        <h1 id="f1">水的国度</h1>
        <h1 id="f1">枫丹</h1>
    </div>
</body>
  • 效果图

在这里插入图片描述

  • 缺点：id值需要唯一，虽然现在不会有报错，但不符合规范

3.class 选择器

匹配到class名相同的标签，更改样式。

语法：

  • 标签：<标签 class="class名" >
  • css：.class名 { /* css代码 */ }
<style>
    .f2{
            color: blue;
        }
</style>

<body>
    <div>
        <h2 id="f1">审判庭</h1>
    </div>
</body>
  • 效果图
    在这里插入图片描述

特点：

  • 多个标签可以class同名：一个选择器样式作用多个标签。
  • 单个标签可以写多个class值(空格隔开)：多个选择器样式，作用于一个标签，同属性设置会根据【css上下文顺序】覆盖。

文章来源:https://blog.csdn.net/2302_77182979/article/details/134961645
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。