Capítulo 2 CSS

1/2/2021 Capítulo 2 CSS
English to Spanish Translation by Trusted Translations, Inc.

Otras Traducciones de W3 en Spanish Translator Services
Este documento es una traducción del documento "CSS" propiedad de Bert Bos publicado en el sitio de W3C.
La versión en inglés de esta especificación es la única con valor normativo y puede encontrarse en:
http://www.w3.org/Style/LieBos2e/enter/
Capítulo 2
CSS
Este es el capítulo 2 del libro Cascading Style Sheets, designing for the Web, escrito por Håkon
Wium Lie y Bert Bos (2da edición, 1999, Addison Wesley, ISBN 0-201-59625-3)
Tal como lo explicamos en el capítulo anterior, los elementos HTML permiten a

los diseñadores de páginas web etiquetar un documento en cuanto a su
estructura. La especificación HTML enumera las directivas sobre cómo deben
mostrar los navegadores estos elementos. Por ejemplo, puede tener la
razonable seguridad de que los contenidos de un elemento strong se mostrarán
escritos en negrita. Asimismo, puede estar plenamente seguro de que la
mayoría de los navegadores mostrará el contenido de un elemento h1 con un
tamaño de fuente grande... al menos más grande que el elemento p y que el
elemento h2. Sin embargo, más allá de la confianza y la esperanza, usted no
tiene ningún control sobre la forma en que aparece el texto.
CSS cambia eso. CSS sitúa al diseñador en el asiento del conductor.
Dedicamos gran parte del resto de este libro a explicar qué puede hacer con
CSS. En este capítulo, comenzamos con una introducción a los conceptos
básicos sobre cómo escribir hojas de estilo y cómo CSS y HTML trabajan
juntos para describir tanto la estructura como el aspecto de su documento.
REGLAS Y HOJAS DE ESTILO
Para comenzar a utilizar Existen dos maneras de crear CSS. Puede utilizar un editor de texto
CSS, ni siquiera tiene que normal y escribir las hojas de estilo "a mano" o utilizar una herramienta
escribir hojas de estilo. El
dedicada, por ejemplo una aplicación de diseño de página web, que admita
capítulo 16 le mostrará
cómo señalar hojas de estilo CSS. Las herramientas dedicadas le permiten crear hojas de estilo sin aprender
existentes en la Web. la sintaxis del lenguaje CSS. Sin embargo, en muchas casos, el diseñador
querrá retocar la hoja de estilo a mano posteriormente; por lo tanto, le
recomendamos que aprenda a escribir y a editar CSS a mano. ¡Comencemos!
H1 { color: green }
Lo que usted ve arriba es una sencilla regla de CSS que contiene una regla.
Una regla es una declaración sobre un aspecto estilístico de uno o más
elementos. Una hoja de estilo es un conjunto de una o más reglas que se
www.spanish-translator-services.com/espanol/t/CSS.htm 1/17
aplican a un documento HTML. La regla previa configura el color de todos los

encabezados de primer nivel (h1). Analicemos brevemente en qué podría
consistir el resultado visual de la regla:
Figura 2.1
Ahora comenzaremos a analizar la regla detenidamente.
Anatomía de una regla
Una regla se compone de dos partes:
Selector: la parte anterior a la llave izquierda

Declaración: la parte que se encuentra dentro de las llaves
El selector es el enlace que se encuentra entre el documento HTML y el estilo.

Especifica a qué elementos afecta la declaración. La declaración es esa parte
de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector
es h1 y la declaración es "color: green". Por lo tanto, la declaración afectará a
todos los elementos h1, es decir, éstos se volverán verdes. (La propiedad color
simplemente afecta el color del texto de primer plano; existen otras propiedades
para el fondo, el borde, etc.)
El selector anterior se basa en el tipo del elemento: selecciona todos los
elementos de tipo "h1". Este tipo de selector se denomina selector de tipo.
Cualquier tipo de elemento HTML puede utilizarse como un selector de tipo.
Los selectores de tipo son los selectores más simples. Analizamos otros tipos
de selectores en Consulte Selectores CSS. , "Selectores CSS".
Anatomía de una declaración
La declaración tiene dos partes separadas por dos puntos:
Propiedad: la parte antes de los dos puntos

Valor: la parte después de los dos puntos
La propiedad es una calidad o característica que algo posee. En el ejemplo

anterior, es el color. CSS2 (consulte el cuadro por separado) define cerca de
120 propiedades y podemos asignar valores a todos ellos.
ESPECIFICACIONES
Cascading Style Sheets (Hojas de estilo en cascada) se describe formalmente
DE CSS en dos especificaciones desde W3C: CSS1 y CSS2. CSS1 se emitió en
diciembre de 1996 y describe un modelo de formato sencillo que se destina en

su mayor parte a las presentaciones basadas en pantallas. CSS1 tiene cerca
de 50 propiedades (por ejemplo, el color y el font-size). CSS2 se finalizó en
mayo de 1998 y se agrega a CSS1. CSS2 incluye todas las propiedades de
CSS1 y agrega aproximadamente 70 propias, por ejemplo, aquellas
propiedades destinadas a describir presentaciones auditivas y saltos de
página. En este libro, no se pretende distinguir entre CSS1 y CSS2, por ello
se utiliza el término "CSS", a menos que la distinción sea importante. La
mayoría de las características descritas en los primeros cuatro capítulos
forman parte de CSS1. Si le gustaría leer las especificaciones de CSS
propiamente dichas, las puede encontrar en:
http://www.w3.org/TR/REC-CSS1
http://www.w3.org/TR/REC-CSS2
El valor es una especificación precisa de la propiedad. En el ejemplo, es

"verde", pero podría fácilmente ser azul, rojo, amarillo o de algún otro color.
El esquema que aparece a continuación muestra todos los componentes
de una regla. Las llaves ({ }) y los dos puntos (:) posibilitan que el navegador
distinga entre el selector, la propiedad y el valor.
Figura 2.2Esquema de
una regla.
Agrupación de selectores y reglas
Al diseñar CSS, la brevedad era el objetivo. Estimamos que si podíamos

reducir el tamaño de las hojas de estilo, podíamos permitir a los diseñadores
escribir y editar hojas de estilo "a mano". Además, las hojas de estilo cortas se
cargan más rápido que las más largas. Por lo tanto, CSS incluye varios
mecanismos para acortar hojas de estilo por medio de la agrupación de
selectores y declaraciones.
Por ejemplo, considere estas tres reglas:
H1 { font-weight: bold }
Estas tres reglas tienen exactamente la misma declaración; configuran la fuente

en negrita. (Esto se realiza con la propiedad font-weight, que analizamos en
Consultar Fuentes. .) Dado que estas tres declaraciones son idénticas,
podemos agrupar los selectores en una lista separada por comas y únicamente
enumerar la declaración una vez, como se detalla a continuación:
H1, H2, H3 { font-style: bold }
Esta regla producirá el mismo resultado que las tres primeras.
Es posible que el selector tenga más de una declaración. Por ejemplo,

podemos escribir una hoja de estilo con estas dos reglas:
H1 { color: green }
H1 { text-align: center }
En este caso, configuramos todos los h1 en color verde y en una posición

centrada en el lienzo. (Esto se realiza con la propiedad text-align, analizada en
el capítulo 5).
Sin embargo, podemos lograr el mismo efecto más rápidamente mediante
la agrupación de las declaraciones que se relacionan con el mismo selector en
una lista separada por punto y coma, como se muestra a continuación:
H1 {
color: green;
text-align: center;
}
Todas las declaraciones deben estar incluidas dentro del par de llaves. El punto
y coma separa las declaraciones y también puede aparecer, aunque no tiene
porqué, al final de la última declaración. Asimismo, a fin de facilitar la lectura de
su código, le sugerimos ubicar a cada una de las declaraciones en su propia
línea, tal como lo hicimos aquí. (Los navegadores no lo tomarán en cuenta;
simplemente ignorarán todos los espacios en blanco adicionales y las
divisiones de líneas).
Ahora ya conoce los conceptos básicos sobre cómo crear hojas de estilo y
reglas de CSS. Sin embargo, aún no ha terminado. Para que la hoja de estilo
tenga algún efecto, usted tiene que "pegar" su hoja de estilo al documento
HTML.
"PEGAR" HOJAS DE ESTILO AL DOCUMENTO
Para que la hoja de estilo afecte al documento HTML, ésta debe estar "pegada"
al documento. Es decir, la hoja de estilo y el documento HTML deben
combinarse de modo que puedan trabajar en conjunto para presentar el
documento. Esto se puede hacer de cuatro maneras:
1. Aplicar la hoja de estilo básica en todo el documento por medio del

elemento de estilo .
2. Aplicar una hoja de estilo a un elemento individual mediante el
atributo de estilo.
3. Hacer un enlace en la hoja de estilo externa al documento mediante
el elemento link.
4. Importar una hoja de estilo mediante la notación @import de CSS.
En la próxima sección, analizamos el primer método: por medio del elemento

style. Analizamos el método por medio del atributo style en el capítulo 4 ,
"Selectores de CSS", y por medio del elemento link y la notación @import en el
capítulo 16, "Hojas de estilo externas".
Pegar mediante el elemento STYLE
Puede pegar la hoja de estilo al documento HTML, colocando la hoja de estilo

dentro del elemento style en la parte superior de su documento. El elemento
style se introdujo en HTML específicamente para permitir que las hojas de

estilo se insertasen dentro de los documentos HTML. A continuación,
mostramos una hoja de estilo (en negrita) pegada a un documento de muestra
mediante el elemento style . El resultado se muestra en la figura 2.3 .
<HTML>
<TITLE>Página de inicio de Bach</TITLE>
<STYLE>
H1, H2 { color: green }

</STYLE>
<BODY>
<H1>Página de inicio de Bach</H1>
<P>Johann Sebastian Bach fue un compositor
prolífico. Entre sus obras, se incluyen:
<UL>
<LI>las Variaciones Goldberg

<LI>los Conciertos de Brandemburgo
<LI>el Oratorio de Navidad
</UL>
<H2>Perspectiva histórica</H2>
<P>Bach compuso durante lo que se conoce como
el período barroco.
</BODY>
</HTML>
Figura 2.3 Resultado de

agregarle a una hoja de
estilo una regla para
hacer que los h1 se
tornen verdes y luego
pegar la hoja de estilo al
documento mediante los
elementos style.
(pruébelo)
Observe que el elemento style se coloca después del elemento title y antes del
elemento body. El título del documento no aparece en el lienzo, de modo que
los estilos de CSS no le afectan.
El contenido de un elemento style constituye una hoja de estilo. Sin
embargo, mientras que el contenido de dichos elementos como h1, p y ul
aparece en el lienzo, el contenido de un elemento style no aparece en éste. En
su lugar, lo que aparece en el lienzo es el efecto del contenido del elemento
style, la hoja de estilo. Por lo tanto, no ve "{ color: green }" en su pantalla; en
cambio, ve dos elementos h1 de color verde. No se agregaron reglas que
afecten a los demás elementos, de modo que esos elementos aparecen con el
color predeterminado del navegador.
NAVEGADORES Y CSS
Para conocer las Para que CSS funcione tal como se describe en este libro, debe utilizar un
generalidades actualizadas navegador mejorado con CSS, es decir, un navegador que admita CSS. El
de los navegadores
navegador mejorado con CSS reconocerá el elemento style como un
disponibles, consulte la
página de generalidades de contenedor de la hoja de estilo y presentará el documento en consecuencia. La
W3C mayoría de los navegadores que se distribuyen en la actualidad admiten CSS,
por ejemplo Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) y
Opera 3.5 (O3.5). Según cálculos prudentes, más de la mitad de las personas
que navegan en la Web utilizan un navegador mejorado con CSS y las cifras
aumentan sin parar. Es probable que las personas con las que se comunica
tengan navegadores mejorados con CSS. De no ser así, déles un motivo para
actualizarse.
La mejor fuente de Desafortunadamente, no todas las implementaciones de CSS son
información sobre cómo los perfectas. Cuando comience a experimentar con las hojas de estilo, pronto
diferentes navegadores
observará que cada navegador viene con un conjunto de errores y limitaciones.
admiten CSS son los
cuadros de WebReview En general, los navegadores más recientes funcionan mejor que los más
antiguos. IE4 y O3.5 se encuentran entre los mejores y el próximo ofrecimiento
de Netscape, Gecko con nombre de código, también promete brindar una
compatibilidad con CSS notablemente mejorada.
Aquellos que no utilizan navegadores mejorados con CSS pueden, no
obstante, leer páginas que usan hojas de estilo. CSS fue diseñado con mucha
atención para que todo el contenido permanezca visible incluso si el navegador
no conoce nada sobre CSS. Algunos navegadores, como la versión 2 y 3 de
Navigator de Netscape, no admiten hojas de estilo, pero conocen lo suficiente
sobre el elemento style como para ignorarlo por completo. Después de la
compatibilidad con las hojas de estilo, éste es el comportamiento correcto.
Sin embargo, otros navegadores que no conocen el elemento style, como
Navigator 1 de Netscape y Microsoft Internet Explorer 2, ignorarán las etiquetas
style pero mostrarán el contenido del elemento style . Por lo tanto, el usuario
terminará con la hoja de estilo impresa en la parte superior del lienzo. Al
momento de la escritura, únicamente un bajo porcentaje de usuarios de la Web
experimentarán este problema. A fin de evitarlo, puede colocar su hoja de estilo
dentro de un comentario HTML, que analizamos en el capítulo 1. Dado que los
comentarios no se muestran en la pantalla, si coloca su hoja de estilo dentro de
un comentario HTML, evitará que los navegadores más antiguos muestren el
contenido del elemento style. Los navegadores mejorados con CSS conocen
esta trampa y tratarán el contenido del elemento style como una hoja de estilo.
Recuerde que los comentarios HTML comienzan con 
</STYLE>
<BODY>
..
</BODY>
</HTML>
CSS también tiene su propio
conjunto de comentarios
También resulta necesario comunicarle al navegador que usted está trabajando
que usted puede utilizar con hojas de estilo CSS. Actualmente, CSS es el único lenguaje de hojas de
dentro de la hoja de estilo. estilo que está en uso con documentos HTML y no se espera que esto cambie.
El comentario de CSS En el caso de XML, la situación podría ser diferente. Pero así como existe más
comienza con "/*" y finaliza
de un formato de imagen (se nos ocurren GIF, JPEG y PNG), podría haber más
con "*/." (Aquellos que están
familiarizados con el de un lenguaje de hoja de estilo. Por lo tanto, comunicarles a los navegadores
lenguaje de programación C que están tratando con CSS constituye un buen hábito. (De hecho, HTML se lo
los reconocerán). Las reglas exige). Esto se realiza con el atributo type del elemento style. El valor de type
de CSS que se encuentran indica qué tipo de hoja de estilo se está usando. En el caso de CSS, ese valor
dentro de un comentario de es "text/css". A continuación, se incluye un extracto del documento de muestra
CSS no tendrán ningún
anterior que indica cómo escribiría esto (en combinación con el uso del
efecto sobre la presentación
del documento. comentario HTML):
<HTML>

<STYLE TYPE="text/css">

</STYLE>
<BODY>
..
</BODY>
</HTML>
Cuando el navegador carga un documento, éste verifica si comprende el

lenguaje de la hoja de estilo. Si lo hace, intentará leer la hoja; de lo contrario, la
ignorará. El atributo type (consulte el capítulo 1 para leer un comentario sobre
los atributos HTML) en el elemento style es una forma de hacerle saber al
navegador qué lenguaje de la hoja de estilo se está usando. El atributo type
debe incluirse.
Para facilitar la lectura de los ejemplos, hemos optado por no incluir las
hojas de estilo en los comentarios HTML, pero sí usamos el atributo type en
todo el libro.
HERENCIA Y ESTRUCTURAS DE ÁRBOL
Recuerde el análisis del capítulo 1 sobre HTML como representación de un

documento con una estructura similar a un árbol y cómo los elementos en
HTML tienen hijos y padres. Existen muchos motivos por los cuales se tienen
documentos con estructuras de árbol. En el caso de las hojas de estilo, existe
un motivo de peso: la herencia. Así como los hijos heredan de sus padres, lo
hacen igualmente los elementos HTML. En vez de heredar genes y dinero, los
elementos HTML heredan propiedades estilísticas.
Comencemos por analizar el documento de muestra:
<HTML>
<BODY>
<H1>Página de inicio de Bach</H1>
<P>Johann Sebastian Bach fue un
<STRONG>compositor</STRONG> prolífico. Entre sus
obras, se incluyen:
<UL>
<LI>las Variaciones Goldberg

<LI>los Conciertos de Brandemburgo
<LI>el Oratorio de Navidad
</UL>
</BODY>
</HTML>
La estructura de árbol de este documento es:
Por medio de la herencia, los valores de propiedades de CSS configurados en

un elemento se transferirán en forma descendente a sus descendientes en el
árbol . Para ilustrarlo, nuestros ejemplos han configurado, hasta el momento, el
color verde para los elementos h1 y h2. Ahora, supongamos que le gustaría
configurar el mismo color en todos los elementos de su documento. Para poder
hacerlo, debe enumerar todos los tipos de elementos en el selector:
H1, H2, P, LI { color: green }
</STYLE>
Sin embargo, la mayoría de los documentos HTML son más complejos que
nuestro documento de muestra y su hoja de estilo pronto se extenderá. Existe
una manera mejor y más corta. En lugar de configurar el estilo de cada tipo de
elemento, lo configuramos en su antecesor en común, el elemento body:
BODY { color: green }

</STYLE>
Dado que otros elementos heredan propiedades del elemento body, todos ellos
heredarán el color verde (figura 2.4).
Figura 2.4 El resultado de

la herencia. (pruébelo)
Tal como se analizó anteriormente, la herencia es un vehículo de transporte

que distribuirá propiedades estilísticas a los descendientes de un elemento.
Dado que el elemento body es un antecesor común de todos los elementos
visibles, body es un selector conveniente cuando desea configurar las reglas
estilísticas del documento completo.
ANULACIÓN DE LA HERENCIA
En el ejemplo anterior, a todos los elementos se les asignó el mismo color por
medio de la herencia. A veces, sin embargo, los hijos no se parecen a sus
padres. No es sorprendente que CSS también explique esto. Supongamos que
le gustaría que los elementos h1 sean azules mientras que el resto permanezca
en verde. Esto se expresa fácilmente en CSS:
H1 { color: navy }
</STYLE>
Dado que h1 es un elemento hijo de body (y, por lo tanto, hereda de body), las
dos reglas de la hoja de estilo anterior entran en conflicto. El primero de ellos
configura el color del elemento body y mediante ello también el color de h1 por
medio de la herencia, mientras que el segundo configura el color
específicamente en el elemento h1. ¿Qué regla ganará? Vamos a descubrirlo:
(pruébelo)
El motivo por el que la segunda regla gana es que es más específica que la
primera. La primera regla es muy general; afecta a todos los elementos que
aparecen en el lienzo. La segunda regla afecta únicamente a los elementos h1
del documento y es, por lo tanto, más específica.
Si CSS hubiera sido un lenguaje de programación, el orden en el cual las
reglas se hubieran especificado determinaría cuál de ellas ganaría. CSS no es
un lenguaje de programación y el orden es irrelevante en el ejemplo anterior. El
resultado es exactamente el mismo si utilizamos esta hoja de estilo:
H1 { color: navy }
</STYLE>
CSS ha sido diseñado para resolver conflictos entre las reglas de hojas de
estilo como la anterior. La especificación es un aspecto de eso. Puede
encontrar más información en el capítulo 15: "Función en cascada y herencia".
PROPIEDADES QUE NO SE HEREDAN
Como regla general, las propiedades en CSS heredan de los elementos padre
a los elementos hijo tal como se describe en los ejemplos anteriores. Sin
embargo, algunas propiedades no heredan y siempre existe un buen motivo
para ello. Usaremos la propiedad background (descrita en el capítulo 11) como
ejemplo de una propiedad que no hereda.
Digamos que quiere configurar una imagen de fondo para una página. Este
es un efecto común en la Web. En CSS, puede escribir:
<HTML>

BODY {
background: url(texture.gif) white;
color: black;
}
</STYLE>
<BODY>
<H1>Página de <EM>inicio</EM> de Bach</H1>
<P>Johann Sebastian Bach fue un compositor

prolífico.
</BODY>
</HTML>
La propiedad background tiene una URL ("texture.gif") que señala a una

imagen de fondo como valor. Cuando se carga la imagen, el lienzo se muestra
así:
(pruébelo)
Existen algunos aspectos sobresalientes en el ejemplo anterior:
La imagen de fondo cubre la superficie como un papel tapiz; también

se cubrieron los fondos del elemento h1 y p. Esto no se debe a la
herencia, sino al hecho de que a menos que se configuren de otra
manera, todos los fondos son transparentes. Por lo tanto, dado que
no hemos configurado los fondos del elemento h1 o p en algo más, el
elemento padre, body, brillará a través del fondo.
Además de la URL de la imagen, un color (blanco) también se ha
especificado como el fondo. En caso de que la imagen no pueda
encontrarse, se verá en cambio el color.
El color del elemento body se ha configurado en negro. Para
garantizar el contraste entre el texto y el fondo, es un buen hábito
configurar siempre un color cuando se configura la propiedad
background.
Por lo tanto, ¿por qué exactamente no hereda la propiedad background?

Visualmente, el efecto de la transparencia es similar a la herencia: parece que
todos los elementos tienen los mismos fondos. Existen dos motivos: primero,
los fondos transparentes son más rápidos de visualizar (no hay nada para
mostrar) que otros fondos. En segundo lugar, dado que las imágenes de fondo
están alineadas en relación con el elemento al que pertenecen, no siempre
terminará de otro modo con una superficie de fondo suave.
TAREAS COMUNES CON CSS
La configuración de colores y fondos, tal como se describió anteriormente, se

encuentra entre las tareas más comunes que realiza CSS. Otras tareas
comunes incluyen la configuración de fuentes y espacios en blanco alrededor
de los elementos. Esta sección le brinda un recorrido guiado de las
propiedades usadas con más frecuencia en CSS.
Tareas comunes: fuentes
Comencemos con las fuentes. Si ha utilizado aplicaciones de autoedición

anteriormente, debe poder leer esta pequeña hoja de estilo:
H1 { font: 36pt serif }
La regla anterior configura la fuente para los elementos h1. La primera parte del
valor (36pt) configura el tamaño de la fuente en 36 puntos. Un "punto" es una
unidad de medida tipográfica que ha sobrevivido a la era digital. En el próximo
capítulo, le comentaremos por qué debe usar la unidad "em" en lugar de "pt",
pero por ahora centrémonos en los puntos. La segunda parte del valor (serif) le
comunica al navegador que utilice una fuente con serifs (los pequeños ganchos
que aparecen al final de los trazos, el capítulo 5 brindará información sobre
ello). Las fuentes serif más decoradas se adaptan muy bien a la página de
inicio de Bach, dado que las modernas fuentes de sans serif (fuentes sin trazos
terminales) no se utilizaban en su tiempo. Este es el resultado:
(pruébelo)
La propiedad font es una propiedad de atajo para la configuración de otras

varias propiedades de una sola vez. Al utilizarlo, puede acortar sus hojas de
estilo y configurar valores en todas las propiedades que reemplaza. Si opta por
utilizar la versión ampliada, tendrá que configurar todos estos para reemplazar
el ejemplo anterior:
H1 {
font-size: 36pt;
font-family: serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: normal;
}
A veces, sólo quiere configurar uno de éstos. Por ejemplo, quizás desee
inclinar el texto en algunos elementos. Aquí incluimos un ejemplo:
UL { font-style: italic }
La propiedad font-style no cambiará el tamaño de la fuente ni la familia de la

fuente; sólo inclinará la fuente existente. Al estar configurado en el elemento ul,
los elementos li que se encuentran dentro se volverán inclinados, dado que
font-style se hereda. Este es el resultado cuando se aplica a la página de
prueba que conoce hasta ahora:
(pruébelo)
De modo similar, la propiedad font-weight se utiliza para cambiar el peso, el

espesor, de las letras. Asimismo, puede enfatizar los ítems de la lista mediante
la configuración de su antecesor en negrita:
UL {
font-style: italic;
font-weight: bold;
}
Lo que resulta en:
(pruébelo)
Las últimas propiedades, font-variant y line-height, no fueron ampliamente

admitidas en los navegadores hasta el momento y, por lo tanto, aún no se
utilizan con frecuencia.
Tareas comunes: márgenes
La configuración del espacio alrededor de los elementos es una herramienta

básica en la tipografía. El titular que aparece antes de este párrafo tiene
espacio por encima y (ligeramente menos) por debajo de él. Esta párrafo, tal
como figura impreso en el libro, tiene espacio a la izquierda y (ligeramente
menos) a la derecha. CSS puede utilizarse para expresar cuánto espacio debe
haber alrededor de los diferentes tipos de elementos.
De manera predeterminada, su navegador sabe bastante sobre la forma de
mostrar los diferentes tipos de elementos en HTML. Por ejemplo, sabe que se
pretende que las listas y los elementos blockquote los separen del resto del
texto. Como diseñador, puede agregar estas configuraciones mientras al mismo

tiempo realiza sus propias mejoras. Vamos a utilizar el elemento blockquote
como ejemplo. A continuación, incluimos un documento de prueba:
<HTML>
<TITLE>Fredrick el Grande conoce a Bach</TITLE>

<BODY>
<P>Una noche, justo cuando Fredrick el Grande estaba
preparando su flauta y sus músicos
se estaban reuniendo, un oficial le alcanzó una
lista de los extraños que habían llegado. Con
su flauta en la mano, repasó la lista,
pero miró de inmediato a los
músicos reunidos y dijo, algo
agitado:
<BLOCKQUOTE>"Señores, el viejo Bach ha llegado".
</BLOCKQUOTE>
<P>En ese momento, dejó la flauta a un lado y el viejo Bach, quien
se había alojado en las habitaciones de su hijo, fue llamado de inmedia
a Palacio.
</BODY>
</HTML>
La captura de pantalla siguiente muestra cómo un típico navegador HTML

visualizaría el documento:
(pruébelo)
Como puede ver, el navegador ha agregado espacio en todos los lados del
texto citado. En CSS, este espacio se denomina "márgenes" y todos los
elementos tienen márgenes en los cuatro lados. Las propiedades se
denominan: margin-top (margen superior), margin-right (margen derecho),
margin-bottom (margen inferior) y margin-left (margen izquierdo). Puede
cambiar la forma en que el elemento blockquote se muestra al escribir una
pequeña hoja de estilo:
BLOCKQUOTE {
margin-top: 1em;
margin-right: 0em;
margin-bottom: 1em;
margin-left: 0em;
font-style: italic;
}
La unidad "em" será tratada en detalle en el próximo capítulo, pero ya podemos

revelar su secreto en este mismo momento: escala en relación con el tamaño
de la fuente. Por lo tanto, el ejemplo anterior dará como resultado que los
márgenes verticales sean tan altos como el tamaño de fuente (1em) del
blockquote y sus márgenes horizontales tengan un ancho cero. Para
asegurarse de que el texto citado aún pueda distinguirse, se le ha dado una

inclinación en cursiva. El resultado es:
(pruébelo)
Así como font es una propiedad de atajo que sirve para configurar de una sola
vez varias propiedades relacionadas con las fuentes, margin es una propiedad
de atajo que configura todas las propiedades de los márgenes. Por lo tanto, el
ejemplo anterior puede escribirse así:
BLOCKQUOTE {
margin: 1em 0em 1em 0em;
font-style: italic;
}
La primera parte del valor (1em) se asigna al margen superior. Desde ahí, se
disponen en el sentido de las agujas del reloj: 0em se asigna a margin-right,
1em se asigna a margin-bottom y 0em se asigna a margin-left.
Al configurar el margen izquierdo en cero, el texto citado requiere de un
mayor estilo para configurarlo de manera separada al resto del texto. La
configuración de font-style en cursiva resulta útil y el agregado de un color de
fondo amplía además la cita:
BLOCKQUOTE {
font-style: italic;
background: #EDB;
}
El resultado es:
(pruébelo)
Tal como se esperaba, se ha modificado el color de fondo que aparece por

detrás de la cita. A diferencia de los ejemplos anteriores, el color se especificó
en los componentes rojo/verde/azule (RGB, por sus siglas en inglés). Los
colores RGB se describen en detalle en el capítulo 11.
Un problema estilístico del ejemplo anterior es que el color de fondo
apenas cubre el texto citado. El espacio que se encuentra alrededor de la cita,
el área de los márgenes, no utiliza el color de fondo del elemento. CSS tiene
otro tipo de espacio, que se denomina padding (relleno) y que utiliza el color de
fondo del elemento. En otros sentidos, las propiedades padding se asemejan a
las propiedades de márgenes: agregan espacio alrededor del elemento.
Agreguemos algo de padding a la cita:
BLOCKQUOTE {
font-style: italic;
background: #EDB;
padding: 0.5em;
}
El resultado de configurar el padding consiste en espacio agregado entre el

texto y el rectángulo que lo rodea:
(pruébelo)
Observe que se le asignó un solo valor (0.5em) a la propiedad padding. Tal

como ocurre con la propiedad margin, padding pudo haber tomado 4 valores
que se hubieran asignado al padding superior, derecho, inferior e izquierdo
respectivamente. Sin embargo, cuando el mismo valor se configura en todos
los lados, enumerarlo sólo una vez será suficiente. Esto se aplica tanto al
padding como al margin (así como a algunas otras propiedades de los bordes,
que se describen en Consultar Espacio alrededor de los cuadros. ).
Tareas comunes: enlaces
A fin de facilitar la navegación de los usuarios en los documentos con

hipertextos, los enlaces deben tener un estilo que los distinga del texto normal.
A menudo, los navegadores HTML tiene texto con hipervínculos subrayados.
Asimismo, se han utilizado diferentes combinaciones de colores para indicar si
el usuario ha visitado o no el enlace previamente. Dado que los hipervínculos
son una parte tan fundamental de la Web, CSS cuenta con una compatibilidad
especial para darles estilo. A continuación, incluimos un sencillo ejemplo:
A:link { text-decoration: underline }
El ejemplo anterior especifica que los enlaces no visitados deben estar

subrayados:
(pruébelo)
Los enlaces están subrayados, tal como lo hemos especificado, pero también
aparecen en color azul, que no lo hemos especificado. Cuando los autores no
especifican todos los estilos posibles, los navegadores utilizan estilos
predeterminados para completar las diferencias. La interacción entre los estilos
de los autores, los estilos predeterminados del navegador y los estilos de los
usuarios (las propias preferencias del usuario) es otro ejemplo de las reglas de
resolución de conflictos de CSS. Se denomina la cascada (la "C" de CSS).
Analizaremos la cascada a continuación.
El selector (A:link) se merece una consideración especial. Es probable que
reconozca "A" como un elemento HTML, pero la última parte es nueva. ":link"
es una de las tantas denominadas pseudo-clases de CSS. Las pseudo-clases
se utilizan para darle estilo a elementos basados en la información que aparece
por fuera del propio documento. Por ejemplo, el autor del documento no puede
saber si un determinado enlace será visitado o no. Las pseudo-clases se
describen en detalle en el capítulo 4 y daremos únicamente algunos ejemplos
aquí:
A:visited { text-decoration: none }
Esta regla le da estilo a los enlaces visitados, tal como A:link dio estilo a los
enlaces no visitados. A continuación, incluimos un ejemplo un poco más
complejo:
A:link, A:visited { text-decoration: none }
A:hover { background: cyan }
La última regla introduce una nueva pseudo-clase: hover. Suponiendo que el

usuario está moviendo un dispositivo de señalización (como el mouse), el estilo
especificado se aplicará al elemento cuando el usuario mueva el puntero por
encima ("mantenerse" sobre) del enlace. Un efecto común consiste en cambiar
el color de fondo. Así es como se ve:
(pruébelo)
La historia de la pseudo-clase :hover es interesante. Se introdujo en CSS2

después de que el efecto hover se hiciera popular entre los programadores de
JavaScript. La solución JavaScript requiere de un código complicado en
comparación con la pseudo-clase de CSS y éste es un ejemplo de los efectos

de extracción de CSS que se hicieron populares entre los diseñadores web.
ACERCA DE LA FUNCIÓN EN CASCADA
Una función fundamental de CSS consiste en que más de una hoja de estilo
puede influenciar la presentación de un documento. Esta función se conoce
como en cascada porque se piensa que las diferentes hojas de estilo vienen en
serie. En cascada es una función fundamental de CSS, porque nos dimos
cuenta de que es muy probable que cualquier documento puede terminar con
hojas de estilo de múltiples fuentes: el navegador, el diseñador y posiblemente
el usuario.
En el último grupo de ejemplos, vio que el color del texto de los enlaces se
tornó azul sin que eso se especificase en la hoja de estilo. Asimismo, el
navegador sabía cómo dar formato a los elementos blockquote y h1 sin que se
lo comunicasen de manera explícita. Todo lo que el navegador conoce acerca
del formato se almacena en la hoja de estilo predeterminada del navegador y
se fusiona con las hojas de estilo de los autores y de los usuarios cuando se
muestra el documento.
Hemos sabido durante años que los diseñadores quieren desarrollar sus
propias hojas de estilo. Sin embargo, descubrimos que los usuarios también
quieren tener la opción de influenciar la presentación de sus documentos.
Gracias a CSS, pueden hacerlo mediante el suministro de una hoja de estilo
personal que se fusionará con las hojas de estilo del navegador y del
diseñador. El navegador resuelve todo tipo de conflicto entre las distintas hojas
de estilo. Por lo general, la hoja de estilo del diseñador será el reclamo más
fuerte en el documento, seguida por el valor predeterminado del usuario y luego
del navegador. Sin embargo, el usuario puede argumentar que una regla es
muy importante y que después anulará los estilos de los autores y de los
navegadores.
Tratamos en detalle la función en cascada en el capítulo 15: "Función en
cascada y herencia". Antes de eso, queda mucho por aprender sobre las
fuentes, el espacio y los colores.

Capítulo 2 CSS

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Capítulo 2 CSS

Cargado por

Copyright:

Formatos disponibles

1/2/2021 Capítulo 2 CSS

English to Spanish Translation by Trusted Translations, Inc.

Tal como lo explicamos en el capítulo anterior, los elementos HTML permiten a

REGLAS Y HOJAS DE ESTILO

aplican a un documento HTML. La regla previa configura el color de todos los

Ahora comenzaremos a analizar la regla detenidamente.

Anatomía de una regla

Una regla se compone de dos partes:

Selector: la parte anterior a la llave izquierda

El selector es el enlace que se encuentra entre el documento HTML y el estilo.

Anatomía de una declaración

La declaración tiene dos partes separadas por dos puntos:

Propiedad: la parte antes de los dos puntos

La propiedad es una calidad o característica que algo posee. En el ejemplo

diciembre de 1996 y describe un modelo de formato sencillo que se destina en

El valor es una especificación precisa de la propiedad. En el ejemplo, es

Agrupación de selectores y reglas

Al diseñar CSS, la brevedad era el objetivo. Estimamos que si podíamos

Estas tres reglas tienen exactamente la misma declaración; configuran la fuente

Esta regla producirá el mismo resultado que las tres primeras.

Es posible que el selector tenga más de una declaración. Por ejemplo,

En este caso, configuramos todos los h1 en color verde y en una posición

"PEGAR" HOJAS DE ESTILO AL DOCUMENTO

1. Aplicar la hoja de estilo básica en todo el documento por medio del

En la próxima sección, analizamos el primer método: por medio del elemento

Pegar mediante el elemento STYLE

Puede pegar la hoja de estilo al documento HTML, colocando la hoja de estilo

style se introdujo en HTML específicamente para permitir que las hojas de

H1, H2 { color: green }

<LI>las Variaciones Goldberg

Figura 2.3 Resultado de

<TITLE>Página de inicio de Bach</TITLE>

<TITLE>Página de inicio de Bach</TITLE>

Cuando el navegador carga un documento, éste verifica si comprende el

HERENCIA Y ESTRUCTURAS DE ÁRBOL

Recuerde el análisis del capítulo 1 sobre HTML como representación de un

<LI>las Variaciones Goldberg

La estructura de árbol de este documento es:

Por medio de la herencia, los valores de propiedades de CSS configurados en

BODY { color: green }

Figura 2.4 El resultado de

Tal como se analizó anteriormente, la herencia es un vehículo de transporte

PROPIEDADES QUE NO SE HEREDAN

<TITLE>Página de inicio de Bach</TITLE>

<P>Johann Sebastian Bach fue un compositor

La propiedad background tiene una URL ("texture.gif") que señala a una

Existen algunos aspectos sobresalientes en el ejemplo anterior:

La imagen de fondo cubre la superficie como un papel tapiz; también

Por lo tanto, ¿por qué exactamente no hereda la propiedad background?

TAREAS COMUNES CON CSS

La configuración de colores y fondos, tal como se describió anteriormente, se

Tareas comunes: fuentes

Comencemos con las fuentes. Si ha utilizado aplicaciones de autoedición

La propiedad font es una propiedad de atajo para la configuración de otras

La propiedad font-style no cambiará el tamaño de la fuente ni la familia de la

De modo similar, la propiedad font-weight se utiliza para cambiar el peso, el

Lo que resulta en:

Las últimas propiedades, font-variant y line-height, no fueron ampliamente

Tareas comunes: márgenes

La configuración del espacio alrededor de los elementos es una herramienta

texto. Como diseñador, puede agregar estas configuraciones mientras al mismo

<TITLE>Fredrick el Grande conoce a Bach</TITLE>

La captura de pantalla siguiente muestra cómo un típico navegador HTML

La unidad "em" será tratada en detalle en el próximo capítulo, pero ya podemos