Hojas de Estilo en Cascada

- CSS -

Hojas de Estilo en Cascada

CSS
El alumno identificar uno de los principales mecanismos empleados por la industria para la estandarizacin de los elementos de presentacin de sus aplicaciones a travs de un control ms granular sobre los elementos que la componen.
Clases, pseudo-clases y pseudo-elementos Sintaxis del selector de las CSS2 Aplicar hojas de estilo y estilos individuales Situacin vertical y horizontal de los elementos Uso de los elementos DIV y SPAN Propiedades de alteracin de flujo Colores, bordes y fondos Bordes, mrgenes y relleno Transparencia Orden Z Fuentes y espaciado Ubicacin del texto La regla @media

Hojas de Estilo en Cascada (CSS)

Las hojas de estilo en cascada sirven para separar el contenido de su documento de los detalles de su presentacin. Una hoja de estilo se expresa como un conjunto de reglas cada una de las cuales incluye un selector y una declaracin. El selector puede ser de uno o ms tipos de elementos, clases de estilo definidas por el usuario o pseudoelementos definidos por el estndar CSS. La declaracin comunica al navegador cmo representar el texto seleccionado. Puede alterar la fuente, el color, la alineacin o cualquiera de las ms de 50 propiedades. El modo ms rpido de definir un estilo es incrustado en su pgina web.

<STYLE TYPE="text/css"> H2 {color: #ff0000; } </STYLE>

Hojas de Estilo en Cascada (CSS)

Es posible crear una regla aplicable a ms de un tipo de elemento. Tambin puede suministrar mltiples reglas.
H1, H2, H3 { color: #ff00bb; font-family: arial, helvetica; }

Algunas declaraciones de estilo toman ms de un argumento. En caso de que el navegador no puede interpretar el primer valor posible de la propiedad, buscar hacerlo con la siguiente opcin.

Como HTML, CSS no se preocupa por el espacio en blanco. Puede poner todas sus declaraciones juntas, siempre que ponga puntos y coma entre ellas. Tambin puede decidir dnde poner las lneas nuevas, y si la llave de apertura va en la misma lnea que los selectores o en la de debajo. Las hojas de estilo se llaman en cascada porque los elementos entre elementos heredan las reglas de estilo de sus padres. Se pueden crear reglas que establezcan el estilo de un elemento hijo contenido dentro de un elemento padre especfico.
H2 EM { color: #ff00bb; font-family: arial, helvetica; font-size: 120%; font-weight: bold; font-style: italic; }

Hojas de Estilo en Cascada (CSS)

Las propiedades CSS que aceptan argumentos cuantitativos a menudo permiten expresar la cantidad de diversos modos adjuntando un sufijo al argumento numrico. Ejemplo pixeles (px), puntos (pt), em-anchura (em), x-altura (ex), pulgadas (in), centmetros (cm), milmetros (mm) y picas (pc).
Los sufijos em y ex son unidades relativas, que usan el valor numrico como un multiplicador frente al valor actual. Eg: un valor 1 mantiene el tamao actual, 0.8 disminuye la fuente un 20%, y 1.2 la aumenta en el mismo porcentaje.

Los valores de porcentaje son siempre relativos. Los pixeles son medidas absolutas, pero tenga en cuenta que las fuentes sern mayores o menores dependiendo del tamao de visualizacin y de la resolucin del usuario. Puede ver hojas de estilo que usen los smbolos + y - delante de valores numricos. Esto indica el signo del valor, no que se aadir o sustraer del valor actual. Los valores relativos heredados de los elementos padre se transmiten como valores calculados.

CSS - Clases, pseudo-clases y pseudo-elementos

Algunos trozos de un documento HTML pueden beneficiarse del cambio de estilo, pero el selector habitual de elementos a veces no es suficientemente selectivo. Aqu es donde entran en juego los especificadores de no elementos de las CSS. Las clases ponen nombres simples a los estilos, para que puedan invocarse dentro de cualquier etiqueta HTML (apropiada). Una clase de estilo puede ser el hijo de un elemento, o puede mantenerse sola como una clase aplicable a cualquier elemento. Para definir una clase, se escribe una regla de estil como se hara normalmente, pero se agrega un sufijo al especificador con un punto seguido por un nombre de clase arbitraria. Para crear una clase global, use el punto y el nombre de la clase slo como especificador. Luego, se utiliza el atributo CLASS de una etiqueta apropiada para invocar esas reglas de estilo de clase.
<STYLE TYPE="text/css"> EM.red { color=#ff0000j } .sansgreen { color=#00ff00; font-family: arial, helvetica; } </STYLE> <BODY> <H2>iSoy un <EM CLASS=red>rojo</EM> encabezado!</H2> <H3 CLASS=sansgreen>Por supuesto</H3> </BODY>

CSS - Clases, pseudo-clases y pseudo-elementos

Las pseudo-clases son clases, para ciertas etiquetas, integradas en el navegador. No comparten la sintaxis de las definidas por el usuario; a menudo, usan dos puntos en vez de un punto como separador. Las pseudo-clases tampoco pueden invocarse dentro de una etiqueta usando CLASS. Muy pocas estn definidas por la CSS2. La pseudo-clase ms utilizada alteran la apariencia del texto dentro de las etiquetas <A>.
<STYLE TYPE="text/css"> A:link { color: #00ffff; } A:visited { color: #ffd0d0; } A.liveone:hover { color: #ffffffj } </STYLE> <BODY> Visite <A HREF="http://www.microsoft.com"> Microsoft</A> y <A CLASS=liveone HREF="http://www.pearsoned.es"> Prentice Hall</A>.

La seleccin ID le permite estrechar un estilo hasta un nico elemento (esto contradice el propsito de las hojas de estilo, y debera evitarse):
<STYLE TYPE="text/css"> P#first { font-size: 140%; color: white; font-family: serif; } </STYLE> <BODY> <P ID="first">Estaba muy oscuro esa noche tormentosa.</P><P>pero tena que terminar esa noche.</P>

Sintaxis del selector de las CSS2

La recomendacin CSS2 hace una aportacin significativa a la gama de los selectores disponibles, expandindolos para incluir los especificadores de nueva descendencia, los pseudo-elementos y las pseudo-clases:
El especificador first-line funciona desde los finales de lnea del navegador, ignorando las del cdigo fuente a no ser que se proporcione una etiqueta <BR> para forzar el final. Podra usar first-Ietter para visualizar una letra capital. Un especificador modificado con first-child coincide con el elemento primer hijo (o incluido) de otra etiqueta. Esto le permitira implementar el truco que usan muchas revistas de establecer el primer prrafo entero de un artculo o una historia con un tipo enfatizado. El selector de sintaxis A > B har coincidir cualquier elemento (etiqueta) B que sea el hijo inmediato de un elemento A. Esto difiere de la sintaxis ms usada (y, como la de este escrito, la nica soportada), A B, que hace coincidir no slo los hijos inmediatos de A que tienen el tipo B, sino a los descendientes a todo lo largo de la cadena. La sintaxis A+B acopla cualquier elemento de tipo B que vaya inmediatamente precedido por un elemento de tipo A. La seleccin de atributo le permitir inventar sus propios atributos de etiqueta (o usar los existentes) y usados para invocar estilos. El selector THEAD [bigtable=yes] acoplar cualquier bloque <THEAD> cuya etiqueta de apertura incluya el atributo inventado bigtable y cuyo valor sea yes.

Aplicar hojas de estilo y estilos individuales

Es mejor mantener separados los estilos y el contenido, y verter sus reglas de estilo en los propios archivos. La sintaxis CSS para importar una hoja de estilo externa es:
<LINK rel='stylesheet' type='text/css' href="mystyle.css">

Es libre de especificar una cadena de propiedades de estilo dentro de una etiqueta HTML (un estilo incrustado). Estas propiedades sobrepasan a las utilizadas por defecto en el navegador y a las propiedades de ajuste contenidas en cualquier hoja de estilo activa. El atributo style acepta una cadena de asignaciones de propiedad que usan la misma sintaxis que las declaraciones CSS. No acepta selectores o llaves. <P style='color=#00ff00; font-family: arial, helveticaj'>
Al especificar atributos en HTML, es libre de usar comillas simples o dobles. Asegrese tan slo de que coincidan.

Aplicar hojas de estilo y estilos individuales

Aplicar una asignacin de estilo directo no implica usar el atributo class para invocar una entrada para ese elemento en la hoja de estilo activa, ni afecta a cualquier otra propiedad acoplada o heredada no contenida en la asignacin directa. Usando nombres de clase es posible, y deseable, construir bibliotecas de hojas de estilo que puedan llevarse de un proyecto a otro. No es conveniente dejar caer mltiples etiquetas <LINK> en el encabezamiento de cada documento que usa sus estilos. Las CSS proporcionan una solucin mejor: @import.
THEAD { FONT-FAMIlY: Tahoma; } @import url("foo.css"); TABlE { BACKGROUND-COLOR: white; COLOR: navy;}

Se puede especificar @import en cuantos archivos quiera. Cada uno aade un poco de consumo extra pero, probablemente, no lo bastante como para preocuparse, a no ser que utilice cientos de ellos en un archivo. Puede importar archivos .CSS que tambin contengan reglas @import. El navegador los clasificar.

CSS - Situacin vertical y horizontal

Un componente clave de HTML Dinmico es la capacidad de situar entidades en la pantalla donde se desee. La ubicacin arbitraria (y, por medio del guin, la reubicacin de elementos) permite la libertad de crear interfaces de usuario tan ricas y detalladas como las de las aplicaciones originales. Es tarea del navegador descubrir en qu lugar de la pantalla del usuario aparecer cada elemento de un archivo HTML. Para ello, tiene en cuenta varios factores tomo la resolucin de la pantalla, el tipo de elemento, si el tamao del elemento est educido, si es redimensionable, etc. Despus calcula el tamao del objeto y crea un rectngulo (un cuadro de limitacin) que sea lo suficientemente grande como para contenerlo. Este cuadro slo existe en el funcionamiento interno del navegador (no es visible). Hay un cuadro invisible de limitacin en torno a cada elemento de la pantalla de su navegador. As es como evita que los elementos se superpongan unos sobre otros. Asegura que cada cuadro de limitacin tenga su propio espacio.

CSS - Situacin vertical y horizontal

Los cuadros de limitacin residen generalmente dentro de otros cuadros. El cuadro dibujado en torno al elemento <BODY> es el mayor, y el navegador calcula este cuadro incluso si se salta esta etiqueta. Una etiqueta <TABLE> crea un cuadro de limitacin por s misma, y cada <TD> dentro de esa tabla tiene tambin un cuadro. La posicin de la celda de la tabla se establece en relacin con su padre inmediato, la tabla. La posicin relativa de la tabla se establece con relacin a su padre, el cuerpo del documento. Un bloque de texto dentro de la celda de una tabla se sita en relacin con las paredes de la celda, y as sucesivamente. Las propiedades de ubicacin de la especificacin CSS2 permiten cambiar la posicin de los elementos. Usando la ubicacin absoluta, puede situar un elemento en cualquier posicin arbitraria de la pgina. Usando la ubicacin relativa, el navegador toma la decisin de dnde debe ir cada elemento, y luego aplica el ajuste que se pretende. En la ubicacin relativa slo se necesita especificar una propiedad del eje que quiere ajustar:
top para controlar la colocacin vertical (eje y) y left para controlar la horizontal (eje x). Los valores de estas propiedades cambian un elemento relativo a la esquina superior izquierda de la caja de limitacin. Tambin puede usar bottom y right para cambiar un elemento relativo a su esquina inferior derecha.

CSS - Situacin vertical y horizontal

<HTMl> <HEAD> <TITlE>Ubicacin de CSS</TITlE> <STYLE type="text/css"> H3.left { position: relative; left: -15px; } H3.right { position: relative; right: 10%; text-align: right; } BODY { border-Ieft: red 3px ridge; border-right: red 3px ridge; } </STYLE> </HEAD> <BODY scroll=no> <H3 class=left>Hola!</H3> <H3 class=right>Mundo</H3> </BODY> </HTML>

CSS - Situacin absoluta

La ubicacin absoluta ofrece un control absoluto, lo que la hace muy poderosa. Pero tambin produce algunas feas plantillas no intencionadas. Cuando use esta ubicacin, tenga en cuenta que los usuarios pueden elegir redimensionar sus ventanas y elegir sus propios tamaos de fuente. La plantilla ubicada de forma absoluta podra no verse tan bien en otro sistema. Cuando suministra valores para left y top, la ubicacin absoluta es sencilla: est declarando un desplazamiento desde la esquina superior izquierda del elemento padre. Si usa bottom y right, su elemento se desplaza desde la esquina inferior derecha.
H3.left { position: absolute; top: 0; 1eft: -15px; } H3.right { position: absolute; bottom: 0; right: 10%; text-align: right; }

CSS - Situacin absoluta

La ubicacin absoluta no tiene que derribar los clculos de situacin de elementos en el navegador fuera del cuadro. Si no sita la propiedad top o bottom en una regla de estilo de ubicacin absoluta, el navegador desplazar la esquina superior de sus elementos bajo el cuadro de limitacin del elemento que le precede. Esto tendr el efecto de apilar automticamente el texto ubicado de forma absoluta y los grficos, a la vez que le dan el control de la ubicacin horizontal de cada elemento. De forma similar, si no sita la propiedad left o right, el navegador alinear el borde izquierdo de sus elementos con el borde derecho del elemento precedente. En ambos casos, si no hay elemento precedente dentro del padre, el cuadro del padre se usa para establecer la posicin del eje no especificado.

CSS - Situacin esttica

El tercer tipo de ubicacin, static, es el tipo por defecto, e implica algn comportamiento curioso sobre la ubicacin relativa o absoluta de sus hijos. No se puede resituar un elemento ubicado estticamente (el navegador lo sube sin considerar sus solicitudes de ubicacin). Pero un elemento esttico es, efectivamente, invisible para sus hijos. Cuando un elemento es el hijo (descendiente de primer nivel) de un elemento esttico, la ubicacin absoluta y relativa de ste hijo son relativas al padre del elemento esttico.
<HTML> <HEAD><TITLE>Posicionamiento</TITLE></HEAD> <BODY scroll="no"> <TABLE style="position: static;" border=2> <THEAD> <TR> <TD>Una fila</TD> </TR> <TR> absolute <TD style="position: absolute; top=0; left=0;">iHEY! </TD> </TR> </THEAD> </TABLE> </BODY> </HTML>

Si se quiere convertir un elemento padre en el cuadro de limitacin de sus hijos, debe especificar position: absolute o position: relative aun cuando no piense resituar el padre.

CSS - Uso del elemento SPAN

Algunas veces se necesita agrupar elementos sin pegarlos a una tabla, a manera de caja contenedora invisible cuya ubicacin y tamao se puedan especificar. Eso es precisamente lo que hacen <DIV> y <SPAN>. El elemento DIV produce automticamente un salto de prrafo antes y despus de l, mientras que un elemento SPAN se quedar, si lo desea, en el flujo normal del navegador. Eso hace de DIV un elemento de bloque mientras que SPAN es un elemento de lnea. Un uso popular de SPAN es el de seleccionar un pasaje arbitrario de texto al que quiere aplicar un estilo, pero sin usar una etiqueta incrustada reservada. La ubicacin es de uso dudoso con SPAN porque su razn de ser es funcionar dentro del flujo estndar del documento del navegador.

CSS - Uso del elemento SPAN

<HTML> <HEAD> <TITLE>DIV y SPAN</TITLE> <STYLE type="text/css"> .strange { font-family: arial; font - size: 160% } </STYLE> </HEAD> <BODY scroll="no"> <H2>Quiere otra taza de <SPAN class="strange">caf</SPAN>?</H2> </BODY> </HTML>

CSS - Uso del elemento DIV

El navegador integra el elemento SPAN sin fisuras en el flujo de texto. El elemento DIV no intenta encajar en l. Su tarea es crear un contenedor de tamao arbitrario que acoja a los elementos hijo. Es como crear un elemento BODY del tamao que elija y en la localizacin que quiera.

<HTML> <HEAD> <TITLE>DIV y SPAN</TITLE> </HEAD> <BODY scroll="no"> <DIV style="position: absolute; left:5px; background: #00C0C0; heigh: 60%; width: 26%"> ghfghgfhfgfhgfhfgh fghgfhfgh fg gf hgfh f gfh gfhfgh gf fgh gfh gf hfgh gf gfh fhfgh fgh gfh f hgfh fghf gh fhgfh gf fgh fgh </DIV> <DIV style="position: absolute; left:30%; background: #00C0C0; heigh: 60%; width: 26%"> gf hfgh gf gfh fhfgh fgh gfh f hgfh fghf gh fhgfh gf fgh fgh </DIV> <DIV style="position: absolute; left:60%; background: #00C0C0; heigh: 60%; width: 26%"> gf hfgh gf gfh fhfgh fgh gfh f hgfh fghf gh fhgfh gf fgh fgh </DIV> </BODY> </HTML>

CSS - Uso del elemento DIV

La propiedad overflow afecta la manera en que un elemento de bloque (como DIV) manipula el texto que sobrepasa el tamao establecido del elemento:
El valor scroll obliga al navegador a visualizar una barra de desplazamiento aunque no sea necesaria. El valor visible es el valor por defecto. Los otros dos valores posibles son el de hidden y auto.

CSS - Propiedades de alteracin de flujo: visualizacin, visibilidad y flotacin

El espacio de la pantalla es un elemento de gran valor. Cuanto ms control sobre l garantice al usuario o implementador, mejor funcionar su aplicacin. Los viejos navegadores que soportaban la recomendacin CSSl podan crear bloques invisibles incluyendo visibilidad: hidden entre las reglas de estilo de los elementos. Pero el navegador dispondra todava de un espacio aparte para ese elemento en el flujo, creando un gran agujero en su documento. Se poda usar algn guin (script) para cambiar la propiedad visibility a visible cuando se quisiera ver de nuevo el elemento. CSS2 define la propiedad display, que no slo hace invisible un elemento, sino que cierra el hueco dejado por l cuando desaparece. Cuando se va, se lleva todos sus descendientes con l. Para hacer desaparecer un elemento, aada display: none a sus reglas de estilo. Puede usarse para extraer trozos de su plantilla fuera de la misma, pero dejando el cdigo en su lugar. Es bueno para los diseos que se colapsan, y para crear interfaces con elementos que el usuario puede elegir o rehusar a voluntad. Tambin es til display: inline. Esto convierte un elemento de bloque en un elemento inline, alterando la presentacin normal del navegador.

CSS - Propiedades de alteracin de flujo: visualizacin, visibilidad y flotacin

<HTML> <HEAD> <TITLE>Posicionamiento</TITLE> </HEAD> <BODY> Texto antes <TABLE border=2 > <CAPTION>Tabla 1</CAPTION> <TR><TD>Fila uno</TD></TR> <TR><TD>Fila dos</TD></TR> <TR><TD>Fila tres</TD></TR> </TABLE> <TABLE border=2 > <CAPTION>Tabla 2</CAPTION> <TR><TD>Fila uno</TD></TR> <TR><TD>Fila dos</TD></TR> <TR><TD>Fila tres</TD></TR> </TABLE> Texto despus </BODY> </HTML>

style="display: inline"

CSS - Propiedades de alteracin de flujo: visualizacin, visibilidad y flotacin

En el flujo normal, el navegador incrusta los elementos por la parte inferior de sus cuadros de limitacin. Si tiene un elemento IMG incrustado con texto de prrafo, la parte inferior de la imagen (incluyendo cualquier espacio en blanco que tuviera) se alinear con la parte inferior del texto segn como determine el decrementador de profundidad de fuente. Como resultado, el texto no fluye en torno a los grficos y los otros elementos incrustados de la misma forma que lo hara en un procesador de texto. Para conseguirlo es necesario recurrir al estilo float, y as obligar al navegador a alinear los elementos incrustados por su parte superior.
Un elemento flotante (float: left float: right) ser cambiado al costado selecto hasta que encuentre el margen del padre u otro de estos elementos.

La propiedad float no slo afecta a la posicin del elemento flotante, sino tambin a la del siguiente elemento. Si se quiere estar seguro de que un elemento no est afectado por uno flotante, aplquele el estilo clear: both. Tambin puede ser selectivo, usando clear: left clear: right para evitar que un elemento reaccione ante un elemento flotante a su izquierda o su derecha.

CSS - Propiedades de alteracin de flujo: visualizacin, visibilidad y flotacin

<HTML> <HEAD> <TITLE>Posicionamiento</TITLE> </HEAD> <BODY> <P><IMG SRC="imagenes/grafico.gif" style="float:left"> El texto fluye <br>por la derecha<br> de este grfico y despus <br>recupera su flujo normal<br> por debajo de la imagen.</P> <P><SPAN style="font-size: 36pt; float:left"> L</SPAN>a primavera aflora,<br> el csped cobra vida,<br> Yo me pregunto,<br> dnde estn las flores?</P> </BODY> </HTML>

CSS - Colores, bordes y fondos

Alguna documentacin nos previene contra la confianza en los grficos y en el color, recordndonos que hay todava usuarios que ejecutan navegadores de tipo slo texto, y otros trabajan con monitores monocromos. Un sitio comercial, diseado para ejecutarse en un navegador de slo texto o de 2 colores, puede encantar a los que tengan ese equipamiento pero har que los dems usuarios, los que tienen al menos color de 8-bit, abandonen. Cada elemento visible tiene un primer trmino y un fondo.
El color en que se representa el texto es fcil de cambiar: slo basta con establecer la propiedad color de un elemento con el nombre de un color, un valor RGB hexadecimal o una tripleta decimal usando la funcin integrada rgb( ). color: black; color: #OOOOOO; color: rgb(0,0,0); Para establecer el color de fondo: background-color: white; background-color: #ffffff; background-color: rgb(255, 255, 255);

CSS - Colores, bordes y fondos

Puede representar una celda individual de una tabla, bajo una letra dentro de un elemento SPAN, en colores diferentes que el resto del documento. Tambin es posible definir un fondo con una imagen para un elemento. En este caso, donde quiera que aparezca el color de fondo, el navegador pinta una porcin de la imagen especificada. Por omisin, dibuja la cantidad de imagen que quepa dentro de ese elemento, situndola en la esquina superior izquierda del mismo y recortndola por los bordes del elemento. Si la imagen no llena el elemento, el navegador dibuja el resto del fondo del mismo con el color de fondo especificado (o el color por defecto). La propiedad background-image contiene el nombre del archivo (traducido a travs de la funcin url( ) de CSS) que quiere que se muestre en el fondo de un elemento. Si se requiere que la imagen llene el elemento, se puede establecer background-repeat en repeat, repeat-x o repeat-y. no-repeat es el valor por defecto.
<HTML> <BODY style="background-image: url('imagen.gif'); background-repeat: repeat;"> </BODY> </HTML>

No est limitado a mostrar su imagen repetida a travs del borde superior o izquierdo de un elemento. La propiedad background-position le permite situada donde quiera (top, bottom, left, right, center algn valor nominal o percentual). Puede usar la propiedad para estampar una copia de una imagen de fondo en un sito determinado, o puede cambiar una imagen repetida vertical u horizontalmente segn convenga.
Background-position: bottom left;

Para fijar el fondo, asigne background-attachment: fixed. Tiene un efecto notable sobre los elementos establecidos con overflow: scroll.

CSS - Bordes, mrgenes y relleno

Cada elemento est rodeado por varios cuadros delimitadores, uno dentro de otro. Estos cuadros son, desde el ms interior al ms exterior: contenido, relleno, borde y margen. Es difcil ver dnde acaba el contenido y empieza el relleno, puesto que el color establecido como fondo del elemento los cubre a ambos. El relleno, que rodea inmediatamente el contenido, establece la distancia entre la pared de ste y el borde. Un elemento hijo establece su propio relleno, y lo hace de la misma manera que se emplea en los mrgenes y los bordes. Hay cuatro propiedades del relleno: padding-Ieft, padding-right, padding-top y padding-bottom. Cada uno de estos conceptos acepta un especificador de anchura, con un valor absoluto (por ejemplo, 10px) o un porcentaje de las dimensiones del cuadro padre. El cuadro de contenido de un elemento se cambiar hacia dentro (disminuir, si es necesario) segn aumenta el valor de su relleno. As mismo, los elementos hijo del elemento cuyo relleno se est aumentando disminuirn. El margen es el espacio entre el borde (el cuadro ms exterior) y el relleno. El margen es siempre transparente. Por eso se ve una parte del fondo padre rodeando a un elemento. El crecimiento del margen del padre tendr el mismo efecto visible que el de aumentar su relleno: los elementos hijo disminuirn en proporcin al nuevo tamao del margen. La propiedad margin-Ieft, margin-right y otras estn establecidas como propiedades relacionadas con el relleno. El borde ocupa el cuadro ms externo. Su anchura se establece tambin usando las propiedades left-right-top-bottom, sin embargo el borde es visible, y puede cambiar su apariencia.

CSS Propiedades de los Bordes

Propiedad
border-width

Valores
Porcentaje o valor numrico absoluto; thin, medium o thick. Igual que borderwidth.

Ejemplos
border-width: 10px; border-width: 0px 10px; border-width: 5 0 5 5; border-top-width: 3%; border-top-width; thick; border-color: #000000; border-color: rgb(0,0,0); border-color: black; border-top-color: white;

Notas
Establece a la vez los cuatro lados de un borde. Con dos valores, establece el horizontal y el vertical. Con cuatro, superior-derecha-inferior-izquierda. Corresponde a las palabras claves (por ejemplo, 3 es small)

border-bottom-width, border-top-width, border-Ieft-width, border-right-width border-color

Especificador de color.

Establece el color para los cuatro bordes a la vez. Varios valores se interpretan como border-width. Ninguna.

border-bottom-color, border-top-color, border-Ieft-color, border-right-color

Especificador de color.

border-style

none, hidden, inset, outset, solid, dashed, dotted, double, groove, ridge.
Igual que borderstyle.

border-style: groove; border-style: sol id dashed; border-style: none inset solid inset;

El mismo borde entodos los lados (unvalor), diferentesestilos vertical yhorizontal (dosvalores) o un estiloa cada lado (cuatrovalores). Estilosinset, outset,groove y ridgesombreados en 3D.
Ninguna.

border-bottom-style, border-top-style, border-Ieftstyle,border-right-style

border-top-style: solid;

CSS Propiedades de los Bordes

Propiedad border Valores Combinacin de valores de anchura vlida, de estilo y de color. Ejemplos border: thin solid blue; Notas Atajo para establecer todas las propiedades del borde.

border-bottom, border-top, border-Ieft, border-right

Igual que border.

border-top: thick dashed red;

Igual que border.

Los bordes, el relleno y los mrgenes se comportan de forma distinta en diferentes navegadores. A menudo son aceptables los valores por omisin de cada navegador, pero si se ajustan, asegrese de una representacin adecuada de su contenido con diferentes tamaos de la ventana. Aumentar el tamao de los mrgenes puede empujar o sujetar el contenido de modo inesperado.

CSS - Transparencia
Al usar imgenes de cualquier clase, puede hacer que trozos del fondo se muestren a travs de la imagen. Cuando genera archivos GIF, tiene la posibilidad de escoger qu color se hace transparente. A esto se llama mscara de 1-bit, porque slo aquellos pixeles del grfico que son del color seleccionado se ven a travs del fondo. Cada pxel es 100% transparente o 100% opaco. Es magnfico para hacer flotar imgenes rectangulares sobre fondos, pero no as si su imagen corta una mscara redonda o diagonal, o si se representa la imagen con sombra. En esos casos, es mejor crear un GIF no transparente sobre un color continuo que coincida con el fondo de la pgina web. PNG es un formato sin prdidas, como el GIF, pero a diferencia de ste, es un formato de color verdadero, que incluye 8 bits de datos alpha (transparencia). Hay plug-ins y controles ActiveX que dicen mejorar los navegadores para soportar imgenes PNG transparentes, pero este formato no se usar masivamente hasta que los navegadores soporten directamente el canal alpha. Los canales alpha de 8-bit crean opciones para la composicin de imgenes que superan, con mucho, a las mscaras GIF de 1 bit. Si crea una imagen transparente, puede utilizarla con una etiqueta IMG y ajustar la propiedad background-color: transparent, y sobrecargar cualquier color que haya heredado del elemento padre.

CSS - Orden Z
Ahora que las hojas de estilo nos permiten superponer elementos, necesitamos controlar cmo se superponen. El comportamiento por defecto del navegador es representar los elementos en orden de aparicin, con los ltimos pintados sobre los primeros ocupando el mismo espacio. La propiedad z-index implementa un valor entero de profundidad en pantalla. Cuanto ms alto es este nmero, ms cerca de la pantalla est un elemento. Todos los elementos estn dibujados con z-index igual a 0.

<HTML> <BODY> <DIV style="position: absolute; top: 10; left: 50; background-color: #b0b0b0; height: 100; width: 100;"></DIV> <DIV style="position: absolute; top: 10; left: 200; background-color: #b0b0b0; height: 100; width:. 100; z-index: 1"></DIV> <DIV style="position: absolute; top: 10; left: 30;> <h2>Este texto aparece por encima o por detrs de los recuadros grises.</h2> </DIV> </BODY> </HTML>

CSS - Fuentes y espaciado

La propiedad font-family selecciona y designa una fuente (o fuentes alternativas) para todo el texto representado dentro de un elemento. La lista de fuentes disponibles viene determinada por el navegador (el sistema del cliente), no por el servidor web. Se puede ajustar la familia de tipografa a travs del nombre exacto de la misma, o a travs de las familias genricas. Cada navegador traduce cada una de estas familias genricas a una fuente especfica que se sabe est disponible en el sistema del cliente. Los especificadores genricos serif, sans-serif y monospace se traducen, en IE, a Times New Roman, Arial y Courier New. Las familias genricas menos tiles, cursive y fantasy, estn mapeadas a otras fuentes, pero la seleccin parece arbitraria. A algunas fuentes les faltan caracteres, o glyphs. Los navegadores, generalmente, visualizan un rectngulo mostrando el glyph que falta, pero la lista de fuentes se encarga tambin de eso. Si a una fuente le falta un carcter que se usa en el elemento, pondr el glyph de la primera fuente de la lista que lo tenga.

CSS - Fuentes y espaciado

La propiedad font-family acepta una lista de fuentes, separada por espacios, en orden decreciente de preferencia. Si una fuente designada no est disponible, el navegador buscar hacia abajo en la lista hasta que encuentre una coincidencia. Si no la encuentra, aplica la fuente por defecto. Las genricas serif, sans-serif y monospace funcionan bien al final de la lista de fuentes cuando se quiere evitar que se asigne la del navegador por defecto.
font-family: "comic sans", arial, helvetica, sans-serif;

Para pedir una fuente itlica o negrita, use la propiedad font-style. Acepta los valores italic, oblique y normal. El peso de las fuentes determina el grosor de las lneas que se usan para dibujar las letras. La especificacin de CSS ofrece los niveles lighter, normal, bold y bolder, cada una aumentando en densidad con relacin a la anterior. Tambin le permite especificar el peso como un nmero entre 100 y 900 con incrementos de 100.

 Igual que los pesos de las fuentes, puede ajustar los tamaos de stas de forma absoluta o relativa con la propiedad font-size.
Mtodo Tipo de valor Palabra clave: xx-small, x-small, small, medium, large, x-Iarge, xx-Iarge Ejemplos Notas

CSS - Fuentes y espaciado

Absoluto

font-size: x-Iarge;

Relativo al tamao de fuente establecido en el navegador.

Absoluto

Medida (em, pt, px, etc.)

font-size: 1.2em; font-size: 14pt;

Relativo

Palabra clave: larger, smaller

font-size: larger;

Relativo al tamao de la fuente actual.

Relativo

Porcentaje

font-size: 130%

Relativo al tamao de la fuente actual.

Hay ciertos atributos CSS para la ubicacin precisa de caracteres. Las propiedades de ubicacin (como top y left) determinan dnde ir el bloque de texto, pero no controla la apariencia del texto dentro de ese bloque.

CSS - Ubicacin del texto

La propiedad text-align determina cmo se alinea el texto dentro de un elemento. Se puede ajustar ese texto contra el margen izquierdo, el derecho, en la lnea central o justificarlo a la anchura del elemento (left, center, right y justify).
La propiedad text-indent establece la sangra de la primera lnea de todos los prrafos dentro del elemento de un bloque. El comportamiento estndar del navegador es representar prrafos en el estilo bloque. Si se prefiere un estilo sangrado, es necesario ajustar text-indent a la distancia a la que quiere sangrar la primera lnea. Si se quiere cambiar al margen izquierdo la primera lnea de texto, site text-indent con un valor negativo. Con text-decoration, se puede establecer la decoracin de los hijos de un elemento, pudiendo ser underline, overline, line-through y blink. El valor none cierra todas las decoraciones del texto afectado. <U>Texto subrayado, <SPAN style="text-decoration: none">sin subrayar</SPAN> subrayado de nuevo.</U>

CSS - Ubicacin del texto

El espaciado entre caracteres sirve para dos funciones comunes: extender los encabezamientos y estrechar las lneas. Los encabezamientos extendidos pueden quedar bien por estilo y empaque. Generalmente se representan todos en maysculas. El estrechamiento de lneas es el arte de acortar un prrafo sin quitar palabras. Este se puede realizar a travs de la propiedad letter-spacing. Los valores que admite pueden estar especificados en las unidades de cuantificacin estndar (px, em, etc.) o el nominal normal (por omisin).
Algunas veces las plantillas de impresin se salen de la pgina. El estrechamiento selectivo de lneas no es generalmente recomendable, aunque puede recobrar una o dos lneas enteras de la plantilla.

El espaciado de palabras (la propiedad de CSS word-spacing) funciona de manera similar y acepta el mismo estilo de valores. Una vez ms, se usa para reducir o expandir el espacio ocupado por un prrafo. Puede haber razones artsticas para alterar este espaciado, pero el uso ms comn (justificacin de prrafo) es manipulado ahora por el navegador.
Use ajustes pequeos; cualquier disminucin del espacio entre caracteres ahorra espacio a costa de la legibilidad.

CSS La regla @media

CSS2 define un modelo de funcionamiento con tipos de medios de comunicacin no estndar, incluyendo los sonoros, el braille, la impresin, la proyeccin, la televisin y los manuales a travs de la regla condicional @media. Esta regla declara que las partes de una hoja de estilo son apropiadas para un tipo particular de medios de comunicacin, o para varios tipos de la lista. @media screen { BODY { font-family: sans-serif; font-size: 14pt; } } @media print { BODY { font-family: serif; font-size: 11pt; }