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;
}

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

加速 Selenium 测试执行最佳实践

加速 Selenium 测试执行最佳实践

Selenium测试自动化的主要目的是加快测试过程。在大多数情况下&#xff0c;使用 Selenium 的自动化测试比手动测试执行得特别好。在实际自动化测试实践中&#xff0c;我们有很多方式可以加速Selenium用例的执行。 我们可以选择使用不同类型的等待、不同类型的 Web 定位器、不同…
阅读更多...
第97步 深度学习图像目标检测：RetinaNet建模

第97步 深度学习图像目标检测：RetinaNet建模

基于WIN10的64位系统演示 一、写在前面 本期开始&#xff0c;我们继续学习深度学习图像目标检测系列&#xff0c;RetinaNet模型。 二、RetinaNet简介 RetinaNet 是由 Facebook AI Research (FAIR) 的研究人员在 2017 年提出的一种目标检测模型。它是一种单阶段&#xff08;o…
阅读更多...
学习了解抽象思维的应用与实践

学习了解抽象思维的应用与实践

目录 一、快速了解抽象思维 &#xff08;一&#xff09;抽象思维的本质理解 &#xff08;二&#xff09;系统架构中的重要性 &#xff08;三&#xff09;软件开发中抽象的基本过程思考 意识和手段 抽象的方式 抽象层次的权衡 二、业务中的应用实践 &#xff08;一&…
阅读更多...
Django 通过 Trunc（kind） 和 Extract（lookup_name） 参数进行潜在 SQL 注入 （CVE-2022-34265）

Django 通过 Trunc（kind） 和 Extract（lookup_name） 参数进行潜在 SQL 注入 （CVE-2022-34265）

漏洞描述 Django 于 2022 年6月4 日发布了一个安全更新&#xff0c;修复了 Trunc&#xff08;&#xff09; 和 Extract&#xff08;&#xff09; 数据库函数中的 SQL 注入漏洞。 参考链接&#xff1a; Django security releases issued: 4.0.6 and 3.2.14 | Weblog | Djang…
阅读更多...
ArkTs变量类型、数据类型

ArkTs变量类型、数据类型

可以参考官网学习路径学习HarmonyOS第一课|应用开发视频教程学习|HarmonyOS应用开发官网 一、变量 1、ArkTS语言 ArkTS是华为自研的开发语言。它在TypeScript&#xff08;简称TS&#xff09;的基础上&#xff0c;匹配ArkUI框架&#xff0c;扩展了声明式UI、状态管理等相应的…
阅读更多...
mac 修改 hosts 文件

mac 修改 hosts 文件

打开 hosts 所在文件夹 command shift G 快捷键 输入&#xff1a;“/private/etc/hosts” 后回车 如下所示 进入 hosts 文件所在位置&#xff0c;找到 hosts 文件&#xff0c;双击打开 修改 hosts 文件 将所需要的配置信息追加到hosts 文件中&#xff0c;或者修改需要改…
阅读更多...
mysql忘记密码，然后重置

mysql忘记密码，然后重置

数据库版本8.0.26 只针对以下情况 mysql忘记了密码&#xff0c;但是你navicat之前连接上了 解决方法&#xff1a; 第一步&#xff0c;选中mysql这个数据库&#xff0c;点击新建查询 第二步&#xff1a;重置密码 alter user rootlocalhost IDENTIFIED BY 你的密码; 然后就可…
阅读更多...
ffmpeg下载与配置环境变量

ffmpeg下载与配置环境变量

FFmpeg 是一个强大的多媒体框架&#xff0c;可以让用户处理和操纵音频和视频文件。具有易于使用的界面&#xff0c;用户可以在 Windows、Mac 或 Linux Ubuntu 系统上下载 FFmpeg 并将其提取到文件夹中。然后&#xff0c;该软件可以加入 PATH 环境变量中就可以快捷的使用软件了.…
阅读更多...
Android自动化测试中使用ADB进行网络状态管理

Android自动化测试中使用ADB进行网络状态管理

Android自动化测试中的网络状态切换是提高测试覆盖率、捕获潜在问题的关键步骤之一&#xff0c;本文将介绍 如何使用ADB检测和管理Android设备的网络状态。 自动化测试中的网络状态切换变得尤为重要。 同时&#xff0c;在这我准备了一份软件测试视频教程&#xff08;含接口、自…
阅读更多...
maven 将Jar包安装到本地仓库

maven 将Jar包安装到本地仓库

window系统&#xff1a; 注意事项&#xff1a;在windows中&#xff0c;使用mvn指令将jar安装到本地仓库时&#xff0c;一定要将相关资源使用“"”包裹上&#xff0c;不然会报下面的错&#xff1a; mvn install:install-file "-DfileD:\BaiduNetdiskDownload\qianzixi…
阅读更多...
轻松植入分布式跟踪：Odigos 带你主导应用观测 | 开源日报 No.85

轻松植入分布式跟踪：Odigos 带你主导应用观测 | 开源日报 No.85

babysor/MockingBird Stars: 31.6k License: NOASSERTION 这个项目是一个实时语音克隆的开源项目&#xff0c;主要功能包括支持中文、使用 PyTorch 进行训练和推理、可以在 Windows 和 Linux 系统上运行以及提供 Web 服务器。该项目的核心优势和特点包括&#xff1a; 支持多种…
阅读更多...
视频批量剪辑技巧：掌握视频嵌套合并，轻松成为视频剪辑高手

视频批量剪辑技巧：掌握视频嵌套合并，轻松成为视频剪辑高手

随着社交媒体的兴起&#xff0c;视频已成为人们分享和交流的重要方式。视频剪辑作为视频制作的关键环节&#xff0c;对于提升视频质量和吸引力至关重要。视频嵌套合并是一种高级视频剪辑技巧&#xff0c;它将两个或多个视频片段叠加在一起&#xff0c;创造出一种独特的效果。这…
阅读更多...
XShell新建会话指南

XShell新建会话指南

XShell新建会话 我们先登录我们的xshell&#xff0c;连接我们的远程服务器 为了方便我们以后的使用&#xff0c;我们可以新建一个会话记住用户 新建好后&#xff0c;我们可以打开这个会话 我们选择记住用户名 然后继续输密码就可以了 之后我们每次打开xshell的时候&#xff0c…
阅读更多...
数据丢失抢救神器之TOP10 Android 数据恢复榜单

数据丢失抢救神器之TOP10 Android 数据恢复榜单

在快节奏的数字时代&#xff0c;我们的生活越来越与智能手机交织在一起&#xff0c;使它们成为重要数据和珍贵记忆的存储库。由于意外删除、软件故障或硬件故障而丢失数据可能是一种痛苦的经历。值得庆幸的是&#xff0c;技术领域提供了 Android 数据恢复软件形式的解决方案。这…
阅读更多...
02 RANSAC算法 及 Python 实现

02 RANSAC算法 及 Python 实现

文章目录 02 RANSAC算法 及 Python 实现2.1 简介2.2 算法流程2.3 RANSAC 算法实现直线拟合2.4 利用 RANSAC 算法减少 ORB 特征点误匹配 02 RANSAC算法 及 Python 实现 2.1 简介 RANSAC &#xff08;Random Sample Consensus&#xff0c;随机抽样一致&#xff09;算法的 基本假…
阅读更多...
中职组网络安全-linux渗透测试-Server2203（环境+解析）

中职组网络安全-linux渗透测试-Server2203（环境+解析）

任务环境说明&#xff1a; 服务器场景&#xff1a;Server2203&#xff08;关闭链接&#xff09; 用户名&#xff1a;hacker 密码&#xff1a;123456 1.使用渗透机对服务器信息收集&#xff0c;并将服务器中SSH服务端口号作为flag提交&#xff1b; FLAG:2232 2. 使用渗透机对…
阅读更多...
最全的软件测试教程（功能、工具、接口、自动化、性能）

最全的软件测试教程（功能、工具、接口、自动化、性能）

一、软件测试功能测试 测试用例编写是软件测试的基本技能&#xff1b;也有很多人认为测试用例是软件测试的核心&#xff1b;软件测试中最重要的是设计和生成有效的测试用例&#xff1b;测试用例是测试工作的指导&#xff0c;是软件测试的必须遵守的准则。 在这我也准备了一份…
阅读更多...
华为ensp：trunk链路

华为ensp：trunk链路

当我们使用trunk链路后&#xff0c;还要选择要放行的vlan那就是全部vlan&#xff08;all&#xff09;&#xff0c;但是all并不包括vlan1&#xff0c;所以我们的trunk链路中的all不对all进行放行 实现相同vlan之间的通信 先将他们加入对应的vlan lsw1 进入e0/0/3接口 interfa…
阅读更多...
Linux-基本指令（1.0）

Linux-基本指令（1.0）

Linux是一个非常流行的操作的知识&#xff0c;并提供实例帮助读者更好地理解。让我们一起来学习吧&#xff01;系统&#xff0c;也是云计算、大数据、人工智能等领域的重要基础。学习Linux命令是Linux系统管理的基础&#xff0c;也是开发过程中必不可少的技能。本博客将介绍Lin…
阅读更多...
2023年10月纸巾市场分析（京东天猫淘宝平台纸巾品类数据采集）

2023年10月纸巾市场分析（京东天猫淘宝平台纸巾品类数据采集）

双十一大促期间&#xff0c;刚需品的纸巾是必囤商品之一。今年双十一&#xff0c;京东数据显示&#xff0c;10月23日至29日&#xff0c;清洁纸品成交额同比增长40%&#xff0c;由此也拉动了10月纸巾市场的销售。 鲸参谋数据显示&#xff0c;今年10月&#xff0c;京东平台纸巾市…
阅读更多...
最新文章

Copyright @ 2022~2023