Python武器库开发-前端篇之CSS基本语法(三十)

前端篇之CSS基本语法(三十)

CSS简介

CSS(层叠样式表)是一种用于描述网页外观和布局的样式表语言。它与 HTML 一起,帮助开发者对网页进行美化和布局。CSS通过定义网页元素的颜色、字体、大小、背景、边框等属性,使网页变得更加美观和易于阅读。与 HTML 不同,CSS 的主要作用是控制内容的表现,而不是内容本身。

CSS的优势在于它可以将网页的外观和布局从 HTML 文档中分离出来,使得代码更加清晰和易于维护。它也可以帮助网页具有更好的响应式设计,以适应不同大小和分辨率的设备,如桌面电脑、平板电脑和手机。

CSS 有多种使用方式,包括在 HTML 文件中使用内部样式表或外部样式表,或利用CSS框架进行快速网页设计。CSS也具有选择器、属性和值等多种语法,使得开发者能够对网页样式进行精确控制。

CSS基本语法

CSS(层叠样式表)是用来为网页添加样式和布局的一种语言。下面是CSS的基本语法:

  1. 选择器:用来选择要应用样式的HTML元素。选择器可以是HTML元素名称、类名、ID、属性等。

  2. 声明:指定要应用到选定元素的样式。声明由属性和属性值组成,用冒号分隔,每个声明用分号结束。

  3. 注释:可以用注释来解释CSS代码。注释用/* 开始,用 */结束。

下面是一个简单的CSS代码示例:

/* 注释 */
h1 {color: blue; /* 声明 */font-size: 24px; /* 声明 */
}p {color: green; /* 声明 */
}

在上面的代码中,h1和p是选择器,color和font-size是属性,blue和24px是属性值。注意,CSS的属性值通常需要用单位来表示,例如像素(px)、百分比(%)、em等。

CSS的三种引用方式

CSS有三种引用方式

  1. 内联式引用:将CSS样式直接写在HTML标签里,通过style属性来引用CSS样式,如下所示:
<p style="font-size:16px;color:#000;">This is a paragraph.</p>
  1. 内部样式表:在HTML文档中的<head>标签中使用<style>标签来定义样式,例如:
<head><style>/* CSS样式 */p {font-size:16px;color:#000;}</style>
</head>
<body><p>This is a paragraph.</p>
</body>
  1. 外部样式表:将CSS代码保存到一个独立的CSS文件中,然后在HTML文档中通过标签来引用CSS文件,例如:
<head><style>/* CSS样式 */p {font-size:16px;color:#000;}</style>
</head>
<body><p>This is a paragraph.</p>
</body>

在外部的CSS文件中,样式的定义如下:

/* style.css */
.para {font-size:16px;color:#000;
}

第一个实例

我们接下来写一个CSS的第一个实列:

首先,我们需要在HTML文件中指定需要修改样式的元素和类。例如,我们可以在HTML文件中添加以下代码:

<p class="my-text">这是一段需要修改样式的文本。</p>

浏览器输出的效果如下图所示:

在这里插入图片描述

现在,我们可以在CSS文件中写样式来修改这段文本的样式。例如,我们可以添加以下代码:

.my-text {color: red;font-size: 24px;
}

这段代码会将类名为“my-text”的元素的字体颜色改为红色,字体大小改为24像素。

最终的HTML文件和CSS文件应该如下所示:

HTML文件:

<!DOCTYPE html>
<html><head><title>My First CSS Example</title><link rel="stylesheet" href="style.css"></head><body><p class="my-text">这是一段需要修改样式的文本。</p></body>
</html>

CSS文件(名为style.css):

.my-text {color: red;font-size: 24px;
}

运行这个HTML文件,就可以看到我们的文本颜色和字体大小已经被修改了。

最终浏览器输出的效果如下图所示:

在这里插入图片描述

CSS文本设置

CSS可以用于设置文本的各种样式,包括字体、颜色、大小、间距、对齐等等。下面是一些常用的CSS文本设置:

  1. 字体设置:
font-family: Arial, sans-serif; /* 设置字体,优先使用Arial字体,没有则使用sans-serif字体 */
font-weight: bold; /* 设置粗体字 */
font-style: italic; /* 设置斜体字 */
  1. 颜色设置:
color: #333; /* 设置字体颜色,可以使用十六进制、RGB或颜色名称 */
background-color: #f0f0f0; /* 设置背景颜色 */
  1. 大小设置:
font-size: 16px; /* 设置字体大小 */
line-height: 1.5; /* 设置行高 */
  1. 对齐设置:
text-align: center; /* 设置文本居中对齐 */
text-decoration: underline; /* 设置下划线 */
text-transform: uppercase; /* 设置全部大写 */
  1. 其他设置:
letter-spacing: 1px; /* 设置字母间距 */
word-spacing: 2px; /* 设置单词间距 */
text-shadow: 1px 1px #ccc; /* 设置文本阴影 */
white-space: nowrap; /* 禁止文本换行 */

CSS 选择器

CSS选择器是用来选择HTML和XML文档中的元素的一种方式。在CSS中,我们可以根据不同的属性、标签名、类名等选择元素。以下是一些常用的CSS选择器:

  1. 标签选择器(tag selector):选择所有指定标签的元素。例如,p选择器可以匹配所有的p标签元素。

  2. 类选择器(class selector):选择具有指定类名的元素。例如,.my-class选择器可以匹配class属性值为“my-class”的元素。

  3. ID选择器(ID selector):选择具有指定ID的元素。例如,#my-id选择器可以匹配ID属性值为“my-id”的元素。

  4. 后代选择器(descendant selector):选择指定元素的后代元素。例如,.parent.child可以匹配class为“parent”的元素中所有class为“child”的后代元素。

  5. 子元素选择器(child selector):选择指定元素的直接子元素。例如,.parent >.child可以匹配class为“parent”的元素中所有class为“child”的直接子元素。

  6. 相邻兄弟选择器(adjacent sibling selector):选择紧接在另一个元素之后的元素,且二者有相同的父元素。例如,.sibling +.sibling可以匹配class为“sibling”的元素中相邻的兄弟元素。

  7. 通用选择器(universal selector):选择所有元素。例如,*选择器可以匹配所有元素。

  8. 属性选择器(attribute selector):选择具有指定属性的元素。例如,[type=“text”]选择器可以匹配type属性值为“text”的元素。

  9. 伪类选择器(pseudo-class selector):选择不同状态的元素。例如,:hover选择器可以匹配鼠标悬停在元素上时的状态。

  10. 伪元素选择器(pseudo-element selector):选择元素的特定部分。例如,::before选择器可以选择元素前面的内容。

以上是一些常用的CSS选择器,可以根据需要灵活选择使用。

标签选择器

标签选择器是 CSS 中最简单和最基本的一种选择器,它可以选择 HTML 文档中所有具有相同标签的元素。例如,p 选择器可以选择所有的 <p> 标签元素。其语法如下:

标签名 {属性:;
}

示例:

/* 选择所有的 p 标签元素,将字体颜色设为红色 */
p {color: red;
}

类选择器

类选择器是CSS中的一种选择器,它通过选择具有相同类名的元素来定义样式。类名在HTML中以class属性的形式定义,它可以应用于任何元素,也可以在同一元素中多次使用。在CSS中,类选择器以一个点(.)开头,后面跟着类名,例如:

.my-class {color: red;font-weight: bold;
}

上面的例子中,类选择器是“.my-class”,它将应用于HTML中所有使用class="my-class"的元素,并将其文字颜色设置为红色并加粗。

ID选择器

ID选择器是CSS中的一种选择器,用于选择具有特定ID属性的HTML元素。它以"#"符号为开头,后面跟着ID属性的值。例如,如果想选择一个ID属性为"myelement"的元素,可以使用以下代码:

#myelement {/* CSS属性和值 */
}

在HTML中,我们可以将ID属性添加到任何元素中,但是每个ID属性的值必须是唯一的,即在同一个文档中不能有两个元素拥有相同的ID属性值。ID选择器可以非常精确地定位一个特定的元素,所以在CSS中使用ID选择器非常常见。

后代选择器

后代选择器是用于选择指定元素的子元素、孙元素、曾孙元素等的CSS选择器。它使用空格符来表示元素之间的关系。

例如,如果要选择父元素是 div 的所有子元素 a,可以使用以下代码:

div a {/* CSS属性 */
}

这将选择所有在 div 元素内部的 a 元素,无论它们是子元素、孙元素还是曾孙元素。

子元素选择器

子元素选择器是CSS中一种特殊的选择器,用于选取指定父元素下的直接子元素。它使用“>”符号来表示父子关系,语法格式如下:

父元素 > 子元素 {属性名:属性值;
}

其中,父元素为指定的父元素,子元素为父元素下的直接子元素,属性名和属性值为要应用的样式。示例代码如下:

html:

<div class="parent"><p>父元素下的直接子元素</p><span>不是直接子元素</span><ul><li>也不是直接子元素</li></ul>
</div>

css:

.parent > p {color: red;
}

上述代码中,只有父元素下的<p>标签会应用样式,<span><ul>标签不会应用样式,因为它们不是直接子元素。

相邻兄弟选择器

CSS相邻兄弟选择器是指选择紧接在另一个元素后面的兄弟元素。其语法为“元素1 + 元素2”,其中元素1和元素2都是选择器。这个选择器会选取紧接在元素1后面的第一个元素2。

例如,如果我们有下面的HTML代码:

<h2>标题1</h2>
<p>段落1</p>
<p>段落2</p>
<h2>标题2</h2>
<p>段落3</p>

要选中标题1和紧接着它的段落1,我们可以使用相邻兄弟选择器:

h2 + p {color: red;
}

这会让段落1的文字变成红色。注意,相邻兄弟选择器只会选中紧接着的兄弟元素,如果有其他元素在它们之间,那么这个选择器就不会起作用。

通用选择器

通用选择器是CSS中的一种选择器,它用一个星号(*)表示。它匹配任何元素,包括HTML中所有元素。使用通用选择器可以为所有元素添加相同的CSS样式。

* {margin: 0;padding: 0;
}

上面的代码会将页面中所有元素的margin和padding属性清零。

属性选择器

属性选择器是一种CSS选择器,可根据html元素的属性值来选择元素。属性选择器使用方括号[]来表示,包含一个属性和可选的值。例如:

/* 选择有title属性的所有元素 */
[title] { color: red; 
} /* 选择href属性值为"https://www.google.com"的所有链接 */
a[href="https://www.google.com"] { color: blue; 
}/* 选择class属性值包含"example"的所有元素 */
[class*="example"] { background-color: yellow; 
}

其中,*表示包含,^表示以什么开头,$表示以什么结尾。属性选择器是一种强大的工具,可以让你根据元素属性的值来选择元素,从而更加灵活地控制样式。

伪类选择器

伪类选择器是CSS中用来向文档中的元素添加特殊样式的一种选择器。伪类选择器的语法是在选择器后面加上冒号(😃,表示某个元素在特定的状态下的样式,这个状态是不同于元素本身的状态。

常见的伪类选择器包括:

  1. :hover - 鼠标悬停样式

  2. :active - 鼠标点击样式

  3. :visited - 已访问链接样式

  4. :focus - 元素获得焦点样式

  5. :first-child - 第一个子元素样式

  6. :last-child - 最后一个子元素样式

  7. :nth-child(n) - 第n个子元素样式

伪类选择器可以根据不同的状态来控制元素的样式,使得页面的交互和视觉效果更加丰富和灵活。

伪元素选择器

伪元素选择器是用来选择元素的特定部分而不是元素本身的一种CSS选择器。

常见的伪元素选择器有:

  1. ::before:在元素内容的前面插入生成的内容。

  2. ::after:在元素内容的后面插入生成的内容。

  3. ::first-letter:选择元素内容的第一个字母。

  4. ::first-line:选择元素内容的第一行。

  5. ::selection:选择被用户选中的文本部分。

示例:

p::before {content: "前缀:";
}p::after {content: "后缀。";
}p::first-letter {font-size: 2em;
}p::first-line {font-weight: bold;
}::selection {background-color: yellow;
}

以上代码展示了几个常见的伪元素选择器的用法。

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

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

相关文章

redis 数据结构

redis 数据结构 动态字符串SDS 优点 获取字符串长度的时间复杂度O(1) 支持动态扩容&#xff0c;减少内存分配次数 新字符串小于1M – 新空间为扩展后字符串长度的两倍 1 新字符串大于1M – 新空间为扩展后字符串长度 1M 1. 内存预分配 二进制安全&#xff08;记录了字符…

备考雅思记录

写下此贴的时间是2023年11月26日&#xff0c;目前水平估计5分&#xff1f;目标是在24年5月前考到7 消费记录&#xff1a; 剑雅4-18学术类&#xff1a;xy打印版&#xff08;88r&#xff09; 网课选择&#xff1a; simon大小作文&#xff08;话题&#xff1a;经济&#xff0c…

2023金盾杯线上赛-AGRT战队-WP

目录 WEB ApeCoin get_source ezupload easyphp MISC 来都来了 芙宁娜 Honor Crypto 我看看谁还不会RSA hakiehs babyrsa PWN sign-format RE Re1 WEB ApeCoin 扫描发现有源码泄露&#xff0c;访问www.tar.gz得到源码。 在源码中发现了冰蝎马。 Md5解码&am…

Linux chown命令教程:如何更改文件所有者(附实例教程和注意事项)

Linux chown命令介绍 Linux chown命令&#xff08;英文全拼&#xff1a;change owner&#xff09;用于设置文件所有者和文件关联组。在Linux/Unix这种多人多工操作系统中&#xff0c;所有的文件都有拥有者。我们可以利用chown命令将指定文件的拥有者改为指定的用户或组&#x…

【可编程串行接口8251A】:用处、内部结构、各引脚的解释、工作方式

8251A的作用 微机内部的数据传送方式为并行方式。 若外设采用串行方式&#xff0c;则微机与外设之间需加串行接口。 串行接口基本功能就是&#xff1a;输入数据时&#xff0c;进行串/并转换&#xff1b;输出数据时&#xff0c;进行并/串转换。Intel8251A是一种可编程的通用同步…

frp V0.52.3 搭建

下载 https://github.com/fatedier/frp/releases/ 此版本暂时没有windows的&#xff0c;想在windows使用请下载v0.52.2 简易搭建 frps.toml的配置文件&#xff0c;以下12000、8500需要在云服务器中的防火墙中开放tcp # bindPort为frps和frpc通信的端口&#xff0c;需要在防…

渗透测试信息搜集

注&#xff1a;太简陋了&#xff0c;不忍直视 渗透测试信息收集 黑盒测试&#xff1a;给域名 灰盒测试&#xff1a;给域名、账户(或密码) 白盒测试&#xff1a;给域名、账户、密码 授权书 对安全公司进行授权 攻防演习 是对个人进行授权 渗透测试&#xff1a;&#xff0…

实验室信息管理系统源码,LIS系统源码,lis源码

医学检验(LIS)管理系统源码&#xff0c;云LIS系统全套商业源码 随着全自动生化分析仪、全自动免疫分析仪和全自动血球计数器等仪器的使用&#xff0c;检验科的大多数项目实现了全自动化分析。全自动化分析引入后&#xff0c;组合化验增多&#xff0c;更好的满足了临床需要&…

springboot 返回problem+json

spring所有配置都在WebMvcAutoConfiguration中 其中有 ProblemDetailsExceptionHandler 容器中的一个组件 -ControllerAdvice用来集中处理异常的 -点进ResponseEntityExceptionHandler 包含这些异常&#xff0c;如果出现以下异常&#xff0c;会被springboot支持以RFC 7807规…

142.【Nginx负载均衡-01】

Nginx_基础篇 (一)、Nginx 简介1.背景介绍(1).http和三大邮局协议(2).反向代理与正向代理 2.常见服务器对比(1).公司介绍(2).lls 服务器(3).Tomcat 服务器(4).Apache 服务器(5).Lighttpd 服务器(6).其他的服务器 3.Nginx的优点(1).速度更快、并发更高(2).配置简单&#xff0c;扩…

1.1 半加器

输入1输入2结果进位0000101001101101 半加器: 实现1位的加法 根据结果可知输入1与输入2相加结果 -> 符合 异或门进位 -> 符合 与门最终要么有结果要么有进位,不存在即有结果也有进位 异或门的实现也可以由基本的3个 “与或非” 门实现 与:& , 或:| , 非:! 用这3个…

从前序与中序遍历序列构造二叉树(C++实现)

从前序与中序遍历序列构造二叉树 题目思路分析代码代码讲解 题目 思路分析 我们可以通过递归实现的二叉树构建函数。它根据给定的先序遍历序列和中序遍历序列构建一棵二叉树&#xff0c;并返回根节点。可以创建一个_build 函数&#xff0c;该函数负责构建二叉树的节点&#xff…

[RK-Linux] misc分区详解

misc 其实是英文 miscellaneous 的前四个字母,杂项、混合体、大杂烩的意思。 misc 分区的概念来源于 Android 系统,Linux 系统中常用来作为系统升级时或者恢复出厂设置时使用。 misc 分区的读写:misc 分区在以下情况下会被读写。 Uboot:设备加电启动时,首先启动 Uboot,…

springboot(ssm高校门诊管理系统 校医务管理平台Java(codeLW)

springboot(ssm高校门诊管理系统 校医务管理平台Java(code&LW) 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&…

在Java中操作Redis

导入Spring Data Redis的maven坐标 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency>配置Redis数据源 在application.yml中添加读取application-dev.ym…

OSG粒子系统与阴影-自定义粒子系统示例<2>(5)

自定义粒子系统示例(二) 目前自定义粒子的方法有很多&#xff0c;在OSG 中使用的是 Billboard 技术与色彩融合技术。色彩融合是一种高级的渲染技术&#xff0c;如果读者有兴趣&#xff0c;可参看 OSG 粒子系统实现的源代码。这里采用简单的布告牌技术(osg::Billboard)与动画来实…

01背包问题

介绍 有N件物品和一个最多能被重量为W 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 分析 优化后的代码 public class demo {static class Item{int index;String na…

OpenCV快速入门:相机标定——单目视觉和双目视觉

文章目录 前言一、相机标定的基本原理1.1 相机模型与坐标系1.1.1 相机模型1.1.2 坐标系 1.2 相机内参与外参1.2.1 内部参数1.2.2 外部参数 1.3 镜头畸变1.4 透视变换1.5 标定的重要性和应用场景 二、单目视觉2.1 单目视觉的原理2.1.1 单目视觉的原理2.1.2 单目视觉的公式2.1.3 …

perf火焰图使用

task1: 最简单的 on-cpu 火焰图 首先生成最简单的 on-cpu 火焰图&#xff0c;参考 https://www.bilibili.com/video/BV1hg4y1o7Sb/?spm_id_from333.337.search-card.all.click&vd_source7a1a0bc74158c6993c7355c5490fc600 首先安装工具&#xff0c;这似乎是 Linux 自带的…

MYSQL基础知识之【添加数据,查询数据】

文章目录 前言MySQL 插入数据通过命令提示窗口插入数据使用PHP脚本插入数据 MySQL 查询数据通过命令提示符获取数据使用PHP脚本来获取数据内存释放 后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Mysql &#x1f431;‍&#x1f453;博…