Apuntes CSS

ESPECIFICIDAD, CASCADA Y HERENCIA

Herencia: La herencia se aplica con el valor inherit, esto obliga al elemento a

heredar la propiedad de su elemento más cercano.
Ej. Como podemos observar en la imagen el elemento a hereda el color del
elemento p debido al valor inherit.

Cascada: Es el orden en el que se aplicarán los estilos al ir leyendo el css. Los

estilos que vienen después sobrescriben a los anteriores.

Especificidad: Es el peso que tiene un selector cuando hay conflicto de estilos.

Conflicto de estilos ej. sí a un mismo elemento le estamos dando estilos de dos
formas distintas la especificidad es la que decide cual se aplica y cual no.

La w3c divide la especificidad en:

a) Etiqueta -------------> 1
b) Clase y pseudoclases------> 10
c) ID------------------>100
d) Estilos en línea-------------> 1000
e) ! Important -----------------> Gana a todo
 Metodología BEM

Una metodología en CSS son una serie de consejos para estructurar nuestras
clases de una forma sencilla, escalable y reutilizable.

BEM es una de las tecnologías más utilizadas en el mundo

Su nombre viene de las siglas Block, Element, Modifier.

Block(bloque): Es cualquier elemento autónomo y aislado de nuestro documento.

Un menú, una galería, un formulario, etc.

Element(elemento): Es cada uno de los elementos del bloque. Un link, una foto,
un campo de texto, etc.

Modificación: El color del texto, el tamaño de la fuente, etc.

La forma de escribir con ben es:

Los bloques se suelen denominar con una sola palabra o con dos palabras
separadas con un guion si puede existir conflicto de estilos.

Esto es una recomendación de BEM, nosotros podemos ponerle los nombres que
queramos siempre y cuando lleven la misma sintaxis mostrada en los siguientes
ejemplos.

Ej.
.menu / .main-menu
.gallery / .main-gallery

Los elementos se nombran con el nombre del bloque al que pertenecen y su

nombre con dos guiones bajos __

.menu__item / .main-menu__link
.gallery__img / .main-gallery_item

Los modificadores se nombran con el nombre del bloque al que pertenecen y su

modificador con dos guiones medios –

.menu__item--active
.gallery_item--special
 Box Model

En la web todo son cajas, al conjunto de esas cajas y la forma en la que el

navegador los dibuja se les denomina LAYOUT.

Las propiedades principales de cada una de estas cajas son el ancho (width) y el
alto (height)

Existen dos tipos de elementos en HTML, Elementos en línea (inline) y de bloque

(block), estas propiedades se pueden modificar con el atributo display.

Elementos inline:
 Son elementos que solo ocupan su contenido.
 No se puede modificar ni su alto ni su ancho.

Elementos block:
 Ocupan todo el ancho disponible.
 Se les puede asignar ancho y alto.
 Ocupan todo el espacio disponible y a eso se le denomina viewport.
 Margin

Es la separación entre una caja y las cajas adyacentes.

Margin es un shorthand.
Un shorthand es la propiedad acortada que engloba otras propiedades

Cuando nosotros ponemos margin en realidad nos referimos a:

Margin-top
Margin-right
Margin-bottom
Margin-left

Margin: 1em; (top right bottom left)

Margin: 1em 2em; (Y X)
Margin: 1em 2em 3em; (top X botton)
Margin: 1em 2em 3em 4em; (top right bottom left)

Padding
Padding es la separación entre el contenido y su borde.
Padding es un shorthand.

padding-top
padding-right
padding-bottom
padding-left

Padding: 1em; (top right bottom left)

Padding: 1em 2em; (Y X)
Padding: 1em 2em 3em; (top X botton)
Padding: 1em 2em 3em 4em; (top right bottom left)
Border

Border es la línea que rodea la caja

Border es un shorthand

Las propiedades de los Borders son:

 Width
 Style
 Color

Existen bastantes combinaciones

Border-width: 2px; (top right bottom left)

Border-style: solid dotted; (X Y)
Border-color: red blue green; (top X bottom)
Border-width: 2px 3px 4px 5px; (top right bottom left)

Outline

Outline es la línea que rodea la caja entre el Border y el margin

Outline es un shorthand

Las propiedades de ouline son:

 Width
 Style
  Color
 Offset

Existen bastantes combinaciones

outline-width: 2px; (top right bottom left)

ouline-style: solid dotted; (X Y)
outline-color: red blue green; (top X bottom)
ouline-width: 2px 3px 4px 5px; (top right bottom left)
outline-offset: +-px|em|rem…

Position

Position es la propiedad que nos permite modificar el flujo del HTML.

Los valores de position son:

 Static(Valor por defecto)
 Relative
 Absolute
 Fixed
 Sticky

Al tener un elemento posicionado podemos moverlo en los 3 ejes.

 Top: podemos mover el elemento en relación a la parte superior
 Right: podemos mover el elemento en relación a la parte derecha.
 Bottom: podemos mover el elemento en relación a la parte inferior.
 Left: podemos mover el elemento en relación a la parte izquierda.
 z-index: podemos mover el elemento en el eje z.

Position Relative.

El valor relative hace que el elemento se coloque respecto a su posición en el

flujo: Eso significa que cuando nosotros agregamos postion: relative; a un
elemento visualmente no pasa nada, el elemento va a seguir en el mismo sitio
donde se encontraba, detrás de escena por asi decirlo pasa lo sigte:
 1. Al momento de moverlo conserva su espacio reservado.
2. Su punto de referencia no se modificará, aunque movamos el elemento.

Position Absolute

 El valor absolute hace que el elemento se coloque respecto a su

contenedor posicionado más cercano, si no encuentra ninguno será el
viewport.
 El elemento no conserva su espacio en el flujo.
 Si el elemento no tiene dimensiones declaradas, sus dimensiones se
ajustan al contenido.
 Su punto de referencia no se modificará, aunque movamos el elemento.

cuando usamos position: absolute, al contenedor debemos darle position: relative

para que los elementos se posicionen respecto a su contenedor

Position Fixed

 El valor fixed hace que el elemento se coloque respecto al viewport.

 El elemento no conserva su espacio en flujo.
 Si no tiene dimensiones declaradas, sus dimensiones se ajustan al
contenido.
 Su punto de referencia no se modificará, aunque movamos el elemento.
 Cuando hacemos scroll el elemento no se moverá, se queda fijado.

Position Sticky

 El valor sticky es una mezcla entre relative y fixed.

 El elemento no conserva su espacio en flujo.
 Si no tiene dimensiones declaradas, sus dimensiones se ajustan al
contenido.
 Su punto de referencia no se modificará, aunque movamos el elemento.
 Cuando hacemos scroll el elemento se moverá hasta alcanzar el tope
establecido.

Z-INDEX
Esta propiedad nos permite modificar el orden de las capas en el eje
z(profundidad)->es decir cual se coloca por encima de cual en el caso de que se
sobrepongan.

Admite valores positivos y negativos.

Es recomendable usar valores no consecutivos. 100, 200, 300...
Si el padre tiene z-index declarado no podemos poner a un hijo por encima.

Display

Nos permite cómo se comporta una caja.

De forma natural existen elementos un línea y elementos en bloque.

Los valores de esta propiedad son:

Inline – Establece que la caja se comporta como si fuera un elemento en línea.

Block – Establece que la caja se comporta como si fuera un elemento en bloque.
Inline-block – Se comporta como un elemento en línea, pero acepta width y height.
none – Oculta el elemento, pero se sigue renderizando.
 Pseudoelementos.

Se utilizan para dar estilos a partes específicas de un elemento.

La sintaxis es: selector::pseudo-element{ estilos }

Existen 5 pseudoelementos.

::first-line (elementos de bloque) ->selecciona la primera línea.

::first-letter (elementos de bloque)->selecciona la primera letra.
::before
::after
::selection

Pseudoclases

Son selectores que reaccionan en tiempo real detectando la interacción del

usuario con algunos elementos.

Funcionan con todos los selectores de css

No están atados a ningún elemento

Su sintaxis es:
Selector:pseudoclase{
Estilos

:pseudoclase{
Estilos

Variables

Una variable es un espacio en memoria en el que guardamos un valor para poder

reutilizarlo o modificarlo.

Las variables necesitan estar dentro de un selector.

Tienen herencia y cascada.

Existen variables globales y locales, eso dependerá del selector en el que lo

declaremos.

Las variables css no son lo mismo que las variables scss(sass).

Su sintaxis es:

Selector{
--nombre-variable: valor;
}
Y cuando queremos usarla:
Propiedad: var(--nombre-variable)

Background

Es una propiedad que nos permite darle un fondo a las cajas.

La propiedad background es un shorthand, la lista de propiedades que incluye

background son:

Background-color: nos permite establecer un color de fondo

Background-image: nos permite establecer una imagen de fondo.
Background-repeat: nos permite establecer si un fondo se repite o no.
Background-position: nos permite establecer la posición del backgrond.
Background-size: nos permite establecer el tamaño del background.
Background-origin: nos permite establecer desde donde se empezará a dibujar el
fondo.
Background-clip: nos permite establecer en qué parte de la caja se dibujará el
fondo.
Background-attachment: nos permite establecer si el background es relativo a la
caja o al viewport.

Background-image: url(‘ruta de la imagen’)

Textos y Tipografía.

A los tipos de letra que existen se les denomina fuentes o tipografía.

Podemos dividirlo en dos grupos:

-familias tipográficas: Fuentes especificas con nombre (Arial, Times New Roman,
Verdana, …)

-familias genéricas: Fuentes según sus características (serif, sans-serif, cursive,…)

Cuando elegimos una fuente debemos poner fuentes de reserva.
Ej.
body{
    font-family: 'Times New Roman', Times, serif;
}

Si una fuente tipográfica tiene mas de una palabra separada por espacios en su
nombre deberá ir entre comillas.

Las propiedades para cambiar el estilo de las fuentes/textos son:

 Font-family  establece la familia de la fuente.

 Font-size  establece el tamaño de la fuente.
 Font-weight  establece el ancho de la fuente.
 Font-style  especifica el estilo de la fuente (negrita,normal, etc)

Las propiedades de fuente se aplican a la letra.

Las propiedades de texto se aplican al contenedor de la letra o del texto

Text-transform  determina si ponemos todo en mayúsculas o minúsculas

Text-align  determina el alineamiento del texto.
(derecha,izquierda,centrado,justificado)
Text-decoration  decora la letra con una línea.
Text-indent hace que la primera línea del párrafo tenga una identacion.

Line-height  establece el alto de línea

Letter-spacing  establece la separación entre letras

Estilos en Listas

Normalmente necesitamos resetear los estilos por defecto de una lista

margin-top:0;
margin-bottom:0;
padding-left:0;

Hay tres propiedades para las listas, se pueden aplicar al padre o a los
elementos de la lista
list-style-type: Establece el estilo de viñeta
disc
 circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha

list-style-position: Hace que las viñetas se coloquen por dentro o por fuera del
elemento
outside | inside

list-style-image: Pone una imagen en lugar de la viñeta, no se suele utilizar

porque hay formas mucho más eficientes de hacerlo
url(imagen)
Normamente se suele usar el shorthand list-style

Estilos en Tablas

table-layout: Define como se comportan las dimensiones de una tabla y los anchos
de las "columnas"
automatic: valor por defecto
fixed: necesita un width declarado, si no se le da un ancho a cada columna se
ditribuyen equitativamente
caption-side: define donde se coloca el caption de una tabla.
top: valor por defecto
bottom: se coloca al pie de la tabla
 border-spacing: Controla el espacio entre las celdas
recibe una medida en cualquier unidad
border-collapse: Controla si las celdas se mantienen juntas o separadas.
separate: valor por defecto
collapse: junta las celdas para no

empty-cells: Controla qué hacer con las celdas vacías

show: valor por defecto
hide: oculta las celdas vacías.

Imágenes.

No existen propiedades para imagenes en CSS

1. Imagenes responsive. En el archivo base se recomienda poner esta regla.

img{
max-width: 100%;
}

2. las imagenes por defecto son elementos inline, esto causa un espacio por
debajo a su line-height, se puede solucionar de dos formas.

dando line-height: 0 al contenedor o un display: block a la imagen.

3. Centrado horizontal.
imagen con display:block y margenes laterales automaticos text-align: center,
si la imagen no es de bloque

4. Centrado Vertical.
Flexbox (la mejor opcion)
vertical align: niddle. a la imagen y el texto.

Objet-fit, object-position y filter.

object-fit: se usa para especificar cómo se debe cambiar el tamaño de <img> o

<video> para que se ajuste a su contenedor.
fill: valor por defecto
contain: El contenido se ajustará hasta rellenar de forma horizontal o vertical el
contenedor sin deformarse
cover: El contenido se ajustará hasta rellenar de forma horizontal y vertical el
contenedor sin deformarse
none: El contenido no se redimensiona y mantiene su tamño original mostrando
solo el trozo de las dimensiones especificadas
 scale-down: Selecciona el menor de la comparación entre none y contain.
objet-position: Coloca la imagen cuando esta no se muestra completa en el
contenedor.

filter:
none
blur(px): desenfoca la imagen
brightness(%): Ajusta el brillo de la imagen siendo 1 el original. De 0 a 1 dan
oscuridad y de 1 a n dan sobreexposición
contrast(%): Ajusta el contraste de la imagen siendo 1 el original. De 0 es negro
y de 1 a n dan más contraste
drop-shadow(h-shadow v-shadow blur (spread) color): Aplica una sombra
paralela a la imagen
grayscale(%): Convierte la imagen a escala de grises, 0 es el original y 1 sería
blanco y negro completamente
hue-rotate(deg): Añade matiz de color a la imagen. Se da un valor en grados
según la rueda cromática. El valor máximo es 360deg
invert(%): Invierte el color de la imagen. Saca un negativo. 0 es el valor por
defecto y 1 es totalmente invertida
opacity(%): Controla la opacidad de la imagen. 1 es el valor por defecto y 0 es
transparente
saturate(%): Controla la saturación de color de la imagen. 1 es el valor por
defecto, 0 es totalmente desaturada y por encima de 1 se sobresatura
sepia(%): Aplica un tono sepia a la imagen. 0 es el valor por defecto y 1 es
totalmente sepia
url() - Buscar información

Clip-path.

clip-path: Es una máscara que oculta partes de una caja

circle(): dibuja un círculo, puede tener una medida fija, circle(100px) o
podemos especificar un centro con at, circle(100px at medidaX medidaY |
palabrasClaveX palabrasClaveY)
ellipse(): dibuja una elipse, funciona igual que el círculo, pero en este caso
tenemos que especificar 2 centros, el horizontal y el vertical
inset(): dibuja un borde transparente por dentro de la caja
inset(all| Y X | top X bottom | top left bottom right)
 existe la opción de redondear las esquinas, para ello después de los
valores de inset pondremos round
inset(*** round all |
top-left & bottom-right top-right & bottom-left |
top-left top-right & bottom-left bottom-right
top-left top-right bottom-right bottom-left
)
polygon(): Especifica una serie de puntos (mínimo 3) para definir la zona
visible siendo el punto 0 0 la esquina superior izquierda
los puntos se especifican por parejas de ejeX y ejeY separados por comas
polygon(0 0, 100% 0, 0 100%)
Generador de clip-path: https://bennettfeely.com/clippy/

Colores.

Hay varias formas de dar color a los elementos

- Palabras clave
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
- RGB: es una función de color que recibe 3 valores separados por comas,
siendo 0 el mínimo y 255 el máximo
rgb(0,0,0) sería un negro y rgb(255,255,255) sería blanco.
-RGBA: Es una variación de RGB con un cuarto valor que sería el canal
alpha, con este valor controlamos la opacidad. Sus valores van de 0 a 1, siendo 0
transparente y 1 opaco.
- Hexadecimal: La notación hexademal tiene 16 valores, 0-1-2-3-4-5-6-7-8-
9-A-B-C-D-E-F. Se escriben con un # al inicio y se pueden usar 3 o 6 valores. Si
se usan 6 valores deben ir en parejas #ffffff, pero cuando las parejas tienen el
mismo valor se suele obviar y se ponen solo 3 valores #fff.
El código hexadecimal se representa con los canales rgb de esta forma
#rgb o #rrggbb. Utilizar el modo hexadecimal cuando se buscan colores especiales
se queda corto si no utilizamos un preprocesador, ya que no podemos controlar la
luminosidad, la saturación, etc.
Cuando los 3/6 valores son iguales es un color neutro, #000 sería negro y
#fff blanco, y todos los valores intermedios serían grises con mayor o menor
luminosidad #666, #aaa
HSL(hue, saturation, lightness): Es una función de color que nos permite
controlar el tono, la saturación y la luminosidad. Es el modo de color que se
recomienda para tener un control total sobre los colores
hue es el ángulo en la rueda cromática. Los valores van de 0 a 360 grados
saturation es la intensidad del color. Los valores van de 0 (gris) a 100%
(color puro)
lightness es la intensidad de la luz. Los valores van de 0 (negro) a 100%
(blanco)
HSLA: Exactamente igual que RGBA.
 Border radius.

Es un shorthand que engloba:

border-top-left-radis
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

border-radius: all;
border-radius: top-left/bottom-right top-right/bottom-left;
border-radius: top-left top-right/bottom-left bottom-right;
border-radius: top-left top-right bottom-left bottom-right;

Elipses
border-radius: 10px / 50px;
border-top-left-radius: 10px 50px;
border-top-right-radius: 10px 50px;
border-bottom-right-radius: 10px 50px;
border-bottom-left-radius: 10px 50px;

Box-shadow.

Es una propiedad que crea una sombra del tamaño de la caja.

box-shdow: h-offset v-offset blur spread color inset | outset

h-offset: Es el desplazamiento horizontal de la sombra
v-offset: Es el desplazamiento vertical de la sombra
blur: Optional Es la cantidad de desenfoque de la sombra
spread: Optional Es la extensión de la sombra
color: Optional color de la sombra, si no se especifica tomará el color del texto
inset|outset: Optional Determina si la sombra se dibuja por dentro o por fuera de
la caja
Con valor outset(default) los valores positivos añaden a derecha y abajo y los
valores negativos añaden a iquierda y arriba
Con valor inset se invierten los valores, positivo sería izquierda y arriba y
negativo sería derecha y abajo
Over flow & Float

Overflow:

Es una propiedad que controla como se va a comportar la caja con el

contenido que se desborde de ella
Es un shorthand que engloba overflow-x y overflow-y
Tiene 3 valores posibles:
hidden: Oculta todo el contenido que se desborde
auto: Muestra la barra de scroll solo si hace falta
scroll: Muestra ambas barras de scroll independientemente de si se necesitan
Float:

https://developer.mozilla.org/es/docs/Web/CSS/float
https://developer.mozilla.org/es/docs/Web/CSS/clear

La propiedad float especifica si un elemento debe salir del flujo normal y aparecer
a la izquierda o a la derecha de su contenedor. los elementos de texto y los
elementos en línea aparecerán a su alrededor.

Tiene 3 valores posibles:

left: Flota el elemento a la izquierda del contendor
right: Flota el elemento a la derecha del contendor
none: Elimina el float

NO EXISTE FLOAT:CENTER!!
Un elemento flotado hace que el padre deje de contenerlo, hay varias formas de
solucionarlo, la más cómoda es overflow:hidden