-
Notifications
You must be signed in to change notification settings - Fork 0
CSS
Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML. CSS describe como debe ser dibujado el elemento estructurado en la pantalla.
<link rel="stylesheet" href=""><style></style>atributo "style"@import url()
La sintaxis CSS está compuesta por 6 elementos:
- Regla CSS: Es todo el bloque CSS que modifique un elemento en específico.
- Selector: Indica a que elemento HTML se le aplicaran los estilos.
- Propiedades: Indican en que aspecto serán modificados los estilos.
- Valores: son aquellos que serán asignados a las propiedades del elemento HTML.
- Declaraciones: Es el conjunto de propiedad y valor, separado con un ; de la siguiente declaración.
.selector {
propiedad1 : valor;
propiedad2 : valor;
propiedad3 : valor;
}
Espacios, indentaciones y saltos de línea no son parte de la sintaxis de CSS.
- Comentarios en CSS. Sirven para documentar nuestro código CSS. Los comentarios son ignorados al momento de renderizar nuestros estilos.
Su sintaxis básica es la siguiente:
/* Esto es un comentario. Será ignorado al momento de renderizar estilos */
/* Los estilos se van a aplicar a los párrafos del documento */
p {
color : green; /* el texto se va a escribir en color verde */
background: silver; /* el fondo del párrafo va a ser color plata */
}
Las variables en el mundo de la programación es una forma de guardar datos en la memoria y poder hacer uso de los mismos a través de su nombre.
:root{
--colorfondo: red; /*Declarar la variable*/
}
h1 {
background: var(--colorfondo) /*Utilizar la variable*/
}
CSS significa hojas de estilo en cascada (cascading style sheets), y es muy importante entender la palabra cascada. La forma en que se comporta la cascada es la clave para comprender el CSS.
En algún momento trabajarás en un proyecto y encontrarás que el CSS que pensabas que debería aplicarse a un elemento no funciona. Por lo general, el problema suele ser que has creado dos normas que podrían aplicarse al mismo elemento. La cascada, y el concepto estrechamente relacionado de especificidad son mecanismos que controlan qué regla se aplica cuando aparecen tales conflictos. Es posible que la regla que se aplica finalmente a tu elemento no sea la que esperas, por lo que debes comprender cómo funcionan estos mecanismos.
También es significativo el concepto de herencia, que significa que algunas propiedades CSS heredan por defecto los valores establecidos en el elemento padre, pero otras no. Esto también puede causar una respuesta diferente a la que esperas.
Vamos a empezar por echar un vistazo rápido a los principales elementos que nos interesan, y a continuación veremos cómo interactúan entre sí y con tu CSS. Pueden resultar un poco difíciles de entender, pero a medida que practiques escribiendo CSS te resultará más fácil de entender la manera cómo funcionan.
En un primer nivel de simplicidad, la cascada en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS.
h1 {
color: red;
}
h1 {
color: blue;
}
En el ejemplo siguiente tenemos dos reglas que pueden aplicarse al h1. El h1 acaba siendo de color azul porque estas normas tienen un selector idéntico y, por lo tanto, tienen la misma especificidad. Por esta razón, se aplica la última que aparece.
La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector:
-
Un selector de elemento es menos específico (selecciona todos los elementos de aquel tipo que aparecen en la página) por lo que presenta una puntuación más baja en especificidad.
-
Un selector de clase es más específico (selecciona solo los elementos de una página que tienen un valor de atributo class dado), y por tanto recibe una puntuación mayor.
Veamos un ejemplo. Aquí abajo encontrarás dos reglas que pueden aplicarse al elemento h1. Este elemento h1 termina siendo de color rojo: el selector de clase confiere a esta regla una mayor especificidad, así que se aplicará a pesar de la regla para el selector de elemento que aparece más abajo en el orden del código.
.main-heading {
color: red;
}
h1 {
color: blue;
}
<h1 class="main-heading">This is my heading.</h1>
La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.
Por ejemplo, si para un elemento se establece el color (color) y el tipo de letra (font-family), cada elemento que se encuentre dentro de él también se mostrará de ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente.
body {
color: blue;
}
span {
color: black;
}
<p>As the body has been set to have a color of blue this is inherited through the descendants.</p>
<p>We can change the color by targeting the element with a selector, such as this <span>span</span>.</p>
Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho width del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS!
- Tipos
- Case sensitive
Su finalidad es "normalizar" o sobrescribir los estilos predeterminados de cada navegador.
Seleccionan las etiquetas de los documentos HTML, como podrían ser h1, p, span, div, entre otros. Por ejemplo:
h1{...}
span{...}
div{...}
ul{...}
Con este tipo de selector, se seleccionaran absolutamente todas las etiquetas HTML de ese tipo.
A diferencia de los selectores de etiqueta, permiten seleccionar exclusivamente a un elemento al cual se le aplicarán los estilos.
Este tipo de selector se indica de un . seguido por el nombre de la clase. Por ejemplo:
.title{
color: blue;
font-size: 3em;
}
.description{
color: red;
}
**Recomendaciones: **
- No pueden comenzar con números
- Pueden comenzar con - o _
- Pueden incluir :, por ejemplo: title:first
- Puedes usar emojis
Seleccionan elementos en el HTML tomando como referencia al atributo id. Estos atributos son únicos, por lo cual los estilos aplicados a ellos también lo son.
Este tipo de selector se indica de un # seguido por el nombre del identificador. Por ejemplo:
#main-title{
background: pink;
}
¿Por qué no usar selector Id?
- Son utilizadas por HTML para crear anclas.
- Son selectores para trabajar elementos del DOM con JavaScript.
- Tienen una alta especificidad, lo que complica si quieres cambiar el estilo.
- Maquetación básica
width: Ancho de un elemento.
height: Alto de un elemento.
vertical-align: Alineamiento vertical dentro de un elemento.
margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado (arriba, abajo, izquierda, derecha).
padding: Relleno interior que se añade en los bordes del A diferencia de margin, cuenta para el tamaño del elemento.
float: Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa en el posicionamiento flotante de CSS. El tema del posicionamiento en CSS no es trivial y conviene estudiar cómo funciona antes de usar esta propiedad.
- Fuentes y texto
font-family: Tipo de letra
font-size: Tamaño de letra
font-weight: Peso (normal, negrita, …)
font-style: Estilo (normal, cursiva, …)
text-decoration: “Decoraciones” como subrayado, tachado, etc.
text-align: Alineación del texto (izquierda, derecha, etc.)
text-transform: Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada palabra en mayúsculas.
- Color y fondos
color: Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green, etc.) RGB o como valor hexadecimal.
background-color: Color del fondo del elemento.
background-image: Permite especificar una imagen de fondo.
background-repeat: Permite usar una imagen a modo de mosaico en diferentes modalidades.
box-shadow: Crear un efecto de sombra para un elemento.
- Listas
list-style-image: Usar la imagen especificada como viñeta para la lista.
list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista.
- Bordes
border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.)
border-color: Color del borde.
border-style: Diferentes estilos para el borde (sólido, puntos, etc.)
border-radius: Permite crear esquinas redondeadas para un elemento.