PDF de programación - CSS práctico

Imágen de pdf CSS práctico

CSS prácticográfica de visualizaciones

Publicado el 8 de Julio del 2018
283 visualizaciones desde el 8 de Julio del 2018
340,6 KB
24 paginas
Creado hace 15a (14/01/2005)
CSS práctico

CSS práctico

1. Introducción
2. El tag LINK
3. Hojas de estilos alternativas
4. El tag STYLE
5. La directiva @import
6. Comentarios en CSS
7. Reglas básicas

7.1. Estructura de las reglas

8. Agrupación de selectores y declaraciones

8.1. Agrupación de selectores
8.2. Agrupación de declaraciones
8.3. Combinaciones de agrupación de selectores y declaraciones

9. El atributo CLASS
10. El atributo ID
11. Pseudo-Clases y Pseudo-Elementos

11.1. Pseudo-Clases
11.2. Pseudo-Elementos
11.3. Restricciones en las Pseudo-Clases y los Pseudo-Elementos

12. Estructura
13. Herencia
14. Especificidad

14.1. Importancia

15. Estilos en cascada
16. Clasificación de los elementos
17. Colores
18. Unidades
19. Indentación
20. Alineación
21. Espacios en blanco
22. Anchura de líneas
23. Alineación vertical
24. Espacio entre palabras
25. Espacio entre letras
26. Transformaciones del texto
27. Decoración del texto

1. Introducción

http://xml-utils.com/conferencia-css.html (1 of 24)14-01-2005 11:05:30

CSS práctico

En los orígenes de la Web y en sus primeras versiones, HTML era un lenguaje fácil de aprender y muy reducido en
cuanto a sus tags y estructura. Estamos hablando de los años 1990 al 1993. Todo cambió cuando empezaron a surgir los
primeros navegadores que eran capaces de representar recursos gráficos como añadido a la información textual.

Así, el número de sitios web comenzó a crecer y con él, el número de tags que la especificación HTML contemplaba. El
objetivo era construir sitios web cada vez más atractivos visualmente hablando, con lo que HTML debía incluir nuevos
tags destinados a conseguir diversos efectos visuales.

Con todos estos cambios que la web había sufrido, nos encontramos con que un lenguaje que en sus inicios había sido
"orientado a la estructura", ahora estaba totalmente "orientado a la visualización" (HTML 4 es la más viva
representación de esta realida). Encontramos tags com <B>, <U> o <I> que definen estilos de visualización sin aportar
nada a la estructura del documento representados.

Otro aspecto importante y que condiciona totalmente la estructura del documento es el uso del tag FONT. Con el uso de
este tag podemos hacer que una zona que corresponde a la cabecera o título de una página, y que debería expresarse con
un H1, pase ahora a estar definida mediante el tag FONT. Con este cambio se pierder totalmente la estructura del
documento.

La realidad ahora es que el mayor número de los sites realizados con HTML 4 consiguen que el volumen de información
de visualización sea muy superior al de la información verdaderamente relevante. Esto parece, cuanto menos
precoupante.

Motivos por los que no podemos permitir que nuestros documentos publicados en la web pierdan su estructura:

l La indexación por los buscadores es mucho más complicada (Google asigna un peso mucho mayor a una página

que utliza H1 para definir sus secciones, que a los campos META del documento).

l Se reduce la acesibilidad. Actualmente existen aplicaciones que permiten la lectura de páginas web como ayuda a

los discapacitados (persona ciegas o con otras discapacidades). Si una persona discapacitada intenta acceder a
una página sin una mínima estructuración, el resultado puede ser lamentable.

l La estructura de la página y la información contenida en la misma es mucho más sencilla de mantener.

Actualmente, ciertos aspectos del código HTML pueden hacer que una misma página tenga visualizaciones
distintas en distintos navegadores. Estos herrores de diseño son dificilmente depurables cuando la página
contiene una estructura de tags complicada y sin ninguna estructuración. Por otra parte, un cambio en un tipo de
fuente supone el rediseño de todas las páginas de un site al tener que sustituir todos los valores para el tag FONT.

Todos estos problemas han sido seguidos muy de cerca por el W3C, el cual comenzó a trabajar en 1995 en CSS.

Principales características aportadas por CSS en contraposición a los elementos de visualización presentes en la
especificación de HTML 4:

l Estilo enriquecido. CSS permite la creación de documentos visualmente mucho más ricos que lo que HTML

nunca permitirá. No en vano CSS está pensado única y exclusivamente para asistir al diseñador a la hora de dar
estilo a un documento estrucuturado.

l Fácil de utilizar. La utilización de hojas de estilo CSS hace que el diseñador pueda reducir sustancialmente su
carga de trabajo al diseñar todo un site. Esto se debe a que CSS es capaz de centralizar ciertos efectos visuales
que plasmemos en diversas secciones del site, en lugar de tenerlos diseminados por páginas y páginas del site.
l Reutilización en múltiples páginas. Una hoja de estilo que recoja aspectos visuales comunes a varias páginas

puede ser reutilizada en cualquier sección del site aprovechando dichos efectos ya definidos. De esta manera es

http://xml-utils.com/conferencia-css.html (2 of 24)14-01-2005 11:05:30

CSS práctico

sencillo generar un estilo general del web y mantenerlo así consistente para todas las páginas. Así, si deseamos
modificar un estilo que es común a todo el site, sólo necesitaríamos modificar una línea de nuestro fichero CSS
(con la aproximación clásica que ofrece HTML, deberíamos modificar todas y cada una de las páginas).

l Reutilización en múltiples páginas. Una hoja de estilo que recoja aspectos visuales comunes a varias páginas

puede ser reutilizada en cualquier sección del site aprovechando dichos efectos ya definidos. De esta manera es
sencillo generar un estilo general del web y mantenerlo así consistente para todas las páginas. Así, si deseamos
modificar un estilo que es común a todo el site, sólo necesitaríamos modificar una línea de nuestro fichero CSS
(con la aproximación clásica que ofrece HTML, deberíamos modificar todas y cada una de las páginas).

Figura 1. Hoja de estilos personal

Figura 2. Hoja de estilos personal

http://xml-utils.com/conferencia-css.html (3 of 24)14-01-2005 11:05:30

CSS práctico

Ejemplo 1. Fichero personal.css

a {
color: white; background-color: black;
}

l Reduce el tamaño del código HTML enviado. Al centralizar los estilos ya no es necesario la utilización de tags

como FONT en todos los documentos del site. De esta manera se reduce considerablemente el tiempo en que
tarda en cargarse el código de una página.

l Nos prepara par el futuro. Debemos ser conscientes que muchos tags como FONT, BASEFONT, U, STRIKE, S,

CENTER, han sido marcados por el W3C como "deprecated", es decir, que se desaconseja su uso ya que serán
eliminados en un futuro de la especificación. De igual menera HTML retornará progresivamente a sus orígenes,
volviendo a ser un lenguaje para la estrucuturación de información. Esta es la via de XML, cuya primera
aproximaciés es el lenguaje de marcas XHTML.

Aspectos con los que CSS no se ha enfrentado en su primera especificación:

l En CSS1 no se habla casi nada acerca de las tablas. Por ejemplo, según lo que se vé en la especficación parece
evidente que se podrán definir márgenes para las celdas de una tabla (se pueden definir márgenes para todos los
elemento), pero no es así. CSS2 introduce un nuevo conjunto de propiedades para la interacción con tablas. De
hecho, la omisión del tratamiento de tablas en la primera especificación de CSS, intenta marcar que las tablas no
son un elemento que se deba utilizar para disponer el resto de elementos en la página.

l Así, para el posicionamiento de los elementos se deben utilizar estilos y no tablas. Aunque CSS2 tiene tres

capítulos enteros dedicados al posicionamiento de elementos.

l CSS1 no trata la posibilidad de disponer de fuentes descargables. Aunque CSS2 introduce algún aspecto sobre el
soporte de fuentes, es un tema que no queda resuelto. Parece que será otros estandar como SVG (Scalable Vector
Graphics), el que tendrá en su mano la solución.

l En CSS1 no se definen los posibles medios de presentación de CSS, siendo la pantalla el único medio disponible.

Con el fin de conseguir hojas de estilo que adapten su visualización al medio en que serán presentadas, CSS2
define el soporte para que se aplique una hoja de estilos u otra en función del medio seleccionado (screen, print o
aural).

http://xml-utils.com/conferencia-css.html (4 of 24)14-01-2005 11:05:30

CSS práctico

Implementaciones:

l Las peores son las que realizaron en su dia "Microsoft Internet Explorer 3.x" y "Netscape Navigator 4.x".
l Mejoraron en cierta medida su soporte con las versiones de "Microsoft Internet Explorer 4.x and 5.x".
l Actualmente, el mejor soporte de CSS lo tiene Opera y Mozilla (en menor medida).

2. El tag LINK

<link rel="stylesheet" type="text/css" href="estilos.css" title="default">

Para conseguir la adecuada carga de la hoja de estilos, debemos posicionar este elemento en el HEAD de la página.

Atributos del tag LINK:

l REL. Define el tipo del documento o "con qué tiene relación". En general, su valor será "stylesheet".
l TYPE. Será siempre "text/css".
l HREF. Es el valor de la URL que nos permite el acceso al fichero de estilos.
l TITLE. Actualmente casi no se utiliza, pero será muy importante en el futuro. Su importancia radica en que
puede haber en el mismo documento más de un tag LINK. En el caso de que haya más de un tag LINK, sólo
aquellos cuyo valor de REL sea "stylesheet" se aplicarán inicialmente al documento:

<link rel="stylesheet" type="text/css" href="basic.css">
<link rel="stylesheet" type="text/css" href="splash.css">

El navegador cargará ambas hojas de estilo, combinando las reglas que definen y aplicando el resultado al documento.

3. Hojas de estilos alternativas

Es de especial utilidad hacer uso del tag TITLE, cuando definimos hojas de estilo alternativas. En el siguiente ejemplo
se definen tres hojas de estilo dentro del mismo documento de forma que:

l La primera definición se aplicará siempre.
l El nav
  • Links de descarga
http://lwp-l.com/pdf12404

Comentarios de: CSS práctico (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad