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.rhkb.cn/news/378292.html

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

相关文章

【经验分享】关于静态分析工具排查 Bug 的方法

文章目录 编译器的静态分析cppcheck安装 cppcheck运行 cppcheck 程序员的日常工作&#xff0c;不是摸鱼扯皮&#xff0c;就是在写 Bug。虽然这是一个梗&#xff0c;但也可以看出&#xff0c;程序员的日常一定绕不开 Bug。而花更少的时间修复软件中的 Bug&#xff0c;且不引入新…

Bug:时间字段显示有问题

Bug&#xff1a;时间字段显示有问题 文章目录 Bug&#xff1a;时间字段显示有问题1、问题2、解决方法一&#xff1a;添加注解3、解决方法二&#xff1a;消息转换器自定义对象映射器配置消息转换器 1、问题 ​ 在后端传输时间给前端的时候&#xff0c;发现前端的时间显示有问题…

汽车开发阶段(OTS/VFF/PVS/OS/SOP)

OTS&#xff1a;即英语中的Off Tooling Sample&#xff0c;通常被称为工装样件。它指的是通过配套设备、工装夹具以及模具制造出来的样品&#xff0c;但并不强调生产的时间效率&#xff0c;主要用于验证产品的设计能力。 VFF&#xff1a;在德语中表示为Vorserien Freigabefahr…

太速科技-FMC207-基于FMC 两路QSFP+光纤收发子卡

FMC207-基于FMC 两路QSFP光纤收发子卡 一、板卡概述 本卡是一个FPGA夹层卡&#xff08;FMC&#xff09;模块&#xff0c;可提供高达2个QSFP / QSFP 模块接口&#xff0c;直接插入千兆位级收发器&#xff08;MGT&#xff09;的赛灵思FPGA。支持利用Spartan-6、Virtex-6、Kin…

eNsp公司管理的网络NAT策略搭建

实验拓扑图 实验需求&#xff1a; 7&#xff0c;办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 8&#xff0c;分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器 9&#xff0c;多出口环境基于带…

JavaWeb(四:Ajax与Json)

一、Ajax 1.定义 Ajax&#xff08;Asynchronous JavaScript And XML&#xff09;&#xff1a;异步的 JavaScript 和 XML AJAX 不是新的编程语言&#xff0c;指的是⼀种交互方式&#xff1a;异步加载。 客户端和服务器的数据交互更新在局部页面的技术&#xff0c;不需要刷新…

VUE:跨域配置代理服务器

//在vite.config。js中&#xff0c;同插件配置同级进行配置server:{proxy:{"/myrequest":{//代理域名&#xff0c;可自行修改target:"https://m.wzj.com/",//访问服务器的目标域名changeOrigin:true,//允许跨域configure:(proxy,options) > {proxy.on(&…

未知物材料成分配方检测分析

材料成分配方分析是一种通过分析材料的化学成分、结构和性质来确定其组成和配方的方法。这对于产品质量控制、新产品研发、工业问题解决和环保等领域具有重要意义。进行材料成分配方分析通常需要以下步骤&#xff1a; 1. 样品采集&#xff1a;采集需要分析的材料样品&#xff0…

从 Pandas 到 Polars 十八:数据科学 2025,对未来几年内数据科学领域发展的预测或展望

我在2021年底开始使用Polars和DuckDB。我立刻意识到这些库很快就会成为数据科学生态系统的核心。自那时起&#xff0c;这些库的受欢迎程度呈指数级增长。 在这篇文章中&#xff0c;我做出了一些关于未来几年数据科学领域的发展方向和原因的预测。 这篇文章旨在检验我的预测能力…

再谈有关JVM中的四种引用

1.强引用 强引用就是我们平时使用最多的那种引用&#xff0c;就比如以下的代码 //创建一个对象 Object obj new Object();//强引用 这个例子就是创建了一个对象并建立了强引用&#xff0c;强引用一般就是默认支持的当内存不足的时候&#xff0c;JVM开始垃圾回收&#xff0c…

【Linux系统编程】软硬链接和动静态库

一&#xff0c;硬链接 1-1&#xff0c;硬链接的认识 Linux下的硬链接本质是在指定的目录下&#xff0c;插入新的文件名和目标文件的眏射关系&#xff0c;并让inode的引用计数加一&#xff0c;这里我们通过 ls 指令可查看到文件详细信息种的硬链接数。这里可参考文件系统的文章…

Linux - 冯-诺依曼体系结构、初始操作系统

目录 冯•诺依曼体系 结构推导 内存提高效率的方法 数据的流动过程 体系结构相关知识 初始操作系统 定位 设计目的 操作系统之上之下分别有什么 管理精髓&#xff1a;先描述&#xff0c;再组织 冯•诺依曼体系 结构推导 计算机基本工作流程图大致如下&#xff1a; 输入设备&a…

Web3D:WebGL为什么在渲染性能上输给了WebGPU。

WebGL已经成为了web3D的标配&#xff0c;市面上有N多基于webGL的3D引擎&#xff0c;WebGPU作为挑战者&#xff0c;在渲染性能上确实改过webGL一头&#xff0c;由于起步较晚&#xff0c;想通过这个优势加持&#xff0c;赶上并超越webGL仍需时日。 贝格前端工场为大家分享一下这…

【微信小程序知识点】自定义构建npm

在实际开发中&#xff0c;随着项目的功能越来越多&#xff0c;项目越来越复杂&#xff0c;文件目录也变得很繁琐&#xff0c;为了方便进行项目的开发&#xff0c;开发人员通常会对目录结构进行优化调整&#xff0c;例如&#xff1a;将小程序源码放到miniprogram目录下。 &…

JuiceFS缓存特性

缓存 对于一个由对象存储和数据库组合驱动的文件系统&#xff0c;缓存是本地客户端与远端服务之间高效交互的重要纽带。读写的数据可以提前或者异步载入缓存&#xff0c;再由客户端在后台与远端服务交互执行异步上传或预取数据。相比直接与远端服务交互&#xff0c;采用缓存技…

SAP PP学习笔记28 - 生产订单的收货及品质管理

上一章讲了生产订单的很多概念&#xff0c;比如确认&#xff08;报工&#xff09;以及报工的各种形式&#xff0c;反冲&#xff0c;自动入库等。 SAP PP学习笔记27 - Confirmation(报工/确认&#xff09;(CO11&#xff0c;CO11N&#xff0c;CO15&#xff0c;CO12)&#xff0c;…

【算法】LRU缓存

难度&#xff1a;中等 题目&#xff1a; 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;…

【HarmonyOS】关于鸿蒙消息推送的心得体会 (一)

【HarmonyOS】关于鸿蒙消息推送的心得体会&#xff08;一&#xff09; 前言 这几天调研了鸿蒙消息推送的实现方式&#xff0c;形成了开发设计方案&#xff0c;颇有体会&#xff0c;与各位分享。 虽然没做之前觉得很简单的小功能&#xff0c;貌似只需要和华为服务器通信&…

LDAPWordlistHarvester:基于LDAP数据的字典生成工具

关于LDAPWordlistHarvester LDAPWordlistHarvester是一款功能强大的字典列表生成工具&#xff0c;该工具可以根据LDAP中的详细信息生成字典列表文件&#xff0c;广大研究人员随后可以利用生成的字典文件测试目标域账号的非随机密码安全性。 工具特征 1、支持根据LDAP中的详细信…

高效运转!便携式果汁机必备霍尔板

文章目录 文章目录 前言 一、 直流电机原理 二、 通过霍尔传感器控制无刷直流电机 三、 霍尔在霍尔板上的位置 前言 今天给大家带来一款运用在果汁机上的霍尔板&#xff0c;饮料再好&#xff0c;终归是饮料&#xff0c;果汁再好喝&#xff0c;也不如自己亲自榨得健康。 生活水…