CSS (Cascading Style Sheets)- (Hojas de estilo en cascada) CSS es un lenguaje de
definicion de la presentacion de los documentos HTML, es decir como se va a visualizar el
contenido del documento HTML.
CSS aparece por alla en el año 1996
Es el elemento HTML al que podemos aplicarle ese bloque de declaracion de estilos.
Bloque de declaraciones:
El Bloque de declaracion esta definido por las llaves, dentro de esas llaves van los
atributos, los atributo son los que vamos a modificar y que tienen la siguiente sintaxis:
selector {
atributo: valor;
atibuto-de-mas-de-dos-palabras: valor;
}
Ejemplo de declaracion CSS o regla de definicion de hojas de estilo en cascada CSS:
h1{
color: yellow;
background-color: black;
text-align: center;
font-family: sans-serif;
}
Hay 3 formas de de conectar, invocar o vincular documentos CSS a un documento HTML
En línea
Utilizando el atributo style dentro de una etiqueta HTML
ejemplo:
Interno
Utilizando la etiqueta style en la seccion head del documento
HTML.
Externo
Mediante la definicion de un archivo u hoja externa con extension .css que se vincula
con el documento HTML (utilizando la etiqueta link dentro del elemento
head del documento HTML) y que en su atributo rel debe decir
stylesheet y en su atributo href debe llevar la ruta que
indica la ubicacion del archivo .css
Selectores básicos: Etiquetas, Identificadores y Clases
Los selectores identifican a que elemento del documento html se le va a aplicar el estilo que se
defina con css
Existen 3 selectores basicos:
Selectores de tipo o etiqueta:
Funcionan simplenmente escribiendo el nombre de la etiqueta HTML.
Identificadores:
Se accede a traves del atributo id="" de un elemento HTML, el id es un identificador unico
que no se vaa repetir nunca.
Los id se usan una sola vez por lo tanto se recomienda su uso solo para Javascript.
Los id se indican con el simbolo numeral # ejemplo #title
NOTA: Dar estilos con id se considera un antipatron, es decir una mala
practica, esto se refiere a que cada elemento HTMOL debe tener un nombre unico como valor
del atributo id, no se debe repetir el mismo nombre del atirbuto id entro elemento HTML.
Clases:
Se accede a traves del atributo class="" de un elemento HTML.
Las clases se indican con el punto . ejemplo: .container
NOTA: Se recomienda que los nombres de las clases sean alucibos a lo que hacen
cada clase.
Parrafo de prueba de selectores
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum molestias, ex cumque libero
deleniti doloremque placeat? Officiis inventore eaque nisi? Soluta molestias veritatis iusto?
Quod iusto veniam voluptatem estaliquid.
El selector de hijos directos solamente aplica a los elementos en el primer nivel, es
decir: elemento_padre > elemento_hijo.
Primavera
Verano
Otoño
Invierno
En el ejemplo anterior (de selector de hijos directos), se colorea todo el contenido de
la etiqueta ul, es decir todo el cuadro que abarcan todos sus elementos internos.
Selector de hijos descendientes
El selector de hijos descendientes aplica sin importar el orden descendente en el que los
hijos se encuentren con relacion a su padre, y se representa por un espacio en blanco,
es decir:
elemento_padre elemento_hijo elemento_nieto elemento_bisnieto
Primavera
Verano
Otoño
Invierno
En el ejemplo anterior (de selector de hijos descendientes), solamante se colorea el
contenido de la etiqueta b (bold), es decir unicamente la palabra.
Selectores de hermanos
Los selectores de hermanos son elementos que estan en el mismo nivel del elemento de referencia. Hay de
dos tipos:
Selector de hermanos (en general)
Los selector de hermanos van a aplicar estilos a los elementos que son hermanos (es decir
que estan en el mismo nivel) y que esten por debajo del elemento de referencia y su
simbolo es la virgulilla ~.
Primavera
Verano
Otoño
Invierno
Selector de hermanos (adyacentes)
Los selector de hermanos adyacentes van a aplicar los estilos al elemento que coincida
con la segunda parte de nuestro selector y que este por debajo inmediatamente del
elemento de referencia y su simbolo es el mas +.
Los selectores de atributos nos van a permitir aplicar estilos tomando como
referencia cualquier atributo de un elemento HTML, para utilizar el selector de
atributos hay que poner entre corchetes [] el atributo al que se va a hacer
referencia.
NOTA: Para ver la informacion completa sobre este tema revisar la
seccion "selectores de atributo" que se encuentra en el archivo styles.css
dentro de la carpeta CSS.
El selector universal va a aplicar los estilos a todos los elementos o etiquetas que esten dentro
del documento HTML, a todos absolutamente todos. El asterisco (*) representa el selector
universal.
Las pseudoclases son un tipo de selector, pero es un selector especial.
Las pseudoclases ban a dar estilos dependiendo del contexto, posisión o estado del elemento al
que le queremos aplicar estilos o dependiendo de ciertos estados que tenga el elemento HTML.
Las pseudoclases se distinguen porque empiezan con dos putos ":" por ejemplo:
Las pseudoclases se utilizan mucho en los formularios.
Ejemplo de uso de pseudoclases en un formulario
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea perspiciatis magnam dignissimos
dolore atque totam expedita natus praesentium eos, quae fugiat voluptatibus eum accusantium,
laboriosam, sapiente voluptas voluptates provident molestias!
Los Pseudoelementos dan estilos a partes especificas de un elemento y para diferenciarlos de las
pseudoclases se utilizan doble par de dos puntos "::"
Pseudoelementos ::after y ::before
Estas pseudoclases nos van a permitir agregar contenido antes (::before) o despues (::after) de
un elementoen particular.
NOTA Para usarlos necesitamos poner obligatoriamente el atributo
content que va aindicar el texto de contenido que va a ir antes o despues.
Banday Myth Cloth ExSaga de Géminis500
Pseudoelementos ::first-letter, ::first-line y ::selection
::first-letter Hace referencia a la primera letra de una palabra o letra capital.
::first-line Hace referencia a la primera línea de un parrafo.
Los pseudoelementos ::first-letter y ::first-line aplican para cualquier elemento de bloque.
::selection Hace referencia a cuando el usuario selecciona el texto.
Ejemplo:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias voluptatem vero eveniet natus
aliquam, sapiente quaerat molestiae numquam doloremque libero rerum non accusamus consequuntur,
laudantium consequatur cumque quod neque nemo.
Pseudoelemento ::placeholder
Enlace a documentacion de Pseudoelementos en el sl sitio
MDN
(Mozilla Developed Network).
La agrupacion de selectores mas sencilla es utilizando la coma "," y significa que a todos los
selectores quevayan separados por coma "," se les aplicara el mismo estilo, ejemplo:
En esta seccion veremos como funciona internamente CSS y como aplica los estilos.
El algoritmo de CSS es la forma en que el navegador va a aplicar los estilos a
los documentos HTML y es de vital importancia comprender este concepto para
poder entender como funciona CSS.
El algoritmo de css lo podemos subdividir en tres temas particulares:
La cascada
Conforme el navegador va leyendo las líneas de codigo que estan en el
documento HTML, es decir el orden de aparicion, que es de arriba hacia
abajo y de izquierda a derecha.
La cascada es el mecanismo que tiene el navegador web para ir aplicando
los estilos y en base a esto toma en cuenta lo siguiente en este orden:
El origen del codigo
Es decir de donde viene el codigo, y hay 3 posible origenes
(conforme se mencionan a continuacion es como el navegador los va
aplicando):
user agent stylesheet
El usert agent stylesheet son los estilos que por defecto
(by default) le va aplicando cada navegador a las
etiquetas HTML.
Cada navegador aplica sus propios estilos css por defecto.
Personalizaciones de usuario
Todas las personalizaciones que nosotros como usuarios de
nuestra propia computadora le hacemos al navegador o al
sistema operativo, por ejemplo aumetar el zoom del
navegador, poner un tema oscuro o claro al navegador, etc.
Los estilos del autor
Es el codigo CSS que nosotros escribimos en nuestras hojas
de estilo.
La especificidad es ver cual de los selectores que estan aplicando un
estilo a un mismo elemento tienen mas peso (o especificidad) para css ,
el que mas peso o valor tenga, es el que al final quedara y aplicara el
estilo al elemento y sobre escribira a los demas.
El elemento que mas especificidad tiene en las hojas de estilo es
cascada es el atributo style.
Calculo de la especificidad
La especificidad es el peso que tiene un selector cuando hay conflicto de
estilos y se calcula de la siguiente forma.
Etiquetas y pseudoelementos--------------- 0,0,0,1
Clases, atributos y pseudoclases---------- 0,0,1,0
Estilos en línea---------------------------------- 1,0,0,0
La palabra !important---- Rompe la especificidad
Practicando cascada y especificidad
"Se tolerante con los demás y estricto con tigo mismo." - Marco Aurelio
La herencia
Hace referencia a que los hijos heredan caracteristicas de sus padres,
basicamente es la capacidad de un selector de obtener (heredar) los
valores de sus ansestros más cercanos (padres, abuelos, bisabuelos,
tatarabuelos), para aplicarla se usa el valor inherit, si
queremos evitarla podemos asignar otro valor o inicializar la propiedad
en cuestión con el valor initial.
OJO: Hay ciertas propiedades que no se heredan como por
ejemplo los bordes, el fondo, etc.
Practicando herencia
"Se tolerante con los demás y estricto con tigo mismo." - Marco Aurelio
Es una libreria que busca normalizar, estandarizar o inicializar los estilos de
los navegadores y es la mas recomendada para usar.
NOTA: Como las hojas de estilos Reset
CSS y Normalize.css resetean
y normalizan las etiqueta HTML por defecto, lo ideal (debido a la cascada) es que
primero se apliquen estos estilos y despues nuestra hoja particular de estilos,
por lo que al llamarlas dentro del elemento "head" de nuestro documento HTML con
la etiqueta "link", deben ir primero (de arriba hacia a bajo) que nuestra hoja particular de estilos.
Dentro del modelo de caja podemos aplicar valores negativos para los margenes
porque los margenes son distancias externas, entonces al aplicar un margen
negativo el elemento se movera hacia el lado sentido contrario.
Lo que no se puede aplicar padding negativo porque esta es la distancia que hay
entre el content box y el border.
Ejemplos:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur omnis optio
nihil at odit ab quia minima, eaque ullam excepturi sapiente nobis placeat
ducimus error impedit tempora consectetur quod explicabo.