Una regla de sintaxis CSS consta de un selector, una propiedad y su valor. El selector apunta al elemento HTML donde se aplicará el estilo CSS. La propiedad CSS está separada por punto y coma. Es una combinación del nombre del selector seguido de la propiedad: par de valores que se define para el selector específico.
Sintaxis:
selector { Property: value; }
Por ejemplo, hemos declarado una etiqueta de encabezado (h1) además de haber asignado alguna propiedad: par de valores que se usa para diseñar la etiqueta de encabezado. Aquí, h1 es selector, { color: verde; familia tipográfica: sans-serif; } es un bloque de declaración y puede contener una o más declaraciones separadas por punto y coma, color: verde; es un par propiedad:valor que se aplica al elemento HTML para darle estilo.
h1 { color: green; font-family: sans-serif;}
Cada declaración tiene un nombre de propiedad CSS y un valor, separados por dos puntos y entre llaves. Para declarar las múltiples propiedades de CSS, se puede separar por el punto y coma.
Ejemplo: Este ejemplo ilustra el uso de la sintaxis CSS para el diseño de elementos HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Style of h1 selector -->
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
Los selectores de CSS se utilizan para seleccionar elementos HTML en función de su nombre de elemento, id, atributos, etc. Puede seleccionar uno o más elementos simultáneamente.
CSS Selector se puede dividir en 5 categorías:
- Selector simple: se utiliza para seleccionar los elementos HTML en función de su nombre de elemento, id, atributos, etc.
- Selector de combinadores: se utiliza para explicar la relación entre dos selectores.
- Selector de pseudo-clases : Se utiliza para definir el estado especial de un elemento.
- Selector de Pseudo Elementos : Es una palabra clave agregada a un selector que le permite diseñar una parte específica de los elementos seleccionados.
- Selector de atributos Selector: Se utiliza para seleccionar un elemento con algún atributo específico o valor de atributo.
Nos centraremos en el Selector simple y también entenderemos su implementación a través de los ejemplos.
El selector simple se puede categorizar de 3 maneras:
Selector de elementos CSS : el selector de elementos en CSS se utiliza para seleccionar elementos HTML que deben tener estilo. En una declaración de selector, está el nombre del elemento HTML y las propiedades CSS que se aplicarán a ese elemento se escriben entre corchetes {}.
Sintaxis:
element_name {
// CSS Property
}
Ejemplo: Este ejemplo ilustra el uso del selector de elementos para seleccionar los elementos HTML por su nombre de elemento y diseñarlos.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Syntax of h1 selector -->
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
Selector de id de CSS : el selector de #id se usa para establecer el estilo de la identificación dada. El atributo id es el identificador único en un documento HTML. El selector de ID se utiliza con un carácter #.
Sintaxis:
#id_name {
// CSS Property
}
Ejemplo: Este ejemplo ilustra el uso del selector de id para seleccionar los elementos HTML por su id y darles estilo.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Style of id selector -->
<style>
#heading {
color: green;
text-align: center;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="heading"> GeeksforGeeks </div>
</body>
</html>
Producción:
Selector de clase CSS: El selector .class se utiliza para seleccionar todos los elementos que pertenecen a un atributo de clase en particular. Para seleccionar los elementos con una clase en particular, use el carácter (.) con la especificación del nombre de la clase. El nombre de la clase se usa principalmente para establecer la propiedad CSS en la clase dada.
Sintaxis:
.class_name {
// CSS Property
}
Ejemplo: Este ejemplo ilustra el uso del selector de clase para seleccionar los elementos HTML por su clase y diseñarlos.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Style of class selector -->
<style>
.heading {
color: green;
text-align: center;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="heading"> GeeksforGeeks </div>
</body>
</html>
Producción:
Para aplicar las propiedades de estilo CSS comunes a todos los elementos HTML, podemos usar el selector universal que se indica con un símbolo de estrella (*).
Selector CSS * : El selector * en CSS se utiliza para seleccionar todos los elementos en un documento HTML. También selecciona todos los elementos que están dentro de otro elemento. También se le llama el selector universal.
Sintaxis:
* {
// CSS property
}
Ejemplo: Este ejemplo ilustra el uso del selector universal para seleccionar todos los elementos HTML que contienen las propiedades y estilos CSS comunes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>* Selector</title>
<!-- CSS property of * selector -->
<style>
* {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>*(Universal) Selector</h2>
<div>
<p>GFG</p>
<p>Geeks</p>
</div>
<p>It is a computer science portal for geeks.</p>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome 94.0
- Microsoft Edge 94.0
- IE 11.0
- Firefox 93.0
- Ópera 80.0
- Safari 15.0
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA