CSS层叠样式表学习(基础选择器)

(大家好,今天我们将继续来学习CSS(2)的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)

目录

二、CSS基础选择器

2.1  CSS选择器的作用

2.2  选择器分类

2.3  标签选择器

2.4  类选择器

2.5  类选择器一多类名

2.5.1  多类名使用方式

2.5.2  多类名开发中使用场景

2.6  id选择器

2.7  通配符选择器

 2.8  基础选择器总结


二、CSS基础选择器

2.1  CSS选择器的作用

  • 选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用,简单来说,就是选择标签用的。

以上CSS做了两件事: 

  1. 找到所有的h1标签,选择器 (选对人) 
  2. 设置这些标签的样式:比如颜色 (做对事) 

2.2  选择器分类

选择器分为基础选择器和复合选择器两个大类,我们这里先讲解一下基础选择器:

  • 基础选择器是由单个选择器组成的。
  • 基础选择器又包括:标签选择器,类选择器id选择器和通配符选择器

2.3  标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签分类(名称),为页面中某一类标签指定统一的CSS样式。

语法:

标签名:{

    属性1:  属性值1;

    属性2:  属性值2;

    属性3:  属性值3;

    ......

}

  •  作用:标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签。
  • 优点:能快速为页面中同类型的标签统一设置样式。
  • 缺点:不能设计差异化样式,只能选择全部的当前标签。

2.4  类选择器

如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。

语法:

.类名: {

    属性1:  属性值1;

    ......

}

 结构需要用class属性来调用class类的意思。

例:<div class='red'> 变红色</div>

 口诀:样式点定义   结构类(class)调用   一个或多个   开发最常用

注意:

  1. 类选择器使用"(英文点号)进行标识,后面紧跟着类名(自定义,我们自己命名的。
  2. 可以理解为给这个标签起了一个名字,来表示。
  3. 长名称或词组可以使用中横线来表示。
  4. 不要使用纯数字,中文等命名。
  5. 命名要有意义。
  6. 命名规范:见附件(web前端开发规范手册.doc)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类基础选择器</title>
    <style>
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
    <li class="red">无名的人</li>
    <li>呓语</li>
    <li>动物世界</li>
    <li>天外来物</li>
    <li>富士山下</li>
    </ul>
</body>
</html>

 

2.5  类选择器一多类名

  •   我们可以给一个标签指定多个类名,从而达到更多的选择目的,这些类名都可以选公这个标签。
  • 简单理解就是一个标签有多个名字。

2.5.1  多类名使用方式

<div class="red font20">亚瑟</div>

(1)在标签class属性中写多个类名

(2)多个类名中间必须用空格分开

(3)这个标签就可以分别具有这些类名的样式。

2.5.2  多类名开发中使用场景

(1)可以把一些标签元素相同的样式(共同部分)放到一个类里面。

(2)这些标签都可以调用这个公式的类,然后再调用自己独有的类。

(3)从而节省CSS代码统一修改也非常方便。

  • 各类名之间用空格隔开。
  • 简单理解:就是给某个标签添加了多个类或者这个标签有多个名字。 这个标签就可以分别具有这些类名的样式。
  • 从而节省CSS代码统一修改也非常方便。
  • 多类名选择器在后期布局比较复杂的情况下,还是较多使用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器多类名的使用</title>
    <style>
        .red {
            color: red;
        }
    
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red font35">无名的人</li>
        <li>呓语</li>
        <li>动物世界</li>
        <li>天外来物</li>
        <li>富士山下</li>
    </ul>
</body>
</html>

 

2.6  id选择器

  • id选择器可以为标有特定的id的HITML元素指定特定的样式。
  • HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义

语法:

#id名{

    属性1: 属性值1;

    ......

}

例如:将id为nav元素的内容设置为红色

#nav{

      color: red;

}

 注意:id属性只能在每个HTML文档中出现一次。

  • 口决:样式#定义,结构id调用,只能调用一次,别人切匆调用。
  • id选择器和类选择器的区别:
  1. 类选择器(class)好比人的名字,一个人可以有很多名字,同时一个名字可以被多个人使用。
  2. id选择器好比人的身份证号码,全中国是唯一的,不得重复。 
  3. id选择器和类选择器最大的不同在于使用次数上。 
  4. 类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和
    JavaScrip搭配使用。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <!-- 口诀:样式#定义,结构id调用,只能调用一次,别人切勿用 -->
    <style>
        #pink{
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">为中华之崛起而读书</div>
</body>
</html>

 

2.7  通配符选择器

在CSS中,通配符选择器使用" * "定义,它表示选取页面中所有元素(标签) 。

语法:

*{

   属性1: 属性值1;

   ......

}

  •  通配符选择器不需要调用,自动就给所有的元素使用样式。
  •  特殊情况才使用,后面讲解使用场景(以下是清除所有的元素标签的内外边距, 后期讲) 

*{

  margin: 0;

  padding: 0;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        *{
            color: red;
        }
        /* 这里把 html body div span li 等标签都改为了红色 */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

 2.8  基础选择器总结

基础选择器作用特点使用情况用法
标签选择器可以选出所有相同的标签不能差异化选择较多p{color: red;}
类选择器可以选出一个或多个标签可以根据需求选择非常多.nav{color: red;}
id选择器一次只能选择一个标签ID属性只能在每个HTML文档中出现一次一般和JS搭配#nav{color: red;}
通配符选择器选择所有的标签选择的太多,有部分不需要特殊情况使用*{color: red;}

(今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:人生重要的,不是现在所站的位置,而是所朝的目标。) 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/527228.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Windows系统下安装java开发环境所需的JDK开发工具包

目录 一、JDK开发工具包下载二、安装三、环境变量配置3.1 添加安装包路径3.2 添加lib路径3.3 添加bin目录 四、检查是否安装成功五、总结 一、JDK开发工具包下载 官网地址&#xff1a;JDK下载 打开网址后有多个版本的JDK&#xff0c;学者根据自己电脑需求选择对应版本下载。如…

精酿啤酒:传统酿造与现代工艺的结合

在啤酒酿造领域&#xff0c;传统酿造与现代工艺的结合是提品质和生产效率的重要途径。Fendi Club啤酒在酿造过程中&#xff0c;巧妙地将传统酿造工艺与现代技术相结合&#xff0c;为消费者带来了品质的啤酒体验。 Fendi Club啤酒注重传统的天然原料选择。他们坚持使用大麦、啤酒…

免费云服务器汇总,最长永久免费使用

随着云计算技术的快速发展&#xff0c;越来越多的企业和个人开始将业务迁移到云端。云服务器作为云计算的重要组成部分&#xff0c;以其灵活、高效、可扩展等特点受到广泛关注。然而&#xff0c;许多人在初次接触云服务器时&#xff0c;可能会对高昂的价格望而却步。为了帮助大…

day76 jquery

知识点: 1 在HTML中引入jQuery 2 jQuery中就绪函数 3 jQuery中选择器 4 使用jQuery获取表单元素的值 及标签中间的内容 5 jQuery中获取标签属性 6 jQuery设置和获取标签样式 ----------------------------------- 一 在HTML中引入jQuery 1 1) 把jQue…

工作这么久,你有测试思维了吗?

在如今竞争激烈的职场中&#xff0c;拥有测试思维已成为一个不可或缺的技能。无论你是从事软件开发、项目管理还是市场营销等各行各业&#xff0c;测试思维都能够帮助你更好地解决问题、提高工作效率以及保障质量。然而&#xff0c;工作时间的长短并不代表一个人是否具备测试思…

python ConfigParser:Python 标准库,ini 文件解析器

大家好&#xff01;在进行接口自动化工作时&#xff0c;配置文件是非常常见和重要的一部分。Python 提供了一个强大的标准库——ConfigParser&#xff0c;用于解析和处理 INI 文件。在本文中&#xff0c;我们将介绍如何使用 ConfigParser 来读取和操作 INI 文件&#xff0c;并提…

【Linux进阶之路】ARP欺骗实验

正文 话不多说&#xff0c;直接干&#xff01; 首先我们需要准备一下环境&#xff0c;先配置VMARE&#xff0c;然后下载KALI的虚拟机。 详细的安装教程视频&#xff1a;点击跳转&#xff0c;下载KALI可能要半个小时&#xff0c;中间可以看个剧玩个游戏缓一缓。 配置好之后&am…

ArcGIS和ArcGIS Pro快速加载ArcGIS历史影像World Imagery Wayback

ArcGIS在线历史影像网站 World Imagery Wayback(网址:https://livingatlas.arcgis.com/wayback/)提供了数期历史影像在线浏览服务,之前不少自媒体作者在文中宣称其能代表Google Earth历史影像。 1、一点对比 (1)同一级别下的版本覆盖面 以下述区域为例,自2014年2月20…

提升自媒体写作效率:7款必备工具推荐! #知识分享#媒体#AI写作

我们做自媒体运营&#xff0c;想要快速的创作内容&#xff0c;提供文章的创作速度是我们的目标&#xff0c;我们别的大佬可以很快地就创作出一篇内容&#xff0c;而自己墨迹半天确出不了一个字呢&#xff1f;其实这关乎到创作技巧&#xff0c;下面小编就跟大家分享如何利用自媒…

OneFlow深度学习框架:技术优势与功能特点

文章目录 一、概要二、核心技术优势2.1、分布式训练2.2、极致性能2.3、端到端的智能数据平台2.4、开放灵活的算法支持2.5、跨平台支持 三、功能特点四、OneFlow与TensorFlow对比四、安装OneFlow五、总结 一、概要 OneFlow是一款基于Python的开源深度学习框架&#xff0c;旨在实…

简介有向无环图DAG

Sui创纪录的每秒交易量部分归功于数学构造&#xff0c;即有向无环图&#xff08;Directed Acyclic Graph&#xff0c;DAG&#xff09;&#xff0c;该构造通过以最高效的方式处理交易来加速网络交易&#xff0c;而不是按照先来先服务的线性进展。 区块链是设计用于确保数据完整…

【简单讲解下Lisp的学习历程】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

模型融合的方法

集成学习&#xff1a;通过构建并结合多个学习器来完成学习任务&#xff0c;有时也被称为多分类器系统、基于委员会的学习等。&#xff08;集成学习不是只有同质学习器的集成&#xff0c;还有异质学习器的集成&#xff09; 模型融合&#xff1a;通过多个模型共同决策提升任务的…

代码随想录学习Day 25

491.递增子序列 题目链接 讲解链接 本题的是求自增子序列&#xff0c;所以不能对原数组进行排序&#xff0c;排完序的数组都是自增子序列了&#xff0c;所以不能使用之前的去重逻辑&#xff01;如果仍旧使用之前的逻辑&#xff0c;那么当遇到数组为{4&#xff0c;7&#xff…

思迈特软件与上海德拓签署战略合作协议,携手赋能企业数字化转型

3月27日&#xff0c;广州思迈特软件有限公司&#xff08;简称“思迈特软件”&#xff09;与上海德拓信息技术有限公司&#xff08;简称“德拓信息”&#xff09;正式签约建立战略合作伙伴关系。双方将在数字化转型、数据服务、数据应用以及市场资源等多个领域展开深度合作&…

2024年贵州省职业院校技能大赛云计算应用赛项赛题第2套

#需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私聊博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私聊博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件包…

xilinx AXI CAN驱动开发

CAN收发方案有很多&#xff0c;常见的解决方案通过是采用CAN收发芯片&#xff0c;例如最常用的SJA1000,xilinx直接将CAN协议栈用纯逻辑实现&#xff0c;AXI CAN是其中一种&#xff1b; 通过这种方式硬件上只需外接一个PHY芯片即可 上图加了一个电平转换芯片 软件设计方面&…

【Labview】虚拟仪器技术

一、背景知识 1.1 虚拟仪器的定义、组成和应用 虚拟仪器的特点 虚拟仪器的突出特征为“硬件功能软件化”&#xff0c;虚拟仪器是在计算机上显示仪器面板&#xff0c;将硬件电路完成信号调理和处理功能由计算机程序完成。 虚拟仪器的组成 硬件软件 硬件是基础&#xff0c;负责将…

提取COCO数据集中特定的类—vehicle 4类

提取COCO数据集中特定的类—vehicle 4类 1 安装pycocotools2 下载COCO数据集3 提取特定的类别4 多类标签合并 1 安装pycocotools pycocotools github地址 pip install githttps://github.com/philferriere/cocoapi.git#subdirectoryPythonAPI2 下载COCO数据集 COCO官网下载2…

Java中的Stream流常用接口和方法

​TOC 第一章&#xff1a;Stream流是什么 1.1&#xff09;简单介绍 学习Stream流就绕不开Lambda表达式&#xff0c; 需要了解Lambda表达式可以看一下这篇–>&#xff1a;Lambda表达式学习 1.其实“流”是个抽象概念&#xff0c;我们把现实世界中与Stream流有相同特性的…