Capítulo 2 css

PROFESORA VANESSA LIZETH RODRIGUEZ RAMIREZ 1
Capítulo 2. CSS
Como ya hemos explicado en el capítulo anterior, los elementos HTML
permiten a los diseñadores de páginas web marcar un documento en
cuanto a su estructura. La especificación HTML listas de directrices
sobre cómo los navegadores deben mostrar estos elementos.
Por ejemplo, puede estar razonablemente seguro de que el contenido
de un fuerte elemento se mostrarán en negrita. También, se puede casi
la confianza de que la mayoría de los navegadores mostrarán el
contenido de un h1 elemento utilizando un tamaño de fuente grande al
menos más grande que el elemento y más grande que
la h2 elemento. Pero más allá de la confianza y la esperanza, que no
tiene ningún control sobre cómo se muestra el texto.
CSS cambia esto. CSS pone al diseñador en el asiento del
conductor. Dedicamos gran parte del resto de este libro para explicar lo
que puede hacer con CSS. En este capítulo, comenzamos por la
introducción a los conceptos básicos de cómo escribir hojas de estilo y
la forma en CSS y HTML de trabajo en conjunto para describir la
estructura y apariencia de su documento.
REGLAS Y HOJAS DE ESTILO
Para empezar a utilizar CSS, usted ni siquiera tiene que escribir hojas de
estilo. Capítulo 16 le dirá cómo apuntar a las hojas de estilo existentes en la
Web.
Hay dos maneras de crear CSSs. También se puede usar un editor
de texto normal y escribir las hojas de estilo "a mano", o puede utilizar
una herramienta específica - por ejemplo, una página de la aplicación
de diseño web - que soporta CSS. Las herramientas dedicadas
permiten crear hojas de estilo sin tener que aprender la sintaxis del
lenguaje CSS. Sin embargo, en muchos casos, el diseñador tendrá que
modificar la hoja de estilo con la mano después, por lo que
recomendamos que aprenda a escribir y editar CSSs a
mano. ¡Empecemos!
H1 {color: green}
Lo que ves arriba es una regla CSS simple 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 aplican a un documento HTML. La regla anterior
establece el color de todas las partidas de primer nivel ( H1 ). Vamos a
echar un vistazo rápido a lo que podría ser el resultado visual de la regla:

Figura 2.1
Ahora vamos a empezar a diseccionar la regla.
Anatomía de una regla
Una regla consta de dos partes:
 Selector - la parte antes del corchete izquierdo
 Declaración - la parte de dentro de las llaves
El selector es el enlace entre el documento HTML y el estilo. En él se
especifica qué elementos se ven afectados por la
declaración. La declaración es que 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: verde." Por lo tanto, todos los h1 elementos se verán
afectados por la declaración, es decir, que se puso en verde. (El color
de la propiedad solo afecta al color del texto, hay otras propiedades
para el fondo, la frontera, etc.)
El selector anterior se basa en el tipo de elemento: que selecciona todos
los elementos de tipo " h1 ". Este tipo de selector se llama selector de
tipo .Cualquier tipo de elemento HTML se puede utilizar como un
selector de tipo. Selectores de tipos son el tipo más simple de los
selectores. Se discuten otros tipos de selectores de selectores CSS
Ver. , "Selectores CSS."
Anatomía de una declaración
Una declaración tiene dos partes separadas por dos puntos:
Propiedad - esa parte antes de los dos puntos
Valor - esa parte después de los dos puntos

La propiedad es una cualidad o característica que posee algo. En el
ejemplo anterior, es de color . CSS2 (ver cuadro aparte) define
alrededor de 120 propiedades y podemos asignar valores a todos ellos.

ESPECIFICACIONES CSS
Cascading Style Sheets se describe formalmente en dos
especificaciones de W3C: CSS1 y CSS2. CSS1 se publicó en diciembre
de 1996 y describe un modelo de formato sencillo sobre todo para las
presentaciones basadas en pantallas. CSS1 tiene alrededor de 50
propiedades (por ejemplo, el color y el tamaño de fuente ). CSS2 se
finalizó en mayo de 1998 y se basa en CSS1. CSS2 incluye todas las
propiedades CSS1 y agrega alrededor de 70 de sus propios, tales como
propiedades para describir presentaciones auditivas y saltos de
página. En este libro no intentamos distinguir entre CSS1 y CSS2 y
utilizar el término "CSS" a menos que la distinción es importante. La
mayoría de las funciones descritas en los primeros cuatro capítulos son
parte de CSS1. Si desea leer las especificaciones CSS sí mismos, los
puedes encontrar en:
SS1
SS2
El valor es una especificación precisa de la propiedad. En el ejemplo,
se trata de "verde", pero podría fácilmente ser azul, rojo, amarillo, o
algún otro color.
El siguiente diagrama muestra todos los ingredientes de una
regla. Las llaves ({}) y dos puntos (:) hacen posible que el navegador
para distinguir entre el selector, la propiedad y el valor.
Figura 2.2 Diagrama de una regla.
La agrupación de selectores y reglas
En el diseño de CSS, la brevedad era una meta. Nos dimos cuenta de
que si pudiéramos reducir el tamaño de las hojas de estilo, se podría
permitir a los diseñadores para 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
las hojas de estilo en forma de agrupar selectores y declaraciones.

Por ejemplo, considere estas tres reglas:
H1 {font-weight: bold}
Las tres reglas tienen exactamente la misma declaración - que fijan la
fuente a ser audaz. (Esto se hace utilizando el font-weight propiedad,
que se discuten en la Sede Fuentes. .) Dado que las tres declaraciones
son idénticos, podemos agrupar los selectores en una lista separada
por comas y sólo mostrar la declaración de una vez, así:
H1, H2, H3 {font-style: bold}
Esta regla se producirá el mismo resultado que los tres primeros.
Un selector puede tener más de una declaración. Por ejemplo,
podríamos escribir una hoja de estilo con estas dos reglas:
H1 {color: green}
H1 {text-align: center}
En este caso, nos pusimos todos h1 s para ser verde y que se centran
en el lienzo. (Esto se hace mediante el text-align propiedad, discutido
en el capítulo 5 ).
Pero podemos lograr el mismo efecto más rápido mediante la
agrupación de las declaraciones que se relacionan con el mismo
selector en una lista separada por comas , como esto:
H1 {
color verde;
text-align: center;
}
Todas las declaraciones deben estar contenidas dentro del par de
llaves. Un punto y coma separa las declaraciones y puede - pero no
tiene que - también aparecen al final de la última declaración. Además,
para hacer que su código sea más fácil de leer, sugerimos colocar cada
declaración en su propia línea, como lo hicimos aquí. (Los navegadores
no le importa, simplemente ignorarán todos los espacios en blanco y
saltos de línea adicionales.)
Ahora usted tiene los fundamentos de cómo crear reglas CSS y
hojas de estilo. Sin embargo, no hemos terminado todavía. A fin de que
la hoja de estilo para tener algún efecto que tiene que "pegamento" su
hoja de estilo a su documento HTML.

"PEGADO" HOJAS DE ESTILO PARA EL DOCUMENTO
Para cualquier hoja de estilos para afectar el documento HTML, debe
ser "pegado" al documento. Es decir, la hoja de estilo y el documento
HTML se deben combinar para que puedan trabajar juntos para
presentar el documento. Esto se puede hacer en cualquiera de cuatro
maneras:
1. Aplicar la hoja de estilo básico, a nivel de documento para el
documento utilizando el estilo de elemento.
2. Aplicar una hoja de estilo a un elemento individual utilizando el estilo
de atributo.
3. Vincular una hoja de estilos externa al documento mediante
el enlace de elemento.
4. Importar una hoja de estilos CSS usando la notación @import.
En la siguiente sección, se discute el primer método: usar el estilo
de elemento. Discutimos con el estilo de atributo en el Capítulo 4 ,
"selectores CSS," y utilizando el enlace del elemento y la notación
@import en el capítulo 16 , "Hojas de estilo externas."
Encolado mediante el elemento STYLE
Puede pegar la hoja de estilo y el documento HTML juntos poniendo la
hoja de estilo dentro de un estilo de elemento en la parte superior de su
documento. El estilo de elemento se introdujo en HTML
específicamente para permitir que las hojas de estilo para ser insertados
dentro de los documentos HTML. Aquí hay una hoja de estilo (en
negrita) pegado a un documento de muestra utilizando el estilo
de elemento. 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>
La página de inicio <H1> de Bach </ h1>
<P> Johann Sebastian Bach fue un prolífico
compositor. Entre sus obras se encuentran:
<UL>
Variaciones <LI> el Goldberg

<LI> los Conciertos de Brandeburgo
<LI> Oratorio de Navidad
</ Ul>
<H2> Perspectiva histórica </ h2>
<P> Bach compuesta en lo que se ha referido como
el período barroco.
</ BODY>
</ HTML>
Figura 2.3 El resultado de sumar a una hoja de estilos en una regla para convertir h1 s
verde y luego pegando la hoja de estilos al documento mediante los estilo
de elementos. (Probarlo)
Observe que el estilo de elemento se coloca después del título del
elemento y antes de que el cuerpo del elemento. El título de un
documento no aparece en el lienzo, por lo que no se ve afectada por los
estilos CSS.
El contenido de un estilo elemento es una hoja de estilo. Sin
embargo, mientras que el contenido de elementos tales como h1 , p ,
y ul aparece en el lienzo, el contenido de un estilo de elemento no se
muestra en el lienzo. Más bien, es el efecto del contenido del estilo
de elemento - la hoja de estilo - que aparece en el lienzo. Por lo que no
se ve "{color: green}" aparece en la pantalla; que se ve en lugar de
dos h1 elementos de color verde. No hay reglas han añadido que
afectan a cualquiera de los otros elementos, por lo que los elementos
aparecerán en color por defecto del navegador.
LOS NAVEGADORES Y CSS

Para una visión general actualizada de los navegadores disponibles, consulte
la página de la información del W3C
Por CSS funcione como se describe en este libro, debe utilizar un
navegador CSS mejorado, es decir, un navegador compatible con
CSS. Un navegador CSS mejorada reconocerá el estilo elemento como
un contenedor para una hoja de estilo y presentar el documento en
consecuencia. La mayoría de los navegadores que se distribuyen hoy
CSS soporte, por ejemplo Microsoft Internet Explorer 4 (IE4), Netscape
Navigator 4 (NS4) y Opera 3.5 (ø3,5). Las estimaciones conservadoras
indican que más de la mitad de las personas en la Web utilizan un
navegador CSS mejorado, y las cifras están en constante aumento. Lo
más probable es que la gente que se comunica tienen navegadores
CSS mejorada. Si no es así, darles una razón para actualizar!
La mejor fuente para obtener información sobre cómo los diferentes
navegadores soportan CSS establas de WebReview
Por desgracia, no todas las implementaciones de CSS son
perfectos. Cuando se inicia la experimentación con las hojas de estilo,
pronto se dará cuenta de que cada navegador viene con un conjunto de
errores y limitaciones. En general, los nuevos navegadores se
comportan mejor que los antiguos. IE4 y ø3,5 están entre los mejores,
y la próxima oferta de Netscape - Gecko nombre en código - también
promete mucho apoyo mejorado para CSS.
Aquellos que no utilizan navegadores con CSS mejorado todavía
puede leer las páginas que utilizan hojas de estilo. CSS fue diseñado
cuidadosamente para que todo el contenido debe permanecer visible
incluso si el navegador no sabe nada acerca de CSS. Algunos
navegadores, como Netscape Navigator versión de 2 y 3 no soporta
hojas de estilo, pero saben lo suficiente sobre el estilo de elemento de
ignorar por completo. Junto a apoyar las hojas de estilo, este es el
comportamiento correcto.
Sin embargo, otros navegadores que no conocen el estilo
de elemento, como el de Netscape Navigator 1 y Microsoft Internet
Explorer 2, ignorarán los estilo etiquetas , sino mostrar
el contenido del estilo de elemento. Así, el usuario va a terminar con la
hoja de estilo impreso en la parte superior de la tela. En el momento de
escribir esto, sólo un pequeño porcentaje de usuarios de la Web
experimentará este problema. Para evitar esto, usted puede poner su
hoja de estilos dentro de un comentario HTML , que ya comentamos en
el Capítulo 1 . Dado que los comentarios no se muestran en la pantalla,
mediante la colocación de la hoja de estilo dentro de un comentario
HTML, se impide que los navegadores más antiguos de mostrar el estilo
delos contenidos de elemento. Navegadores CSS mejorada son
conscientes de este truco, y tratarán el contenido del estilo de elemento
como una hoja de estilo.

Recordemos que los comentarios HTML comienzan con . He aquí un extracto del ejemplo de código anterior que
muestra la forma de escribir una hoja de estilo en un comentario
HTML. El comentario encierra el estilo de contenido único elemento:
<HTML>
<STYLE>
<! -
H1 {color: green}
->
</ Style>
<BODY>
..
</ BODY>
</ HTML>
CSS también tiene su propio conjunto de observaciones que se pueden utilizar
dentro de la hoja de estilo. Un comentario CSS comienza con "/ *" y termina
con "* /". (Los que están familiarizados con el lenguaje de programación C
reconocerán estos.) Las reglas CSS dentro de un comentario CSS no tendrá
ningún efecto sobre la presentación del documento.
El navegador también necesita que le digan que está trabajando con
hojas de estilo CSS. CSS es actualmente el único lenguaje de hojas de
estilo en uso con documentos HTML y no esperamos que esto
cambie. Para XML la situación podría ser diferente. Pero al igual que
hay más de un formato de imagen (GIF, JPEG y PNG vienen a la
mente), no puede haber más de un lenguaje de hojas de estilo. Así que
es un buen hábito para contar los navegadores que están tratando con
CSS. (De hecho, HTML requiere que lo haga.) Esto se hace con el tipo
de atributo del estilo de elemento. El valor de tipo indica que se está
utilizando el tipo de hoja de estilo. Por CSS, ese valor es "text / css". El
siguiente es un extracto de nuestro documento de muestra anterior que
muestra la forma en que iba a escribir esto (en combinación con el uso
del comentario HTML):
<HTML>
<STYLE type = "text / css">
<! -
H1 {color: green}
->

</ Style>
<BODY>
..
</ BODY>
</ HTML>
Cuando el navegador carga un documento, se comprueba para ver si
se entiende el lenguaje de hojas de estilo. Si lo hace, se intentará leer
la hoja, de lo contrario se ignorará. El tipo de atributo (véase el
Capítulo 1 para una discusión sobre los atributos HTML) en el estilo
de elemento es una manera de dejar que el navegador sabe que el
lenguaje de hoja de estilo se está utilizando. El tipo de atributo debe ser
incluido.
Para hacer ejemplos más fácil de leer, hemos optado por no
envolver las hojas de estilo en los comentarios HTML, pero sí utilizar
el tipo de atributo largo de este libro.
ESTRUCTURAS DE ÁRBOL Y LA HERENCIA
Recuerde del capítulo 1 de la discusión acerca de HTML que
representa un documento con una estructura en forma de árbol y cómo
los elementos en HTML tienen hijos y padres. Hay muchas razones
para tener documentos con estructura de árbol. Para las hojas de estilo,
hay una muy buena razón: la herencia. Así como los niños heredan de
sus padres, también lo hacen los elementos HTML. En lugar de heredar
los genes y dinero, los elementos HTML heredan las propiedades
estilísticas.
Vamos a empezar por echar un vistazo en el documento de
muestra:
<HTML>
<BODY>
La página de inicio <H1> de Bach </ h1>
<P> Johann Sebastian Bach fue un
<STRONG> prolífica </ STRONG> compositor. entre su
obras son:
<UL>
Variaciones <LI> el Goldberg
<LI> los Conciertos de Brandeburgo
<LI> Oratorio de Navidad

</ Ul>
</ BODY>
</ HTML>
La estructura de árbol de este documento es:
A través de la herencia, los valores de propiedad CSS establecidos en
uno de los elementos serán transferidos por el árbol a sus
descendientes. Por ejemplo, nuestros ejemplos tienen hasta ahora para
fijar el color verde para ser h1 y h2 elementos. Ahora, por ejemplo, que
desea establecer el mismo color en todos los elementos del
documento. Usted puede hacer esto haciendo una lista de 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 no tardarían en
hacer larga. Hay una mejor - forma - y más corto. En lugar de establecer
el estilo de cada tipo de elemento, lo ponemos en su ancestro común,
el cuerpo deelemento:
BODY {color: green}
</ Style>
Desde otros elementos heredan las propiedades del cuerpo elemento,
todos ellos heredarán el color verde (Figura 2.4 ).
Figura 2.4 El resultado de la herencia. (Probarlo)

Como se ha visto anteriormente, la herencia es un vehículo de
transporte que distribuirá propiedades estilísticas a los descendientes
de un elemento.Puesto que el cuerpo de elemento es un ancestro
común para todos los elementos visibles, el cuerpo es un selector
conveniente cuando se desea establecer reglas estilísticas para todo el
documento.
LA HERENCIA PRIMORDIAL
En el ejemplo anterior, todos los elementos se les da el mismo color a
través de la herencia. A veces, sin embargo, los niños no se parecen a
sus padres. No es de extrañar, CSS también da cuenta de
esto. Digamos que le gustaría para h1 elementos a ser de color azul,
mientras que el resto debe ser verde. Esto se expresa fácilmente en el
CSS:
BODY {color: green}
H1 {color: azul marino}
</ Style>
Desde h1 es un elemento hijo del cuerpo (y por lo tanto hereda
de cuerpo ), las dos reglas en la hoja de estilo anterior son
contradictorios. El primero de ellos establece el color de
la carrocería elemento - y por lo tanto también el color de h1 través de
la herencia - mientras que el segundo establece el color
específicamente en el h1 elemento. ¿Qué regla va a ganar? Vamos a
averiguar:
(intentalo)

La razón por la segunda regla gana es que es más específico que el
primero. La primera regla es muy general - que afecta a todos los
elementos en el lienzo. La segunda regla sólo afecta h1 elementos del
documento y por lo tanto más específica es.
Si CSS había sido un lenguaje de programación, el orden en que se
especifican las normas determinaría cuál de ellos iba a ganar. CSS no
es un lenguaje de programación, como en el ejemplo anterior, el orden
es irrelevante. El resultado es exactamente el mismo si utilizamos esta
hoja de estilo:
H1 {color: azul marino}
BODY {color: green}
</ Style>
CSS ha sido diseñado para resolver los conflictos entre las reglas de
hojas de estilo como la de arriba. La especificidad es un aspecto de
eso. Puede encontrar los detalles en el Capítulo 15 , "en cascada y la
herencia."
PROPIEDADES QUE NO HEREDAN
Como regla general, las propiedades de CSS heredan de padres a
elementos secundarios como se describe en los ejemplos
anteriores. Algunas propiedades, sin embargo, no heredan y siempre
hay una buena razón para ello. Vamos a utilizar el fondo de la
propiedad (que se describe en el Capítulo 11) como un ejemplo de una
propiedad que no hereda.

Digamos que usted desea establecer una imagen de fondo de una
página. Este es un efecto común en la Web. En CSS, se puede escribir:
<HTML>
CUERPO {
background: url (texture.gif) de color blanco;
de color negro;
}
</ Style>
<BODY>
<H1> de Bach <EM> casa </ EM> web </ h1>
<P> Johann Sebastian Bach fue un prolífico
compositor.
</ BODY>
</ HTML>
El fondo de la propiedad tiene una URL ( "texture.gif") que señala una
imagen de fondo como valor a. Cuando se carga la imagen, el lienzo se
ve así:
(intentalo)
Hay algunas cosas dignas de mención en el ejemplo anterior:
 La imagen de fondo cubre la superficie como un fondo de pantalla -
también los fondos de la h1 y p elemento han sido cubiertos. Esto
no es debido a la herencia, sino al hecho de que a menos que se
establezca lo contrario, todos los orígenes son transparentes. Por
lo tanto, dado que no hemos establecido los antecedentes de
la h1 o p elemento a otra cosa, el elemento padre, cuerpo , brillará
a través.
 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 se puede
encontrar, podrás ver el color en su lugar.
 El color de la carrocería elemento se ha establecido en negro. Para
garantizar contraste entre el texto y el fondo, es un buen hábito para

establecer siempre una de color cuando el fondo propiedad se
establece.
Por lo tanto, exactamente por qué no el fondo de la propiedad
hereda? Visualmente, el efecto de la transparencia es similar a la
herencia: Parece que todos los elementos tienen los mismos
orígenes. Hay dos razones: en primer lugar, fondos transparentes son
más rápidos para mostrar (no hay nada que ver!) Que otros fondos. En
segundo lugar, ya que las imágenes de fondo están alineados con
respecto al elemento al que pertenecen, que de otro modo no siempre
terminan con una superficie de fondo liso.
LAS TAREAS COMUNES CON CSS
Ajuste de colores y fondos - como se describe anteriormente - son
algunas de las tareas más comunes realizadas por CSS. Otras tareas
comunes incluyen el establecimiento de tipos de letra y un espacio en
blanco alrededor de los elementos. Esta sección le ofrece una visita
guiada por las propiedades que se utilizan con mayor frecuencia en
CSS.
Las tareas comunes: fuentes
Vamos a empezar con las fuentes. Si ha utilizado aplicaciones de
autoedición en el pasado, usted debe ser capaz de leer esta hoja de
estilo poco:
H1 {font: 36pt serif}
La regla anterior establece la fuente de h1 elementos. La primera parte
del valor - 36pt - establece el tamaño de fuente a ser de 36 puntos. Un
"punto" es una antigua unidad de medida tipográfica de que ha
sobrevivido a la era digital. En el siguiente capítulo le diremos por qué
debería utilizar la unidad "em" en lugar de "PT", pero por ahora vamos
a pegarse a puntos. La segunda parte del valor - serif - dice al
navegador que utilice una fuente con remates (los pequeños ganchos
en los extremos de los trazos, Capítulo 5 le dirá todo acerca de
ellos). La página más decorada fuentes serif traje de Bach casa bien
desde los sans-serif modernas fuentes (tipos de letra sin gracias) no se
utilizaron en su tiempo. Aquí está el resultado:
(intentalo)

La fuente es una propiedad abreviada para establecer varias
propiedades a la vez. Mediante su uso, se puede acortar sus hojas de
estilo y los valores definidos en todas las propiedades que sustituye. Si
decide utilizar la versión ampliada, que tendría que establecer todos
estos para sustituir el ejemplo anterior:
H1 {
font-size: 36pt;
font-family: serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: normal;
}
A veces usted sólo desea configurar uno de estos. Por ejemplo, es
posible que desee inclinar el texto en algunos elementos. Aquí hay un
ejemplo:
UL {font-style: italic}
El estilo de letra propiedad no va a cambiar el tamaño de la fuente o
de la familia de fuentes, sólo se inclinará la fuente existente. Cuando se
establece en la ul elemento, los li elementos en el interior se convertirán
inclinada, ya que la fuente de estilo se hereda. Este es el resultado
cuando se aplica a la página de prueba se sabe por ahora:
(intentalo)

Del mismo modo, la fuente-peso propiedad se utiliza para cambiar el
peso - de espesor - de las letras. Puede potenciar aún más los
elementos de la lista mediante el establecimiento de su antepasado
ser negrita :
{UL
font-style: cursiva;
font-weight: bold;
}
Cuyos rendimientos:
Las últimas propiedades, font-variant y line-height , no han sido
ampliamente apoyada en los navegadores hasta ahora y por lo tanto no
se usan comúnmente como todavía.
Las tareas comunes: márgenes
Ajuste el espacio alrededor de los elementos es una herramienta básica
en la tipografía. El titular por encima de este párrafo dispone de espacio
por encima de ella y en el espacio (un poco menos) por debajo de
ella. Este párrafo, tal como aparece en el libro, tiene el espacio de la
izquierda y (un poco menos) a la derecha. CSS se puede utilizar para

expresar la cantidad de espacio que debe ser alrededor de diferentes
tipos de elementos.
Por defecto, el navegador sabe un poco acerca de cómo mostrar
los diferentes tipos de elementos en HTML. Por ejemplo, se sabe que
las listas yBlockQuote elementos deben tener una sangría para
diferenciarse del resto del texto. Como diseñador, se puede construir
sobre estos ajustes, mientras que al mismo tiempo proporcionar a sus
propios refinamientos. Vamos a usar la blockquote elemento como un
ejemplo. He aquí un documento de prueba:
<HTML>
<TITLE> Federico el Grande se encuentra con Bach </ TITLE>
<BODY>
<P> Una tarde, al igual que Federico el Grande era
conseguir su flauta listo, y sus músicos
fueron ensamblados, un agente le trajo una
Lista de los extranjeros que habían llegado. Con
su flauta en la mano, pasó por encima de la lista,
pero inmediatamente se volvió hacia el ensamblado
músicos, y dijo, con una especie de
agitación:
<Blockquote> "Señores, viejo Bach ha llegado."
</ Blockquote>
<P> La flauta ahora se puso a un lado, y el viejo Bach, que
habían posado en los alojamientos de su hijo, fue
inmediatamente
convocado al palacio.
</ BODY>
</ HTML>
La captura de pantalla a continuación es cómo un navegador HTML
típico sería mostrar el documento:
(intentalo)

Como se puede ver, el navegador ha añadido espacio en todos los
lados del texto citado. En CSS, este espacio se llama "márgenes" y
todos los elementos tienen márgenes en los cuatro lados. Las
propiedades se denominan: margin-top , margin-right , margin-
bottom , y el margen izquierdo. Puede cambiar la forma en
la blockquote se visualiza elemento escribiendo una hoja de estilo poco:
BLOCKQUOTE {
margin-top: 1 em;
margin-right: 0em;
margin-bottom: 1 em;
margin-left: 0em;
}
La unidad "em" será tratado en detalle en el siguiente capítulo, pero ya
podemos ahora revelar su secreto: se escala en relación con el tamaño
de la fuente. Así, el ejemplo anterior se traducirá en los márgenes
verticales de ser tan alto como el tamaño de la fuente ( 1 em ) de
la blockquote, y los márgenes horizontales que tiene una anchura
cero. Para asegurarse de que el texto de la cita todavía puede ser
distinguido, se le ha dado un sesgo cursiva. El resultado es:
(intentalo)

Al igual que la fuente es una propiedad abreviada para establecer
varias propiedades relacionadas con la fuente a la vez, el margen es
una propiedad abreviada que establece todas las propiedades de los
márgenes. Por tanto, el ejemplo anterior se puede escribir:
BLOCKQUOTE {
Margen: 1 em 0em 1 em 0em;
}
La primera parte del valor - 1 em - se asigna a margin-top. Desde allí es
en sentido horario: 0em se asigna a margin-right , 1 em se asigna
a margin-bottom , y 0em se asigna al margen izquierdo .
Con el margen izquierdo se establece en cero, el texto citado
necesita más estilo que lo distinguen del resto del texto. Ajuste de la
fuente de estilode cursiva ayuda, y la adición de un color de fondo más
amplifica la cita:
BLOCKQUOTE {
fondo: #EDB;
}
El resultado es:
(intentalo)
Como era de esperar, el color de fondo detrás de la cotización ha
cambiado. A diferencia de los ejemplos anteriores, el color se especifica
en rojo / verde / azul componentes (RGB). Los colores RGB se
describen en detalle en el capítulo 11 .
Uno de los problemas estilística en el ejemplo anterior es que el
color de fondo apenas cubre el texto citado. El espacio alrededor de la
cita - la zona del margen - no utiliza el color de fondo del elemento. CSS
tiene otro tipo de espacio, llamado relleno, que utiliza el color de fondo

del elemento. En otros aspectos, las propiedades de relleno son como
las propiedades de los márgenes: añaden espacio alrededor de un
elemento. Vamos a añadir algo de relleno para la cita:
BLOCKQUOTE {
fondo: #EDB;
padding: 0.5em;
}
El resultado de establecer el relleno se añade espacio entre el texto y
el rectángulo que lo rodea:
(intentalo)
Observe que el acolchado de propiedad sólo se le dio un valor
( 0.5em ). Al igual que el margen de propiedad, el relleno podría haber
tomado 4 valores que se han asignado a la parte superior, derecha e
inferior izquierda y el relleno, respectivamente. Sin embargo, cuando el
mismo valor se va a establecer en todos los lados, enumerando una vez
es suficiente. Esto es cierto tanto para el relleno y el margen (así como
algunas otras propiedades de borde, que se describen en la Sede del
espacio alrededor de las cajas. ).
Las tareas comunes: enlaces
Para que sea más fácil para los usuarios navegar en documentos de
hipertexto, los enlaces deben tener un estilo que los distingue de texto
normal.navegadores HTML menudo han subrayado texto del
hipervínculo. Además, varias combinaciones de colores se han utilizado
para indicar si el usuario ha visitado previamente el enlace o no. Desde

hipervínculos son una parte tan fundamental de la Web, CSS tiene un
apoyo especial para estilizar ellos.He aquí un ejemplo sencillo:
A: link {text-decoration: underline}
El ejemplo anterior especifica que los enlaces no visitados deben ser
subrayados:
(intentalo)
Los enlaces están subrayados, como hemos indicado, sino que también
son de color azul, que no lo tenemos. Cuando los autores no especifican
todos los estilos posibles, navegadores utilizan estilos predeterminados
para llenar los vacíos. La interacción entre los estilos del autor, estilos
por defecto del navegador y estilos de usuario (preferencias del usuario)
es otro ejemplo de reglas de resolución de conflictos de CSS. Se
denomina cascada (la "C" de CSS). Vamos a discutir la cascada abajo.
El selector ( A:link) merece mención especial. Probablemente
reconoce "A" como un elemento HTML, pero la última parte es nueva. ":
Enlace" es uno de los varios llamados pseudo-clases de CSS. Las
pseudo-clases se utilizan para dar estilo a los elementos basados en la
información fuera del propio documento. Por ejemplo, el autor del
documento no puede saber si va a ser visitado o no un determinado
enlace. Las pseudo-clases se describen en detalle en el capítulo 4 , y
sólo nos van a dar algunos ejemplos más aquí:
A: visited {text-decoration: none}
Esta regla da estilo a los enlaces visitados, al igual que A:linkdio estilo
a los enlaces no visitados. Aquí es un ejemplo un poco más complejo:
A: link, a: visited {text-decoration: none}
A: hover {background: cian}
La última regla introduce una nueva pseudo-clase: vuelo
estacionario . Suponiendo que el usuario se está moviendo un
dispositivo señalador (como un ratón), el estilo especificado se aplica al
elemento cuando el usuario mueve el puntero sobre ( "asoma" sobre) el

enlace. Un efecto común es cambiar el color de fondo. Esto es lo que
parece:
(intentalo)
El : hover pseudo-clase tiene una historia interesante. Fue introducido
en CSS2 después del efecto de la libración se hizo popular entre los
programadores de JavaScript. La solución requiere JavaScript código
complicado en comparación con el pseudo-clase CSS y esto es un
ejemplo de CSS recoger los efectos que se han vuelto populares entre
los diseñadores de páginas web.
UNA PALABRA SOBRE LA CASCADA
Una característica fundamental de la CSS es que más de una hoja de
estilo puede influir en la presentación de un documento. Esta función se
conoce como cascada debido a las diferentes hojas de estilo son
considerados como provenientes de una serie. En cascada es una
característica fundamental de la CSS, porque nos dimos cuenta de que
cualquier documento único podría muy probablemente terminará con
hojas de estilo de múltiples fuentes: el navegador, el diseñador, y
posiblemente el usuario.
En la última serie de ejemplos que lo vio que el color del texto de
los enlaces que se volvió azul y sin que se especifica en la hoja de
estilo. Además, el navegador sabía cómo dar
formato BlockQuote y h1 elementos sin ser dicho de manera
explícita. Todo lo que el navegador sabe acerca del formato se
almacena en el navegador de hoja de estilo por defecto y se fusionó con
hojas de estilo del autor y del usuario 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 la opción de influir en la presentación de
sus documentos. Con CSS, que pueden hacer esto mediante el
suministro de una hoja de estilo personal que se fusionó con la hojas de
estilo del diseñador del navegador y. Cualquier conflicto entre las
diferentes hojas de estilo se resuelven por el navegador. Por lo general,

la hoja de estilo del diseñador tendrá la afirmación más fuerte en el
documento, seguido por el usuario de, y luego por defecto del
navegador. Sin embargo, el usuario puede especificar que una regla es
muy importante y será entonces anulan los estilos del autor o del
navegador.
De entrar en detalles acerca de cascada en el capítulo 15 , "en
cascada y la herencia." Antes de eso, no hay mucho que aprender
acerca de las fuentes, el espacio y los colores.

Capítulo 2 css

Más contenido relacionado

La actualidad más candente (19)

Destacado (7)

Similar a Capítulo 2 css (20)

Último (20)

Capítulo 2 css