css基础(1)

CSS

CCS Syntax

CSS 规则由选择器和声明块组成。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

CSS选择器

CSS选择器用于查找想要设置样式的HTML元素

一般选择器分为五类

Simple selectors (select elements based on name, id, class)

简单选择器(根据名称、id、类选择元素)

//页面上的所有 <p> 元素都将居中对齐,文本颜色为红色:
p{text-align:center;color:red;
}

元素的 id 在页面内是唯一的,因此 id 选择器用于选择一个唯一的元素!

要选择具有特定 id 的元素,请写入井号 (#) 字符,后跟该元素的 id。

<!DOCTYPE html>
<html>
<head>
<style>
#ww {text-align: center;color: red;
}
</style>
</head>
<body><p id="para1">Hello World!</p>
<p id="ww">This paragraph is not affected by the style.</p></body>
</html>

Combinator selectors (select elements based on a specific relationship between them)

组合选择器(根据元素之间的特定关系选择元素)一个 CSS 选择器可以包含多个简单选择器。在简单的选择器之间,我们可以包含一个组合器。

CSS 中有四种不同的组合器:

descendant selector (space)

后代选择器(空格)

以下示例选择

元素内的所有

元素

div p {background-color: yellow;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

child selector (>) 子选择器 (>)

子选择器选择作为指定元素的子元素的所有元素。

以下示例选择作为

元素子级的所有

元素:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

adjacent sibling selector (+)相邻同级选择器 (+)

相邻同级选择器用于选择直接位于另一个特定元素之后的元素。兄弟元素必须具有相同的父元素,“相邻”意味着“紧随其后”。以下示例选择紧邻

元素之后放置的第一个

元素:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

general sibling selector (~)通用兄弟选择器 (~)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Pseudo-class selectors 伪类选择器

伪类选择器(根据某种状态选择元素)

A pseudo-class is used to define a special state of an element.
伪类用于定义元素的特殊状态。

For example, it can be used to:
例如,它可用于:

  • Style an element when a user mouses over it
    当用户将鼠标悬停在元素上时设置元素的样式
  • Style visited and unvisited links differently
    访问过的链接和未访问过的链接的样式不同
  • Style an element when it gets focus
    当元素获得焦点时设置其样式

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. :link - 这个伪类针对的是尚未被访问过的链接。在您的 CSS 中,未访问的链接被设置为红色。

  2. :visited - 这个伪类适用于用户已经访问过的链接。使用绿色来为已访问的链接着色,使其与未访问的链接区分开来。

  3. :hover - 当鼠标指针悬停在链接上时应用此状态。它临时将链接的颜色改变为亮粉色,通过提供视觉反馈来增强用户互动。

  4. :active - 这个伪类在链接被点击的瞬间生效。通过在活动状态时改变颜色为蓝色,它给出了一个视觉提示,表示链接正在被交互。

您的代码中还包括了关于这些伪类在 CSS 中的排序的重要说明:

  • :hover 状态必须在 :link:visited 之后定义,以确保其正确工作。这是因为 CSS 规则是按定义的顺序应用的,:hover 需要覆盖 :link:visited 定义的颜色。
  • 类似地,:active 必须在 :hover 之后定义,以确保在链接被点击时它能够取得优先权,覆盖任何悬停效果。

这种结构化的方法确保每个状态都有明显的视觉表现,增强了网页导航的可用性和美观性。您的设置正确地遵循了 CSS 的特异性和顺序规则,以实现对超链接状态的期望效果。

Pseudo-elements selectors 伪元素选择器

伪元素选择器(选择元素的一部分并设置其样式)

A CSS pseudo-element is used to style specified parts of an element.
CSS 伪元素用于设置元素的指定部分的样式。

For example, it can be used to:
例如,它可用于:

  • Style the first letter, or line, of an element
    设置元素的第一个字母或行的样式
  • Insert content before, or after, the content of an element
    在元素内容之前或之后插入内容
::first-line 伪元素
::first-letter Pseudo-element
Pseudo-elements and HTML Classes
Multiple Pseudo-elements
CSS - ::before 伪元素
CSS - ::after 伪元素
CSS - ::marker 伪元素
CSS - ::selection 伪元素

Attribute selectors 属性选择器

属性选择器(根据属性或属性值选择元素)

CSS

CCS Syntax

CSS 规则由选择器和声明块组成。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

CSS选择器

CSS选择器用于查找想要设置样式的HTML元素

一般选择器分为五类

Simple selectors (select elements based on name, id, class)

简单选择器(根据名称、id、类选择元素)

//页面上的所有 <p> 元素都将居中对齐,文本颜色为红色:
p{text-align:center;color:red;
}

元素的 id 在页面内是唯一的,因此 id 选择器用于选择一个唯一的元素!

要选择具有特定 id 的元素,请写入井号 (#) 字符,后跟该元素的 id。

<!DOCTYPE html>
<html>
<head>
<style>
#ww {text-align: center;color: red;
}
</style>
</head>
<body><p id="para1">Hello World!</p>
<p id="ww">This paragraph is not affected by the style.</p></body>
</html>

Combinator selectors (select elements based on a specific relationship between them)

组合选择器(根据元素之间的特定关系选择元素)一个 CSS 选择器可以包含多个简单选择器。在简单的选择器之间,我们可以包含一个组合器。

CSS 中有四种不同的组合器:

descendant selector (space)

后代选择器(空格)

以下示例选择

元素内的所有

元素

div p {background-color: yellow;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

child selector (>) 子选择器 (>)

子选择器选择作为指定元素的子元素的所有元素。

以下示例选择作为

元素子级的所有

元素:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

adjacent sibling selector (+)相邻同级选择器 (+)

相邻同级选择器用于选择直接位于另一个特定元素之后的元素。兄弟元素必须具有相同的父元素,“相邻”意味着“紧随其后”。以下示例选择紧邻

元素之后放置的第一个

元素:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

general sibling selector (~)通用兄弟选择器 (~)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Pseudo-class selectors 伪类选择器

伪类选择器(根据某种状态选择元素)

A pseudo-class is used to define a special state of an element.
伪类用于定义元素的特殊状态。

For example, it can be used to:
例如,它可用于:

  • Style an element when a user mouses over it
    当用户将鼠标悬停在元素上时设置元素的样式
  • Style visited and unvisited links differently
    访问过的链接和未访问过的链接的样式不同
  • Style an element when it gets focus
    当元素获得焦点时设置其样式

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. :link - 这个伪类针对的是尚未被访问过的链接。在您的 CSS 中,未访问的链接被设置为红色。

  2. :visited - 这个伪类适用于用户已经访问过的链接。使用绿色来为已访问的链接着色,使其与未访问的链接区分开来。

  3. :hover - 当鼠标指针悬停在链接上时应用此状态。它临时将链接的颜色改变为亮粉色,通过提供视觉反馈来增强用户互动。

  4. :active - 这个伪类在链接被点击的瞬间生效。通过在活动状态时改变颜色为蓝色,它给出了一个视觉提示,表示链接正在被交互。

您的代码中还包括了关于这些伪类在 CSS 中的排序的重要说明:

  • :hover 状态必须在 :link:visited 之后定义,以确保其正确工作。这是因为 CSS 规则是按定义的顺序应用的,:hover 需要覆盖 :link:visited 定义的颜色。
  • 类似地,:active 必须在 :hover 之后定义,以确保在链接被点击时它能够取得优先权,覆盖任何悬停效果。

这种结构化的方法确保每个状态都有明显的视觉表现,增强了网页导航的可用性和美观性。您的设置正确地遵循了 CSS 的特异性和顺序规则,以实现对超链接状态的期望效果。

Pseudo-elements selectors 伪元素选择器

伪元素选择器(选择元素的一部分并设置其样式)

A CSS pseudo-element is used to style specified parts of an element.
CSS 伪元素用于设置元素的指定部分的样式。

For example, it can be used to:
例如,它可用于:

  • Style the first letter, or line, of an element
    设置元素的第一个字母或行的样式
  • Insert content before, or after, the content of an element
    在元素内容之前或之后插入内容
::first-line 伪元素
::first-letter Pseudo-element
Pseudo-elements and HTML Classes
Multiple Pseudo-elements
CSS - ::before 伪元素
CSS - ::after 伪元素
CSS - ::marker 伪元素
CSS - ::selection 伪元素

Attribute selectors 属性选择器

属性选择器(根据属性或属性值选择元素)

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

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

相关文章

Git配置笔记

文章目录 Git配置一、Git配置文件1.1 配置文件位置1.2 参考 二、换行符相关2.1 背景2.2 相关配置2.3 推荐配置2.4 参考资料 Git配置 一、Git配置文件 1.1 配置文件位置 Git 自带一个 git config 的工具来帮助设置控制 Git 外观和行为的配置变量。 这些变量存储在三个不同的位…

Web 性能入门指南-1.5 创建 Web 性能优化文化的最佳实践

最成功的网站都有什么共同点&#xff1f;那就是他们都有很强的网站性能和可用性文化。以下是一些经过验证的有效技巧和最佳实践&#xff0c;可帮助您建立健康、快乐、值得庆祝的性能文化。 创建强大的性能优化文化意味着在你的公司或团队中创建一个如下所示的反馈循环&#xff…

MySQL入门学习-深入索引.匹配顺序

在 MySQL 中&#xff0c;索引的匹配顺序是指在查询执行时&#xff0c;数据库系统根据查询条件中涉及的列和索引的结构&#xff0c;决定如何使用索引来提高查询效率的方式。 以下是关于深入索引和匹配顺序的一些详细信息&#xff1a; 一、索引的类型&#xff1a; - B-Tree 索引…

centos7|Linux操作系统|编译最新的OpenSSL-3.3,制作rpm安装包

一、 为什么需要编译rpm包 通常&#xff0c;我们需要安装某个软件&#xff0c;尤其是在centos7这样的操作系统&#xff0c;一般是通过yum包管理器来安装软件&#xff0c;yum的作用是管理rpm包的依赖关系&#xff0c;自动的处理rpm包的安装顺序&#xff0c;安装依赖等的相关问…

交换机和路由器的工作流程

1、交换机工作流程&#xff1a; 将接口中的电流识别为二进制&#xff0c;并转换成数据帧&#xff0c;交换机会记录学习该数据帧的源MAC地址&#xff0c;并将其端口关联起来记录在MAC地址表中。然后查看MAC地址表来查找目标MAC地址&#xff0c;会有一下一些情况&#xff1a; MA…

通过Bugly上报的日志查找崩溃闪退原因

第一步&#xff0c;解析堆栈信息 在bugly上收集到的信息是这样的 0x000000010542e46c 0x0000000104db4000 6792300 OS应用发生崩溃时&#xff0c;系统会生成一份崩溃日志&#xff0c;这份日志中包含了崩溃时的堆栈信息&#xff0c;但这些堆栈信息并非直接指向源代码&#x…

【漏洞复现】某赛通 电子文档安全管理系统 多个接口存在远程命令执行漏洞

免责声明&#xff1a; 本文内容旨在提供有关特定漏洞或安全漏洞的信息&#xff0c;以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步&#xff0c;并非出于任何恶意目的。阅读者应该明白&#xff0c;在利用本文提到的漏洞信息或进行相关测…

【RAG 实践】LlamaIndex 快速实现一个基于 OpenAI 的 RAG

这是 LlamaIndex 官方 Starter Tutorial 中 demo&#xff0c;用很少的代码来使用 OpenAI 快速实现出一个 RAG。 Ref: Starter Tutorial | LlamaIndex 代码&#xff1a;llamindex-rag-demo | Kaggle 1&#xff09;设置 OpenAI Token 这里使用国内的 OpenAI 中转 API token&…

【Python】数据分析-Matplotlib绘图

数据分析 Jupyter Notebook Jupyter Notebook: 一款用于编程、文档、笔记和展示的软件。 启动命令&#xff1a; jupyter notebookMatplotlib 设置中文格式&#xff1a;plt.rcParams[font.sans-serif] [KaiTi] # 查看本地所有字体 import matplotlib.font_manager a sorted…

802.11ax RU - 传输的最小单元

子载波 无线信号是加载在某个固定频率上进行传输的&#xff0c;这个频率被称为载波。802.11标准中&#xff0c;对传输频率有更新的划分&#xff0c;而这些划分的频率被称为子载波。Wi-Fi 6中&#xff0c;以20Mhz信道为例&#xff0c;20Mhz信道被划分成256个子载波&#xff0c;…

QML 鼠标和键盘事件

学习目标&#xff1a;Qml 鼠标和键盘事件 学习内容 1、QML 鼠标事件处理QML 直接提供 MouseArea 来捕获鼠标事件&#xff0c;该操作必须配合Rectangle 获取指定区域内的鼠标事件, 2、QML 键盘事件处理&#xff0c;并且获取对OML直接通过键盘事件 Keys 监控键盘任意按键应的消…

基于3D感知的端到端具身操作论文导读

DexIL&#xff1a;面向双臂灵巧手柔性操作的端到端具身执行模型 模型架构 输入&#xff1a;   观测Ot&#xff1a; RGB点云&#xff0c;使用PointNet进行编码;   状态St&#xff1a; 双臂末端7x2Dof位姿16x2灵巧手关节位置&#xff0c;只进行归一化&#xff0c;无编码&am…

Linux Win 10 Windows上安装Ollama部署大模型qwen2 7b/15配置启动 LangChain-ChatChat 0.2.10进行对话

Win 10 Window安装Ollama部署qwen2 7b LangChain-ChatChat 环境说明 Win 10 Python 3.11.9 LangChain-ChatChat 0.20 Ollama 0.2.10 Qwen2 1.5b/7b Windows 安装Ollama 下载并安装Windows版Ollama https://ollama.com/download#/ 下载大模型qwen2:1.5b或者qwen2:7b 在命令…

prompt第三讲-PromptTemplate

文章目录 前提回顾PromptTemplateprompt 模板定义以f-string渲染格式以mustache渲染格式以jinja2渲染格式直接实例化PromptTemplatePromptTemplate核心变量 prompt value生成invokeformat_prompt(不建议使用)format(不建议使用) batchstreamainvoke PromptTemplate核心方法part…

从实时监控到风险智能预警:EasyCVR视频AI智能监控技术在工业制造中的应用

随着科技的不断进步和工业制造领域的持续发展&#xff0c;传统的生产管理方式正逐渐转型&#xff0c;迈向更加智能、高效和安全的新阶段。在这个变革过程中&#xff0c;视频智能监控技术凭借其独特的优势&#xff0c;成为工业制造领域的管理新引擎&#xff0c;推动着从“制造”…

访问者模式(大话设计模式)C/C++版本

访问者模式 C #include <iostream> #include <list> using namespace std;class Visitor;// 组成Computer的各组件基类 class Element { public:Element(string strName) : m_strName(strName) {}string GetName(){return m_strName;}// 组件接受访问者访问的接口…

前端大文件上传实现切片上传 + 断点续传 + 秒传 + 暂停上传 + 恢复上传

前情提要&#xff1a; 在前端无论是Vue还是React技术栈&#xff0c;都离不开上传业务代码 一般情况下&#xff0c;前端上传文件就是new FormData&#xff0c;然后把文件 append 进去&#xff0c;然后post发送给后端就完事了&#xff0c;但是大文件可不能这么搞&#xff0c;因…

【YOLOv8系列】(三)YOLOv8应用实践:从识别到分类再到分割的全方位视觉解决方案

随着深度学习技术的不断演进&#xff0c;目标检测领域的明星模型——YOLO系列&#xff0c;已经发展到了第八代&#xff0c;即YOLOv8。这一版本不仅继承了前辈们快速与准确的特点&#xff0c;还实现了功能上的巨大飞跃&#xff0c;成为了一个全能型的视觉AI工具箱&#xff0c;支…

如何实现一个二叉搜索树

实现一个二叉搜索树&#xff08;Binary Search Tree, BST&#xff09;主要涉及定义树的结构、插入新节点、搜索节点、以及可能的其他操作&#xff0c;如删除节点、遍历树等。下面是一个简单的二叉搜索树的实现示例&#xff0c;使用Python语言&#xff1a; 定义树节点 首先&am…

maven的settings.xml无法正确配置本地仓库路径

因为以前使用过新版的maven&#xff0c;现在要换个版本使用。 在配置新的本地仓库路径的时候突然发现居然idea居然识别不了我settings.xml里面配置的路径。 我很是震惊&#xff0c;明明之前一直都是这样子配置的。怎么突然间不行了。当我冥思苦想&#xff0c;在网上搜寻资料无果…