LENGUAJE
DE PRESENTACIÓN
3.1 INTRODUCCION
Un leguaje de presentación
define un conjunto de etiquetas y atributos validos y que ofrecen un
significado visual para cada elemento del lenguaje, sino que ofrece un numero
de reglas sintácticas para poder crear documentos. Uno de los lenguajes mas
comunes para presentar información web es HTML.
•CSS
es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación
de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor
forma de separar los contenidos y su presentación y es imprescindible para
crear paginas web complejas.
Al crear una pagina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la pagina: párrafo, titular, texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal, etc.
3.2 SINTAXIS
El
siguiente ejemplo muestra una pagina HTML con estilos definidos sin utilizar
CSS.
El ejemplo anterior utiliza
la etiqueta <font> con sus atributos color, face y size para definir el
color, el tipo y el tamaño de letra de cada elemento.
La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
CSS permite separar los
contenidos de la pagina y la información sobre su aspecto. En le ejemplo
anterior, dentro de la propia pagina HTML se crea una zona especial en la que
se incluye toda la información relacionada con los estilos de la pagina.
Utilizando CSS, se puede establecer los mismos estilos con menos esfuerzo y sin ensuciar el código HTML de los contenidos con etiquetas <font>. Como se vera mas adelante, la etiqueta <style> crea una zona especial donde se incluyen todas las reglas CSS que se aplican en la pagina. Los estilos se definen en una zona especifica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (solo dentro de la sección <head>).
Utilizando CSS, se puede establecer los mismos estilos con menos esfuerzo y sin ensuciar el código HTML de los contenidos con etiquetas <font>. Como se vera mas adelante, la etiqueta <style> crea una zona especial donde se incluyen todas las reglas CSS que se aplican en la pagina. Los estilos se definen en una zona especifica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (solo dentro de la sección <head>).
Normalmente, la etiqueta
<link> incluye cuatro atributos cuando enlaza un archivo CSS:
•Rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la pagina HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
•Type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.
•Href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
•Media: indica el medio en el que se van a aplicar los estilos del archivo CSS.
•Rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la pagina HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
•Type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.
•Href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
•Media: indica el medio en el que se van a aplicar los estilos del archivo CSS.
3.3 SELECTORES
Selector universal
Se utiliza para seleccionar
todos los elementos de la página. El siguiente ejemplo elimina el margen y el
relleno de todos los elementos HTML.
*{
margin:
0;
padding: 0;
}
El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.
Selector de tipo o etiqueta
Selecciona todos los
elementos de la página cuya etiqueta HTML coincide con el valor del selector.
El siguiente ejemplo selecciona todos los párrafos de la página:
p
{
...
}
Para utilizar este selector,
solamente es necesario indicar el nombre de una etiqueta HTML (sin los
caracteres < y >) correspondiente a los elementos que se quieren
seleccionar.
El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:
El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:
h1 {
color: red;
}
h2 {
color: blue;
}
p
{
color: black;
}
Si
se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden
encadenar los selectores. En el siguiente ejemplo, los títulos de
sección h1, h2 y h3 comparten los mismos estilos:
h1 {
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
En este caso, CSS permite
agrupar todas las reglas individuales en una sola regla con un selector
múltiple. Para ello, se incluyen todos los selectores separados por una coma
(,) y el resultado es que la siguiente regla CSS es equivalente a las tres
reglas anteriores:
h1,
h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
En las hojas de estilo
complejas, es habitual agrupar las propiedades comunes de varios elementos en
una única regla CSS y posteriormente definir las propiedades específicas de
esos mismos elementos. El siguiente ejemplo establece en primer lugar las
propiedades comunes de los títulos de sección (color y tipo de letra) y a
continuación, establece el tamaño de letra de cada uno de ellos:
h1,
h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h1 { font-size:
2em; }
h2 { font-size:
1.5em; }
h3
{ font-size: 1.2em; }
Selector descendente
Selecciona los elementos que
se encuentran dentro de otros elementos. Un elemento es descendiente de
otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro
elemento.
El selector del siguiente
ejemplo selecciona todos los elementos <span> de la página que se
encuentren dentro de un elemento <p>:
p span { color: red; }
Si el código HTML de la
página es el siguiente:
<p>
...
<span>texto1</span>
...
<a
href="">...<span>texto2</span></a>
...
</p>
El selector p span
selecciona tanto texto1 como texto2. El motivo es que en el selector descendente,
un elemento no tiene que ser descendiente directo del otro. La única condición
es que un elemento debe estar dentro de otro elemento, sin importar el nivel de
profundidad en el que se encuentre. Al resto de elementos <span> de la
página que no están dentro de un elemento <p>, no se les aplica la
regla CSS anterior.
Los
selectores descendentes permiten aumentar la precisión del selector de tipo
o
etiqueta.
Así, utilizando el selector descendente es posible aplicar diferentes estilos
a
los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra
de
color
azul todo el texto de los <span> contenidos dentro de un <h1>:
p span { color: red;
}
h1 span { color:
blue; }
Con las reglas CSS
anteriores:
Los elementos <span>
que se encuentran dentro de un elemento <p> se muestran de color rojo.
Los elementos <span> que se encuentran dentro de un elemento <h1>
se muestran de color azul. El resto de elementos <span> de la
página, se muestran con el color por defecto aplicado por el navegador.
En el siguiente ejemplo, el
selector descendente se compone de cuatro selectores:
p a span em { text-decoration: underline; }
Los estilos de la regla
anterior se aplican a los elementos de tipo <em> que se encuentren dentro
de elementos de tipo <span>, que a su vez se encuentren dentro de
elementos de tipo <a> que se encuentren dentro de elementos de tipo
<p>.
/*
El estilo se aplica a todos los elementos "p", "a",
"span" y "em" */
p, a, span, em {
text-decoration: underline; }
/*
El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
p a span em {
text-decoration: underline; }
El siguiente ejemplo,
muestra los dos enlaces de color rojo:
p a { color: red; }
<p><a
href="#">Enlace</a></p>
<p><span><a
href="#">Enlace</a></span></p>
Sin embargo, en el siguiente
ejemplo solamente el segundo enlace se muestra de
color rojo:
p
* a { color: red; }
<p><a
href="#">Enlace</a></p>
<p><span><a
href="#">Enlace</a></span></p>
La razón es que el selector
p * a se interpreta como todos los elementos de tipo <a> que se
encuentren dentro de cualquier elemento que, a su vez, se encuentre
dentro de un elemento de tipo <p>. Como el primer elemento <a>
se encuentra directamente bajo un elemento <p>, no se cumple la condición
del selector p * a.
Selector de clase
Si se considera el siguiente
código HTML de ejemplo:
<body>
<p>Lorem ipsum dolor sit
amet...</p>
<p>Nunc sed lacus et est adipiscing
accumsan...</p>
<p>Class aptent taciti sociosqu ad
litora...</p>
</body>
¿Cómo se pueden aplicar
estilos CSS sólo al primer párrafo? El selector universal (*) no se puede
utilizar porque selecciona todos los elementos de la página. El selector de
tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos
los párrafos. Por último, el selector descendente (body p) tampoco se
puede utilizar porque todos los párrafos se encuentran en el mismo sitio.
Una de las soluciones más
sencillas para aplicar estilos a un solo elemento de la página consiste en
utilizar el atributo class de HTML sobre ese elemento para indicar directamente
la regla CSS que se le debe aplicar:
<body>
<p class="destacado">Lorem
ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing
accumsan...</p>
<p>Class aptent taciti sociosqu ad
litora...</p>
</body>
A continuación, se crea en
el archivo CSS una nueva regla llamada destacado con todos los estilos que
se van a aplicar al elemento. Para que el navegador no confunda este selector
con los otros tipos de selectores, se prefija el valor del atributo class con
un punto (.) tal y como muestra el siguiente ejemplo:
.destacado { color: red; }
El selector .destacado se
interpreta como "cualquier elemento de la página cuyo atributo class
sea igual a destacado", por lo que solamente el primer párrafo cumple esa
condición.
Este tipo de selectores se
llaman selectores de clase y son los más utilizados junto con los selectores de
ID que se verán a continuación. La principal característica de este selector es
que en una misma página HTML varios elementos diferentes pueden utilizar el
mismo valor en el atributo class:
<body>
<p class="destacado">Lorem
ipsum dolor sit amet...</p>
<p>Nunc sed lacus et <a href="#"
class="destacado">est adipiscing</a>
accumsan...</p>
<p>Class aptent taciti <em
class="destacado">sociosqu ad</em> litora...</p>
</body>
Los selectores de clase son
imprescindibles para diseñar páginas web complejas, ya que permiten
disponer de una precisión total al seleccionar los elementos. Además,
estos selectores permiten reutilizar los mismos estilos para varios
elementos diferentes.
A continuación se muestra
otro ejemplo de selectores de clase:
.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
<span
class="error">...</span>
<div
class="aviso">...</div>
El elemento <span>
tiene un atributo class="error", por lo que se le aplican las
reglas CSS indicadas por el selector.error. Por su parte, el elemento
<div> tiene un atributo class="aviso", por lo que su estilo es
el que definen las reglas CSS del selector .aviso.
En ocasiones, es necesario
restringir el alcance del selector de clase. Si se considera de nuevo el
ejemplo anterior:
<body>
<p class="destacado">Lorem
ipsum dolor sit amet...</p>
<p>Nunc sed lacus et <a
href="#" class="destacado">est
adipiscing</a>
accumsan...</p>
<p>Class aptent taciti <em
class="destacado">sociosqu ad</em> litora...</p>
</body>
¿Cómo es posible aplicar
estilos solamente al párrafo cuyo atributo class sea igual
a destacado? Combinando el
selector de tipo y el selector de clase, se obtiene un
selector mucho más
específico:
p.destacado { color: red }
El selector p.destacado se
interpreta como "aquellos elementos de tipo <p> que dispongan
de un atributo class con valor destacado". De la misma forma, el selector a.destacado
solamente selecciona los enlaces cuyo atributo class sea igual a
destacado.
De lo anterior se deduce que
el atributo .destacado es equivalente a *.destacado, por lo que todos los
diseñadores obvian el símbolo * al escribir un selector de clase normal.
No debe confundirse el
selector de clase con los selectores anteriores:
/*
Todos los elementos de tipo "p" con atributo class="aviso"
*/
p.aviso
{ ... }
/*
Todos los elementos con atributo class="aviso" que estén dentro
de cualquier elemento de tipo "p"
*/
p
.aviso { ... }
/*
Todos los elementos "p" de la página y todos los elementos con
atributo class="aviso" de la
página */
p,
.aviso { ... }
Por último, es posible
aplicar los estilos de varias clases CSS sobre un mismo elemento. La
sintaxis es similar, pero los diferentes valores del atributo class se separan
con espacios en blanco. En el siguiente ejemplo:
<p class="especial
destacado error">Párrafo de texto...</p>
Al párrafo anterior se le
aplican los estilos definidos en las reglas .especial, .destacado y
.error, por lo que en el siguiente ejemplo, el texto del párrafo se vería de
color rojo, en negrita y con un tamaño de letra de 15 píxel:
.error
{ color: red; }
.destacado
{ font-size: 15px; }
.especial { font-weight: bold; }
<p
class="especial destacado error">Párrafo de texto...</p>
Si un elemento dispone de un
atributo class con más de un valor, es posible utilizar
un selector más avanzado:
.error
{ color: red; }
.error.destacado {
color: blue; }
.destacado {
font-size: 15px; }
.especial { font-weight: bold; }
<p
class="especial destacado error">Párrafo de texto...</p>
En el ejemplo anterior, el
color de la letra del texto es azul y no rojo. El motivo es que se ha
utilizado un selector de clase múltiple .error.destacado, que se interpreta como
"aquellos elementos de la página que dispongan de un atributo class con
al menos los valores error y destacado".
3.4 TIPOS DE MEDIOS
Tipos de medios
Uno de los rasgos más importantes de las hojas de estilo es que especifican cómo debe ser presentado un documento en diferentes medios: en la pantalla, en papel, con un sintetizador de voz, con un dispositivo braille, etc.
Ciertas propiedades CSS son
diseñadas sólo para ciertos medios (ejemplo, la propiedad 'cue-before' para las
aplicaciones del usuario auditivas). En ocasiones, sin embargo, las hojas de
estilo para diferentes tipos de medios pueden compartir una propiedad, pero
requieren de valores diferentes para esa propiedad. Por ejemplo, la propiedad
'font-size' es útil para la pantalla y los medios impresos. Sin embargo, los
dos medios son lo suficientemente diferentes como para requerir diferentes
valores para la propiedad común; un documento necesitará típicamente una fuente
mayor en una pantalla de computadora que sobre papel. La experiencia también
demuestra que las fuentes sans-serif son más fáciles de leer en pantalla,
mientras que las fuentes con serif son más fáciles de leer sobre papel. Por
estas razones, es necesario expresar que una hoja de estilo --o una sección de
una hoja de estilo-- se aplica a ciertos tipos de medios.
Especificación de hojas de estilos
dependientes de los medios
Actualmente hay dos maneras
de especificar la dependencia de las hojas de estilos:
Especificando el medio de destino desde una hoja de estilo con las reglas-arroba @media o @import.
Especificando el medio de destino desde una hoja de estilo con las reglas-arroba @media o @import.
@import url("loudvoice.css") aural;
@media
print {
/* la hoja de estilo para impresión va aquí
*/
}
Especificando el medio de
destino dentro del lenguaje del documento. Por ejemplo, en HTML 4.0 ([HTML40]),
el atributo "media" en el elemento LINK especifica el medio de
destino de una hoja de estilo externa:
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Vínculo a un
medio</TITLE>
<LINK rel="stylesheet"
type="text/css"
media="print, handheld"
href="foo.css">
</HEAD>
<BODY>
<P>El cuerpo...
</BODY>
</HTML>
La regla @import es definida
en el capítulo sobre cascada.
La regla @media
Una regla @media especifica
los tipos de medios de destino (separados por comas) de un juego de reglas
(delimitadas por llaves). La construcción @media le permite a la hoja de estilo
reglas para distintos medios en la misma hoja de estilo:
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
Tipos de medios reconocidos
Un tipo de medio de CSS
designa un juego de propiedades CSS. Una aplicación del usuario que aspira a
dar soporte a un tipo de medio por nombre debe implementar todas las propiedades
que se aplican a ese tipo de medio. Los nombres elegidos para los tipos de
medios de CSS reflejan los dispositivos de destino para los cuales las
propiedades relevantes tienen sentido. En el siguiente listado de tipos de
medios de CSS, las descripciones entre paréntesis no son normativas.
Solamente brindan un sentido de la clase de dispositivo del tipo de medio a que
se hace referencia.
·
All: Apropiado para todos
los dispositivos.
·
Aural: Propuesto
para los sintetizadores de voz. Ver la sección sobre hojas de estilo auditivas
para más detalles.
·
Braille: Propuesto
para dispositivos táctiles braille.
·
Embossed: Propuesto
para impresoras de páginas braille.
·
Handheld: Propuesto
para dispositivos de mano (típicamente de pantalla pequeña, monocromos, de
limitado ancho de banda).
·
print : Propuesto
para material opaco en páginas y para documentos percibidos en pantalla en modo
de vista previa a la impresión. Por favor,
consulte la sección sobre medios paginados por información acerca de los formatos
de publicación que son específicos de los medios paginados.
·
Projection: Propuesto
para las presentaciones proyectadas, por ejemplo, proyectores o transparencias
impresas. Por favor, consulte la sección sobre medios paginados por información
acerca de los formatos de publicación que son específicos de los medios
paginados.
·
Screen: Propuesto
primariamente para pantallas de computadora a color.
·
Tty: Propuesto para medios
que usan una grilla de caracteres de espacio fijo, tales como teletipos,
terminales o dispositivos portátiles con limitada capacidad del monitor. Los
autores no deben usar las unidades en pixeles con el tipo de medio
"tty".
·
Tv: Propuesto para
dispositivos de tipo televisión (baja resolución, color, pantalla con limitado
desplazamiento, sonido disponible).
Los nombres de los tipos de
medios no diferencian entre mayúsculas y minúsculas.
3.5 MODELOS DE CAJAS
Condiciona el diseño de
todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace
que todos los elementos de las páginas se representen mediante cajas
rectangulares.
Las cajas de una página se
crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una
nueva caja rectangular que encierra los contenidos de ese elemento. La
siguiente imagen muestra las tres cajas rectangulares que crean las tres
etiquetas HTML que incluye la página:
Figura 4.1 Las
cajas se crean automáticamente al definir cada elemento HTML
Los navegadores crean y
colocan las cajas de forma automática, pero CSS permite modificar todas sus
características. Cada una de las cajas está formada por seis partes, tal y como
muestra la siguiente imagen:
Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:
·
Contenido (content): se trata del contenido
HTML del elemento (las palabras de un párrafo, una imagen, el texto de una
lista de elementos, etc.)
·
Relleno (padding): espacio libre opcional
existente entre el contenido y el borde.
·
Borde (border): línea que encierra
completamente el contenido y su relleno.
·
Imagen de fondo (background image): imagen
que se muestra por detrás del contenido y el espacio de relleno.
·
Color de fondo (background color): color que
se muestra por detrás del contenido y el espacio de relleno.
·
Margen (margin): separación opcional
existente entre la caja y el resto de cajas adyacentes.
El relleno y el margen son
transparentes, por lo que en el espacio ocupado por el relleno se muestra el
color o imagen de fondo (si están definidos) y en el espacio ocupado por el
margen se muestra el color o imagen de fondo de su elemento padre (si están
definidos). Si ningún elemento padre tiene definido un color o imagen de fondo,
se muestra el color o imagen de fondo de la propia página (si están
definidos).
Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando imagenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.
Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando imagenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.
Anchura
La propiedad CSS que controla
la anchura de la caja de los elementos se denomina width. La propiedad
width no admite valores negativos y los valores en porcentaje se calculan a
partir de la anchura de su elemento padre. El valor inherit indica que la
anchura del elemento se hereda de su elemento padre. El valor auto, que es el
que se utiliza si no se establece de forma explícita un valor a esta propiedad,
indica que el navegador debe calcular automáticamente la anchura del elemento,
teniendo en cuenta sus contenidos y el sitio disponible en la página.
El siguiente ejemplo establece el valor de la anchura del elemento <div> lateral:
El siguiente ejemplo establece el valor de la anchura del elemento <div> lateral:
#lateral { width:
200px; }
<div
id="lateral">
...
</div>
CSS
define otras dos propiedades relacionadas con la anchura de los elementos:
min-width y max-width, que se verán más adelante.
Altura
La propiedad CSS que
controla la altura de los elementos se denomina height.
Al igual que sucede con
width, la propiedad height no admite valores negativos. Si se indica un
porcentaje, se toma como referencia la altura del elemento padre. Si el
elemento padre no tiene una altura definida explícitamente, se asigna el valor
auto a la altura. El valor inherit indica que la altura del elemento se
hereda de su elemento padre. El valor auto, que es el que se utiliza si no se
establece de forma explícita un valor a esta propiedad, indica que el navegador
debe calcular automáticamente la altura del elemento, teniendo en cuenta sus
contenidos y el sitio disponible en la página.
El siguiente ejemplo
establece el valor de la altura del elemento <div> de cabecera:
#cabecera
{ height: 60px; }
<div
id="cabecera">
...
</div>
CSS define otras dos
propiedades relacionadas con la altura de los elementos: min-height y
max-height, que se verán más adelante.
Margen
CSS define cuatro propiedades para
controlar cada uno de los márgenes horizontales y verticales de un elemento. Cada
una de las propiedades establece la separación entre el borde lateral de la
caja y el resto de cajas adyacentes:
Las unidades más utilizadas
para indicar los márgenes de un elemento son los píxeles (cuando se requiere
una precisión total), los em (para hacer diseños que mantengan las
proporciones) y los porcentajes (para hacer diseños líquidos o fluidos).
El siguiente ejemplo añade un margen izquierdo al segundo párrafo:
El siguiente ejemplo añade un margen izquierdo al segundo párrafo:
.destacado {
margin-left: 2em;
}
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Nam et elit.
Vivamus placerat
lorem. Maecenas sapien. Integer ut massa. Cras diam ipsum,
laoreet non,
tincidunt a, viverra sed, tortor.</p>
<p
class="destacado">Vestibulum lectus diam, luctus vel, venenatis
ultrices,
cursus vel, tellus.
Etiam placerat erat non sem. Nulla molestie odio non
nisl
tincidunt faucibus.</p>
<p>Aliquam
euismod sapien eu libero. Ut
tempor orci at nulla. Nam in eros
egestas massa
vehicula nonummy. Morbi posuere, nibh ultricies consectetuer tincidunt,
risus turpis laoreet
elit, ut tincidunt risus sem et nunc.</p>
A continuación se muestra el
aspecto del ejemplo anterior en cualquier navegador:
Algunos diseñadores web
utilizan la etiqueta <blockquote> para tabular los contenidos de los
párrafos. Se trata de un error grave porque HTML no debe utilizarse para
controlar el aspecto de los elementos. CSS es el único responsable de
establecer el estilo de los elementos, por lo que en vez de utilizar la
etiqueta <blockquote> de HTML, debería utilizarse la propiedad
margin-left de CSS.
El ejemplo anterior de
márgenes se puede reescribir utilizando la propiedad margin:
Código CSS original:
Código CSS original:
div img {
margin-top: .5em;
margin-bottom: .5em;
margin-left: 1em;
margin-right: .5em;
}
Alternativa directa:
div img {
margin: .5em .5em .5m 1em;
}
Otra alternativa:
div img {
margin: .5em;
margin-left: 1em;
}
3.6 APLICACIÓN EN DOCUMENTO
WEB
CSS proporciona tres caminos
diferentes para aplicar las reglas de estilo a una página Web:
- Una hoja de estilo externa, esta
almacenada en un archivo diferente al archivo donde se almacena el código
HTML de la página Web. Esta es la manera de programar más potente, porque
separa completamente las reglas de formateo para la página HTML de la
estructura básica de la página.
- Una hoja de estilo interna, está
incrustada dentro de un documento HTML (Dentro del elemento <head>).
De esta manera se obtiene el beneficio de separar la información del
estilo, del código HTML se pierde. En general, la única vez que se usa una
hoja de estilo interna, es cuando se quiere proporcionar alguna
característica específica una página Web.
- Un estilo en línea, que es un método
para insertar el lenguaje de estilo de página, directamente, dentro de una
etiqueta HTML. Este modo de trabajo se podría usar de manera ocasional si
se pretende aplicar un formateo al vuelo. No es todo lo claro, o
estructurado, que debería ser, pero funciona. es necesario incluir el
atributo STYLE.
Hoja de estilo interna
El siguiente código estará colocado en el head del archivo html.
<style>
body {
background-color:#345485;
}
h1 {
color:orange;
font-family:'Times New Roman';
text-align:center;
}
p {
color:#E9EBAB;
font-family:Arial,Helvetica,sans-serif;
font-size:20px;
text-align:center;
}
</style>
Hoja de estilo externa
El código que a continuación
se presenta deberá almacenarse en un archivo con extensión css. Dicho archivo
será referenciado desde el head con la siguiente línea.
<head>
<link
href='0306css02.css' rel='stylesheet' />
<head>
Fijar una imagen de fondo
El atributo background nos
indica la imagen que se usara de fondo (línea 2). El atributo background-attachment
en fixed fija la imagen al centro de la forma (línea 3).
body {
background:
transparent url('escudoITV.png')
no-repeat center
background-attachment: fixed;
}
h1 {
color:red;
font-family:'Times New Roman';
font-size:24px;
font-weight:bold;
text-align:center;
}
h2 {
color:blue;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
font-weight:bold;
text-align:center;
}
p {
color:black;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
}






No hay comentarios:
Publicar un comentario