CSS-语法、选择器

📚详见 W3scholl，本篇只做快速思维索引。

概述

CSS 是一种描述 HTML 文档样式的语言。

有三种插入样式表的方法：

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

📅 外部 CSS
外部样式表存储在.css文件中。HTML 页面必须在 head 部分的<link>元素内包含对外部样式表文件的引用。通过使用外部样式表文件，您只需更改一个文件即可更改整个网站的外观！
HTML:

<!DOCTYPE html>
<html><head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>

mystyle.css:

body {background-color: lightblue;
}h1 {color: navy;margin-left: 20px;
}

📅 内部 CSS
内部样式是在 head 部分的<style>元素中进行定义。
HTML:

<!DOCTYPE html>
<html><head>
<style>
body {background-color: linen;
}h1 {color: maroon;margin-left: 40px;
} 
</style>
</head><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>

📅 行内 CSS
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

<!DOCTYPE html>
<html><body>
<h1 style="color:blue; text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body></html>

⚠️注：如果在不同样式表中为同一选择器（元素）定义了一些属性，优先级为：行内样式 > 外部和内部样式表（取决于在 head 中声明的位置）

CSS 语法

CSS 规则集（rule-set）由选择器和声明块组成：
在这里插入图片描述

  • 选择器：指向您需要设置样式的 HTML 元素。
  • 声明块：每条声明都包含一个 CSS 属性名称和一个值，以冒号 : 分隔。多条 CSS 声明用分号 ; 分隔，声明块用花括号 {} 括起来。
p {color: red;text-align: center;
}
  • p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<p>）。
  • color 是属性名，red 是属性值。
  • text-align 是属性名，center 是属性值。

CSS 选择器

CSS 选择器分为五类：

  • 简单选择器（根据名称、id、类来选取元素）
  • 组合器选择器（根据它们之间的特定关系来选取元素）
  • 伪类选择器（根据特定状态选取元素）
  • 伪元素选择器（选取元素的一部分并设置其样式）
  • 属性选择器（根据属性或属性值来选取元素）

实例内容详见 📖 CSS 选择器

简单选择器

分为元素选择器、id 选择器、类选择器、通用选择器、分组选择器

CSS 元素选择器

p {text-align: center;color: red;
}

页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色。

CSS id 选择器

元素的 id 在页面中是唯一的，因此 id 选择器用于选择唯一的元素。

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {text-align: center;color: red;
}
</style>
</head><body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body></html>

页面上的 id="para1" 的 <p> 元素将居中对齐，并带有红色文本颜色。

CSS 类选择器

📌 类选择器选择有特定 class 属性的 HTML 元素。. 后面跟类名。

<!DOCTYPE html>
<html>
<head>
<style>
.center {text-align: center;color: red;
}
</style>
</head><body>
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> 
</body></html>

所有带有 class="center" 的 HTML 元素将为红色且居中对齐

📌 还可以指定只有特定的 HTML 元素会受类的影响。

p.center {text-align: center;color: red;
}

只有具有 class="center" 的 <p> 元素会居中对齐

📌 HTML 元素也可以引用多个类。

<p class="center large">这个段落引用两个类。</p>

<p> 元素将根据 class="center" 和 class="large" 进行样式设置

CSS 通用选择器

通用选择器 * 选择页面上的所有的 HTML 元素。

* {text-align: center;color: blue;
}

上面的 CSS 规则会影响页面上的每个 HTML 元素

CSS 分组选择器

对选择器进行分组，以最大程度地缩减代码。如需对选择器进行分组，请用逗号来分隔每个选择器。

h1, h2, p {text-align: center;color: red;
}

组合选择器

组合器是解释选择器之间关系的某种机制。分为：

  • 后代选择器 (空格)
  • 子选择器 (>)
  • 相邻兄弟选择器 (+)
  • 通用兄弟选择器 (~)

后代选择器

后代选择器匹配属于指定元素后代的所有元素。

div p {background-color: yellow;
}

选择 <div> 元素内的所有 <p> 元素

子选择器

子选择器匹配属于指定元素子元素的所有元素。

div > p {background-color: yellow;
}

选择属于 <div> 元素子元素的所有 <p> 元素

⚠️注：子选择器和后代选择器区别在于，子选择器匹配指定元素的子元素，而后代选择器匹配指定元素的所有元素（包括子、孙、重孙…）

<div><p>div 中的段落 1。</p><p>div 中的段落 2。</p><section><p>div 中的段落 3。</p></section>
</div>

如果是后代选择器，div 中的段落 3。会黄底，但子选择器不会黄底。

相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，而且只作用其后一个元素。

div + p {background-color: yellow;
}

通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

div ~ p {background-color: yellow;
}

伪类选择器

伪类用于定义元素的特殊状态。用于设置鼠标悬停在元素上时的样式、设置元素获得焦点时的样式

/* 未访问的链接 */
a:link {color: #FF0000;
}/* 已访问的链接 */
:visited {color: #00FF00;
}/* 鼠标悬停链接 */
a:hover {color: #FF00FF;
}/* 已选择的链接 */
a:active {color: #0000FF;
}

设置链接 <a> 不同状态下的样式

div:hover {background-color: blue;
}

在 <div> 元素上使用 :hover 伪类的实例

伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

p::first-letter {color: #ff0000;font-size: xx-large;
}

::first-letter 伪元素用于向文本的首字母添加特殊样式。例子设置所有 <p> 元素中文本的首字母格式。

属性选择器

用于设置带有 特定属性 或 属性值 的 HTML 元素的样式。

a[target] {background-color: yellow;
}

选择所有带有 target 属性的 <a> 元素

a[target="_blank"] { background-color: yellow;
}

选取所有带有 target="_blank" 属性的 <a> 元素

input[type="text"] {width: 150px;display: block;margin-bottom: 10px;background-color: yellow;
}input[type="button"] {width: 120px;margin-left: 35px;display: block;
}

设置表单不同 type 元素的样式

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

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

相关文章

【数据库】SQL简介

【数据库】SQL简介

SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是一种用于管理关系型数据库管理系统&#xff08;RDBMS&#xff09;的标准化语言。它用于访问和操作数据库中的数据&#xff0c;执行各种任务&#xff0c;如插入、更新、删除和检索数据&#x…
阅读更多...
zdpreact_antdesginpro 继续优化Ant Design开发的后台管理系统

zdpreact_antdesginpro 继续优化Ant Design开发的后台管理系统

登录后台管理系统 首先&#xff0c;将项目跑起来&#xff1a; 浏览器访问&#xff1a;http://localhost:8000/user/login 通过上次的优化&#xff0c;我们已经能够使用自己的账号密码进行登录了&#xff1a; 底部优化 登录后台以后&#xff0c;目前的底部是长这样的&…
阅读更多...
C语言 练习题

C语言 练习题

目录 1.统计二进制中1的个数 方法1 方法2 方法3 2.求两个数二进制中不同位的个数 方法1 方法2 3.打印整数二进制的奇数位和偶数位 4.用“ * ”组成的X形图案 5.根据年份和月份判断天数 6.结语 1.统计二进制中1的个数 【题目内容】 写一个函数返回参数二进制中 1 的个…
阅读更多...
Quantinuum与微软携手突破：开创容错量子计算新纪元

Quantinuum与微软携手突破：开创容错量子计算新纪元

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
Linux--03---虚拟机网络配置、拍摄快照和克隆

Linux--03---虚拟机网络配置、拍摄快照和克隆

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.虚拟机网络配置1.虚拟机的联网模式模式1 仅主机模式特点模式2 桥接模式特点模式3 NAT模式特点关于模式的选择 2. 修改网络配置信息3.修改虚拟机ens33网卡的网络配…
阅读更多...
ElasticSearch分词检索

ElasticSearch分词检索

1. 倒排索引&#xff1a;表示一种数据结构&#xff0c;分词词条与文档id集合的隐射关系 2. 它跟关系型数据库是一种互补的关系&#xff0c;因为关系型数据库支持事务操作&#xff0c;满足ACID原则 #ik分词器下载 https://github.com/infinilabs/analysis-ik/releases POST /_a…
阅读更多...
c# wpf LiveCharts MVVM绑定 简单试验

c# wpf LiveCharts MVVM绑定 简单试验

1.概要 c# wpf LiveCharts MVVM绑定 简单试验 2.代码 <Window x:Class"WpfApp3.Window3"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://s…
阅读更多...
axios快速入门

axios快速入门

一、环境配置 1.1概述 上古浏览器页面在向服务器请求数据时&#xff0c;因为返回的是整个页面的数据&#xff0c;页面都会强制刷新一下&#xff0c;这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据&#xff0c;但是从服务器端发送的却是整个页面的数据&#…
阅读更多...
Whisper报错：ffmpeg返回异常值1

Whisper报错：ffmpeg返回异常值1

本地使用cmd命令显示ffmpeg可以用&#xff0c;但是使用python代码调用whisper包就报错。 查看了whisper源码&#xff0c;发现其也是调用的cmd来使用ffmpeg&#xff0c;于是修改其audio.py中的audio方法中ffmpeg的具体位置完美运行。
阅读更多...
HTML：表单

HTML：表单

案例&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>报名表</title> </head> <body><form action"demo/welcome.php" method"post">名字&#xff1a;<inpu…
阅读更多...
243.回文链表

243.回文链表

给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为 回文链表 。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;head …
阅读更多...
复现chatgpt_ros,需要openapi key

复现chatgpt_ros,需要openapi key

&#xff11;&#xff0e;　前置工作&#xff1a; 现在&#xff55;buntu系统是20.04ros1&#xff0c;现在用docker新建并安装ros2&#xff1a; 最简单的&#xff0c;用大佬的一键安装&#xff1a; wget http://fishros.com/install -O fishros && . fishros 其次自己装…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023