CSS层叠样式表学习(2)

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

目录

二、CSS基础选择器

[2.1 CSS选择器的作用](#2.1 CSS选择器的作用)

[2.2 选择器分类](#2.2 选择器分类)

[2.3 标签选择器](#2.3 标签选择器)

[2.4 类选择器](#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)

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

相关推荐
Mapmost3 分钟前
【高斯泼溅】如何将“歪头”的3DGS模型精准“钉”在地图上,杜绝后续误差?
前端
@游子3 分钟前
Python类属性与魔术方法全解析
开发语言·python
yuhaiqun198924 分钟前
Typora 技能进阶:从会写 Markdown 到玩转配置 + 插件高效学习笔记
经验分享·笔记·python·学习·学习方法·ai编程·markdown
废春啊35 分钟前
前端工程化
运维·服务器·前端
爱上妖精的尾巴36 分钟前
6-9 WPS JS宏Map、 set、get、delete、clear()映射的添加、修改、删除
前端·wps·js宏·jsa
眠りたいです44 分钟前
现代C++:C++11并发支持库
开发语言·c++·多线程·c++11·c++并发支持库
小灰灰搞电子1 小时前
Rust可以取代C++么?
开发语言·c++·rust
爱分享的鱼鱼1 小时前
对比理解 Vue 响应式 API:data(), ref、reactive、computed 与 watch 详解
前端·vue.js
JS_GGbond1 小时前
【性能优化】给Vue应用“瘦身”:让你的网页快如闪电的烹饪秘籍
前端·vue.js
cat三三1 小时前
java之异常
java·开发语言