mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-06 00:56:54 +00:00
214 lines
8.8 KiB
HTML
214 lines
8.8 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html>
|
|
<head>
|
|
|
|
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
|
|
<title>Introducción a CSS</title>
|
|
|
|
|
|
<link rel="stylesheet" href="../nvu2005.css" type="text/css">
|
|
|
|
<!-- parche de compatibilización con CSS 2 para navegadores microsoft -->
|
|
<!--[if lt IE 7]>
|
|
<script src="../ie7/ie7-standard-p.js" type="text/javascript"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div id="localizador">
|
|
<p>Estilos>>Introducción</p>
|
|
|
|
</div>
|
|
|
|
<div id="flechadcha">
|
|
<a href="css2.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="../xhtml/xhtml.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
|
|
<div id="contenido">
|
|
<h2>Cascading Style Sheets</h2>
|
|
|
|
<p>O lo que es lo mismo: hojas de estilo en cascada.</p>
|
|
|
|
<p>El motivo de haber puesto en primer lugar la
|
|
denominación en inglés es porque vas a encontrar
|
|
en muchos momentos estas siglas para referirse al concepto que
|
|
trabajaremos en este epígrafe. Poco a poco iremos
|
|
descifrando el significado real de esta denominación que,
|
|
por ahora, puede resultarnos un tanto críptica.</p>
|
|
|
|
<p>Lo primero en lo que coincidiremos es en que el lenguaje HTML
|
|
es
|
|
francamente antipático y poco flexible cuando se trata de
|
|
incidir en la apariencia de una página. El problema real
|
|
está en que la concepción original del mismo no
|
|
pretendía orientarlo hacia el aspecto gráfico: la
|
|
misión principal de las etiquetas HTML es proporcionar
|
|
estructura lógica y semántica al
|
|
contenido. Pensemos que el lenguaje HTML surgió en
|
|
un entorno, el universitario, y con un propósito, la
|
|
publicación de contenidos científicos
|
|
estructurados, eminentemente textuales. El problema es que la masiva
|
|
difusión de Internet hizo que se rompiera el marco original
|
|
y se hiciera necesario, especialmente desde la irrupción de
|
|
un uso comercial, presentar páginas en las que el centro de
|
|
gravedad se trasladaba del contenido y su estructura a la forma, ya que
|
|
se trataba de crear "imagen de marca". Fue entonces cuando empezaron a
|
|
aparecer los problemas, ya que el lenguaje HTML no está
|
|
pensado para trabajar con los elementos formales sino con los
|
|
de tipo estructural.</p>
|
|
|
|
<p>Si te paras a pensar un poco sobre lo que acabas de leer
|
|
puedes darte cuenta por ejemplo de que, aunque hayamos podido utilizar
|
|
las etiquetas <h1> para conseguir un texto de un
|
|
determinado tamaño que nos pudiera valer de titular lo
|
|
lógico habría sido emplearlas para organizar los
|
|
contenidos indicando que su contenido es el
|
|
título de un fragmento que tiene tiene una
|
|
importancia superior, que aquellos que van encabezados por un
|
|
<h2> </p>
|
|
|
|
<p>El crecimiento exponencial de Internet hizo que la imagen que
|
|
nos hemos hecho de lo que debe ser una página WEB fuera
|
|
acercándose a lo que es hoy: un entorno multimedia en el que
|
|
los aspectos formales han cobrado una gran importancia. Pero esta
|
|
percepción sigue apoyándose en la
|
|
utilización del mismo lenguaje que le había
|
|
servido de base en los primeros tiempos, lo cual ha hecho que los
|
|
diseñadores hayan tenido que recurrir a trucos y
|
|
artimañas para paliar las deficiencias del lenguaje HTML en
|
|
lo referente a la presentación visual.</p>
|
|
|
|
<p>Al tratarse de añadidos a la finalidad original, y
|
|
en muchos casos utilizaciones francamente contradictorias con la misma,
|
|
podemos encontrarnos con situaciones muy problemáticas
|
|
cuando pretendemos introducir modificaciones globales en un sitio WEB.
|
|
¿Imaginas, por ejemplo, el trabajo
|
|
que sería necesario para cambiar el tipo de letra
|
|
de un sitio WEB compuesto por cincuenta páginas? </p>
|
|
|
|
<p>La forma de solucionarlo ha sido la utilización de
|
|
las hojas de estilo en cascada. Las hojas de estilo en cascada aportan,
|
|
como característica esencial, la posibilidad de separar los
|
|
elementos formales de los de contenido, de forma que con una
|
|
pequeña modificación de la hoja de estilo se
|
|
pueda cambiar el aspecto de todas las páginas en las que se
|
|
aplica esa hoja. Volviendo al ejemplo anterior tal vez nos
|
|
bastaría con cambiar una vez la palabra sans-serif por serif
|
|
para conseguir que las cincuenta páginas de nuestra web
|
|
cambiaran automáticamente de apariencia.</p>
|
|
|
|
<p>Antes de empezar es conveniente considerar una
|
|
cuestión: el <acronym>W3C</acronym>,
|
|
como organismo encargado de la estandarización, elabora un
|
|
conjunto de especificaciones normativas, pero... cada
|
|
navegador
|
|
ofrece un soporte más o menos ajustado a las
|
|
especificaciones.
|
|
De hecho nos encontramos en un momento en el que la
|
|
especificación CSS3, que incluye una gran cantidad de
|
|
posibilidades no contempladas en las versiones previas, no es soportada
|
|
por ningún navegador. Incluso, la implementación
|
|
de las
|
|
especificaciones CSS2 presenta importantes deficiencias en
|
|
Explorer 6 y anteriores, lo cual nos obligará a buscar
|
|
algunos
|
|
trucos para lograr efectos similares en todos los navegadores. Es muy
|
|
probable que las nuevas versiones de los navegadores que tal vez hayan
|
|
aparecido cuando leas esta documentación superen estos
|
|
problemas
|
|
y se ajusten a la normativa común. </p>
|
|
|
|
<h2>¿Por qué se denominan hojas de estilo?</h2>
|
|
|
|
<p>La denominación de hojas de estilo hace referencia
|
|
a que podemos, a partir de las etiquetas básicas de HTML,
|
|
realizar modificaciones en las propiedades de las
|
|
mismas, indicándole al navegador unas instrucciones
|
|
muy precisas sobre la forma en la que tiene que presentar un
|
|
determinado elemento, esto es, el estilo de la presentación.
|
|
</p>
|
|
|
|
<p>Una ventaja añadida es que, al tratarse de una
|
|
colección de instrucciones escrita en formato de texto. Si
|
|
recurrimos a su uso más aconsejable, dichas
|
|
instrucciones
|
|
estarán separadas de la propia página web y
|
|
serán
|
|
aplicables a múltiples páginas
|
|
simultáneamente,
|
|
por lo que conseguiremos que el código
|
|
de nuestra página en sí resulte
|
|
mucho
|
|
más ligero. </p>
|
|
|
|
<p>Por otra parte, al quedar un código mucho
|
|
más limpio gracias a la descarga de los elementos de
|
|
formato, la estructura de la información quedará
|
|
mucho más clara ya que el código
|
|
tenderá a ser muy simple. </p>
|
|
|
|
<h2>¿Por qué se denominan "en cascada"?</h2>
|
|
|
|
<p>A la hora de crear un estilo, las especificaciones que se
|
|
realicen para un determinado elemento serán aplicables a
|
|
todos aquellos elementos que se encuentren "por debajo" de
|
|
él atendiendo a un criterio de herencia. Por ejemplo, si
|
|
especificamos un tipo de letra para el elemento <body>
|
|
todos aquellos elementos que puedan heredar las
|
|
características se presentarán con el mismo tipo
|
|
de fuente. Así, el elemento <p>
|
|
heredará el tipo de letra salvo que especifiquemos lo
|
|
contrario y no necesitaríamos volver a indicar esta
|
|
característica. </p>
|
|
|
|
<p>Gracias a la organización en cascada podemos crear
|
|
hojas de estilo muy compactas, ya que una sola norma en el primer
|
|
elemento de la cadena de herencia permite que podamos aplicarla a todos
|
|
los herederos.</p>
|
|
|
|
<p>Además de ello se establece un orden de prioridad
|
|
para la aplicación de las normas en caso de que resulten
|
|
contradictorias. El orden de preferencia para aplicar una norma es el
|
|
siguiente:</p>
|
|
|
|
<ol>
|
|
|
|
<li>Estilo especificado dentro de la etiqueta. (estilo en
|
|
línea) </li>
|
|
|
|
<li>Estilo especificado en la cabecera del documento. (hoja de
|
|
estilos interna)</li>
|
|
|
|
<li>Estilo definido en un documento independiente al que se
|
|
enlaza nuestra página. (hoja de estilos externa) </li>
|
|
|
|
</ol>
|
|
|
|
<p>Teniendo en cuenta el orden mencionado, el procedimiento
|
|
más cómodo es crear una hoja de estilo en un
|
|
archivo independiente y vincular las páginas a este archivo.
|
|
Si queremos realizar alguna modificación en un elemento
|
|
concreto podríamos recurrir a uno de los dos primeros
|
|
procedimientos que, al ser más específicos,
|
|
resultarán preferentes.</p>
|
|
|
|
<h2>¿CSS1, CSS2 o CSS3?</h2>
|
|
|
|
<p>Es posible que en cuanto intentes localizar alguna
|
|
información sobre hojas de estilo te aparezca la referencia
|
|
a
|
|
uno de los tres niveles. Obviamente son más avanzadas las
|
|
especificaciones del nivel 3, pero ya hemos comentado que en el momento
|
|
actual no están soportadas por la mayoría de los
|
|
navegadores, por lo que haremos referencia a las de nivel 2.</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|