当前位置: 首页 > 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)

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

        

相关文章:

CSS层叠样式表学习(2)

&#xff08;大家好&#xff0c;今天我们将继续来学习CSS&#xff08;2&#xff09;的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 二、CSS基础选择器 2.1 CSS选择器的作用 2.2 选择器分类 2.3 标签选择器 2.…...

【MySQL】DML的表操作详解:添加数据&修改数据&删除数据(可cv例题语句)

前言 大家好吖&#xff0c;欢迎来到 YY 滴MySQL系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C Linux的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…...

Docker命令及部署Java项目

文章目录 简介Docker镜像镜像列表查找镜像拉取镜像删除镜像镜像标签 Docker容器容器启动容器查看容器停止和重启后台模式和进入强制停止容器清理停止的容器容器错误日志容器别名及操作 Docker部署Java项目 简介 Docker是一种容器化技术&#xff0c;可以帮助开发者轻松打包应用…...

深度学习入门:从理论到实践的全面指南

深度学习入门&#xff1a;从理论到实践的全面指南 引言第一部分&#xff1a;深度学习基础第二部分&#xff1a;数学基础第三部分&#xff1a;编程和工具第四部分&#xff1a;构建你的第一个模型第五部分&#xff1a;深入学习结语 引言 大家好&#xff0c;这里是程序猿代码之路。…...

后端前行Vue之路(二):模版语法之插值与指令

1.概述 Vue.js的模板语法是一种将Vue实例的数据绑定到HTML文档的方法。Vue的模板语法是一种基于HTML的扩展&#xff0c;允许开发者将Vue实例中的数据绑定到HTML元素&#xff0c;以及在HTML中使用一些简单的逻辑和指令。Vue.js 基于 HTML 的模板语法允许开发者声明式地将 DOM 绑…...

Kotlin 中的类和构造方法

Kotlin 中的类与接口和 Java 中的类与接口还是有区别的。例如&#xff0c;Koltin 中的接口可以包含属性声明&#xff0c;与 Java 不同的是。Kotlin 的声明默认是 final 和 public 的。此外&#xff0c;嵌套的类默认并不是内部类&#xff1a;它们并没有包含对其它外部类的隐式引…...

【2024最新】vue3的基本使用(超详细)

一、Vue 3 概述 1. 为什么要学习Vue 3 Vue 3是Vue.js的最新主要版本&#xff0c;它带来了许多改进和新特性&#xff0c;包括但不限于&#xff1a; 性能提升&#xff1a;Vue 3提供了更快的渲染速度和更低的内存使用率。Composition API&#xff1a;引入了一个新的API&#xf…...

【xinference】(8):在autodl上,使用xinference部署qwen1.5大模型,速度特别快,同时还支持函数调用,测试成功!

1&#xff0c;关于xinference Xorbits Inference (Xinference) 是一个开源平台&#xff0c;用于简化各种 AI 模型的运行和集成。借助 Xinference&#xff0c;您可以使用任何开源 LLM、嵌入模型和多模态模型在云端或本地环境中运行推理&#xff0c;并创建强大的 AI 应用。 Xor…...

YARN集群 和 MapReduce 原理及应用

YARN集群模式 本文内容需要基于 Hadoop 集群搭建完成的基础上来实现 如果没有搭建&#xff0c;请先按上一篇: <Linux 系统 CentOS7 上搭建 Hadoop HDFS集群详细步骤> 搭建&#xff1a;https://mp.weixin.qq.com/s/zPYsUexHKsdFax2XeyRdnA 配置hadoop安装目录下的 etc…...

C++算法——滑动窗口

一、长度最小的子数组 1.链接 209. 长度最小的子数组 - 力扣&#xff08;LeetCode&#xff09; 2.描述 3.思路 本题从暴力求解的方式去切入&#xff0c;逐步优化成“滑动窗口”&#xff0c;首先&#xff0c;暴力枚举出各种组合的话&#xff0c;我们先让一个指针指向第一个&…...

Rust---有关介绍

目录 Rust---有关介绍变量的操作Rust 数值库&#xff1a;num某些基础数据类型序列(Range)字符类型单元类型 发散函数表达式&#xff08;&#xff01; 语句&#xff09; Rust—有关介绍 得益于各种零开销抽象、深入到底层的优化潜力、优质的标准库和第三方库实现&#xff0c;Ru…...

vue项目双击from表单限制重复提交 添加全局注册自定义函数

第一步: 找到utils文件夹添加directive.js文件 import Vue from vue //全局防抖函数 // 在vue上挂载一个指量 preventReClick const preventReClick Vue.directive(preventReClick, {inserted: function (el, binding) {console.log(el.disabled)el.addEventListener(click,…...

WebPack的使用及属性配、打包资源

WebPack(静态模块打包工具)(webpack默认只识别js和json内容) WebPack的作用 把静态模块内容压缩、整合、转译等&#xff08;前端工程化&#xff09; 1️⃣把less/sass转成css代码 2️⃣把ES6降级成ES5 3️⃣支持多种模块文件类型&#xff0c;多种模块标准语法 export、export…...

机器学习实战17-高斯朴素贝叶斯(GaussianNB)模型的实际应用,结合生活中的生动例子帮助大家理解

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下机器学习实战17-高斯朴素贝叶斯(GaussianNB)模型的实际应用&#xff0c;结合生活中的生动例子帮助大家理解。GaussianNB&#xff0c;即高斯朴素贝叶斯模型&#xff0c;是一种基于概率论的分类算法&#xff0c;广泛应…...

数据处理库Pandas数据结构DataFrame

Dataframe是一种二维数据结构&#xff0c;数据以表格形式&#xff08;与Excel类似&#xff09;存储&#xff0c;有对应的行和列&#xff0c;如图3-3所示。它的每列可以是不同的值类型&#xff08;不像 ndarray 只能有一个 dtype&#xff09;。基本上可以把 DataFrame 看成是共享…...

中国发展新能源的核心驱动力是什么?其原理是如何运作的?

中国发展新能源的核心驱动力是推进能源消费方式变革、构建多元清洁能源供应体系、实施创新驱动发展战略、深化能源体制改革和持续推进国际合作。 新能源的发展背后有多重经济、政策及环境因素的推动&#xff1a; 经济发展需求&#xff1a;随着中国经济的快速发展&#xff0c;…...

skywalking

部署&#xff1a; docker部署方式 docker-compose.yaml version: 3 services:elasticsearch:build:context: elasticsearchrestart: alwaysnetworks:- skywalking_netcontainer_name: elasticsearchimage: elasticsearch:7.17.6environment:- "discovery.typesingle-no…...

江苏开放大学2024年春《大学英语(D) 060108》第二次过程性考核作业参考答案

答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 单选题 1从选项中选出翻译最为准确的一项。 We cannot help …...

dockerfile制作-pytoch+深度学习环境版

你好你好&#xff01; 以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 文档内容docker相关术语docker常用命令容器常用命令根据dockerfile创建容器dokerfile文件内容 docker问题&#xff1a;可能的原因和解决方法示例修改修改后的D…...

YOLOv8结合SCI低光照图像增强算法!让夜晚目标无处遁形!【含端到端推理脚本】

这里的"SCI"代表的并不是论文等级,而是论文采用的方法 — “自校准光照学习” ~ 左侧为SCI模型增强后图片的检测效果,右侧为原始v8n检测效果 这篇文章的主要内容是通过使用SCI模型和YOLOv8进行算法联调,最终实现了如上所示的效果:在增强图像可见度的同时,对图像…...

视频监控/云存储/AI智能分析平台EasyCVR集成时调用接口报跨域错误的原因

EasyCVR视频融合平台基于云边端架构&#xff0c;可支持海量视频汇聚管理&#xff0c;能提供视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、智能分析等视频服务。平台兼容性强&#xff0c;支持多协议、多类型设备接入&#xff0c;包括&#xff1a;国标G…...

VuePress基于 Vite 和 Vue 构建优秀框架

VitePress 是一个静态站点生成器 (SSG)&#xff0c;专为构建快速、以内容为中心的站点而设计。简而言之&#xff0c;VitePress 获取用 Markdown 编写的内容&#xff0c;对其应用主题&#xff0c;并生成可以轻松部署到任何地方的静态 HTML 页面。 VitePress 附带一个用于技术文档…...

冒泡排序,选择排序,插入排序,希尔排序,基数排序,堆排序代码分析(归并排序和快速排序后续更新)

所有的算法都是这样&#xff0c;算法思想最重要&#xff0c;其次是实现过程&#xff0c;最后才是实现的代码 上战伐谋&#xff0c;我们只要明确了其算法思想和实现过程&#xff0c;所有算法都是纸老虎&#xff0c;所有算法题都是纸老虎 笔者才疏学浅&#xff0c;也算是刚刚接…...

从入门到精通:NTP卫星时钟服务器技术指南

从入门到精通&#xff1a;NTP卫星时钟服务器技术指南 从入门到精通&#xff1a;NTP卫星时钟服务器技术指南 一、 产品功能 卫星时钟服务器是一款采用GPS或北斗卫星提供高精度网络时间服务的产品。卫星天线安装简便&#xff08;根据天线所放位置提示实时卫星颗数&#xff09;&a…...

OpenResty基于来源IP和QPS来限流

Nginx 经典限流法 ngx_http_limit_req_module 和 ngx_http_limit_conn_module&#xff0c;可以在代理层面对服务进行限流和熔断。 http {# 请求限流定义1:# - $binary_remote_addr&#xff1a;限制对象(客户端)# - zone&#xff1a;定义限制(策略)名称# - 10m&#xff1a;用十…...

面对AI技术创业的挑战以及提供给潜在创业者的一些建议

面对AI创业的挑战 AI技术创业虽然机遇众多&#xff0c;但也面临不少挑战&#xff0c;理解这些挑战并寻找应对策略是创业成功的关键。 技术挑战 AI技术的快速发展意味着创业者需要持续学习和更新知识库&#xff0c;以保持技术竞争力。同时&#xff0c;AI项目往往需要处理大量数…...

`require`与`import`的区别

require与import的区别主要体现在以下几个方面&#xff1a; 1.加载时间不同。require是在运行时加载模块&#xff0c;这意味着模块的加载和执行可以在代码的任何地方进行&#xff0c;也可以在运行时根据条件动态地加载不同的模块&#xff1b;import是在编译时加载模块&#xf…...

中介者模式:优雅解耦的利器

在软件设计中&#xff0c;随着系统功能的不断扩展&#xff0c;对象之间的依赖关系往往会变得错综复杂&#xff0c;导致系统难以维护和扩展。为了降低对象之间的耦合度&#xff0c;提高系统的可维护性和可扩展性&#xff0c;设计模式应运而生。中介者模式&#xff08;Mediator P…...

Ubuntu20.04安装MatlabR2018a

一、安装包 安装包下载链接 提取码&#xff1a;kve2 网上相关教程很多&#xff0c;此处仅作为安装软件记录&#xff0c;方便后续软件重装&#xff0c;大家按需取用。 二、安装 1. 相关文件一览 下载并解压文件后&#xff0c;如下图所示&#xff1a; 2. 挂载镜像并安装 2…...

基于SpringBoot的图书馆管理系统设计与实现

介绍 基于&#xff1a;java8 SpringBoot thymeleaf MySQL8.0.17 mybatis-plus maven Xadmin 实现图书馆管理系统 系统要实现如下的基本管理功能&#xff1a; &#xff08;1&#xff09;用户分为两类&#xff1a;管理员&#xff0c;一般用户。 &#xff08;2&#xff09…...

wordpress的搭建环境/百度广告运营

常规的这两个校验工具的用法,可以阅读之前的博文,链接如下: @Valid 和@Validated的区别 那么如果大家看完了基础用法,就可以继续深入学习了,本篇博文主要对这个两个注解的用法进行自定义,实现扩展 废话不多说,上正菜…… 案例一 /*** 大版本信息表** @author fangh*…...

乡镇政府可以做网站认/刷排名seo

一、条件断点循环中经常用到这个技巧&#xff0c;比如&#xff1a;遍历1个大List的过程中&#xff0c;想让断点停在某个特定值。参考上图&#xff0c;在断点的位置&#xff0c;右击断点旁边的小红点&#xff0c;会出来一个界面&#xff0c;在Condition这里填入断点条件即可&…...

wordpress 模板 政府/百度推广咨询

SpringBoot 之简单工厂模式 简单工厂&#xff1a; 工厂类根据传入的参数类型&#xff0c;动态决定创建哪一个产品了&#xff08;实现类都继承同一个父类或接口&#xff09;。在Spring中&#xff0c;我们只要将要用到的支付方式注入到容器中&#xff0c;我们便可以根据bean到名…...

网站设计的文案/怎样建立一个网站

计算高考状元问题和日程安排问题——祝福今年的高考生 前言 今天我还在为返校后进行的上学期的期末考试复习着&#xff0c;也不能叫复习&#xff0c;其实就是刚复习完物理&#xff0c;还不想复习高数&#xff0c;闲着又没意思&#xff0c;所以从PTA上找了一套题来做一做。这个…...

事业单位网站建设工作方案/艾滋病多久能检查出来

邮箱登录方式有两种&#xff0c;一种是官方提供的统一登录网址&#xff0c;另外一种就是foxmail、outlook这样的客户端了。 在网页端登录邮箱可通过群发单显、抄送多人来群发邮件&#xff0c;用TOM VIP有5个套餐选择&#xff0c;最高可发500封。如果在邮箱客户端登录邮箱&…...

用什么软件做动漫视频网站/宁波网络营销推广公司

一、for语句 (1)、语句结构 for 定义变量 do 使用变量执行动作 done 结束标志(2)、示例 格式1 seq&#xff08;启始值&#xff0c;间隔值&#xff0c;最终值&#xff09; for WESTOS in $(seq 1 2 10) do echo $WESTOS done格…...