CSS规则集有什么用?
CSS 代表层叠样式表。它用于设置 HTML 元素的样式。 HTML 用于创建网页或向网页添加内容。之后,开发人员使用 CSS 以特定样式呈现 HTML 内容,使其看起来很棒。
CSS规则集主要包含两部分。一个是 CSS 选择器,另一个是声明块。
CSS选择器用于选择HTML元素,声明块包含键值格式的CSS属性以应用于HTML元素。
语法
用户可以按照以下语法使用 CSS 规则集来设置 HTML 元素的样式。
selector { /* declaration block */ }
在上面的语法中,‘selector’可以是HTML元素的类名、id等,用于选择HTML元素。声明块包含多个 CSS 属性及其值以应用于 HTML 元素。
示例 1(CSS 类名选择器)
在下面的示例中,我们在定义 CSS 规则集时使用类名称作为 CSS 选择器。下面的代码中有三个 div 元素,其中包含不同的类名。我们通过类名选择了每个 div 元素,并应用了不同的 CSS 样式,用户可以在输出中观察到。
<html> <head> <style> .one { background-color: red; color: white; padding: 10px; margin: 10px; border: 1px solid green; } .two { background-color: green; color: white; padding: 10px; margin: 10px; border: 3px solid yellow; } .three { background-color: blue; color: white; padding: 10px; margin: 10px; border: 2px solid pink; } </style> </head> <body> <h2 id="Using-the-i-class-selector-i-in-CSS-ruleset"> Using the <i> class selector </i> in CSS ruleset </h2> <div class = "one"> One </div> <div class = "two"> Two </div> <div class = "three"> Three </div> </body> </html>
示例 2(CSS ID 选择器)
在下面的示例中,我们在定义 CSS 规则集时使用 HTML 元素的 id 作为 CSS 选择器。在 HTML 中,两个元素永远不能包含相同的 id。
这里,我们有一个 id 为“card”的 div 元素,其中包含另外两个 id 等于“content1”和“content2”的 div 元素。我们通过通过 ID 访问所有 HTML 元素来设置它们的样式,用户可以在输出中观察到这些元素。
<html> <head> <style> #card { width: 140px; height: 300px; background-color: grey; border-radius: 12px; border: 2px solid red; display: flex; justify-content: space-between; flex-direction: column; } #content1 { width: 100px; height: 100px; background-color: blue; border-radius: 12px; color: white; border: 2px solid red; margin: 20px; } #content2 { width: 100px; height: 100px; color: white; background-color: blue; border-radius: 12px; border: 2px solid red; margin: 20px; } </style> </head> <body> <h2 id="Using-the-i-id-selector-i-in-CSS-ruleset"> Using the <i> id selector </i> in CSS ruleset </h2> <div id = "card"> <div id = "content1"> HTML </div> <div id = "content2"> CSS </div> </div> </body> </html>
示例 3(CSS 多重选择器)
在下面的示例中,我们使用多个 CSS 选择器一次性将相同的 CSS 样式应用于多个 HTML 元素。
我们有三个具有不同类名和 ID 的
元素。在 CSS 中,我们使用“.text1、.text2、#para1”CSS 选择器将声明块中添加的相同样式应用到所有 HTML 元素。
此外,我们还使用类名称和 ID CSS 选择器分别选择了所有三个 HTML 元素,以便在不同元素上应用不同的样式。
<html> <head> <style> .text1, .text2, #para1 { margin: 10px; height: auto; padding: 10px; width: 200px; } .text1 { background-color: red; color: white; font-size: 2rem; } .text2 { background-color: green; color: red; font-size: 1.7rem; } #para1 { background-color: blue; color: white; font-size: 1rem; } </style> </head> <body> <h2 id="Using-the-i-Multiple-selector-i-in-CSS-ruleset"> Using the <i> Multiple selector </i> in CSS ruleset </h2> <p class = "text1"> This is the first paragraph </p> <p class = "text2"> This is a second paragraph. </p> <p id = "para1"> This is the third paragraph. </p> </body> </html>
示例 4(CSS 嵌套元素选择器)
在下面的例子中,我们介绍了CSS的嵌套选择器。在 HTML 中,div 元素包含多个类名为“link”的 元素。
在 CSS 中,我们使用了“div .link”CSS 选择器,它选择类名为“link”的所有 HTML 元素以及 div 元素的后代。如果我们使用“div.link”作为 CSS 选择器,它会将样式应用于所有类名为“link”的 div 元素。因此,“div.link”和“div .link”都是不同的 CSS 选择器。
在输出中,用户可以观察到 CSS 样式应用于所有 HTML 元素,这些元素是 div 元素的后代,但未应用于 div 元素外部的元素。
<html> <head> <style> div .link { color: red; text-decoration: none; } </style> </head> <body> <h2 id="Using-the-i-nested-selectors-i-in-CSS-ruleset"> Using the <i> nested selectors </i> in CSS ruleset </h2> <div> <a href = "#" class = "link"> Link1 </a> <a href = "#" class = "link"> Link2 </a> <a href = "#" class = "link"> Link3 </a> </div><br> <a href = "#" class = "link"> Link 5 </a> </body> </html>
示例 5(CSS 伪选择器)
在此示例中,我们演示了 CSS 伪选择器的使用。 CSS 伪选择器有很多种,我们在这里使用了其中的一些。
这里,我们有一个“container”div 元素,其中包含 4 个具有“element”类名称的子元素。当用户将鼠标悬停在 div 元素上时,我们使用“:hover”伪选择器来更改“container”div 元素的背景颜色。
之后,我们使用 ':first-child'、':last-child' 和 ':nth-child()' CSS 选择器以及 '.element' 选择器来选择第一个子元素、最后一个子元素,和第n个孩子,分别。
在输出中,用户可以观察到不同的 CSS 样式应用于第一个子项、最后一个子项和第二个子项。
<html> <head> <style> .container { height: 100px; width: 500px; background-color: blue; padding: 10px; display: flex; justify-content: space-around; border-radius: 12px; font-size: 1.2rem; } /* hover pseudo class */ .container:hover { background-color: red; } /* first child pseudo class */ .element:first-child { background-color: green; color: white; } /* last child pseudo class */ .element:last-child { background-color: grey; color: black; } /* nth child pseudo class */ .element:nth-child(2) { background-color: pink; color: green; } </style> </head> <body> <h2 id="Using-the-i-pseudo-selectors-i-in-CSS-ruleset"> Using the <i> pseudo selectors </i> in CSS ruleset </h2> <div class = "container"> <div class = "element"> First Child </div> <div class = "element"> Second Child </div> <div class = "element"> Third Child </div> <div class = "element"> Fourth Child </div> </div> </body> </html>
用户在本教程中学习了如何使用不同的 CSS 规则集。我们使用类名和 id 作为选择器。此外,我们还学习了使用多个 CSS 选择器和嵌套 CSS 选择器。在上一个示例中,我们学习了如何使用 CSS 规则集中的伪选择器。
以上是CSS规则集有什么用?的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

这是我们在形式可访问性上进行的小型系列中的第三篇文章。如果您错过了第二篇文章,请查看“以:focus-visible的管理用户焦点”。在

本教程演示了使用智能表单框架创建外观专业的JavaScript表单(注意:不再可用)。 尽管框架本身不可用,但原理和技术仍然与其他形式的建筑商相关。

CSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例,以及我们必须将这些样式应用于WordPress块和元素的选项。

构建内联文本编辑器并不是微不足道的。 该过程首先要使目标元素可编辑,并在此过程中处理潜在的语法异常。 创建您的编辑器 要构建此编辑器,您需要动态修改内容

Svelte Transition API提供了一种使组件输入或离开文档(包括自定义Svelte Transitions)时动画组件的方法。

本文探讨了Envato Market上可用的PHP表单构建器脚本,比较了其功能,灵活性和设计。 在研究特定选项之前,让我们了解PHP形式构建器是什么以及为什么要使用一个。 PHP形式

该教程通过使用node.js,express和multer构建文件上传系统来指导您。 我们将介绍单个和多个文件上传,甚至演示在MongoDB数据库中存储图像以进行以后的检索。 首先,设置您的projec
