UAJMS Ejercicios CSS
GUIA DE LABORATORIO #7
HOJAS DE ESTILO EN CASCADA
Cascading Style Sheets (CSS)
1.- Orden de Aplicación de Estilos
El orden en el que se ejecutan los estilos son:
a) Primero se aplican los estilos del navegador. Es decir, el formato predefinido del
navegador. Todos los navegadores poseen un estilo predefinido, que dicta con que
tamaño por defecto se muestra el texto, los colores, el tipo de letra, … Estos estilos
son los que se ejecutan en primer lugar. Después se aplican los estilos externos (los
que se incorporan con la etiqueta link)
b) Después los que proceden de la etiqueta style.
c) Después los que se definan internamente en el elemento (mediante el atributo style).
En caso de dos estilos referidos al mismo elemento y definidos en el mismo ámbito (por
ejemplo ambos procedentes de archivos externos e incluidos con el elemento link) tiene
preferencia el último que se utilice en el código (es decir ganan los estilos del segundo
link). No obstante se puede alterar la preferencia utilizando una palabra clave: !important
Los estilos marcados con ella tienen preferencia sobre cualquier otro. Ejemplo:
Taller I - Lic. Octavio Aguilar M. 1
UAJMS Ejercicios CSS
2.- Herencias.
Hay que tener en cuenta que hay etiquetas que son padre de otras. Es decir etiquetas que contienen
a otras. En este ejemplo la etiqueta P es padre de la etiqueta em (em está dentro de P). Esto hace
que em herede todo el estilo que posea p y además añada el suyo propio. Por ejemplo:
3.- Selectores.
Los estilos CSS se aplican hacia el elemento HTML que indiquemos. Este elemento
puede ser una etiqueta HTML, pero también podemos hacer selecciones más
elaboradas. Hacer buenas selecciones nos permitirá conseguir hojas de estilos
muy sofisticadas y coherentes. Veremos a continuación las posibilidades.
O simplemente hacerlo de esta forma:
3.1.- Selección de CLASES.
Una de las primeras formas que tiene CSS para diferenciar elementos del mismo tipo (por ejemplo
un párrafo de otro) son las clases.
Se define de esta forma:
Taller I - Lic. Octavio Aguilar M. 2
UAJMS Ejercicios CSS
Y se hace referencia con el atributo class.
Probar :
3.2.- Selección de IDENTIFICADORES.
La idea es parecida a la de las clases, pero ahora el nombre que indiquemos se referirá al
atributo identificador de un elemento, el cual se marca con el conocido atributo id de
HTML (presente en todas las etiquetas). Ejemplo:
Taller I - Lic. Octavio Aguilar M. 3
UAJMS Ejercicios CSS
4.- Colores.
El modelo RGB es una mezcla de colores que predice como serán percibidos por los
humanos respecto a los colores y luces experimentados en el mundo real. Está orientado
a pantallas digitales con tecnología compatible (CRT, LCD, plasma, OLED, quantum
dots, etc.). En la impresión se utiliza el modelo CMYK, que no es equivalente ya que
cada medio contiene unas particularidades propias. Sus siglas provienen de los 3 colores
primarios que son mezclados: El rojo, verde y azul. O en inglés: Red, Green y Blue. Al ser
mezclados producen toda la gama de colores que necesitamos para trabajar en Web.
Podemos hacer uso de 255 frecuencias por canal, o 24 bytes, que son en total 16.581.375
colores a utilizar.
Ejemplo:
4.1.- background-color.
Aplica un color de fondo.
Taller I - Lic. Octavio Aguilar M. 4
UAJMS Ejercicios CSS
4.2.- Opacity.
Aplica transparencia a todo su contenido, desde el texto al fondo.
Ejercicios:
1) Ejercicio 1
2) Ejercicio 2
3) Ejercicio 3
Taller I - Lic. Octavio Aguilar M. 5
UAJMS Ejercicios CSS
4) Ejercicio 4
Taller I - Lic. Octavio Aguilar M. 6
