Las hojas de estilo en cascada, conocidas como CSS , son un lenguaje de hojas de estilo utilizado para diseñar y describir la presentación de la página web para que sea atractiva. El uso principal de CSS es simplificar el proceso de hacer que las páginas web estén presentables.
CSS describe la forma en que los elementos deben representarse en la pantalla. CSS aplica estilo a las páginas web. Más importante aún, CSS permite este estilo independientemente del HTML .
CSS se clasifica principalmente en 3 tipos que son los siguientes.
- CSS interno
- CSS en línea
- CSS externo
Sintaxis : un CSS comprende reglas de estilo que comprenden un selector seguido de un bloque de declaración. Estas reglas de estilo son interpretadas por el navegador.
h1 {
font-size: 20px;
background-color: blue;
}
- Selector: el selector informa sobre el elemento HTML que se va a diseñar. En este caso, el selector es el elemento “ h1 ”.
- Declaración: cada declaración incluye un nombre y valor de propiedad CSS, separados por un punto y coma. En este caso, su «tamaño de fuente» y «color de fondo».
Ejemplo: en este ejemplo, el texto dentro de todos los elementos «p» se alineará al centro, tendrá un tamaño de fuente de 25 px y un color «verde».
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
font-size: 25px;
color: green;
}
</style>
</head>
<body>
<p>GeeksforGeeks</p>
</body>
</html>
Producción:
¿Por qué usar CSS?
- Conceptos básicos para el desarrollo web: la habilidad básica que todo desarrollador web debe saber es HTML y CSS.
- Reutilización del código: los archivos CSS se pueden reutilizar en varias páginas HTML en las que queremos aplicar algún estilo.
- Sitio web atractivo: agregar estilos a nuestro sitio web seguramente lo hace más presentable para los usuarios.
- Código fácil de mantener: los cambios en el código deben realizarse en un solo archivo CSS.
- Mejore la experiencia del usuario: una interfaz de usuario simple pero hermosa ayuda a los usuarios a navegar por el sitio web fácilmente.
Limitaciones del uso de CSS:
- Confusión entre los navegadores web debido a los diferentes niveles de CSS como CSS, CSS1 hasta CSS3.
- Problemas entre navegadores, funciona de manera diferente con diferentes navegadores.
- Escasez de seguridad debido a su sistema abierto basado en texto.
Explique el término «pseudoclase» en referencia a CSS3.
Si queremos definir un estado especial de algún elemento, tenemos que usar pseudo-clase.
¿Qué tipo de estado especial?
- Para aplicar estilo a un elemento cuando el mouse se desplaza sobre él.
- Para diseñar algunos tipos de enlaces , como enlaces visitados y no visitados.
Para agregar un efecto a los elementos existentes en función de sus estados, se puede combinar con un Selector de CSS.
Sintaxis:
selector : pseudo-class{
CSS property : value;
}
Ejemplo: cuando el mouse se desplaza sobre todos los elementos «h1», el tamaño de fuente cambia a 30 px.
h1 : hover{
font-size:30px;
}
Categorías de pseudoclases:
- Pseudoclases lingüísticas: Habilita la selección de un elemento en función de la dirección del guión o del idioma. Los ejemplos son :dir , :lang .
- Pseudoclases de acción del usuario: son específicas de la interacción del usuario para aplicar un estilo, como el desplazamiento del mouse. Los ejemplos son :hover , :focus .
- Pseudoclases de estado de recursos: aplicadas a elementos multimedia capaces de estar en un estado en el que podría describirse como pausa, reproducción, etc.
- Pseudoclases estructurales: Está relacionado con la ubicación de un elemento dentro del árbol del documento. Los ejemplos son :last-child , :nth-child
- Pseudoclases de entrada: se relaciona principalmente con elementos de entrada como formularios, permite seleccionar elementos en función de los atributos HTML y establece que el campo está antes y después de la interacción. Los ejemplos son :checked , :valid .
- Pseudoclases de dimensión temporal: se aplica al interactuar con algo que tiene tiempo, como pistas. Los ejemplos son :futuro , :actual
- Pseudoclases de ubicación: apunta a elementos dentro del documento actual que se relacionan con enlaces. Los ejemplos son :scope , :visited .
Ejemplo 1: Los siguientes dos ejemplos muestran pseudoclases. La pseudoclase :hover cae dentro de la categoría de pseudoclases de acción de usuario. Se aplica cuando el usuario interactúa con un elemento utilizando un dispositivo señalador que no necesariamente lo activa. Cuando el mouse se desplaza sobre el elemento «h1» , el texto se subraya.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
font-size: 30px;
color: green;
}
h1:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>
Welcome to GeeksforGeeks
</h1>
</body>
</html>
Producción:
Ejemplo 2: La página se carga cuando se hace clic en el enlace con un cambio de color. La pseudoclase :visited cae dentro de la categoría de pseudoclases de ubicación. Se aplica a los enlaces que el usuario ya ha visitado. Los estilos aplicados por esto son muy limitados debido a la privacidad. El color del enlace cambia a “verde” una vez que visitamos el sitio web “geeksforgeeks.org” .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
width: 20%;
height: 12vh;
border: 2px solid black;
background-color: green;
color: white;
font-size: 25px;
margin: auto;
text-align: center;
}
p {
font-size: 18px;
text-align: center;
}
a:visited {
color: green;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p>Visit
<a href="https://www.geeksforgeeks.org/"
target="_blank">GfG</a>
offical website here
</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA