CSS层叠样式表学习(2)

news/2024/12/22 9:31:04/

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

目录

二、CSS基础选择器

2.1  CSS选择器的作用

2.2  选择器分类

2.3  标签选择器

2.4  类选择器


二、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)

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

        


http://www.ppmy.cn/news/1404963.html

相关文章

动态规划(Dynamic Programming)详解

动态规划&#xff08;Dynamic Programming&#xff0c;简称DP&#xff09;就像是个聪明的厨师&#xff0c;他懂得怎样把一道复杂的菜肴分成一小块一小块来做&#xff0c;而且他知道怎么利用之前做好的部分&#xff0c;避免重复劳动&#xff0c;最后拼凑成美味佳肴。 比如&…

Debian 配置国内软件源

为什么需要&#xff1f; Debian安装好之后默认是没有软件源的&#xff0c;只能通过本身的光盘上的软件进行安装&#xff0c;这样明显是不能够满足我们的需要的&#xff0c;考虑到国内的上网速度以及环境&#xff0c;配置一个国内的阿里镜像源是最好的选择。 使用 sudo vim /…

更高效、更简洁的 SQL 语句编写丨DolphinDB 基于宏变量的元编程模式详解

元编程&#xff08;Metaprogramming&#xff09;指在程序运行时操作或者创建程序的一种编程技术&#xff0c;简而言之就是使用代码编写代码。通过元编程将原本静态的代码通过动态的脚本生成&#xff0c;使程序员可以创建更加灵活的代码以提升编程效率。 在 DolphinDB 中&#…

Python中主要数据结构的使用

文章目录 数组队列 queue双端队列 deque栈 stack优先队列 priority_queue集合 set映射/字典 map 数组 使用内置类型list实现&#xff0c;主要有如下操作&#xff1a; array [] array.append(1) length len(array) if not array:# 列表为空print("array is empty"…

QT使用数据库和proC数据库

一&#xff0c;QT使用数据库 数据库就是保存数据的文件。可以存储大量数据&#xff0c;包括插入数据、更新数据、截取数据等。用专业术语来说&#xff0c;数据库是“按照数据结构来组织、存储和管理数据的仓库”。 什么时候需要数据库&#xff1f;在嵌入式里&#xff0…

Zookeeper脑裂解决方案

Zookeeper脑裂原因&#xff1a; 主要原因是Zookeeper集群和Zookeeper client判断超时并不能做到完全同步&#xff0c;也就是说可能一前一后&#xff0c;如果是集群先于client发现&#xff0c;那就会出现上面的情况。同时&#xff0c;在发现并切换后通知各个客户端也有先后快慢…

【C++】哈希之位图

目录 一、位图概念二、海量数据面试题 一、位图概念 假如有40亿个无重复且没有排序的无符号整数&#xff0c;给一个无符号整数&#xff0c;如何判断这个整数是否在这40亿个数中&#xff1f; 我们用以前的思路有这些&#xff1a; 把这40亿个数遍历一遍&#xff0c;直到找到为…

隐私计算实训营第七讲-隐语SCQL的架构详细拆解

隐私计算实训营第七讲-隐语SCQL的架构详细拆解 文章目录 隐私计算实训营第七讲-隐语SCQL的架构详细拆解1.SCQL Overview1.1 多方数据分析场景1.2 多方数据分析技术路线1.2.1 TEE SQL方案1.2.2 MPC SQL方案 1.3 Secure Collaborative Query Language(SCQL)1.3.1 SCQL 系统组件1.…