当前位置: 首页 > news >正文

CSS层叠样式表学习(2)

(大家好,今天我们将继续来学习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.lryc.cn/news/330553.html

相关文章:

  • 【MySQL】DML的表操作详解:添加数据&修改数据&删除数据(可cv例题语句)
  • Docker命令及部署Java项目
  • 深度学习入门:从理论到实践的全面指南
  • 后端前行Vue之路(二):模版语法之插值与指令
  • Kotlin 中的类和构造方法
  • 【2024最新】vue3的基本使用(超详细)
  • 【xinference】(8):在autodl上,使用xinference部署qwen1.5大模型,速度特别快,同时还支持函数调用,测试成功!
  • YARN集群 和 MapReduce 原理及应用
  • C++算法——滑动窗口
  • Rust---有关介绍
  • vue项目双击from表单限制重复提交 添加全局注册自定义函数
  • WebPack的使用及属性配、打包资源
  • 机器学习实战17-高斯朴素贝叶斯(GaussianNB)模型的实际应用,结合生活中的生动例子帮助大家理解
  • 数据处理库Pandas数据结构DataFrame
  • 中国发展新能源的核心驱动力是什么?其原理是如何运作的?
  • skywalking
  • 江苏开放大学2024年春《大学英语(D) 060108》第二次过程性考核作业参考答案
  • dockerfile制作-pytoch+深度学习环境版
  • YOLOv8结合SCI低光照图像增强算法!让夜晚目标无处遁形!【含端到端推理脚本】
  • 视频监控/云存储/AI智能分析平台EasyCVR集成时调用接口报跨域错误的原因
  • VuePress基于 Vite 和 Vue 构建优秀框架
  • 冒泡排序,选择排序,插入排序,希尔排序,基数排序,堆排序代码分析(归并排序和快速排序后续更新)
  • 从入门到精通:NTP卫星时钟服务器技术指南
  • OpenResty基于来源IP和QPS来限流
  • 面对AI技术创业的挑战以及提供给潜在创业者的一些建议
  • `require`与`import`的区别
  • 中介者模式:优雅解耦的利器
  • Ubuntu20.04安装MatlabR2018a
  • 基于SpringBoot的图书馆管理系统设计与实现
  • 网易云首页单页面html+css