PDF de programación - HTML y CSS

HTML & CSS

HTML & CSS

(Versión 1.5)

José María Morales Vázquez


josemaria@

morales-vazquez.com

José María Morales Vázquez

Página 1

HTML & CSS

CONTENIDO
1. INTRODUCCIÓN...............................................................................................................6
Historia de los lenguajes de marcas.............................................................................6
Algunos lenguajes de marcas.......................................................................................7
Componentes de un lenguaje de marcas..................................................................8
Diferencias entre HTML y XHTML....................................................................................9
Editores de texto enriquecido.....................................................................................10
Navegadores.................................................................................................................11
HTML4 vs HTML5..............................................................................................................11
2. HTML BÁSICO..................................................................................................................14
2.1. ESQUELETO BÁSICO....................................................................................................14
El DOCTYPE.....................................................................................................................14
Los elementos Básicos..................................................................................................14
2.2. ELEMENTOS DE BLOQUE Y ELEMENTOS DE LÍNEA.....................................................15
2.3. LAS ETIQUETAS MÁS COMUNES.................................................................................16
Listas................................................................................................................................17
Las imágenes.................................................................................................................18
Los hiperenlaces............................................................................................................18
Comentarios...................................................................................................................20
Dirección del texto........................................................................................................20
Acrónimos y abreviaturas.............................................................................................21
Caracteres especiales..................................................................................................21
2.4. TABLAS..........................................................................................................................21
2.5. ALGUNAS ETIQUETAS Y ATRIBUTOS DESACONSEJADOS MÁS................................24
3. CSS. SELECTORES BÁSICOS............................................................................................25
3.1. INTEGRACIÓN DE HTML CON CSS.............................................................................25
Comentarios en hojas de estilo CSS...........................................................................26
3.2. SELECTORES BÁSICOS.................................................................................................26
Selectores de tipo o de etiqueta................................................................................26
Selector universal...........................................................................................................27
Colores y propiedades básicas del texto..................................................................27
Selectores descendientes............................................................................................30
Selectores de clase.......................................................................................................31
Selectores de ID.............................................................................................................32
3.3. COMBINANDO SELECTORES......................................................................................32
4. UNIDADES DE MEDIDA Y OTRAS PROPIEDADES..........................................................34
Unidades de medida....................................................................................................34
Unidades de medida específicas de las tipografías................................................34
Unidades absolutas.......................................................................................................34
Unidades relativas.........................................................................................................35
Porcentajes....................................................................................................................36
4.1. MÁS PROPIEDADES PARA EL TEXTO..........................................................................36
4.2. APLICAR ESTILOS A LAS LISTAS...................................................................................38
4.3. DOS NUEVAS ETIQUETAS HTML: div y span...............................................................39
4.4. HERENCIA.....................................................................................................................40

José María Morales Vázquez

Página 2

HTML & CSS

4.5. ESPECIFICIDAD............................................................................................................41
La clausula !important..................................................................................................43
5. EL MODELO DE CAJAS..................................................................................................44
5.1. EL CONCEPTO DE CAJA............................................................................................44
div es la caja más versatil.............................................................................................45
5.2. PROPIEDADES DE LA CAJA........................................................................................45
Las dimensiones del contenido...................................................................................45
Márgenes interior y exterior..........................................................................................45
El borde de la caja........................................................................................................46
Imágenes de fondo en las cajas y sus propiedades................................................48
Cajas y jerarquía de elementos..................................................................................49
5.3. POSICIONANDO LAS CAJAS (Y OTROS ELEMENTOS)..............................................49
Las propiedades float y clear......................................................................................50
Introduciendo la tercera dimensión en el documento...........................................52
Visibilidad, desbordamientos y recortes....................................................................53
5.4. OTRAS PROPIEDADES..................................................................................................54
Cambiar el aspecto del puntero del ratón...............................................................54
Alterando si un elemento es de bloque o de línea..................................................55
Modificando el aspecto de los bordes de las celdas de una tabla......................55
6. SELECTORES AVANZADOS.............................................................................................56
Selector de hijos.............................................................................................................56
Selector de hermanos adyacentes (o adyacente, sin más)..................................56
Selector de atributos.....................................................................................................57
6.1. PSEUDO­CLASES Y PSEUDO­ELEMENTOS...................................................................58
Pseudo­clases................................................................................................................58
Pseudo­elementos.........................................................................................................59
7. ALGUNOS DISEÑOS Y EFECTOS ÚTILES.........................................................................61
7.1. DISEÑOS DE ANCHO FIJO, LÍQUIDOS (O FLUIDOS) Y ELÁSTICOS...........................61
Ejemplo 1 – Cajas..........................................................................................................61
Ejemplo 2 – Tres columnas............................................................................................65
Ejemplo 3 – Diseño de alto y ancho fijo.....................................................................66
Ejemplos 4 y 5 – Diseños de ancho líquido................................................................67
Ejemplo 6 – Diseño fijo, fluido, fijo................................................................................67
Ejemplo 7 – Separadores entre columnas transparentes........................................68
Ejemplo 8 – Sombras y diagonales..............................................................................68
7.2. DISEÑO DE TABLAS......................................................................................................69
7.3 OTROS TRUCOS.............................................................................................................70
Ejemplos 10 y 11 – Transpariencias..............................................................................70
Ejemplo 12 – Box Punch................................................................................................72
Ejemplos 13 y 14 – Tooltips......................................