Introducción a Estilos CSS
Tabla de contenido:
¿Que son las hojas de estilos CSS?
La Hoja de estilos CCS viene de la abreviatura de Cascading Style Sheets (en español Hojas de Estilo en Cascada).
Los estilos CSS son las instrucciones que lee el navegador web y que definen la apariencia en que deben representarse todos los elementos que componen la página tales como: tamaño, color, forma, etc.
Ventajas de utilizar estilos CSS
- Limpia y hace más sencilla y fácil de entender y modificar el código HTML de las páginas.
- Facilita cambiando los valores de un solo archivo (en caso de que el estilo CSS se encuentra en un archivo externo) modificar el estilo de varias páginas a la misma vez.
- Una página web puede tener distintos estilos, para ser usada y vista de forma adecuada en equipos diferentes, ya sea una PC de escritorio, una TabletPC o un teléfono celular.
Como aplicamos una regla de estilo CSS
Para aplicar estilo a nuestro elemento HTML, primeramente debemos de llamar al elemento, seguidamente poner los símbolos llaves ({}); y dentro la propiedad:valor.
Toda regla de estilo CSS consta de un selector y un bloque de declaración.
Uso de los estilos CSS en documentos HTML
En línea
Se aplica directamente en la etiqueta HTML
Dentro de un documento HTML
Son aquellos que se definen en la cabecera de la página a continuación de </head> y adentro del bloque style.
Todo lo que se escriba en el interior del bloque style será estilo CSS.
Hoja externa
tal como veíamos en el capitulo anterior podemos vincular hojas externas CSS a documentos HTML.
Esta es la manera más recomendada pues manipulamos desde un único archivo CSS a todos nuestras páginas HTML de nuestro sitio Web.
Elementos que aplicamos estilos CSS
Selectores de etiqueta
Es cuando llamamos directamente a la etiqueta HTML
Etiqueta SPAN
Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.
Selectores de clase
las clases son nombres personalizados que aplicamos a las etiquetas para diferenciar unas de otras. Por ejemplo tenemos 4 párrafos pero deseamos aplicar un estilo en especial sólo a uno de ellos. Este tipo de estilos podemos repetir muchas veces en nuestro documento HTML.
Para aplicar este tipo de estilo debemos de declarar la clase en el HTML
Luego en nuestro CSS declaramos antecediendo el punto
Selectores ID
La característica principal que tiene estos elementos es que se utilizan una sóla vez en el documento HTML
Aplicamos de la siguiente manera dentro de nuestro documento HTML
La manera de como llamarlo del CSS sería:
Agrupación de selectores
Si utiliza para aplicar estilos CSS a varios elementos a la vez. Para ello tienes que separar cada selector con una coma como en el siguiente ejemplo:
Selectores hijos directos
Se aplica cuando deseamos el estilo se lleve a un elemento descendiente directo de otro.
Por ejemplo si se desea aplicar un estilo a todos los elementos A que encuentran dentro del elemento LI que obligatoriamente se encuentren dentro de la clase menu
en la hoja de estilos CSS podemos aplicar (utilizamos el símbolo mayor):
Selectores descendientes
Se aplican a todos los elementos hijos sin importar el orden.
Por ejemplo en la siguiente captura podemos aplicar estilos a todos los elementos A que se encuentran dentro de la clase menu
en la hoja de estilos CSS podemos aplicar (separamos mediante un espacio):
Selectores de bloque DIV
Los selectores DIV nos permiten agrupar etiquetas de contenido.
Ejemplo:
Principales estilos CSS
Presento algunos de los estilos mas usados, tales como: negrita, cursiva, color de texto, etc
Estilos adicionales de fondo:
Podemos aplicar algunos ajustes al fondo por ejemplo:
en este caso le indicamos a la imagen de fondo que sólo se repita en forma horizontal y un tamaño de altura en específico
en este otro caso:
Aquí le indicamos que se adecúe a todo el ancho de la pantalla
Opacidad
Podemos aplicar opacidad a nuestros elementos del rango 0 a 1 donde: 0 = transparente y 1 es el color normal.
Ejemplo:
pseudo-clase
Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado.
La pseudo-clase :hover de CSS coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa.
En la presente sesión conoceremos el uso de la Hoja de Estilos CSS, añadido a esto lo anteriormente llevado HTML 5.
Ejemplo:
Vínculos a correo
Podemos aplicar de la siguiente manera
Practica Propuesta
Ahora se pide realizar la siguiente práctica:
Para descargar las imágenes utilizadas presione aquí
Como archivos adicionales presento:
Ejercicio 01:
Ejercicio 02:
Material a descargar:
Artículos relacionados
Introducción a Estilos CSS
Trabajando con etiquetas imágenes y vinculos
Practica de vínculos en HTML (etiqueta a)
Practica Maquetación Web
Practica Maquetación Web: Pisco Peruano
Menú Desplegable con HTML y CSS
Transiciones en CSS3
