Un conjunto de reglas CSS son varias afirmaciones para varias piezas o elementos del documento. El objetivo es aplicar un montón de propiedades para ciertas cualidades distintas a un solo, o un arreglo particular de componentes en la página HTML asociada.
Visualización del conjunto de reglas CSS:
conjunto de reglas CSS
Los «.» al principio indica que la regla creada será una clase, también “container” indica el nombre del selector . De manera similar, «primer hijo» indica la pseudoclase , y los elementos dentro de corchetes son elementos de un bloque de declaración, que contiene algunas propiedades CSS y sus valores correspondientes. El conjunto de reglas de CSS se aplicará cuando se llame al nombre del selector en la página HTML principal.
El conjunto de reglas CSS es el bloque de construcción principal de la hoja de estilo CSS.
Ejemplo 1: El siguiente código demuestra la aplicación del conjunto de reglas CSS en varios elementos HTML. El nombre de la clase se usa para dar la propiedad y sus valores correspondientes. El selector :first-child se usa para seleccionar aquellos elementos que son los elementos del primer hijo como se implementa a continuación para el elemento HTML «p» .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rulesets in CSS</title>
<style>
h1 {
color: green;
}
/* Selector */
p:first-child{
/* Declaration-block */
background-color: green;
color: white;
font-size: 15px;
border-radius: 50px
;
text-transform: uppercase
;
font-weight: bold;
}
body {
text-align: center;
}
</style>
</head>
<body>
<div>
<p>Welcome To Largest Computer Science portal</p>
<h1>GeeksforGeeks</h1>
<h2>CSS Rulesets</h2>
<p>GeeksforGeeks </p>
</div>
</body>
</html>
Producción :
Ejemplo 2: el siguiente código también aplicó algunos de los diferentes conjuntos de reglas CSS para varios elementos HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rulesets in CSS</title>
<style>
h1 {
color: green;
}
/* Selector */
span {
/* Declaration-block */
background-color: green;
color: white;
padding: 5px;
font-size: 15px;
border-radius: 50px;
text-transform: uppercase;
}
h2 {
font-size: small;
}
.divClass {
font-family: "Franklin Gothic Medium",
"Arial Narrow", Arial, sans-serif;
}
body {
text-align: center;
}
</style>
</head>
<body>
<div class="divClass">
<span> This website is for geeks </span>
<h1>GeeksforGeeks</h1>
<h2>
A CSS ruleset is applying various <br />
affirmations to various pieces of the document.
</h2>
</div>
</body>
</html>
Producción:
conjunto de reglas CSS
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA