En este artículo, aprenderemos sobre el conjunto de reglas CSS y su implementación. El conjunto de reglas CSS es 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. Proporciona la forma de declarar la propiedad clave: par valor con la estructura definida para organizar el contenido en una página web de manera adecuada. Por ejemplo, considere el siguiente ejemplo:
.container {
padding: 10 px;
}
Esta es la propiedad CSS básica para aplicar el relleno con un valor de 10 px para la clase de contenedor. Para entender esto, desglosaremos cada componente.
- La declaración completa es un conjunto de reglas.
- El .container es un selector. El selector es de 2 tipos, a saber, el selector de ID denotado por hash (#), que se usa para aplicar la propiedad que tiene la ID única. El segundo es un selector de clase indicado por un punto (.), utilizado para seleccionar todos los elementos que pertenecen a un atributo de clase en particular.
- El par clave/valor que está separado por dos puntos y termina con un punto y coma es una declaración.
- La clave es el nombre de la propiedad y el valor es el valor de la propiedad, tanto la clave como los valores no distinguen entre mayúsculas y minúsculas de forma predeterminada en CSS.
- La parte en la que se declaran las llaves y las propiedades es el bloque de declaración .
El conjunto de reglas CSS se usa para aplicar un conjunto de propiedades con algunos valores definidos para el elemento o un conjunto específico de elementos que se usan en la página HTML. Consulte el conjunto de reglas ¿Qué es CSS? artículo para más detalles.
Comprendamos el conjunto de reglas en detalle a través de los ejemplos.
Ejemplo 1: Este ejemplo ilustra el uso del conjunto de reglas CSS de manera adecuada.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
/* Selector */
span {
/* Declaration-block */
background-color: purple;
color: white;
padding: 5px;
font-size: 15px;
border-radius: 50px;
}
.divClass {
font-family: Sans-serif;
}
body {
text-align: center;
}
</style>
</head>
<body>
<div class="divClass">
<h1>GeeksforGeeks</h1>
<span>A Computer Science portal for Geeks</span>
</div>
</body>
</html>
Explicación: Hemos aplicado todas las propiedades requeridas para los elementos HTML declarados. Hemos utilizado el selector de clase que se utiliza para seleccionar todos los elementos que pertenecen a un atributo de clase en particular.
Producción:
Ejemplo 2: En este ejemplo, hemos usado un selector de id que se usa para aplicar la propiedad que tiene la id única.
HTML
<!DOCTYPE html>
<html>
<head>
<!--Style of class selector -->
<style>
#heading {
color: green;
font-size: 40px;
font-weight: bold;
}
body {
text-align: center;
}
</style>
</head>
<body>
<div id="heading">GeeksforGeeks</div>
<p>A Computer Science Portal for Geeks</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA