CSS基础和选择器

【一】CSS基础

【1】什么是CSS

  • CSS（层叠样式表）是一种用于描述HTML（超文本标记语言）文档外观样式的语言。
  • 它通过定义样式规则来控制网页的布局、字体、颜色、背景等外观效果，使网页变得更加美观和可读。

【2】注释语法

  • 在CSS中，注释可以用来添加说明、注解或者暂时禁用一些代码。
  • 注释在CSS文件中不会被浏览器解析和显示。
  • 注释以/*开始，以*/结束，之间的内容将被视为注释。
/* 注释内容 */

【3】语法结构

  • CSS的语法结构由选择符和声明块组成。
  • 选择符指定要应用样式的HTML元素或者元素组。例如，可以使用标签名、类名、ID等作为选择符。
  • 声明块由一对花括号{}包围，包含了一条或多条样式声明。每条样式声明由一个样式属性和对应的样式属性值组成，用冒号:分隔。多个样式属性之间用分号;分隔。
选择符 {样式属性: 样式属性值;样式属性: 样式属性值, 样式属性值, 样式属性值;
}
  • 在实际的CSS文件中，通常会有大量的样式规则，可以根据需要对不同的HTML元素进行样式定义，使网页达到所需的外观效果。
  • 当CSS样式规则较多时，可以使用注释来辅助辨别和查找，提高代码的可读性和维护性。

【4】css的三种引入方式

（1）行内式
  • 在HTML标签内部使用style属性直接编写CSS样式。这种方式将HTML和CSS混合在一起，增加了耦合度，一般不推荐使用。
<h1 style="color: blue">注册页面</h1>
（2）style标签内部直接书写
  • 在HTML文件的<head>标签内部使用<style>标签，直接编写CSS代码。
  • 这种方式适合于简单的样式定义，方便查看和修改。
<head><style>/*蓝色一级标题*/h1 {color: blue;}</style>
</head>
（3）引入外部CSS文件
  • 在HTML文件的<head>标签内使用<link>标签引入外部CSS文件。
  • 这是最正规的方式，可以将CSS代码与HTML代码分离，提高代码的可维护性和复用性。
<!--html文件-->
<!DOCTYPE html>
<html>
<head><title>页面标题</title><meta charset="UTF8"><link rel="stylesheet" href="test.css">
</head>
<body>
<h1>注册页面</h1>
</body>
</html>

/*test.css文件*/
h1 {color: blue;
}

【二】选择器

【1】基本选择器

  • 在CSS中，选择器用于选取HTML文档中的元素，并将样式应用于这些元素。
  • 选择器根据其类型和语法的不同，可以选择不同的元素。
（1）元素/标签选择器（Element/Tag Selector）
  • 通过HTML元素的标签名选择元素。
  • 例：h1选择器选取所有<h1>标签元素。
/* 元素/标签选择器 */
h1 {/*一级标签为蓝色*/color: blue;
}
（2）类选择器（Class Selector）
  • 通过HTML元素的class属性选择元素。
  • 类选择器以.开头，后面跟随类名。
  • 例：.highlight选择器选取所有具有class="highlight"的元素。
/* 类选择器 */
.highlight {/*类为hightlight的背景设为黄色*/background-color: yellow;
}
（3）ID选择器（ID Selector）
  • 通过HTML元素的id属性选择元素。
  • ID选择器以#开头，后面跟随ID名。
  • 例：#header选择器选取具有id="header"的元素。
/* ID选择器 */
#header {/*ID为header的字体为24像素*/font-size: 24px;
}
（4）通用选择器（Universal Selector）
  • 选择所有的HTML元素。
  • 通用选择器使用*表示。
  • 例：*选择器选取所有元素。
/* 通用选择器 */
* {/*所有元素的内外边距都设为0*/margin: 0;padding: 0;
}

【2】组合选择器

  • 组合选择器是CSS中用于选择特定元素关系的选择器。常见的组合选择器包括后代选择器、儿子选择器、毗邻选择器和弟弟选择器。
（1）后代选择器（Descendant Selector）
  • 使用空格表示，选择某个元素的后代元素。
  • 例：div p选择器选取所有在<div>标签内部的<p>标签元素。
（2）儿子选择器（Child Selector）
  • 使用>符号表示，选择某个元素的直接子元素。
  • 例：div > span选择器选取所有直接作为<div>标签子元素的<span>标签元素。
（3）毗邻选择器（Adjacent Sibling Selector）
  • 使用+符号表示，选择某个元素的下一个紧邻的兄弟元素。
  • 例：div + a选择器选取紧跟在<div>标签后面的第一个<a>标签元素。
（4）弟弟选择器（General Sibling Selector）
  • 使用~符号表示，选择某个元素之后的所有兄弟元素。
  • 例如，div ~ a选择器选取所有在<div>标签后面的<a>标签元素。
（5）示例说明
<div id="d1">div1<div id="d2">div2<p>p1</p></div><p>p2<span>span1</span></p><span>span2</span>
</div>
  • 对于div1来说，div2、p2、span2都是儿子。
  • 对于div2、p2、span2来说，div1是父亲。
  • 对于p1来说，div2是父亲，div1是爷爷（可以将div1和div2统称为祖先）。
  • 对于span2来说，div2、p2是哥哥，span2是弟弟。
  • div1内部所有的标签，无论层级如何，都可以称之为div1的后代。
/* 1.儿子选择器（关键符号是大于号） */
#d1 > span {/* 选择id为d1的标签内部所有的儿子span */color: red;
}/* 2.后代选择器（关键符号是空格） */
#d1 span {/* 选择id为d1的标签内部所有的后代span */color: blue;
}/* 3.毗邻选择器（关键符号是加号） */
#d2 + p {/* 选择id为d1的标签同级别下面紧挨着第一个p标签 */color: green;
}/* 4.弟弟选择器（关键符号是小波浪号） */
#d2 ~ p {/* 选择id为d1的标签同级别下面所有p标签 */color: brown;
}

【3】属性选择器

  • 属性选择器是CSS中用于选择具有特定属性的元素的选择器。
  • 属性选择器可以根据属性的存在、属性值的匹配等条件来选择元素。
（1）含有某个属性
  • 选择具有指定属性的元素。
  • 例：[type]选择器选取所有具有type属性的元素。
（2）含有某个属性并且有某个值
  • 选择具有指定属性且属性值与指定值匹配的元素。
  • 例：[type='text']选择器选取所有type属性值为text的元素。
（3）含有某个属性并且有某个值的某个标签
  • 选择某个标签内具有指定属性且属性值与指定值匹配的元素。
  • 例：div[type='text']选择器选取所有<div>标签内具有type属性值为text的元素。

【4】选择器分组和嵌套

（1）分组
  • 分组选择器允许同时选择多个不同类型的元素，并为它们应用相同的样式。
  • 分组选择器使用逗号 , 将不同的选择器进行分隔。
div, p, span {color: red;
}
（2）嵌套
  • 嵌套选择器允许选择某个元素内部的特定元素。
.container {background-color: green;/* 选择 .container 元素内部的 .box 元素 */.box {background-color: yellow;}
}

【5】伪类选择器

  • 伪类选择器是 CSS 中用于选择元素的特殊选择器

  • 根据元素的状态或位置选择元素，而不仅仅是根据元素本身的标记名、类名或其他属性来选择。

（1）:hover
  • 选择鼠标悬停在元素上的状态。可以用来添加鼠标悬停时的样式效果。
/*鼠标悬停在链接上时将链接的文本颜色设置为红色*/
a:hover {color: red;
}
（2）:active
  • 选择元素被激活（被点击）的状态。
  • 通常用于给按钮或链接添加点击效果。
/*按钮被点击时将按钮的背景颜色设置为蓝色*/
button:active {background-color: blue;
}
（3）:focus
  • 选择当前获得焦点的元素。
  • 适用于表单元素，当用户点击或使用 Tab 键导航时，元素会获得焦点。
/*输入框获得焦点时将边框颜色设置为绿色*/
input:focus {border-color: green;
}
（4）:first-child
  • 选择作为其父元素的第一个子元素的元素。
  • 可以用来选择列表中的第一个元素或某个容器中的第一个子元素。
/*将选择无序列表中的第一个列表项，并将其文本设置为粗体*/
ul li:first-child {font-weight: bold;
}
（5）:last-child
  • 选择作为其父元素的最后一个子元素的元素。类似于 :first-child，但选择的是最后一个子元素。
/*将选择无序列表中的最后一个列表项，并将其文本颜色设置为紫色*/
ul li:last-child {color: purple;
}
（6）:nth-child(n)
  • 选择作为其父元素的第 n 个子元素的元素。
  • 可以使用具体的数字、关键字（如 even 表示偶数，odd 表示奇数），或者公式来选择特定的子元素。
/*将选择无序列表中的奇数位置的列表项，并将它们的背景颜色设置为浅灰色*/
ul li:nth-child(odd) {background-color: lightgray;
}

【6】伪元素选择器

  • 伪元素选择器允许在元素的特定部分之前或之后插入内容，并对其进行样式化。
  • 它们以双冒号 :: 开头，并用于选择元素的虚拟部分，而不是实际存在于 DOM 中的元素。
  • befor 和 after 通常都是用来清除浮动带来的影响，即父标签塌陷的问题
（1）::before
  • 在选定元素的内容之前插入生成的内容。可以用于添加装饰性的内容，如图标或装饰符号。
/*在每个p元素的内容之前插入>>，并将其颜色设置为红色*/
p::before {content: ">>";color: red;
}
（2）::after
  • 在选定元素的内容之后插入生成的内容。可以用于添加额外的内容或装饰性元素。
/*在每个链接的内容之后插入 " (外部链接)"，并将其样式设置为斜体*/
a::after {content: " (外部链接)";font-style: italic;
}
（3）::first-line
  • 选择元素的第一行文本。可以用于对段落的第一行或标题的第一行应用特殊样式。
/*将标题元素的第一行文本设置为 24 像素大小和粗体*/
h1::first-line {font-size: 24px;font-weight: bold;
}
（4）::selection
  • 选择用户选择的文本部分。可以用于自定义用户选择文本的样式。
/*将用户选择的文本的背景颜色设置为黄色，文本颜色设置为黑色*/
::selection {background-color: yellow;color: black;
}
（5）::first-letter
  • 选择元素的第一个字母或第一个字符，并对其应用样式。
  • 这个选择器可以用于段落、标题、列表项等元素。
/*每个段落的第一个字母，字体大小设置为 24 像素，颜色设置为红色，并使其向左浮动*/
p::first-letter {font-size: 24px;color: red;float: left;
}

【7】选择器优先级

  • 选择器优先级是用于确定在多个选择器应用于同一个元素时，哪个选择器的样式将具有更高的优先级。
  • 优先级是根据选择器的特定组合和权重来计算的，一般情况下，优先级越高的选择器的样式将被应用。
（1）选择器不同
  1. 内联样式：具有最高优先级的是直接应用在元素上的内联样式。内联样式是通过元素的 style 属性来定义的。
  2. ID 选择器：ID 选择器具有比大多数其他选择器更高的优先级。ID 选择器以 # 符号开头，后面跟着元素的唯一标识符。
  3. 类选择器、属性选择器和伪类选择器：这些选择器具有相同的优先级，它们以 .、[] 或 : 开头。
  4. 元素选择器和伪元素选择器：这些选择器具有最低的优先级。元素选择器是指对元素类型进行选择，而伪元素选择器以 :: 开头。
（2）选择器相同
  • 就近原则

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

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

相关文章

第二证券：美国加息对中国股市的影响？美联储加息利好还是利空股市？

第二证券：美国加息对中国股市的影响？美联储加息利好还是利空股市？

美国加息是一种紧缩的钱银政策&#xff0c;会招引出资者添加银行的出资&#xff0c;导致社会上的流动钱银减少&#xff0c;然后间接地导致股市流动资金减少&#xff0c;股市跌落&#xff0c;引起商场上的出资者恐慌&#xff0c;大量卖出&#xff0c;添加商场上的空方力量&#…
阅读更多...
电路设计（25）——4位数字频率计的multism仿真及PCB设计

电路设计（25）——4位数字频率计的multism仿真及PCB设计

1.设计要求 使用4位数码管&#xff0c;显示输入信号的频率。完成功能仿真后&#xff0c;用AD软件&#xff0c;画出原理图以及PCB。 2.电路设计 输入信号的参数为&#xff1a; 可见&#xff0c;输入为168HZ&#xff0c;测量值为170HZ&#xff0c;误差在可接受的范围内。 3.PCB设…
阅读更多...
C++ 和 C#的区别

C++ 和 C#的区别

如是我闻&#xff1a; C#&#xff08;发音为 “C sharp”&#xff09;和C是两种流行的编程语言&#xff0c;它们各有特点和用途。下面是这两种语言的一些主要区别&#xff1a; 设计理念和用途: C: 是一种多范式编程语言&#xff0c;支持过程化编程、面向对象编程、泛型编程等。…
阅读更多...
小程序怎么开发？怎么开发自己的小程序

小程序怎么开发？怎么开发自己的小程序

一、明确需求与定位 在开发小程序之前&#xff0c;需要明确需求. 首先&#xff0c;明确小程序的定位非常重要。我们需要确定小程序是为了提供便捷的购物体验还是特定领域的服务。明确定位可以帮助我们更好地设计和优化小程序的功能&#xff0c;以符合用户的期望和需求。 其次…
阅读更多...
VIO第3讲：基于优化的IMU与视觉信息融合之视觉残差雅可比推导

VIO第3讲：基于优化的IMU与视觉信息融合之视觉残差雅可比推导

VIO第3讲&#xff1a;基于优化的IMU与视觉信息融合之视觉残差函数构建 文章目录 VIO第3讲&#xff1a;基于优化的IMU与视觉信息融合之视觉残差函数构建3 视觉重投影残差的 Jacobian3.1 视觉重投影残差① 估计值&#xff08;预测值&#xff09;<1> 推导<2> 引出因子…
阅读更多...
分享Video.js观看Web视频流

分享Video.js观看Web视频流

界面效果 HTML结构 <div class"homePopup" ><div class"search_box animate__animated animate__fadeInDown" style"display: none;"><div class"van-search" style"background: rgba(0, 0, 0, 0);">&…
阅读更多...
物业第三方满意度调查抽样方法有哪些

物业第三方满意度调查抽样方法有哪些

本文由群狼调研&#xff08;湖南售楼中心神秘顾客&#xff09;出品&#xff0c;欢迎转载&#xff0c;请注明出处。在物业服务行业中&#xff0c;了解业主的需求和满意度至关重要。随着市场竞争的加剧&#xff0c;越来越多的物业公司选择通过第三方来进行满意度调查。物业第三方…
阅读更多...
[服务器-数据库]MongoDBv7.0.4不支持ipv6访问

[服务器-数据库]MongoDBv7.0.4不支持ipv6访问

文章目录 MongoDBv7.0.4不支持ipv6访问错误描述问题分析错误原因解决方式 MongoDBv7.0.4不支持ipv6访问 错误描述 报错如下描述 Cannot connect to MongoDB.No suitable servers found: serverSelectionTimeoutMS expired: [failed to resolve 2408]问题分析 首先确定其是…
阅读更多...
Android14 InputManager-InputReader的处理

Android14 InputManager-InputReader的处理

IMS启动时会调用InputReader.start()方法 InputReader.cpp status_t InputReader::start() {if (mThread) {return ALREADY_EXISTS;}mThread std::make_unique<InputThread>("InputReader", [this]() { loopOnce(); }, [this]() { mEventHub->wake(); });…
阅读更多...
Java SE 入门到精通—基础语法【Java】

Java SE 入门到精通—基础语法【Java】

敲重点&#xff01; 本篇讲述了比较重要的基础&#xff0c;是必须要掌握的 1.程序入口 在Java中&#xff0c;main方法是程序的入口点&#xff0c;是JVM&#xff08;Java虚拟机&#xff09;执行Java应用程序的起始点。 main方法的方法签名必须遵循下面规范&#xff1a; publ…
阅读更多...
【力扣白嫖日记】1987.上级经理已离职的公司员工

【力扣白嫖日记】1987.上级经理已离职的公司员工

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1978.上级经理已离职的公司员工 表&#xff1a;Employees 列名类型employee_idintnamevarcharmanager_idint…
阅读更多...
模式匹配算法汇总

模式匹配算法汇总

单模匹配算法 1. KMP算法 动态规划之 KMP 算法详解 彻底搞懂KMP算法原理 多模匹配 1. AC自动机
阅读更多...
DTV的LCN功能介绍

DTV的LCN功能介绍

文章目录 LCN简介LCN获取LCN Conflict LCN简介 Logical Channel Number&#xff08;LCN&#xff09;是数字电视系统中用于标识和组织频道的逻辑编号。LCN的目的是为了方便用户浏览和选择频道&#xff0c;使得数字电视接收设备能够根据这些逻辑编号对频道进行排序和显示。 LCN…
阅读更多...
【Elasticsearch专栏 02】深入探索：Elasticsearch为什么使用倒排索引而不是正排索引

【Elasticsearch专栏 02】深入探索：Elasticsearch为什么使用倒排索引而不是正排索引

文章目录 为什么使用倒排索引而不是正排索引&#xff1f;1.正排索引&#xff08;Forward Index&#xff09;2.倒排索引&#xff08;Inverted Index&#xff09;3.小结 为什么使用倒排索引而不是正排索引&#xff1f; Elasticsearch选择使用倒排索引而不是正排索引&#xff0c;…
阅读更多...
学习大数据所需的java基础(5)

学习大数据所需的java基础(5)

文章目录 集合框架Collection接口迭代器迭代器基本使用迭代器底层原理并发修改异常 数据结构栈队列数组链表 List接口底层源码分析 LinkList集合LinkedList底层成员解释说明LinkedList中get方法的源码分析LinkedList中add方法的源码分析 增强for增强for的介绍以及基本使用发2.使…
阅读更多...
【成都游戏业：千游研发之都的发展与机遇】

【成都游戏业：千游研发之都的发展与机遇】

成都游戏业&#xff1a; 千游研发之都的发展与机遇 作为我国西部游戏产业的龙头&#xff0c;成都这座城市正在高速发展&#xff0c;目标是崛起成为千亿级游戏研发之都。多年来&#xff0c;在政策扶持、人才汇聚以及文化底蕴等助力下&#xff0c;成都游戏业已经形成完整的产业链…
阅读更多...
C++从入门到精通 第十六章（STL常用算法）

C++从入门到精通 第十六章（STL常用算法）

写在前面&#xff1a; 本系列专栏主要介绍C的相关知识&#xff0c;思路以下面的参考链接教程为主&#xff0c;大部分笔记也出自该教程&#xff0c;笔者的原创部分主要在示例代码的注释部分。除了参考下面的链接教程以外&#xff0c;笔者还参考了其它的一些C教材&#xff08;比…
阅读更多...
MyBatis--02-1- MybatisPlus----条件构造器

MyBatis--02-1- MybatisPlus----条件构造器

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言AbstractWrapper 条件构造器官网文档https://baomidou.com/pages/10c804/#abstractwrapper](https://baomidou.com/pages/10c804/#abstractwrapper)![在这里插入…
阅读更多...
安全这么卷了吗？北京，渗透，4k，不包吃住，非实习

安全这么卷了吗？北京，渗透，4k，不包吃住，非实习

起初某HR找人发了条招聘信息 看到被卷到4k一个月被震惊到了 随后发布了朋友圈&#xff0c;引起来众多讨论 对此网友发表众多评价 越来越卷的工作现象确实是一个普遍存在的问题 另外&#xff0c;也可以考虑和雇主沟通&#xff0c; 寻求更合理的工作安排&#xff0c; 或者…
阅读更多...
[ 2024春节 Flink打卡 ] -- Paimon

[ 2024春节 Flink打卡 ] -- Paimon

2024&#xff0c;游子未归乡。工作需要&#xff0c;flink coding。觉知此事要躬行&#xff0c;未休&#xff0c;特记 Flink 社区希望能够将 Flink 的 Streaming 实时计算能力和 Lakehouse 新架构优势进一步结合&#xff0c;推出新一代的 Streaming Lakehouse 技术&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023