PDF de programación - CSS (cubre CSS1, CSS2 y CSS3)

(3)



índice

(4.1.1) introducción
(4.1.2) la ayuda de CSS

(4.3.1) comentarios

(4.4.1) en una etiqueta concreta de HTML
(4.4.2) en el elemento de cabecera style
(4.4.3) en un archivo externo
(4.4.4) orden de aplicación de estilos
(4.4.5) herencias

(4.5.1) introducción
(4.5.2) selección de elementos HTML
(4.5.3) selección de clases
(4.5.4) selección de identificadores
(4.5.5) selector de limitación
(4.5.6) selector universal
(4.5.7) selección por atributos
(4.5.8) selectores jerárquicos
(4.5.9) pseudoclases

(4.1) las limitaciones de HTML _________________________________________ 7
7
7
(4.2) versiones de CSS ________________________________________________ 8
(4.3) sintaxis básica de CSS ___________________________________________ 8
9
(4.4) inserción de código CSS _________________________________________ 9
9
10
11
12
13
(4.5) selectores _______________________________________________________ 13
13
13
14
15
15
15
16
17
20
(4.6) formas de indicar valores de propiedades CSS ____________________ 21
21
21
22
27
(4.7) formato de fuente _____________________________________________ 27
27
29
(4.8) formato del texto ______________________________________________ 33
33
33
33
34
34
35
35

(4.8.1) word-spacing
(4.8.2) letter-spacing
(4.8.3) text-decoration
(4.8.4) vertical-align
(4.8.5) text-align
(4.8.6) text-indent
(4.8.7) text-transform

(4.6.1) introducción
(4.6.2) unidades de medida numéricas
(4.6.3) indicación de color
(4.6.4) indicación de URL

(4.7.1) propiedades de las fuentes
(4.7.2) propiedades de la fuente (tipografía)

(5)

lenguajes de marcas y sistemas de gestión de información
(unidad 4) hojas de estilo, CSS

(4.8.8) direction
(4.8.9) text-overflow
(4.8.10) text-shadow

(4.10.1) list-style-type
(4.10.2) list-style-image
(4.10.3) list-style-position
(4.10.4) opciones de display referidas a listas

(4.11.1) elementos del formato de caja
(4.11.2) configuración del borde

(4.9.1) color de fondo. background-color
(4.9.2) imagen de fondo. background-image
(4.9.3) repetición del fondo. background-repeat
(4.9.4) posición de la imagen. background-position
(4.9.5) desplazamiento del fondo. background-attachment
(4.9.6) background

35
35
36
(4.9) fondo _________________________________________________________ 36
36
36
37
37
38
38
(4.10) listas _________________________________________________________ 39
39
40
40
40
(4.11) configuración de bordes y espacios alrededor de los elementos ____ 42
42
43
(4.12) tablas ________________________________________________________ 48
(4.13) posicionamiento ______________________________________________ 50
50
51
52
52
54
56
58
(4.14) propiedad display ___________________________________________ 61
(4.15) formatos avanzados de caja (box) _____________________________ 65
(4.16) generación de contenido ______________________________________ 67
67
68
(4.17) propiedades avanzadas de CSS3 _______________________________ 70
(4.17.1) el problema de la compatibilidad. prefijos
70
(4.17.2) opacidad
70
(4.17.3) relleno con gradientes
70
(4.17.4) transformaciones
71
(4.17.5) transiciones
72
(4.17.6) animaciones
74
(4.18) aplicar CSS a documentos XML ________________________________ 76

(4.13.1) introducción
(4.13.2) flotación
(4.13.3) tamaño del elemento
(4.13.4) modo de posicionamiento
(4.13.5) establecer coordenadas de posicionamiento
(4.13.6) coordenada z
(4.13.7) propiedades de visibilidad

(4.16.1) propiedad content
(4.16.2) numeración automática

(6)



(4) hojas de estilo

CSS

(4.1) las limitaciones de HTML

(4.1.1) introducción

Como lenguaje para dar formato a las páginas web, HTML es muy limitado. En sus
primeras versiones todas las posibilidades de formato se conseguían mediante etiquetas.
Así existían etiquetas para modificar el tipo de letra (font), uso de maquetaciones
complejas (frame), etc. Es decir ante una nueva necesidad, se inventaba una nueva
etiqueta.

Hoy en día (y ya desde hace muchos años) se ha entendido que ese no es el modelo
lógico para hacer páginas web. Es decir se ha entendido que HTML es un lenguaje que
no es muy apropiado para definir el formato de la página. Las razones de no usar HTML
para realmente dar formato a la página son:

Podemos reutilizar el formato fácilmente para diferentes páginas manteniendo
un formato coherente y armonioso en todo el sitio web. Con las etiquetas HTML
no es posible, habría que volver a utilizar las etiquetas ya definidas.

Permite usar HTML sólo como lenguaje semántico. De otro modo perderíamos el
significado del texto. Esto es algo esencial para que los buscadores distingan el
significado del texto de las páginas y afinen mejor en los resultados de las
búsquedas que ofrecen al usuario.

De usar sólo HTML, habría infinidad de etiquetas y una gran probabilidad de que
cada navegador use las suyas propias (como ha ocurrido durante tantos años e
incluso ahora sigue ocurriendo con algunas etiquetas).

El formato y el contenido son independientes, con lo que se puede utilizar un
lenguaje más apropiado para definir el formato. Es más, si en el futuro se
inventan mejores lenguajes, sería fácil adaptarlos a las páginas web.

(4.1.2) la ayuda de CSS

CSS es la abreviatura de Cascade Style Sheets (Hojas de Estilo en Cascada) y se trata de
un lenguaje de texto que se incrusta en las páginas web para modificar el formato de la
página. Actúa sobre HTML haciendo que las etiquetas HTML se muestren en el navegador
con el formato que se indique.

Es capaz de actuar sobre todas las etiquetas del mismo tipo o sobre unas concretas.
Se puede almacenar en un archivo aparte que después se puede usar para varias páginas
a la vez. De modo que si cambiamos algo en el estilo, al instante se reflejará en todas
las páginas.

(7)

lenguajes de marcas y sistemas de gestión de información
(unidad 4) hojas de estilo, CSS

CSS por lo tanto facilita la homogeneidad de las páginas y su mantenimiento. Hoy en
día se considera una técnica imprescindible para dar formato a las páginas web. Además
se puede aplicar también a código XML.

(4.2) versiones de CSS

CSS se ideó a mediados de los años 90 y se ha ido estandarizando. A día de hoy se habla
de tres versiones de CSS:

CSS1. Es la versión original de CSS. Estandarizada en 1996 por la W3C incluye

formatos de texto, párrafo, márgenes, lista, tamaños de imágenes,…

CSS2. Es estándar desde 1998. Amplía el CSS anterior para incluir sobre todo
posicionamiento (manejo de capas), además de tipos de medios (que permite
definir distintos tipos de páginas web según los diferentes medios que la usen,
pantallas, impresoras, reconocedores de voz…).

La especificación 2.1 es el último estándar. Modificó errores de la anterior.

CSS3. Se lleva trabajando en ella desde 1998 y es ahora cuando parece que se
está convirtiendo en el nuevo estándar. En realidad se compone de una serie de
módulos que definen diferentes especificaciones que sumadas a CSS2 (con la
que sigue siendo compatible) dan lugar a posibilidades muy avanzadas de
formato. Como manejo del contenido, sombreados y rellenos avanzados,
transparencias, transiciones, nuevos selectores,… De hecho en total hay unos
30 módulos, varios de ellos son ya considerados recomendación oficial.

En conjunto aún está en fase de borrador, se pueden observar sus trabajos en
www.w3.org/Style/CSS/current-work

En estos apuntes se comenta de manera bastante profunda la especificación CSS2 y
parte de las especificaciones CSS3. La mayoría de navegadores soportan íntegramente
hasta CSS2 y parcialmente CSS3. Algunas páginas como http://css3test.com/ permiten
comprobar qué parte (incluso qué porcentaje) de CSS3 reconoce el navegador.

(4.3) sintaxis básica de CSS

CSS es un lenguaje distinto de HTML es muy sencillo, pero su dificultad radica en que es
muy extenso. CSS sigue esta sintaxis

selector {
propiedad1:valor1;

propiedad2:valor2;
…
}

El selector es la parte de CSS que nos permite indicar a qué elemento (o elementos) de
la página web se va a aplicar el formato CSS. Para indicar dicho formato se marcan
propiedades del elemento (cuyo nombre debe de ser reconocido por CSS) a las que
asignamos valores. Esas propiedades permiten modificar el formato del elemento y los
valores indican cuál es su nuevo formato.

(8)

1er curso de administración de sistemas informáticos en red
autor: Jorge Sánchez – www.jorgesanchez.net

Ejemplo:

p{
font-size:14pt;
color:red;
}

Ese código CSS provocaría que los elementos de tipo p salgan con tamaño de letra de 14
puntos y color rojo.

(4.3.1) comentarios

Dentro del código CSS se pueden colocar comentarios. Para ello el texto del comentario
se encierra entre los símbolos /* y */. Ejemplo:

line-height:10pt;

p {

/*El siguiente código marcará el texto subrayado*/


}

text-decoration:underline;
text-align:center;

(4.4) inserción de código CSS

(4.4.1) en una etiqueta concreta de HTML

Todos los elementos de HTML (p, strong, abbr, h1,…) pueden utilizar un atributo
llamado style, dentro de este atributo podemos añadir código CSS. Ejemplo:

<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Este texto sale de color negro (normal)</p>
<p style="color:red;">Este texto sale de color rojo </p>
</body>
</html>

En este caso el código CSS no lleva selector alguno, porque el estilo se aplica al
elemento en el que se incrustó el código CSS. El resto del documento no queda afectado
por el código CSS.

(9)

lenguajes de marcas y