Vamos a analizar a continuación el ejercicio CSS Ejercicio 2 están listos.
Vamos
el objetivo del ejercicio es crear un programa para continuar practicando lo básico de estilo CSS y
al finalizar deberemos observar lo siguiente según se muestra
como primer paso vamos a crear nuestro proyecto.
El proyecto se va a llamar CSS Ejercicio 2 y lo vamos a depositar en la ruta mostrada y damos clic en
Finalizar.
Ahora vamos a crear un archivo CSS para depositar ahora dentro de este archivo los estilos CSS así que
el archivo se va a llamar estilos CSS para crear este archivo.
Vamos a dar clic derecho sobre nuestro proyecto CSS Ejercicio 2.
Posteriormente seleccionamos la opción de Niu y seleccionamos la opción de Qashqai.
Esta Exit
el nombre del archivo se va a llamar estilos y podemos observar que se crea este archivo estilos CSS.
En este caso debido a que seleccionamos que vamos a crear un archivo de tipo Qashqai de installed no
es necesario agregar la extensión puntos CSS ya que en automático el IDE agregar por nosotros y también
podemos observar que se deposita a nivel raíz de nuestro proyecto web es decir a nivel raíz de la carpeta
Public HTML y damos frieguen finalizar como siguiente paso lo que vamos a hacer es modificar nuestro
archivo índex punto HTML y agregamos lo siguiente a nuestro documento HTML
en este caso lo nuevo en este documento es que vamos a agregar un link hacia nuestro archivo de estilos
CSS
la sintaxis que vamos a utilizar para hacer referencia a nuestra hoja de estilos.
Es por medio de la etiqueta Link y vamos a utilizar el atributo rel para indicar qué tipo de documento
vamos a utilizar en este caso una hoja de estilos.
Por ello indicamos el valor de esta exit.
El tipo es un texto diagonal CSS y vamos a utilizar el atributo de HR-V e indicamos el valor del documento
que vamos a utilizar como una hoja de estilos.
Por ello indicamos el valor de estilos puntos CSS.
Si estuviera dentro de otra carpeta aquí simplemente vamos agregando las carpetas en donde se encuentre
esta hoja de estilos.
Por ejemplo si se encontrara dentro de una carpeta llamada estilos
ponemos el nombre de la carpeta y posteriormente el nombre del archivo CSS.
De esta manera podemos hacer referencia a nuestro archivo CSS
posteriormente vamos a agregar lo siguiente.
Recordemos que cuando trabajamos con hojas de estilo básicamente se les llama hojas de estilo en cascada
debido a que los estilos definidos se van aplicando precisamente como una cascada es decir que dependiendo
de en el lugar en que se defina el estilo va a ser la prioridad que va a tomar y un estilo como hemos
visto puede sobreescribir a otro así que los estilos definidos en un archivo externo van a tomar la
prioridad 3 los estilos definidos a nivel del cabecero o cuerpo del documento van a tomar la prioridad
2 y los estilos definidos a nivel del elemento HTML van a tomar la prioridad 1 así que los estilos definidos
con prioridad 1 van a sobreescribir a los estilos definidos con otro tipo de prioridades.
Por ello es que en este caso estamos indicando que estos estilos que vamos a definir a continuación
tienen la segunda prioridad y en este caso sobre escriben a los estilos definidos en el archivo externo
para definir estilos también directamente sobre nuestro documento HTML dentro de la etiqueta de Get
podemos utilizar la etiqueta estáel y podemos observar que los estilos se van a aplicar dentro de la
etiqueta como si fuera un comentario.
Esto debido a que algunos navegadores podrían tener problemas para procesar este tipo de estilos.
Por ello es que se agrega como un comentario y así en dado caso de que alguna llegador no soportara
esta etiqueta entonces simplemente lo va a tomar como un comentario.
Sin embargo al día de hoy la mayoría de los navegadores soporta esta etiqueta así que dentro de la etiqueta
de estáel agregamos un comentario y posteriormente podemos agregar los estilos que vamos a manejar en
esta página HTML.
En este caso estamos indicando que para la etiqueta de Body de nuestro documento HTML vamos a aplicar
el estilo de Font Family con la fuente indicada.
En este caso la fuente de Bodoni MT Black y podemos observar la sintaxis en la cual estamos agregando
el elemento HTML al cual le queremos aplicar el estilo.
Posteriormente abrimos una llave y vamos agregando los estilos que queremos aplicar en este caso el
Font Family indicado.
Separado el valor por dos puntos y terminando este estilo con un punto y coma.
Y así podemos agregar más estilos a este elemento de Bodhi.
Por ejemplo también estamos indicando el color pero recordemos que estamos utilizando el código de colores
hexadecimal y con eso cerramos los estilos que le estamos aplicando a nuestro elemento Bodhi del documento
HTML
cerramos también el comentario y cerramos la etiqueta de estilo.
Así que de esta manera es que estamos definiendo un estilo a nivel del cabecero de nuestro documento
HTML y éste tiene mayor prioridad sobre los estilos definidos en un archivo externo.
Así que en dado caso de que en un archivo externo se definieran también estilos para la etiqueta de
Bodhi entonces va a tomar prioridad estos estilos que estamos definiendo en la etiqueta de cabecera.
Como siguiente paso indicamos el título de nuestro documento CSS.
Ejemplo 2 y cerramos el cabecero de nuestro documento HTML como siguiente paso vamos a definir la etiqueta
de Bodhi y agregamos el comentario de que el tag de Bodhi hereda las propiedades del archivo estilos
pontos CSS.
Sin embargo recordemos que los estilos definidos en este archivo externo tienen una tercera prioridad
y en este caso la prioridad 2 es decir los elementos que hemos definido en este momento sobre la etiqueta
Bodhi van a tomar prioridad sobre los estilos definidos en el archivo externo así que los estilos que
se van a aplicar son los que estamos indicando en este momento sin embargo si definimos un estilo sobre
una etiqueta directamente en nuestra página HTML toma la prioridad 1 ya que es el estilo aplicado de
manera más interna por ello si agregamos un párrafo e indicamos el estilo y modificamos la fuente por
ejemplo en este caso por el Font Family de alguien si FB entonces va a tomar prioridad sobre las otras
fuentes que hayamos definido ya sea a nivel del cabecero o en un archivo externo y sobreescribir los
valores definidos entonces en los otros elementos y se aplica el valor definido de estilo en este elemento
de párrafo
podemos agregar más elementos para poner en práctica estos conceptos.
Sin embargo con esto podemos ejecutar nuestro proyecto para observar el resultado.
Cerramos las etiquetas de Bodhi y HTML y vamos a terminar de codificar nuestra hoja de estilo CSS y
posteriormente ejecutar nuestro proyecto la hoja de estilos CSS va a tener el siguiente código.
Así es como agregamos comentarios vamos a definir una diagonal asterisco y vamos a cerrar el comentario
con asterisco diagonal e indicamos en este comentario que se definen las propiedades de los estilos
toman la prioridad 3 los estilos definidos en un archivo externo según ya lo hemos comentado anteriormente
así que estos estilos aplican después que los estilos definidos en el documento HTML y también aplican
después de los estilos definidos en el elemento HTML y cerramos nuestro comentario así que podemos observar
que podemos indicar en este caso el estilo para la etiqueta de body.
Indicamos la etiqueta HTML en este caso la etiqueta Bodin y posteriormente abrimos una llave e indicamos
los valores en este caso el atributo de background e indicamos un color.
Sin embargo como hemos comentado estas propiedades se van a sobreescribir directamente sobre el archivo
HTML indicamos el background el color y el fondo familiar indicamos estas propiedades y cerramos nuestra
llave.
Así podemos ir agregando más elementos.
Esta es la sintaxis.
Básicamente indicamos el estilo al cual queremos aplicar el elemento en este caso el elemento de Bodin.
Abrimos una llave y dentro de llaves vamos a agregar los estilos que queramos aplicar a estos elementos
y como podemos observar podemos agregar más de un elemento que se aplica a una etiqueta y posteriormente
veremos también que no solamente es a etiquetas sino que podemos definir nuestros propios estilos y
aplicarlos a cualquier elemento HTML
como siguiente paso.
Ejecutamos nuestro proyecto y el resultado es como sigue podemos observar que tomó prioridad los estilos
definidos según hemos comentado en primer lugar los elementos definidos en el párrafo y esos estilos
reescribieron a los elementos definidos en el Get del documento HTML y a su vez también se escriben
los valores definidos en el archivo externo así que toma prioridad los elementos definidos sobre el
elemento HTML directamente en el documento para aclarar más este concepto podemos inspeccionar el párrafo
de ejemplo y vemos cómo se han escrito los estilos.
Por ejemplo podemos seleccionar el párrafo y si estamos utilizando el navegador de Google Chrome podemos
dar clic derecho y seleccionar inspeccionar
y podemos observar lo siguiente sobre el elemento en este caso en el documento HTML directamente sobre
el elemento de párrafo.
Hemos definido que se va a aplicar la fuente de Ainsi FB.
Sin embargo ya habíamos definido esta propiedad de Font Family en otros elementos por ejemplo a nivel
de nuestro documento HTML dentro del jet de nuestro documento HTML y podemos observar cómo es que este
elemento ya no aplicó sino que se escribió por este valor.
Sin embargo el color debido a que no se definió dentro del elemento de párrafo entonces el color que
se aplica sí es el color rojo definido sobre el jet del documento índex HTML pero también estos mismos
elementos los definimos sobre el archivo externo estilos CSS y podemos observar como el color debido
a que se escribió a nivel del documento inexperto HTML en el jet.
Entonces ya no se va a aplicar el color definido en el archivo CSS ni tampoco la propiedad de Font Family
así que se escribió tanto este valor y también este valor a nivel del font family y únicamente se aplicó
el font family definido en el párrafo directamente ya que es el elemento que toma mayor prioridad así
que como hemos comentado este toma la prioridad 1 de tomaria la prioridad 2 y este tomaria la prioridad
3 si no se define este elemento entonces el siguiente elemento que se utilizaría sería este elemento
y si no se define este elemento entonces el valor que se aplicaría sería nuestra prioridad 3 es decir
el estilo definido en el archivo pero podemos observar que por ejemplo el background no se definió en
ninguna otra parte que no fuera el archivo estilo CSS por lo tanto el color de background si se va a
tomar de este estilo definido a nivel del archivo CSS así que estamos utilizando la misma etiqueta de
Bodhi tanto a nivel del archivo CSS como dentro del GET de nuestro documento HTML pero debido a que
únicamente se están aplicando algunas propiedades en común entonces se van escribiendo entre ellas según
aplique también de este lado derecho podemos observar cuáles son las propiedades que finalmente se aplicaron
a nuestros elementos.
Por ejemplo en este caso la propiedad de color y también podemos observar la propiedad de Font Family
y también cómo se escribieron los estilos definidos por ejemplo a nivel del Bodhi podemos observar que
este valor ya no aplicó y tampoco aplicó el valor definido a nivel del archivo externo así que ninguna
de estas fuentes aplicó sino que se escribieron los valores y finalmente se aplicó el font family de
audiencia definido a nivel del elemento de párrafo directamente en nuestro documento HTML
así que de esta manera es como podemos observar cómo es que se aplican las hojas de estilo y también
podemos entender por qué se les conoce como hojas de estilo en cascada ya que entre ellas mismas se
va aplicando este concepto de cascada y se van sobre escribiendo según la prioridad de los elementos
que vayamos aplicando.
Así que cualquier duda que tengan con las hojas de estilo y el estilo que finalmente se está aplicando
pueden hacer una inspección con ayuda del navegador que estén utilizando en este caso con ayuda del
navegador de Google Chrome.
Como conclusión con este ejercicio hemos puesto en práctica la definición de estilos tanto dentro de
un atributo HTML en el archivo HTML y en un archivo externo de tipo CSS con esto ya tenemos las bases
para ir avanzando más respecto a temas de las hojas de estilo CSS.
Con eso incluimos elejercicio CSS.
Ejemplo 2.