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

news2025/1/16 9:07:33

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;        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2256593.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringMvc完整知识点二(完结)

SpringMVC获取请求参数 环境准备工作等均省略&#xff0c;可详见快速入门&#xff0c;此处只写非共有部分代码 该部分示例项目SpringMvcThree已上传至Gitee&#xff0c;可自行下载 客户端请求参数的格式为&#xff1a;namevalue&passwordvalue... ... 服务端想要获取请求…

Spring完整知识点一

Spring简介 额外知识点 在之前的学习中我们在Service业务层创建Dao/Mapper数据访问层&#xff08;持久层&#xff09;的对象是通过工具类来获取对应Dao/Mapper数据访问层&#xff08;持久层&#xff09;的接口代理对象在此处我们不用工具类来获取对应Dao/Mapper数据访问层&…

Jupyter Notebook认识、安装和启动以及使用

Jupyter Notebook认识、安装和启动以及使用 Jupyter Notebook认识、安装和启动以及使用 Jupyter Notebook认识、安装和启动以及使用一、认识Jupyter Notebook1.1 Jupyter Notebook概述1.2 Jupyter Notebook 重要特性(1)交互式代码执行(2)支持多种编程语言(3)富文本编辑(4)代码高…

React 组件中 State 的定义、使用及正确更新方式

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;React篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容React 组件中 State 的定义、使用及正确更新方式 前言 在 React 应用开发中&#xff0c;state …

AIDD-人工智能药物设计-化学自然语言引导的扩散式类药分子编辑:DiffIUPAC的魔法之旅

J. Pharm. Anal. | 化学自然语言引导的扩散式类药分子编辑&#xff1a;DiffIUPAC的魔法之旅 AIDD药研. 制药工程和生命科学背景&#xff0c;重点关注于计算机辅助药物设计&#xff08;CADD&#xff09;/药物筛选、分子动力学模拟MD&#xff0c;兽药信息学VetInformatics&…

服务器数据恢复—硬盘掉线导致热备盘同步失败的RAID5阵列数据恢复案例

服务器存储数据恢复环境&#xff1a; 华为S5300存储中有12块FC硬盘&#xff0c;其中11块硬盘作为数据盘组建了一组RAID5阵列&#xff0c;剩下的1块硬盘作为热备盘使用。基于RAID的LUN分配给linux操作系统使用&#xff0c;存放的数据主要是Oracle数据库。 服务器存储故障&#…

2024年12月HarmonyOS应用开发者基础认证全新题库

注意事项&#xff1a;切记在考试之外的设备上打开题库进行搜索&#xff0c;防止切屏三次考试自动结束&#xff0c;题目是乱序&#xff0c;每次考试&#xff0c;选项的顺序都不同 更新时间&#xff1a;2024年12月3日 这是基础认证题库&#xff0c;不是高级认证题库注意看清楚标…

docker修改并迁移存储至数据盘

文章目录 前言一、操作步骤&#xff08;需要root权限&#xff09;1. 查看磁盘占用&#xff0c;查看当前docker目录占用的空间2. 查看正在运行的容器&#xff0c;并停止容器及服务3. 拷贝数据、修改配置&#xff08;关键步骤&#xff09;4. 加载配置&#xff0c;启动服务及容器 …

n的阶乘(c++)

#include<stdio.h> int jiecheng(int n) { if(n1||n0) { return 1; } return(n*jiecheng(n-1)); } int main(void){ int n 0; printf("请输入您要计算的数字\n"); scanf("%d",&n); printf("%d\n",jiecheng(n)); return 0; }

MyBatis系列之自定义TypeHandler实现字段加密解密

文章目录 前言一、TypeHandler接口二、实现总结 前言 今天简单介绍利用MyBatis的TypeHandler接口实现字段的加解密。 字段的加密和解密&#xff0c;实现方式确实有好几种。比如&#xff0c;在业务层实现、在数据库层面实现等等&#xff0c;但是这些相对来说&#xff0c;耦合性…

C总结(C语言知识点,深化重难点)

C语言 1.使用C语言的7个步骤2.ASCII码3.提高程序可读性的机巧4.如何使用多种整形5.打印多种整形6.课移植类型&#xff1a;stdint.h和inttypes.h7.浮点数常量8.浮点值的上溢和下溢9.使用数据类型11.常量和C预处理器12.转换说明的意义12.1转换不匹配13.副作用和序列点14.数组简介…

JavaScript编写css自定义属性

一、自定义属性 是在 CSS 中定义的变量&#xff0c;以 --开头。它们可以存储颜色、尺寸、字体等任何 CSS 值&#xff0c;并且可以在整个文档中重复使用。 :root {--primary-color: #3498db;--font-size: 16px; }body {color: var(--primary-color);font-size: var(--font-siz…

【机器学习】任务十一:Keras 模块的使用

1.Keras简介 1.1 什么是Keras&#xff1f; Keras 是一个开源的深度学习框架&#xff0c;用 Python 编写&#xff0c;构建于 TensorFlow 之上。它以简单、快速和易于使用为主要设计目标&#xff0c;适合初学者和研究者。 Keras 提供了高层次的 API&#xff0c;帮助用户快速构…

02_Node.js模块化

02_Node.js模块化 知识点自测 以下代码运行的结果是多少&#xff1f; const arr [10, 20, 30] const result arr.map(val > val 1).reduce((sum, val) > sum val, 0) console.log(result) A&#xff1a;60 B&#xff1a;63 <details><summary>答案</…

故障识别 | GADF-CNN-SSA-XGBoost数据分类预测/故障识别(Matlab)

故障识别 | GADF-CNN-SSA-XGBoost数据分类预测/故障识别&#xff08;Matlab&#xff09; 目录 故障识别 | GADF-CNN-SSA-XGBoost数据分类预测/故障识别&#xff08;Matlab&#xff09;分类效果基本描述程序设计参考资料 分类效果 基本描述 格拉姆角场差&#xff08;GADF&#…

OPenCV 图片局部放大

m_image cv::imread("C:/Code/JPG/1.jpg");if (m_image.empty()) return;cv::imshow("原始图像", m_image); // TODO: 在此添加控件通知处理程序代码int width m_image.cols;int height m_image.rows;// 确定要放大的区域&#xff08;这里是图像中心部分…

【C++】变长参数

文章目录 1. 定义&#xff1a;2. C代码示例:2.1 实现方式一&#xff1a;2.2 实现方式二&#xff1a;2.3 实现方式三&#xff1a; 3. 总结3.1 使用...语法&#xff1a;3.2 使用 std::initializer_list3.3 使用变长模板参数&#xff08;Variadic Templates&#xff09; 1. 定义&a…

内网穿透 natapp安装与使用

前言 NATAPP是一款基于ngrok的内网穿透工具。以下是对NATAPP的详细概述&#xff1a; 基本概念 定义&#xff1a;内网穿透&#xff08;NAT穿透&#xff09;是一种技术&#xff0c;它允许具有特定源IP地址和端口号的数据包能够绕过NAT设备&#xff0c;从而被正确地路由到内网主机…

TPAMI 2023:When Object Detection Meets Knowledge Distillation: A Survey

摘要 目标检测&#xff08;Object Detection&#xff0c;OD&#xff09;是计算机视觉中的一项关键任务&#xff0c;多年来涌现出了众多算法和模型。尽管当前 OD 模型的性能有所提升&#xff0c;但它们也变得更加复杂&#xff0c;由于参数规模庞大&#xff0c;在工业应用中并不…

怎么样能使Ubuntu的文件浏览器显示当前目录的路径,而不是只显示一个文件名?

默认情况下Ubuntu的文件浏览器是只显示当前目录的目录名的&#xff0c;这很不便我们查看路径或直接利用路径进行定位&#xff0c;那么怎么样能使Ubuntu的文件浏览器显示当前目录的路径呢&#xff1f; 两种方法&#xff1a; 第1种-临时方法 按下快捷键 Ctrl L&#xff0c;导航…