Introducción a CSS
Introducción
- Los sitios web formateados con las etiquetas HTML son poco atractivos
- Las etiquetas HTML no proporcionan mucha flexibilidad en la presentación de contenido
- Las etiquetas fueron soportadas de diferente forma en los navegadores
- El uso inadecuado de etiquetas (como tablas) también causó problemas a las personas con necesidades especiales
Introducción a CSS
Introducción
- CSS es el acrónimo de Cascading Style Sheets
- CSS ha logrado ser un lenguaje de gran importancia
- CSS hace la vida más fácil a los programadores de páginas web
- CSS facilita la vida a muchas otras profesiones
Introducción a CSS
¿Qué es CSS?
¿Por qué se necesita CSS?
- Las versiones originales de HTML nunca tuvieron la intención de utilizar las etiquetas que se necesitan para dar formato
- HTML fue diseñado para definir el contenido de los documentos HTML
- Se hizo para el cuerpo, párrafo, y etiquetas de título entre otros
Introducción a CSS
¿Por qué se necesita CSS?
¿Qué es CSS?
- CSS es un lenguaje creado por el World Wide Web Consortium (W3C), diseñado específicamente para documentos de formato HTML
- Hoja de estilo es un tipo de plantilla que contiene la configuración de la fuente, el estilo, el formato y visualización que permiten mostrar un documento
- CSS apareció en HTML 4.0 con el fin de resolver un problema con las versiones anteriores de HTML
Introducción a CSS
¿Qué hace CSS?
¿Qué hace CSS?
- CSS logra que los sitios web HTML se vean bien y sean fáciles de usar
- Se consigue al permitir que el programador personalice las fuentes, tamaños de contenidos, espacios, colores, fondo, bordes, colocación, superposiciones, márgenes, cajas, el formato efectos de enlaces, botones, y listas
- En las versiones más recientes como CSS3, incluso se puede jugar con gradientes, transiciones y transparencias
Introducción a CSS
Estándares CSS
Estándares CSS
-
El estándar base es el estándar CSS2.1 que se encuentra en www.w3.org/TR/CSS21/. Se le agregan las siguientes normas:
-
✓ Atributos de Estilo CSS (www.w3.org/TR/Css-style-attr/)
✓ Consultas de Medios Nivel 3 (www.w3.org/TR/css3-mediaqueries/)
✓ Espacios de nombres CSS (www.w3.org/TR/Css3-namespace/)
✓ Selectores Nivel 3 (www.w3.org/TR/Css3-selectors/)
✓ Nivel de color CSS 3 (www.w3.org/TR/Css3-color/)
Introducción a CSS
Características básicas
-
✓ Características de las fuentes, como el tipo de letra y énfasis.
✓ Características del elemento de texto, como espaciamiento entre letras, espaciado de palabras y espaciamiento entre líneas.
✓ Características de color de todos los elementos.
✓ Alineación de elementos incluyendo texto, imágenes, controles y tablas
✓ Posicionamiento y tamaño de los elementos de espaciado tales como bordes, relleno y márgenes
✓ Identificación y clasificación de grupos de atributos
Introducción a CSS
Características avanzadas
Características avanzadas
-
✓ Posicionamiento absoluto, relativo y fijo de los elementos para que pueda crear una alineación precisa de los elementos.
✓ Índice z para controlar el apilamiento de elementos en la pantalla para que un elemento puede ocultar otro.
✓ Soporte para varios tipos de medios para que un desarrollador no necesite ser un artista para crear páginas espectaculares.
✓ Soporte para hojas de estilo auditivas donde se lee el contenido.
✓ Procesamiento de texto bidireccional.
✓ Añadir nuevos efectos de fuente, como sombras.
Introducción a CSS
Estructura de una regla CSS
Todas las declaraciones CSS siguen el mismo formato:
Introducción a CSS
Estructura de una regla CSS
-
Estructura de una regla CSS
- Una regla de CSS está formada por un "selector" y una "declaración"
- La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo"
- Un selector se puede utilizar para nombrar cualquier elemento HTML o componente específico que precisa estilo
- Una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas
Introducción a CSS
Cómo usar hojas de estilo
Cómo usar hojas de estilo
- Tres tipos de manejo de hojas de estilo: en línea, internas y externas
- La diferencia es simplemente donde se coloca el código en relación con el documento HTML
Introducción a CSS
Cómo usar hojas de estilo
-
Ejemplo de hoja de estilo en línea:
<p style="color: navy; font-family: Arial;">Párrafo de texto con estilo<p>
Introducción a CSS
Cómo usar hojas de estilo
-
Ejemplo de hoja de estilo en cabecera:
<html>
<head>
<style>
p {
font: verdana; color: navy;
align: right; }
.logo-imagen {
align: left;
min-height: 120px;
border: 2px solid #fff;
}
</style>
</head>
<body> ... ...</body>
</html>
Introducción a CSS
Cómo usar hojas de estilo
Ventajas de acceso a hojas de estilo externas:
- Es el tipo más habitual debido a ser el más conveniente
- Una hoja de estilo externa está fuera del documento HTML, en un archivo
- No deben incluir código HTML
- Los archivos de hojas de estilo externas siempre tienen extensión .css. El nombre del archivo más común es style.css
Introducción a CSS
Cómo usar hojas de estilo
Ejemplo de uso de hoja de estilo externa:
<link rel=”stylesheet” type=”text/css” href=“...style.css” />
<style type=”text/css”> @import url(...style.css) </style>
Introducción a CSS
Cómo usar hojas de estilo
Aplicación de estilos:
- Referenciando con palabra clave. Ejs.: p { font-size: 1cm }, span { font-size: 2cm }
- Referenciando con el atributo id. Ej.: #texto { font-size: 1cm }
- Referenciando con el atributo class. Ej.: .texto { font-size: 1cm }
- Referenciando con cualquier atributo. Ejs.: p[nombre] { font-size: 1cm }, p[nombre="textoUMU"] { font-size: 1cm }
Introducción a CSS
Proridades de las instrucciones
Proridades de las instrucciones
-
Cuando se usan varias hojas de estilo, puede haber un conflicto sobre la que controla a un selector dado
Las siguientes características determinarán el resultado de hojas de estilo que se contraponen:
Introducción a CSS
Prioridades de las instrucciones
Prioridad 1. ! important
-
Un estilo marcado como "importante" prevalecerá sobre estilos contradictorios de similar nivel.
La regla del autor primará sobre la regla del lector en estos casos.
td{ font-family: verdana, arial !important; }
td.casilla{
font-family: monospace;
}
Que aplicado sobre el siguiente código HTML:
<table>
<tr> <td class="casilla">Prueba</td> <td>137</td> </tr>
</table>
La primera celda, de clase "casilla", tendría la fuente monospace y la segunda celda, que no tiene ningún clase, tendría el estilo verdana, arial. Como la fuente definida en primer caso tiene la declaración !important, la fuente será siempre verdana, arial, para ambas celdas.
Introducción a CSS
Proridades de las instrucciones
Prioridad 2. Origen de las reglas
- Tanto los autores como los lectores tienen la capacidad de especificar hojas de estilo
- Caso de conflicto, las reglas del autor prevalecerán sobre las reglas del lector de similar peso
- Tanto las hojas de estilo del autor como las del lector primarán sobre las hojas de estilo del navegador
Introducción a CSS
Prioridades de las instrucciones
Prioridad 3. Especificidad
Prioridad 4. Orden de especificación
- Un estilo más específico siempre prevalecerá sobre uno menos específico
Prioridad 4. Orden de especificación
- Cuando dos reglas tienen el mismo peso, prima la última regla especificada
Propiedades básicas
Maquetación básica
Propiedades de maquetación básica
-
✓ width: Ancho de un elemento.
✓ height: Alto de un elemento.
✓ vertical-align: Alineamiento vertical dentro de un elemento.
✓ margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado (arriba, abajo, izquierda, derecha).
✓ padding: Relleno interior que se añade en los bordes. A diferencia de margin, cuenta para el tamaño del elemento.
✓ float: Mueve el elemento todo lo posible hacia el lado indicado.
Propiedades básicas
Fuentes y texto
Propiedades de fuente y texto
-
✓ font-family: Tipo de letra
✓ font-size: Tamaño de letra
✓ font-weight: Peso (normal, negrita, …)
✓ font-style: Estilo (normal, cursiva, …)
✓ text-decoration: “Decoraciones” como subrayado, tachado, etc.
✓ text-align: Alineación del texto (izquierda, derecha, etc.)
✓ text-transform: Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada palabra en mayúsculas.
Propiedades básicas
Color y fondos
Propiedades de color y fondos
-
✓ color: Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green, etc.) RGB o como valor hexadecimal.
✓ background-color: Color del fondo del elemento.
✓ background-image: Permite especificar una imagen de fondo.
✓ background-repeat: Permite usar una imagen a modo de mosaico en diferentes modalidades.
✓ box-shadow: Crear un efecto de sombra para un elemento.
Propiedades básicas
Listas
Propiedades de listas
-
✓ list-style-image: Usar la imagen especificada como viñeta para la lista.
✓ list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista.
Propiedades básicas
Bordes
Propiedades de bordes
-
✓ border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.)
✓ border-color: Color del borde.
✓ border-style: Diferentes estilos para el borde (sólido, puntos, etc.)
✓ border-radius: Permite crear esquinas redondeadas para un elemento.
Propiedades básicas
Diferentes medios o dispositivos
Estilos para diferentes medios o dispositivos:
| Medio | Descripción |
|---|---|
all |
Todos los medios definidos |
braille |
Dispositivos táctiles con sistema braille |
embosed |
Impresoras braille |
handheld |
Dispositivos de mano: móviles, PDA, etc. |
print |
Impresoras y navegadores en modo "Vista Previa para Imprimir" |
projection |
Proyectores y dispositivos para presentaciones |
screen |
Pantallas de ordenador |
speech |
Sintetizadores para navegadores de voz |
tty |
Dispositivos textuales limitados como teletipos y terminales texto |
tv |
Televisores y dispositivos con resolución baja |