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

第2章:CSS基本语法 --[CSS零基础入门]

CSS(层叠样式表,Cascading Style Sheets)是用来描述HTML或XML(包括各种XML:SVG, MathML 或 XHTML)等文档的外观和格式的语言。以下是CSS的基本语法:

1.选择器

1.元素选择器

元素选择器是基于HTML标签名称来选择元素的。当你使用元素选择器时,你是在告诉浏览器对页面中所有该类型的HTML元素应用特定的样式。以下是两个使用元素选择器的CSS示例:

示例 1: 修改所有段落的字体颜色和大小

假设你想改变网页上所有段落(<p> 标签)的文本颜色为蓝色,并且设置字体大小为16像素,你可以这样写:

p {color: blue;font-size: 16px;
}

在这里插入图片描述

这段CSS代码将应用于HTML文档中的每一个<p>元素,使得它们的文本颜色变为蓝色,字体大小变为16px。

示例 2: 设置所有链接的样式

如果你想更改所有超链接(<a> 标签)的默认样式,比如去掉下划线并且当鼠标悬停在链接上时改变背景颜色,你可以这样做:

a {text-decoration: none; /* 去掉下划线 */
}a:hover {background-color: yellow; /* 当鼠标悬停时背景变黄 */
}

在这个例子中,第一个规则去掉了所有链接的下划线,第二个规则设置了当用户将鼠标悬停在链接上时,链接的背景颜色会变成黄色。请注意,:hover 是一个伪类,它允许你定义当特定事件发生时元素的样式,在这个情况下,是指当用户的鼠标指针悬停在链接上方时。

这两个示例展示了如何使用元素选择器来快速地为同类型的所有HTML元素应用统一的样式。

2.类选择器

类选择器是通过在HTML元素中定义的class属性来选择元素,并为其应用特定样式的。使用类选择器可以让你更加灵活地控制页面上的样式,因为同一个类可以在多个元素上使用,而且不会像ID选择器那样限制为文档中的唯一实例。以下是两个使用类选择器的CSS示例:

示例 1: 使用类选择器设置文本对齐方式

假设你有一个网页,其中某些段落需要居中文本,而其他的则不需要。你可以创建一个名为.center-text的类,然后将这个类应用到需要居中显示的段落上。

<p class="center-text">这段文字将会居中。</p>
<p>这段文字保持默认对齐。</p>

对应的CSS代码如下:

.center-text {text-align: center;
}

这样,所有带有.center-text类的段落都会以居中的方式显示其文本内容。

在这里插入图片描述

示例 2: 使用类选择器更改按钮样式

如果你想为网页上的按钮添加自定义样式,比如改变背景颜色、字体颜色和边框圆角等,你可以定义一个类(例如.custom-button),并将其应用于各个按钮元素。

<button class="custom-button">点击我</button>
<button>普通的按钮</button>

对应的CSS代码如下:

.custom-button {background-color: #4CAF50; /* 绿色背景 */color: white;              /* 白色文字 */padding: 10px 20px;        /* 内边距 */border: none;              /* 无边框 */border-radius: 8px;        

相关文章:

第2章:CSS基本语法 --[CSS零基础入门]

CSS(层叠样式表,Cascading Style Sheets)是用来描述HTML或XML(包括各种XML:SVG, MathML 或 XHTML)等文档的外观和格式的语言。以下是CSS的基本语法: 1.选择器 1.元素选择器 元素选择器是基于HTML标签名称来选择元素的。当你使用元素选择器时,你是在告诉浏览器对页面…...

win11 恢复任务栏copilot图标, 亲测有效

1、修改C:\Windows\System32\IntegratedServicesRegionPolicySet.json&#xff0c;解除中国不能使用copilot的限制。 使用Notepad搜索copilot全文搜索&#xff0c;将下面两处的“CN,”删除&#xff0c;删除后如下&#xff1a; {"$comment": "Show Copilot on t…...

Python爬虫实战:抓取拼多多商品详情数据(基于pdd.item_get接口)

在当前的电商市场中&#xff0c;拼多多以其独特的拼团模式和优惠价格吸引了大量用户&#xff0c;成为继淘宝、京东之后的又一大电商平台。对于数据分析和市场研究者来说&#xff0c;获取拼多多的商品详情数据显得尤为重要。本文将介绍如何使用Python爬虫技术&#xff0c;通过调…...

如何在x86模拟器和鸿蒙API9如何使用MQTT模块ohos_mqtt

目录 引言 安装失败的原因 如何编译so文件的x86_64版本 下载源代码 安装NDK 代码编译 安装MQTT软件包 避免MQTT软件包自动升级 设置libs 客户端程序的编写 运行测试 结语 参考文献 引言 在上周的博客&#xff08;如何在鸿蒙API9和x86模拟器中使用MQTT-CSDN博客&am…...

VB.NET 从入门到精通:开启编程进阶之路

摘要&#xff1a; 本文全面深入地阐述了 VB.NET 的学习路径&#xff0c;从基础的环境搭建与语法入门开始&#xff0c;逐步深入到面向对象编程、图形用户界面设计、数据访问、异常处理、多线程编程以及与其他技术的集成等核心领域&#xff0c;通过详细的代码示例与理论讲解&…...

芝法酱学习笔记(1.3)——SpringBoot+mybatis plus+atomikos实现多数据源事务

一、前言 1.1 业务需求 之前我们在讲解注册和登录的时候&#xff0c;有一个重要的技术点忽略了过去。那就是多数据源的事务问题。 按照我们的业务需求&#xff0c;monitor服务可能涉及同时对监控中心数据库和企业中心数据库进行操作&#xff0c;而我们希望这样的操作在一个事…...

图像处理插件:让小程序焕发视觉新生的秘密武器

在小程序开发中&#xff0c;图像处理是一个重要的环节&#xff0c;它涉及到图片的加载、显示、裁剪、压缩等多个方面。为了简化这一复杂过程&#xff0c;开发者通常会使用图像处理插件。这些插件不仅提供了丰富的图像处理功能&#xff0c;还封装了底层的图像操作逻辑&#xff0…...

力扣刷题TOP101: 27.BM34 判断是不是二叉搜索树

目录&#xff1a; 目的 思路 复杂度 记忆秘诀 python代码 目的&#xff1a; 给定一个二叉树根节点&#xff0c;请判断这棵树是不是二叉搜索树。 二叉搜索树满足每个节点的左子树上的所有节点均小于当前节点且右子树上的所有节点均大于当前节点。 思路 什么是二叉搜索树&am…...

Linux图形化工具推荐

1、MobaXterm MobaXterm Xserver with SSH, telnet, RDP, VNC and X11 - DownloadFree X server for Windows with tabbed SSH terminal, telnet, RDP, VNC and X11-forwarding - Downloadhttps://mobaxterm.mobatek.net/download.html 2、FinalShell FinalShell SSH工具,服…...

蓝队基础:企业网络安全架构与防御策略

声明 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;此文章为对视频内容稍加整理发布&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他…...

数据结构:栈

什么是栈&#xff1a; 栈是一种特殊的线性表&#xff0c;仅能在线性表的一端操作&#xff0c;栈顶允许操作&#xff0c;栈底不允许操作。 栈的特点是&#xff1a;先进后出&#xff0c;或者说是后进先出&#xff0c;从栈顶放入元素的操作叫入栈&#xff0c;取出元素叫出栈。 栈…...

tcp_recvmsg 函数

tcp_recvmsg 函数是 Linux 内核 TCP 栈的一部分,它主要用于处理从 TCP socket 接收数据的过程。这个函数的主要任务是从 TCP 接收队列中提取数据,并将这些数据拷贝到用户空间提供的缓冲区中。 以下是 tcp_recvmsg 函数的一般工作流程和功能解释: 函数签名和参数 int tcp_re…...

《数据结构》(应用题)

历年真题&#xff08;09~24&#xff09; 2009 最短路径&#xff08;Dijkstra青春版&#xff09; 【2009统考真题】带权图&#xff08;权值非负&#xff0c;表示边连接的两顶点间的距离&#xff09;的最短路径问题是找出从初始顶点到目标顶点之间的一条最短路径。假设从初始顶点…...

阿里内部正式开源“Spring Cloud Alibaba (全彩小册)”

年轻的毕业生们满怀希望与忐忑&#xff0c;去寻找、竞争一个工作机会。已经在职的开发同学&#xff0c;也想通过社会招聘或者内推的时机争取到更好的待遇、更大的平台。 然而&#xff0c;面试人群众多&#xff0c;技术市场却相对冷淡&#xff0c;面试的同学们不得不面临着 1 个…...

LeetCode题练习与总结:根据字符出现频率排序--451

一、题目描述 给定一个字符串 s &#xff0c;根据字符出现的 频率 对其进行 降序排序 。一个字符出现的 频率 是它出现在字符串中的次数。 返回 已排序的字符串 。如果有多个答案&#xff0c;返回其中任何一个。 示例 1: 输入: s "tree" 输出: "eert" …...

Excel VBA学习系列汇总20241205

整理几年工作中&#xff0c;实用VBA代码&#xff0c;绝对干货&#xff01; 方便自己查询&#xff0c;方便大家学习&#xff0c; 有缘人可复制使用&#xff0c;记得分享给大家免费学习哦&#xff01; 序历史文章1新学期开始&#xff0c;如何新学期开始&#xff0c;如何按成绩名次…...

给el-table表头添加icon图标,以及鼠标移入icon时显示el-tooltip提示内容

在你的代码中&#xff0c;你已经正确地使用了 el-tooltip 组件来实现鼠标划过加号时显示提示信息。el-tooltip 组件的 content 属性设置了提示信息的内容&#xff0c;placement 属性设置了提示信息的位置。 你需要确保 el-tooltip 组件的 content 属性和 placement 属性设置正…...

基于LLM智能问答系统【阿里云:天池比赛】

流程&#xff1a; 1、分别识别问题及提供的资料文件中的公司名实体&#xff0c;有公司名的走语义检索&#xff0c;无公司名的走结构化召回 2、结构化召回&#xff1a;Qwen根据问题生成sql&#xff0c;执行sql获取结果数值&#xff0c;把结果数值与问题给到Qwen生成最终结果 …...

k8s-Informer概要解析(2)

Client-go 主要用在 k8s 控制器中 什么是 k8s Informer Informer 负责与 kubernetes APIServer 进行 Watch 操作&#xff0c;Watch 的资源&#xff0c;可以是 kubernetes 内置资源对象&#xff0c;也可以 CRD。 Informer 是一个带有本地缓存以及索引机制的核心工具包&#x…...

Leetcode 3376. Minimum Time to Break Locks I

Leetcode 3376. Minimum Time to Break Locks I 1. 解题思路2. 代码实现 题目链接&#xff1a;3376. Minimum Time to Break Locks I 1. 解题思路 这一题我最开始的思路走的是贪婪算法的路子&#xff0c;优先走X的增长&#xff0c;不过很不幸失败了&#xff0c;后面还是暴力…...

介绍8款开源网络安全产品

01 HFish蜜罐 HFish是一款开源的蜜罐系统&#xff0c;用于模拟各种网络服务和应用&#xff0c;以吸引潜在的黑客攻击。它能够记录攻击尝试并收集攻击者的信息&#xff0c;从而帮助网络管理员识别潜在的威胁。HFish支持多种协议和服务&#xff0c;包括HTTP、FTP、SSH等&#…...

vue2面试题|[2024-12-5]

开题答辩终于结束了&#xff0c;又要开始我的前端面试学习啦&#xff01;&#xff01;&#xff01; 1.v-model双向绑定原理 class Vue{constructor(options){this.$options optionsthis.$watchEvent {}if(typeof options.beforeCreate function){options.beforeCreate.bind…...

共筑数字安全防线,2024开源和软件安全沙龙即将启幕

随着数字化转型进程的加快以及开源代码的广泛应用&#xff0c;开源凭借平等、开放、协作、共享的优秀创作模式&#xff0c;逐渐成为推动数字技术创新、加速传统行业转型升级的重要模式。但随着软件供应链日趋复杂多元&#xff0c;使得其安全风险不断加剧&#xff0c;针对软件供…...

目标跟踪领域经典论文解析

亲爱的小伙伴们&#x1f618;&#xff0c;在求知的漫漫旅途中&#xff0c;若你对深度学习的奥秘、JAVA 、PYTHON与SAP 的奇妙世界&#xff0c;亦或是读研论文的撰写攻略有所探寻&#x1f9d0;&#xff0c;那不妨给我一个小小的关注吧&#x1f970;。我会精心筹备&#xff0c;在…...

SQL DQL数据查询语言(后续)

SQL DQL数据查询语言&#xff08;后续&#xff09; 1.子查询 在查询语句中的WHERE条件子句中&#xff0c;又嵌套了另外一个查询语句在返回列中嵌套一个查询 where条件中嵌套 要求&#xff1a;查询课程为《高等数学-2》且分数不小于80分的学生的学号和姓名select a.StudentNo,a…...

Gitee配置SSH公钥

采用SSH协议同步Git仓库代码的好处就是高效。在配置好SSH公钥后&#xff0c;不需要每次操作都要输入用户名和密码&#xff08;主要针对命令行来说&#xff09;。 以我个人项目为例。 生成 SSH 公钥 1. 通过命令 ssh-keygen 生成 SSH Key&#xff1a; ssh-keygen -t ed25519…...

机器学习——感知机模型

文章目录 前言1.感知机模型介绍1.1基本概念1.2数学表达1.3几何解释1.4优缺点 2.二分类应用2.1应用介绍2.2准备数据集2.2.1环境检查2.2.2数据集介绍2.2.3获取数据2.2.4划分数据集 2.3可视化训练集2.4训练过程2.4.1首轮梯度下降2.4.2多轮梯度下降 2.5可视化分类结果2.6在验证集验…...

如何选择安全、可验证的技术?

澳大利亚信号局的澳大利亚网络安全中心 (ASD 的 ACSC) 发布了一份指导文件&#xff0c;题为《选择安全和可验证的技术》&#xff0c;旨在帮助组织在采购软件&#xff08;专有或开源&#xff09;、硬件&#xff08;例如物联网设备&#xff09;和云服务&#xff08;SaaS、MSP 服务…...

STL库中list的使用与迭代器的实现

STL库中list的使用与迭代器的实现 1.使用list中的部分函数assignspliceremoveuniquemeger 2.list的部分功能实现&#xff08;重点&#xff09;框架迭代器的实现 1.使用list中的部分函数 assign 功能一&#xff1a;当前链表的节点全部销毁&#xff0c;替换成迭代区间的值 功能二…...

android 常用三方框架

说实话&#xff0c; 我是比较讨厌三方框架的&#xff0c; 比如一个eventbus 底层逻辑就是个观察者模式&#xff0c;当然他的场景涵盖的比较丰富&#xff0c; 单从 单一原则来说&#xff0c; 还是一个简单的观察者模式就能解决问题&#xff0c; 何必要添加那么多文件到我们的项目…...

Browser.js断点续传上传

通过断点续传上传的方式将文件上传到OSS前&#xff0c;您可以指定断点记录点。上传过程中&#xff0c;如果出现网络异常或程序崩溃导致文件上传失败时&#xff0c;将从断点记录处继续上传未上传完成的部分。 attention&#xff1a; 1、 当您使用webpack或browserify等打包工具…...

Java项目实战II基于微信小程序的无中介租房系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 随着城市化进程的加速&#xff0c;租房市场日益繁荣&a…...

了解Cocoa Touch框架与主要组件

Cocoa Touch框架详解及其主要组件 一、Cocoa Touch框架概述 Cocoa Touch框架是苹果公司为iOS应用程序开发提供的一套完整的框架&#xff0c;它基于Cocoa框架&#xff0c;并专为触控设备如iPhone、iPad等设计。这套框架不仅包含了构建图形用户界面&#xff08;GUI&#xff09;…...

ISO45001职业健康安全管理体系涵盖了丰富的内容

范围与术语 适用范围&#xff1a;明确规定了该标准适用于任何有愿望建立、实施和保持职业健康安全管理体系的组织&#xff0c;旨在使组织能够通过管理体系的有效运行&#xff0c;预防和控制职业健康安全风险&#xff0c;持续改进职业健康安全绩效。术语定义&#xff1a;对职业…...

Spring Boot 整合 Druid 并开启监控

文章目录 1. 引言2. 添加依赖3. 配置数据源4. 开启监控功能5. 自定义 Druid 配置&#xff08;可选&#xff09;6. 访问监控页面7. 注意事项8. 总结 Druid 是一个由阿里巴巴开源的高性能数据库连接池&#xff0c;它不仅提供了高效的连接管理功能&#xff0c;还自带了强大的监控和…...

【JAVA高级篇教学】第一篇:Springboot对接通义千问大模型

博主今天打算讲解下Java如何对接阿里云的通义千问大模型&#xff0c;可以自己玩玩ai问答之类的&#xff01; 目录 一、发展历程 二、API-KEY的获取与配置 三、引用SDK 四、文本模型 1.代码 2.返回数据 3.官方代码案例 五、通义千问VL 1.计量计费 六、查看API-KEY调用额…...

【Windows 同时安装 MySQL5 和 MySQL8 - 详细图文教程】

卸载 MySQL 参考文章&#xff1a; 完美解决Mysql彻底删除并重装_怎么找到mysql并卸载-CSDN博客使用命令卸载mysql_卸载mysql服务命令-CSDN博客 先管理员方式打开 cmd &#xff0c;切换到 MySQL 安装目录的 bin 文件夹下&#xff0c;执行如下命令&#xff0c;删除 MySQL 服务 my…...

Next.js 系统性教学:深入理解缓存与数据优化策略

更多有关Next.js教程&#xff0c;请查阅&#xff1a; 【目录】Next.js 独立开发系列教程-CSDN博客 目录 前言 1. 缓存的基本概念 1.1 缓存的作用 1.2 Next.js 中的缓存策略 2. Next.js 的缓存机制 2.1 请求记忆化&#xff08;Request Memoization&#xff09; 2.1.1 什…...

JAVA数据结构

1.数组 (Array): 固定大小的容器,用于存储相同类型的元素,数组在内存中是连续存储的,支持通过索引快 速访问元素。 int[] numbers = new int[10]; numbers[0] = 1;2.Java Collections Framework (JCF) JCF提供了一组接口和类用于管理和操作集合(如列表,集合,…...

力扣第96题 不同的二叉搜索树

力扣第96题 - 不同的二叉搜索树 题目描述 给定一个整数 n&#xff0c;求以 1 到 n 为节点组成的所有 不同的二叉搜索树&#xff08;BST&#xff09; 的个数。 题目分析 二叉搜索树的性质 对于一个二叉搜索树&#xff0c;以 i 为根节点&#xff1a; 左子树的节点值来自 [1, i…...

在Ubuntu上使用IntelliJ IDEA:开启你的Java开发之旅!

你好&#xff0c;年轻的学徒&#xff01;&#x1f9d1;‍&#x1f4bb; 是时候踏上进入Java开发世界的史诗之旅了&#xff0c;我们的得力助手将是强大的IntelliJ IDEA。准备好了吗&#xff1f;出发吧&#xff01; 在我们开始之前&#xff0c;我们需要下载这个工具。但是&#…...

【C语言】18. 自定义类型:结构体类型

文章目录 前言&#xff1a;一、结构体类型的声明1、结构体回顾1&#xff09;结构的声明2&#xff09;结构体变量的创建和初始化 2、结构的特殊声明3、结构的⾃引⽤ 二、结构体变量的创建和初始化1、对⻬规则2、为什么存在内存对⻬?3、修改默认对⻬数 三、结构成员访问操作符1、…...

智能租赁管理系统助力规范化住房租赁市场提升用户体验

内容概要 在当今的住房租赁市场中&#xff0c;智能租赁管理系统应运而生&#xff0c;为房东和租客带来了前所未有的便利。这套系统就像一位全能助手&#xff0c;将租赁信息、监管机制以及在线签约功能集成在一起&#xff0c;让整个过程变得流畅而高效。换句话说&#xff0c;您…...

ERROR: KeeperErrorCode = NoNode for /hbase/master

原因分析 通过上面的情景模拟&#xff0c;我们可以看到报错的原因在于zookeeper中出现问题&#xff0c;可能是zookeeper中的/hbase/master被删除&#xff0c;或者是在hbase集群启动之后重新安装了zookeeper&#xff0c;导致zookeeper中的/hbase/master节点数据异常。 1. 停止…...

springboot第84集:Java进阶之路, Netty

# kafka-map文件夹 cd /usr/local/kafka-map # 根据需求自行修改配置 vi application.yml # 启动 java -jar kafka-map.jar byte minByte -128; byte maxByte 127; 用于表示一个 8 位&#xff08;1 字节&#xff09;有符号整数。它的值范围是 -128&#xff08;-2^7&#xff0…...

DevOps持续集成

DevOps流程 第一步安装git 关闭防火墙 systemctl stop firewalld cd /usr/loacl vim docker-compose.yml docker search gitlab 拉取gitlab镜像 2.33GB docker pull gitlab/gitlab-ce:latestvim docker-compose.yml修改docker-compose.yml version: 3.1 services:gitlab:i…...

sql server log文件

确定 SQL Server 实例中具有大量 VDF 的数据库 SELECT [name], COUNT(l.database_id) AS vlf_count FROM sys.databases AS s CROSS APPLY sys.dm_db_log_info(s.database_id) AS l GROUP BY [name] HAVING COUNT(l.database_id) > 100; 在收缩日志文件之前确定事务日志中…...

pip install报错 Missing dependencies for SOCKS support的正确解决办法:离线安装pysocks

今天准备开发python项目的时候&#xff0c;发现在pip install 的时候报错了&#xff0c;提示&#xff1a;Missing dependencies for SOCKS support&#xff0c;查遍csdn所有的回答都统一是只需要执行&#xff1a; unset all_proxy unset ALL_PROXY 然后再执行 pip install p…...

嵌入式学习(15)-stm32通用GPIO模拟串口发送数据

一、概述 在项目开发中可能会遇到串口不够用的情况这时候可以用通过GPIO来模拟串口的通信方式。 二、协议格式 按照1位起始位8位数据位1位停止位的方式去编写发送端的程序。起始位拉低一个波特率的时间&#xff1b;发送8位数据&#xff1b;拉高一个波特率的时间。 三、代码 …...

AKE 安全模型:CK, CK+, eCK

参考文献&#xff1a; [BCK98] Mihir Bellare, Ran Canetti, Hugo Krawczyk. A Modular Approach to the Design and Analysis of Authentication and Key Exchange Protocols (Extended Abstract). STOC 1998: 419-428.[CK01] Ran Canetti, Hugo Krawczyk. Analysis of Key-E…...