¿QUÉ ES UNA HOJA DE ESTILOS?files.clasestutorial.webnode.com.co/200000623... · Una hoja de...
20
1 ¿QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading Style Sheets" (Hojas de Estilo en Cascada), funcionan aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de fondo, color del texto, posición de los elementos, márgenes, tipos de letra, entre otras. Quedando de esta manera toda lo que tiene que ver con la parte gráfica de la web, separada completamente de la estructura del HTML.
Transcript of ¿QUÉ ES UNA HOJA DE ESTILOS?files.clasestutorial.webnode.com.co/200000623... · Una hoja de...
1
¿QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading Style Sheets" (Hojas de Estilo en Cascada), funcionan aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de fondo, color del texto, posición de los elementos, márgenes, tipos de letra, entre otras. Quedando de esta manera toda lo que tiene que ver con la parte gráfica de la web, separada completamente de la estructura del HTML.
2
CREACIÓN DE LA HOJA DE ESTILOS Existen varias formas de aplicar estilos CSS a una página, el más recomendado y utilizado es creando un archivo que tendrá extensión .css, el cual se debe guardar en una subcarpeta de llamad estilos o CCS (tenga en cuenta que esta subcarpeta se almacena dentro de la carpeta raíz del sitio) En este caso hemos creado el archivo estilos.css y fue almacenado en la carpeta css del sitio ejemplo
Luego de crear el archivo CSS, se debe vincular con las paginas HTML que forman el sitio, con el fin de aplicarle los formatos a todas ellas. Para ello se realiza lo siguiente: Abrir el archivo HTML al que se le desea vincular la hoja de estilos (Tenga en cuenta que esto se debe realizar a cada página HTML que forma el sitio) Dentro de la etiqueta <head> digite el siguiente código:
<link href="carpeta/archivo.css" rel="stylesheet" type="text/css">
La etiqueta <link> define un enlace entre el documento y algún recurso externo. El elemento link debe ser ubicado en la sección head del documento. La cual se acompaña de los siguientes atributos:
• href permite referenciar el archivo que se desea vincular. • rel describe la relación entre el documento y el destino del enlace.
En este caso permitirá que los navegadores soporten de forma completa la hoja de estilos o “stylesheet”.
• type="text/css"> se utiliza para especificar el tipo de hoja de estilo que se utilizará.
3
En nuestro ejemplo, abrimos el archivo index.html y realizamos la vinculación de la hoja estilos de la siguiente manera, tenga en cuenta la ruta donde se encuentra ubicada el archivo CSS:
SINTAXIS DE LAS REGLAS CSS En la sintaxis de las reglas CSS se deben tener en cuenta tres elementos que la forman: Atributos Son las palabras que se utilizan para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo "background", entre otros. Valores Se utilizan para definir cómo se va a modificar el atributo, o la propiedad que se le dará. Por ejemplo, si se desea que un tipo de letra sea rojo, se utiliza el atributo "font" y el valor "red". Selectores Se usan para definir sobre cuales elementos HTML se van a aplicar los estilos, si se desea definir un estilo para toda la página, se debe usar el selector "body" que se refiere a la etiqueta <body> del documento HTML. Hay tres tipos de selectores:
a. Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que se le aplicará el estilo.
b. Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre.
c. El selector clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que se le desea poner a la clase, por ejemplo: .mi_clase
4
Para comenzar a trabajar con las reglas de estilos, se debe tener en cuenta que éstas comienzan con una llave { y debajo de ella se colocan los atributos, seguidos de dos puntos : y luego el valor seguido de punto y coma ; al final de todo se cierra el estilo para el selector con el cierre de llave } Se pueden definir tantos atributos con sus respectivos valores como se desee, separándolos con un espacio o un enter. En CSS se deben escribir los atributos y valores en minúsculas y los comentarios se encierran con /* para abrir y */ para cerrar. ESTILOS A ETIQUETAS HTML Es la forma más fácil pero menos recomendada para aplicación de estilos a un documento HTML. Se definen utilizando el atributo <style> y definiendo las características que tendrá dentro del documento. Cuando utilizamos el atributo <style> le indicamos al código donde comienza y donde termina el objeto que será afectado por el código. Por ejemplo si se desea aplicar formatos de fuente a un título que se encuentre entre una etiqueta <h1> el código sería:
Si se dese aplicar formatos de fuente a un párrafo, utilizamos la misma forma que hemos venido realizando durante todo el curso, así:
En ambos casos el resultado sería:
5
ESTILOS CSS A MARCADORES Para comenzar a utilizar reglas en la hoja de estilos, crearemos un documento HTML con el siguiente código, el cual solo tiene las etiquetas del código para estructurar su contenido, no se utilizaron etiquetas de formato para los textos ni fondos. También se ha vinculado a la página, la hoja de estilos, llamada estilos.css
6
En vista previa, el documento se observaría de la siguiente manera:
Para comenzar, vamos a crear una regla para aplicar color de fondo a la página. Para ello abrimos el archivo de la hoja de estilos y creamos el siguiente código:
Donde:
• Body: es el selector o etiqueta al que se le aplicará la regla. • Background: es el atributo que tendrá la regla, se debe
acompañar de dos puntos : y luego se coloca el valor, en este caso será un código hexadecimal para el color elegido. Se finaliza con un punto y coma ;
7
Al abrir la página en vista previa, el resultado será:
De esta forma podemos aplicar formatos a los diferentes elementos que forman la página, utilizando reglas CSS. Por ejemplo se puede crear una regla para que todos los textos, que sean referenciados por la etiqueta <h1> tengan un formato especial, así:
En este caso, el selector será la etiqueta <h1>, con los siguientes atriutos:
• font-family: verdana; Tipo de fuente verdana • font-size: 24px; Tamaño de fuente 24 puntos • color: #F5DEB3; Color de la fuente • background-color: #8B4513; color de fondo para el texto
8
El resultado sería:
Utilizando el atributo text-align: y su respectivo valor de alineación (center, left, right o justify) se pueden alinear los elementos de la página. Por ejemplo si se desean centrar los títulos creados con la etiqueta <h1> se realiza lo siguiente:
En vista previa se podrá observar de la siguiente manera:
9
Es importante tener en cuenta, que si en el código de la página se inserta otra etiqueta <h1>, el texto de ésta, tendrá el mismo formato que se indicó en la regla para los selectores <h1>. Por ejemplo, agreguemos un nuevo <h1> en el código, así:
El resultado en vista previa será:
En este ejercicio que estamos realizando, podemos aplicarle formato específico a los textos que forman los párrafos, los cuales están delimitados por la etiqueta <p>, permitiendo que todos los textos comprendidos en esta etiqueta queden con un formato específico. Por ejemplo:
10
El resultado sería:
Es importante tener en cuenta que en temas anteriores, utilizamos la etiqueta <span> acompañada del atributo style para aplicar formatos, éstos se pueden utilizar para enfatizar algún elemento del texto que este afectado por el estilo CSS de la etiqueta <p>, por ejemplo: en el primer párrafo queremos que el texto “Una hoja de estilo en cascada (CSS)” ubicado en el primer renglón del párrafo, aparezca en otro color y tamaño de fuente, para ello entonces utilizamos el siguiente código:
La etiqueta <span> debe comenzar a digitarse antes del texto que se desea afectar, en este caso: “Una hoja de estilo en cascada (CSS)”, y se debe cerrar </span> donde termine el texto. El resultado será:
11
A las imágenes también se pueden aplicar estilos, con el fin de que todas las imágenes que forman el sitio, tengan las mismas propiedades. Por ejemplo, hemos insertado dos imágenes a nuestra página (las cuales hemos almacenado con anterioridad en la carpeta img del sitio).
Como se puede observar en vista previa, las imágenes tienen diferentes tamaños:
12
Para mejorar la ancho y alto de todas las imágenes que se insertaran en el sitio, se crea un estilo para que se aplique al selector <img>, así:
El resultado será:
13
Se pueden aplicar otros tipos de propiedades a las imágenes, así:
Donde:
• Border-syle: solid; se utiliza para que el borde de la imagen sea un color sólido.
• Border-width; se utiliza para dar un grosor al borde de la imagen, en este caso se utilizarán 10 pixeles.
• Border-color; permite aplicarle un color al borde de la imagen.
14
El resultado será:
Además se puede indicar que el borde de la imagen tenga un borde redondeado, utilizando el atributo border-radius: y un valor en pixeles, a mayor valor, mas redondeado será el borde, por ejemplo:
En vista previa podrá observarse de la siguiente manera:
15
Para ampliar el espacio que se encuentra entre la imagen y el borde se puede utilizar el atributo padding: con su respectivo valor en pixeles. A mayor valor, el espacio será más amplio, observe:
El resultado será:
16
Si se inserta una tercer imagen al documento HTML, automáticamente heredará los atributos que se le asignaron al selector <img>.
17
REGLAS PARA VÍNCULOS Para realizar este ejercicio, debemos crear los documentos HTML que se desean vincular, así:
En el código HTML se deben crear los vínculos a estas páginas. Para ello en este caso se trabajará con una lista no ordenada, donde cada <li> será un vínculo, así:
Este código debe crearse en cada página HTML que forman el sitio. En vista previa los vínculos se observarían de la siguiente manera:
18
Luego en la hoja de estilos, se crea el siguiente código: Para quitar la decoración de los vínculos, como: los colores y el subrayado, se digita el siguiente código:
El resultado será:
19
Para cambar los colores de los vínculos y vínculos visitados, se utiliza el siguiente código, recuerde que los vínculos tienen predeterminado el color azul para el color del vínculo y vino tinto para los vínculos visitados.
En este caso, como ya hemos realizado clic sobre los links para verificar su funcionamiento, solo observaremos el color elegido para el vínculo visitado, así:
Para mejorar el aspecto de los vínculos, como eliminar la viñeta, colocarlos de forma horizontal y aplicarle un fondo, para darle la forma de botones, se realiza el siguiente código para el selector de la etiqueta <li>:
Donde:
20
• background: white; Permite colocar un fondo a la barra de navegación.
• border-right: 1em solid black; Permite colocar un borde negro al final del botón, se utiliza la unidad de medida: em y el color solido que llevará este borde, en este caso se utilizará un borde de color negro.
• list-style-type: none; Con este código se quita la viñeta de la lista.
• display:inline-block; Permite mostrar la lista de forma horizontal.
• padding:4px 70px; Se utiliza para para ampliar los espacios de los botones que se están generando. En este caso: 4 es para el ancho y 70 para el alto.
• text-align:center; Alinea el texto del vínculo.
El resultado de este ejercicio es el siguiente:
