Manual CSS

Ce n t r o de Est u dios Polit é cn icos
I m plant ación de Aplicaciones CSS_01 – Hoj as de Est ilo en Cascada

I nform át icas de Gest ión
CSS_ 0 1
H oj a s de Est ilo e n Ca sca da
I N TROD UCCI ÓN A LAS H OJAS D E ESTI LOS EN CASCAD A ............................................. 3

D EFI NI R REGLAS DE ESTI LO CSS EN BLOQUES STYLE ................................................3
PRI ORI DADES DE LAS REGLAS DE ESTI LO CSS .........................................................4
ASI GNAR ELEMENTOS HTML A UN ESTI LO CSS CLASS ..............................................4
H OJAS DE ESTI LOS CSS EXTERNAS ......................................................................5
COMPATI BI LI DAD CON HTML 3.2........................................................................6
EDI TOR DE CSS DE VI SUAL STUDI O .NET .............................................................6
F UEN TE, G EN ERAD OR D E ESTI LOS ( CUAD RO D E D I ÁLOGO ) ........................................ 7
NOMBRE DE FUENTE ........................................................................................8
ATRI BUTOS DE FUENTE ....................................................................................8
TAMAÑO .....................................................................................................9
EFECTOS .................................................................................................. 10
NEGRI TA .................................................................................................. 10
USO DE MAYÚSCULAS .................................................................................... 11
F ON D O , G EN ERAD OR D E ESTI LOS ( CUAD RO D E D I ÁLOGO ) ....................................... 1 2
COLOR DE FONDO ........................................................................................ 13
I MAGEN DE FONDO ....................................................................................... 13
T EX TO , G EN ERAD OR D E ESTI LOS ( CUAD RO D E D I ÁLOGO ) ........................................ 1 6
ALI NEACI ÓN ............................................................................................... 17
ESPACI ADO ENTRE ....................................................................................... 17
FLUJO DE TEXTO .......................................................................................... 18
P OSI CI ÓN , GEN ERAD OR D E ESTI LOS ( CUAD RO D E D I ÁLOGO ) ................................... 1 9
MODO DE POSI CI ÓN ...................................................................................... 20
P RESEN TACI ÓN , G EN ERAD OR D E ESTI LOS ( CUAD RO D E D I ÁLOGO ) ............................ 2 2
CONTROL DE FLUJO ...................................................................................... 23
CONTENI DO ............................................................................................... 24
RECORTE .................................................................................................. 24
I MPRI MI R SALTOS DE PÁGI NA ........................................................................... 25
B ORD ES , G EN ERAD OR D E ESTI LOS ( CUAD RO D E D I ÁLOGO ) ..................................... 2 6
MÁRGENES ................................................................................................ 27
RELLENO .................................................................................................. 27
BORDES ................................................................................................... 27
LI STAS , G EN ERAD OR D E ESTI LOS ( CUAD RO D E D I ÁLOGO ) ....................................... 2 9
LI STAS ..................................................................................................... 30
VI ÑETAS ................................................................................................... 30
O TROS , G EN ERAD OR D E ESTI LOS ( CUAD RO D E D I ÁLOGO ) ....................................... 3 2
I NTERFAZ DE USUARI O ................................................................................... 32
TABLAS .................................................................................................... 33
COMPORTAMI ENTO ....................................................................................... 34
Francisco Fernández 2
I n t r odu cción a la s H oj a s de e st ilos e n ca sca da

Una hoj a de est ilos en cascada ( CSS) cont iene definiciones de est ilos que se aplican
a los elem ent os de un docum ent o HTML. Los est ilos CSS definen la form a de
m ost rar los elem ent os y su posición en la página. En lugar de asignar
individualm ent e at ribut os a cada elem ent o de la página, puede crear una regla
general que aplique at ribut os específicos siem pre que un explorador Web encuent re
una inst ancia de un elem ent o o un elem ent o asignado a un ciert o est ilo CLASS.
Puede aplicar est ilos CSS en línea a un elem ent o HTML individual, agrupados en un
bloque <STYLE> de la part e HEAD de una página Web o im port ado desde un archivo
de hoj a de est ilos en cascada ( CSS) . Es posible vincular un m ism o archivo ext erno
de hoj a de est ilos en cascada a m uchas páginas Web, con el fin de proporcionar
una apariencia uniform e a t odo un sit io Web.
Para ut ilizar las reglas de est ilo CSS en el Diseñador HTML, la propiedad
t arget Schem a del docum ent o HTML se debe est ablecer en un explorador Web
com pat ible con HTML 4.0 o superior. Los exploradores m ás ant iguos, com pat ibles
sólo con HTML 3.2 o ant eriores, ignorarán los est ilos CSS. Cuando la propiedad
t arget Schem a est á est ablecida en un explorador Web m ás ant iguo, el ent orno de
desarrollo int egrado ( I DE) ocult a las opciones y propiedades de CSS que sólo est án
disponibles en exploradores m ás recient es. Si se est ablece la propiedad
t arget Schem a en un explorador com pat ible con HTML 4.0, las reglas de est ilo CSS
const it uyen el m ej or m ét odo para especificar la apariencia y la posición deseadas
de los elem ent os HTML.
D e fin ir r e gla s de e st ilo CSS e n bloqu e s STYLE

Cada regla de est ilos CSS t iene dos part es principales: un select or ( por ej em plo,
H1) y una declaración ( por ej em plo, color: red) . La declaración incluye una
propiedad ( color) y su valor ( red) . Una sim ple regla de est ilos CSS que ordene
" Cent rar el t ext o cont enido ent re las et iquet as <H1></H1> y est ablecer el color de
fuent e a roj o" se escribiría de est a form a:
H1 {text-align:center; color:red;}
Las reglas de est ilo CSS pueden definirse en un bloque <STYLE> dent ro de la part e
<HEAD> del docum ent o HTML. A cont inuación se m uest ra un ej em plo en el que se
define y aplica una regla de est ilos CSS a t odos los elem ent os <H1> de una página
Web:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>HTML 4.0 CSS Element Style Example</TITLE>
<STYLE TYPE="text/css">
H1 {text-align:center; color:red;}
</STYLE>
</HEAD>
<BODY>
<H1>This text is centered and red</H1>
</BODY>
</HTML>
En est a página Web, t odo el t ext o que aparezca ent re las et iquet as <H1></H1>
est ará cent rado y será de color roj o. Ya no t endrá que volver a asignar est os
at ribut os de est ilo cada vez que encuent re una et iquet a <H1> en el docum ent o.
Adem ás, si desea cam biar el color ( o cualquier ot ra propiedad) a t odo el t ext o que
se encuent re ent re las et iquet as <H1></H1>, sólo t endrá que edit ar una regla de
est ilos.
Pr ior ida de s de la s r e gla s de e st ilo CSS

Las reglas de est ilo CSS se aplican " en cascada" , es decir, las reglas de est ilo
globales se seguirán aplicando a t odos los elem ent os HTML a m enos que sean
sust it uidas por las reglas de est ilo locales. En general, las reglas de est ilo locales
t ienen prioridad sobre las reglas de est ilo globales. Est o significa que un est ilo
definido en un bloque STYLE de una página Web, por ej em plo, puede m odificar
desde una página concret a el est ilo de t odo el sit io Web definido en una hoj a de
est ilos CSS ext erna. De form a sim ilar, un est ilo en línea definido dent ro de una
et iquet a HTML individual de la página puede m odificar en una línea los est ilos
definidos para est e t ipo de elem ent o en t odo el sit io.
Las part es de las reglas de est ilo globales que no sean m odificadas por las reglas de
est ilo CSS locales seguirán aplicándose a los elem ent os HTML incluso después de
que se hayan aplicado los est ilos locales. En el ej em plo ant erior, los est ilos CSS
locales que se aplican al t ext o escrit o ent re et iquet as <H1> reem plazan algunas
reglas de est ilo globales del explorador Web para el t ext o de las et iquet as <H1>
( cent rar el t ext o de las et iquet as <H1> y cam biar el color a roj o) , pero no m odifican
las ot ras reglas ( m ost rar t odo el t ext o de las et iquet as <H1> en una fuent e m ás
grande y en negrit a) . Las reglas de est ilo globales y locales se aplican ( en ese
orden) , y se m uest ra el t ext o de las et iquet as <H1> de la página con una fuent e
grande, en negrit a, y cent rado y de color roj o.
Asign a r e le m e n t os H TM L a u n e st ilo CSS CLASS

Se puede aplicar un est ilo CSS siem pre que se encuent re t ext o en et iquet as HTML
asignadas a un est ilo CLASS det erm inado. El select or de una regla de est ilos CLASS
de un bloque <STYLE> em pezará por un punt o. Por ej em plo:
.head2 {font-size:14pt; text-align:center; color:red; font-

weight:bold; font-style:italic;}
Para aplicar un est ilo en línea de est e t ipo, debe agregar un at ribut o CLASS a una
et iquet a com pat ible con est ilos en línea:
<DIV CLASS="head2">
La cadena escrit a com o valor de un at ribut o CLASS debe coincidir con el select or de
una regla de est ilos aplicada a la página. A cont inuación se m uest ra un ej em plo de
una página en la que se define y se aplica un est ilo CSS CLASS denom inado head2:

<HTML>
<HEAD>
<TITLE>>HTML 4.0 CSS Style Class Example</TITLE>
<meta content="Internet Explorer 5.0" name="vs_targetSchema">
<STYLE TYPE="text/css">
BODY {background:#FBFBFB; font-family:Verdana, Arial, Helvetica,

sans-serif; font-size:9pt;}
A:link {color:blue; text-decoration:none}
A:active {color:red; text-decoration:none}
A:visited {color:green; text-decoration:none}
.head2 {font-size:14pt; text-align:center; color:red; font-
weight:bold; font-style:italic;}
</STYLE>
<LINK REL=stylesheet Type="text/css" HREF="mystyles.css">
</HEAD>
<BODY>
<DIV CLASS="head2">This text is centered, large, red <SPAN
style="color:green; font-style:normal; text-decoration:underline;">and
green</SPAN>, bold, and italic</DIV>
</BODY>
</HTML>
Todas las reglas de est ilo del est ilo CLASS head2 se aplican al t ext o cont enido en la
et iquet a <DIV>. Puest o que los est ilos en línea definidos en la part e <BODY> de una
et iquet a t ienen prioridad sobre los est ilos definidos en la part e <HEAD> del bloque
<STYLE>, las palabras " and green" se m uest ran de color verde, sin negrit a y
subrayadas.
H oj a s de e st ilos CSS e x t e r n a s
Un docum ent o de hoj a de est ilos CSS ext erna es un archivo de t ext o sin form at o
con una ext ensión .css que sólo cont iene reglas de est ilo. La inst rucción
<LINK REL=stylesheet Type="text/css" HREF="mystyles.css">
aplica a la página las reglas de est ilo de la hoj a de est ilos CSS ext erna
" m yst yles.css" . En el siguient e ej em plo, " Myst yles.css" es un docum ent o ext erno de
hoj a de est ilos CSS que cont iene una sola regla de est ilos para la et iquet a <H1>:

<HTML>
<HEAD>
<TITLE>Calling an External CSS Style Sheet Example</TITLE>
<meta content="Internet Explorer 5.0" name="vs_targetSchema">
<LINK rel="stylesheet" href="Mystyles.css" type="css/text">
</HEAD>
<BODY>
<H1>This text is red</H1>
</BODY>
</HTML>
Las reglas de est ilo m ost radas en una hoj a de est ilos CSS ext erna se escriben del
m ism o m odo que en los bloques <STYLE>, pero sin las et iquet as <STYLE>
</STYLE>:
H1 { text-align:center; color:red; }
.head2 { font-size:14pt; text-align:center; color:red; font-
weight:bold; font-style:italic; }
Se puede vincular una hoj a de est ilos CSS ext erna a m uchas páginas HTML y, así,
aplicar est ilos uniform es a t odo el sit io Web. Las hoj as de est ilos en cascada CSS
separan las reglas de form at o del cont enido, con lo que facilit an en gran m edida la
búsqueda y la edición de reglas de est ilo. Tam bién se puede ut ilizar un bloque
<STYLE> </STYLE> con el fin de procesar un docum ent o m ediant e Lenguaj e de
m arcado ext ensible ( XML) .
Com pa t ibilida d con H TM L 3 .2

Cuando se est ablece la propiedad t arget Schem a de una página Web en un
explorador Web que sólo es com pat ible con HTML 3.2, es necesario asignar
elem ent os de form at o obsolet os, com o <FONT>, a cada elem ent o de la página para
definir su apariencia y posición. Los exploradores Web, com pat ibles sólo con HTML
3.2 o ant eriores, no aplicarán los est ilos CSS. A cont inuación se m uest ra un
fragm ent o t ípico de código de m arcado HTML 3.2:
<HTML>
<HEAD>
<TITLE>HTML 3.2 Example</TITLE>
</HEAD>
<BODY BGCOLOR=#EFEFEF LINK=blue ALINK=red VLINK=green>
<CENTER>
<P><FONT size=+2 color=red><b><i>This text is centered, large,
red, bold, and italic</i></b></FONT></P>
</CENTER>
</BODY>
</HTML>
El m arcado del ej em plo ant erior m ost rará una cadena de t ext o cent rada, con fuent e
grande, de color roj o, en negrit a y en cursiva, pero será necesario escribir de nuevo
t odas las et iquet as de est ilo ut ilizadas cada vez que se desee m ost rar ot ra cadena
de la m ism a m anera.
N ot a World Wide Web Consort ium m ant iene los est ándares CSS. Com o est os
est ándares est án en const ant e evolución, puede visit ar el sit io Web W3C
( ht t p: / / www.w3.org/ ) para obt ener inform ación det allada acerca de las opciones
específicas act uales de CSS.
Edit or de CSS de Visu a l St u dio .N ET

El Edit or de CSS de Microsoft Visual St udio .NET perm it e crear est ilos y hoj as de
est ilos m ediant e la escrit ura direct a de reglas de est ilo en el Edit or o m ediant e la
selección de opciones en los cuadros de diálogo Generador de est ilos y Agregar
regla de est ilo.
Fu e n t e , Ge n e r a dor de e st ilos ( Cu a dr o de
diá logo)
La página Fuent e del cuadro de diálogo Generador de est ilos perm it e definir
at ribut os CSS de fuent e. Puede aplicar direct am ent e est os at ribut os a elem ent os
HTML o agregarlos a reglas de est ilo CSS.
Para aplicar direct am ent e at ribut os de fuent e a t ext o de elem ent os HTML de la
página, abra el docum ent o HTML en la vist a Diseño del Diseñador HTML y
seleccione el t ext o al que desea aplicar el form at o. A cont inuación, elij a Generar
est ilo en el m enú Form at o para abrir el cuadro de diálogo Generador de est ilos y
seleccione la opción Fuent e en el panel de la izquierda.
N ot a En el m enú Form at o, la opción Generar est ilo est ará disponible cuando abra
un docum ent o HTML en la vist a Diseño y est ablezca la propiedad t arget Schem a del
docum ent o en un explorador Web com pat ible con HTML 4.0 o post erior y est ilos
CSS.
Cuando aplique est ilos de fuent e al t ext o seleccionado en la vist a Diseño, los
at ribut os de est ilo se insert arán en línea en el código de m arcado HTML de la
página. Cam bie a la vist a HTML para revisar los nuevos at ribut os de est ilo
insert ados.
Para agregar at ribut os de fuent e a una regla de est ilo CSS definida en una hoj a de
est ilos ext erna, coloque el cursor dent ro de las llaves que siguen al select or del
est ilo deseado. A cont inuación, elij a Generar est ilo en el m enú Est ilos para abrir el
cuadro de diálogo Generador de est ilos y seleccione la opción Fuent e en el panel de
la izquierda.
N ot a El m enú Est ilos aparecerá cuando abra una hoj a de est ilos CSS ext erna para
edit arla. La opción Generar est ilo del m enú Est ilos est ará disponible cuando coloque
el cursor dent ro de las llaves { } que siguen al select or de una regla de est ilo.
Puede aplicar una clase de est ilo CSS definida en una hoj a de est ilos ext erna a un
elem ent o de la sección <BODY> de una página Web ( o, en est e caso, a t oda la
sección <BODY>) m ediant e la asignación del select or de est ilo CSS com o propiedad
CLASS del elem ent o.
Las opciones disponibles en la página Fuent e del cuadro de diálogo Generador de

est ilos son:
N om br e de fu e n t e
Fa m ilia
Proporciona una list a de opciones para la fuent e que se va a ut ilizar en el t ext o

m ost rado con est e est ilo. Si est á diseñando docum ent os para I nt ernet , elij a las
fuent es que ut ilicen la m ayoría de los usuarios. Probablem ent e, gran part e de los
usuarios de I nt ernet no t enga una gran variedad de fuent es inst aladas. Si act iva la
opción Fam ilia, podrá hacer clic en el bot ón de punt os suspensivos ( ...) cont iguo
para abrir el cuadro de diálogo Select or de fuent e y seleccionar fuent es. Para
obt ener m ás inform ación, vea Select or de fuent e ( Cuadro de diálogo) .
Norm alm ent e se m uest ran varias fuent es, así se proporcionan varias opciones. Por
ej em plo, en el Select or de fuent e puede seleccionar Verdana ( una fuent e del
sist em a Windows diseñada para m ost rar páginas Web) y después agregar
m anualm ent e Arial, Helvet ica ( para exploradores Macint osh) y Sans- Serif ( la opción
de fuent e genérica para usuarios que no t engan ninguna de las fuent es ant eriores) .
El código de m arcado de est ilos CSS para FONT-FAMILY sería:
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
Fu e n t e de l sist e m a
Act ive est a opción si desea aplicar al est ilo una opción de fuent e del sist em a que el
usuario t enga definida en el equipo en el que ve la página. Por ej em plo, si act iva
Tít ulo de vent ana, el explorador Web de un usuario m ost rará el t ext o de la página
que t enga est e est ilo m ediant e la fuent e asignada a Tít ulo de vent ana en el equipo.
Est a fuent e de Tít ulo de vent ana podría ser Tim es en un equipo y Verdana en ot ro.
El código de m arcado de est ilos CSS que aplica la fuent e del sist em a para Tít ulo de
vent ana sería, por ej em plo:
FONT: caption
At r ibu t os de fu e n t e
Color
Est ablece el color del t ext o m ost rado con el est ilo. Hay varias m aneras de
especificar un color:
• Escribir el nom bre de un color

• Escribir un valor de color RGB válido ( por ej em plo, # FF0000 corresponde al
color roj o)
• Seleccionar una opción en la list a desplegable
• Elegir el bot ón de punt os suspensivos ( ...) para abrir el cuadro de diálogo
Select or de color y seleccionar colores adicionales.
Por ej em plo, si selecciona el color roj o, se insert ará el siguient e par at ribut o CSS:
valor:
COLOR: red
N ot a Si selecciona un color en el Select or de color en lugar de hacerlo en la list a

desplegable, se insert ará el valor hexadecim al del color RGB en lugar del nom bre
del color. Por ej em plo, si selecciona 'roj o' en el Select or de color, se insert ará el
siguient e para at ribut o CSS: valor:
COLOR: #ff0000
Cu r siva
Est ablece el at ribut o FONT-STYLE para el t ext o m ost rado con est e est ilo. Puede
seleccionar < Sin est ablecer> ( ninguna opción elegida) , Norm al ( no se aplica
cursiva) o Cursiva. Por ej em plo, si selecciona " I t alic" , se insert ará el siguient e par
at ribut o CSS: valor:
FONT-STYLE: italic
N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo. No se

puede aplicar el at ribut o Cursiva a las fuent es del sist em a.
V e r sa le s
Est ablece el at ribut o FONT-VARIANT para el t ext o m ost rado con est e est ilo.
Seleccione < Sin est ablecer> ( ninguna opción elegida) , Norm al ( no se aplican
versales) o Versales. Por ej em plo, si selecciona Versales, se insert ará el siguient e
código de m arcado CSS:
FONT-VARIANT: small-caps
N ot a No se puede aplicar el at ribut o Versales a las fuent es del sist em a. Si el

at ribut o es < Sin est ablecer> , no se agregará código al est ilo.
Ta m a ñ o
Est ablece el t am año de la fuent e del est ilo m ediant e uno de los t res at ribut os
siguient es: Específico, Absolut o, Relat ivo.
N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo. No se

puede aplicar el at ribut o Tam año a las fuent es del sist em a.
Espe cífico
Est ablece un t am año específico para la fuent e. En la list a desplegable cont igua se
m uest ran las siguient es opciones de unidad: px, pt ( predet erm inada) , pc, m m , cm ,
in, em , ex o % . Por ej em plo, si escribe 20 y acept a el valor de unidad
predet erm inado, se insert ará la siguient e línea de m arcado CSS:
FONT-SIZE: 20pt
N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo. Evit e
ut ilizar m edidas en píxeles ( px) , ya que el t ext o con form at o en píxeles se
im prim irá con un t am año m ucho m enor que el m ost rado en pant alla.
Absolu t o
Est ablece un t am año absolut o para la fuent e, que puede elegir en una list a de
opciones. Puede seleccionar < Sin est ablecer> ( ningún valor especificado) , Ext ra
pequeño, Muy pequeño, Pequeño, Mediano, Grande, Muy grande o Ext ra grande.
Por ej em plo, si elige Muy pequeño, se insert ará la siguient e línea de código de
m arcado CSS:
FONT-SIZE: x-small
N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo.
Re la t ivo
Est ablece un t am año relat ivo para la fuent e, que puede elegir en una list a de
opciones. El t am año es relat ivo al elem ent o prim ario del est ilo en cascada. Si el
t ext o de la sección <BODY> t iene un t am año de 8 pt ., por ej em plo, y el t ext o de un
bloque < SPAN> cont enido en la sección < BODY> t iene un t am año Más pequeño, el
t am año del t ext o del bloque <SPAN> t endrá m enos de 8 pt . Seleccione <Sin
est ablecer>, Menor o Mayor. Por ej em plo, si elige Más grande, se insert ará la
siguient e línea de código de m arcado CSS:
FONT-SIZE: larger
Efe ct os
Est ablece efect os predefinidos para el est ilo. Est án disponibles las siguient es
opciones: Ninguno ( ningún efect o) , Subrayado ( Text o de ej em plo) , Tachado ( Text o
de ej em plo) y Línea alt a:
<SPAN Style="TEXT-DECORATION: UNDERLINE">Sample Text</SPAN>
Si selecciona Ninguno, no est ará disponible ningún efect o. Si la opción Ninguno no

est á act ivada, puede elegir cualquier com binación de los dem ás efect os. Por
ej em plo, si selecciona Subrayado y Tachado, se insert ará el siguient e código de
m arcado CSS:
TEXT-DECORATION: underline line-through
N e gr it a
Est ablece el at ribut o FONT-WEIGHT a part ir de los valores Absolut o o Relat ivo.
Absolu t o
Est ablece el at ribut o negrit a absolut a del est ilo en el at ribut o negrit a asociado a la
fuent e. Seleccione < Sin est ablecer> ( ninguna opción elegida) , Norm al ( no se aplica
negrit a) o Negrit a. Por ej em plo, si selecciona Negrit a, se insert ará la siguient e línea
de código de m arcado CSS:
FONT-WEIGHT: bold
N ot a No se pueden aplicar los at ribut os Negrit a Absolut a y Relat iva a las fuent es
del sist em a.
Re la t ivo
Est ablece el at ribut o negrit a relat iva del est ilo en un at ribut o negrit a de m ayor o
m enor int ensidad que el valor negrit a predet erm inado de la fuent e. Seleccione < Sin
est ablecer> ( ninguna opción elegida) , Más clara ( m enos int enso que el at ribut o
negrit a predet erm inado) o Más oscura ( m ás int enso que el at ribut o negrit a
predet erm inado) . Com o los at ribut os Más clara y Más oscura son relat ivos a fuent es
individuales, la int ensidad del at ribut o negrit a dependerá de la fuent e a la que se
aplique. Por ej em plo, si elige Más oscura, se insert ará la siguient e línea de código
de m arcado CSS:
FONT-WEIGHT: bolder
Uso de m a yú scu la s
Est ablece el at ribut o TEXT-TRANSFORM para el est ilo. Seleccione < Sin est ablecer>
( ninguna opción elegida) , Ninguna ( se m ant ienen las m ayúsculas y m inúsculas
escrit as) , Mayúscula inicial ( Text o de Ej em plo) , m inúsculas ( t ext o de ej em plo) o
MAYÚSCULAS ( TEXTO DE EJEMPLO) . Por ej em plo, si elige MAYÚSCULAS se
agregará la siguient e línea de código:
TEXT-TRANSFORM: uppercase
Fon do, Ge n e r a dor de e st ilos ( Cu a dr o de

diá logo)
La página Fondo del cuadro de diálogo Generador de est ilos perm it e est ablecer
at ribut os para un est ilo CSS que definirán un color o una im agen de fondo cuando
se aplique el est ilo a una página, un m arco o una t abla HTML. Puede aplicar est os
at ribut os direct am ent e a elem ent os HTML o agregarlos a reglas de est ilo CSS.
Para aplicar direct am ent e at ribut os de fondo a elem ent os HTML de la página, abra
el docum ent o HTML en la vist a Diseño del Diseñador HTML y seleccione los
elem ent os a los que desea aplicar el form at o. A cont inuación, elij a Generar est ilo en
el m enú Form at o para abrir el cuadro de diálogo Generador de est ilos y seleccione
la opción Fondo en el panel de la izquierda.
CSS.
Al aplicar form at o a elem ent os seleccionados en la vist a Diseño, los at ribut os de

est ilo CSS se insert an en línea en el código de m arcado HTML de la página. Cam bie
a la vist a HTML para revisar los nuevos at ribut os de est ilo insert ados.
Para agregar at ribut os de fondo a una regla de est ilo CSS definida en una hoj a de
est ilos ext erna, coloque el cursor dent ro de las llaves que siguen al select or para el
cuadro de diálogo Generador de est ilos y seleccione la opción Fondo en el panel de
la izquierda.
Puede aplicar una clase de est ilos CSS definida en una hoj a de est ilos ext erna a un
elem ent o cont enido en la sección <BODY> de una página Web ( en est e caso, incluida
la propia sección <BODY>) m ediant e la asignación del select or de est ilo CSS com o
propiedad CLASS del elem ent o.
Las opciones disponibles en la página Fondo del cuadro de diálogo Generador de

est ilos son:
Color de fon do
Color
Est ablece el at ribut o BACKGROUND-COLOR para el est ilo. Seleccione una opción en la
list a desplegable o haga clic en el bot ón de punt os suspensivos ( ...) para abrir el
cuadro de diálogo Select or de color y seleccionar colores adicionales. Por ej em plo,
si selecciona Roj o, se insert ará el siguient e código de m arcado CSS:
BACKGROUND-COLOR: red
Tr a n spa r e n t e
Puede ut ilizar est a casilla de verificación para est ablecer transparent com o valor
del at ribut o BACKGROUND-COLOR. Si selecciona transparent, no podrá seleccionar
un color de fondo. Se insert ará la siguient e línea de código:
BACKGROUND-COLOR: transparent
I m a ge n de fon do
I m a ge n
Perm it e est ablecer la im agen de fondo que m ost rará el est ilo. Escriba una rut a y un
nom bre de archivo en el cam po o haga clic en el bot ón de punt os suspensivos ( ...)
para abrir el Select or de direcciones URL e ir a la ubicación de la im agen. Por
ej em plo, si se desplaza hast a una im agen denom inada fondo.bm p de la carpet a
im ágenes, se insert ará la siguient e línea de código:
BACKGROUND-IMAGE: url (images/background.bmp)
M osa ico
Perm it e est ablecer los at ribut os de present ación en m osaico de la im agen de fondo
asignada por el est ilo. Las im ágenes pueden disponerse en m osaico de m uchas
form as, t al y com o se indica en la t abla siguient e.
At r ibu t o de m osa ico D e scr ipción

Mosaico en horizont al La im agen se dispone en m osaico de
izquierda a derecha en la página, no de arriba
a abaj o.
Mosaico en vert ical La im agen se dispone en m osaico de arriba a
abaj o.
Mosaico en am bas direcciones Las im ágenes se disponen en m osaico
horizont al y vert icalm ent e.
No disponer en m osaico Deshabilit a la disposición en m osaico; la
im agen aparece en las ubicaciones
especificadas por el valor de posición y no se
repit e.
< Sin est ablecer> Ninguna opción elegida; no se agrega código
al est ilo.
Por ej em plo, si elige Disponer en m osaico en dirección horizont al, se insert ará la
siguient e línea de código de m arcado CSS:
BACKGROUND-REPEAT:repeat-x
N ot a Los at ribut os de Mosaico funcionan conj unt am ent e con los at ribut os de
Posición. Si est ablece la posición de la im agen, se aplicarán los at ribut os de
m osaico en función de la posición inicial de la im agen en la página. Por ej em plo, si
coloca una im agen en la esquina superior izquierda de una página y sólo crea un
m osaico horizont al, la im agen se repet irá por t odo el borde superior de la página.
D e spla z a m ie n t o
Est ablece el valor de at ribut o BACKGROUND-ATTACHMENT para la im agen de fondo que

aplica est e est ilo. Seleccione un valor de la list a desplegable. Una im agen puede
perm anecer fij a m ient ras se desplaza la página o puede desplazarse con el t ext o y
las im ágenes sobre el fondo. Puede seleccionar < Sin est ablecer> ( ninguna opción
elegida) , Fondo de desplazam ient o o Fondo fij o. Por ej em plo, si elige Fondo de
desplazam ient o, se insert ará la siguient e línea de código de m arcado CSS:
BACKGROUND-ATTACHMENT:scrolling
Posición
Est ablece los at ribut os de posición para la im agen de fondo aplicada por el est ilo. El
valor de posición est á relacionado con los at ribut os de m osaico. Si est ablece una
posición para el fondo y no elige los at ribut os de m osaico, la im agen de fondo se
fij a en la posición especificada. Si est ablece una posición para el fondo y elige
at ribut os de m osaico, se ut iliza la posición com o punt o inicial para el at ribut o de
m osaico.
Su ge r e n cia Debe seleccionar los valores horizont al y vert ical de la

posición. Si especifica sólo un valor, el Edit or de CSS m uest ra un nom bre de
propiedad no válido. Cuando seleccione valores de posición horizont al y

vert ical, se m ost rará correct am ent e la propiedad com o posición del fondo.
Un ej em plo de declaración válida de posición del fondo es BACKGROUND-
POSITION:left center.
H or iz on t a l
Est ablece la posición horizont al de la im agen de fondo aplicada por el est ilo. Puede
seleccionar < Sin est ablecer> ( ninguna opción elegida) , I zquierda, Cent ro, Derecha
o Personalizado. Si selecciona Personalizado, est arán disponibles los cam pos
sit uados a la derecha de Personalizado. El valor predet erm inado es 50% . Escriba un
valor en el cam po num érico y elij a un increm ent o ( px, pt , pc, m m , cm , in, em , ex o
% ) en la list a desplegable del cam po de unidad. Si selecciona Personalizado y
acept a los valores predet erm inados, se insert ará la siguient e línea de código de
m arcado CSS:
BACKGROUND-POSITION:50%
V e r t ica l
Perm it e est ablecer la posición vert ical de la im agen de fondo aplicada por el est ilo.
Seleccione una opción de la list a desplegable. Puede seleccionar < Sin est ablecer>
( ninguna opción elegida) , I zquierda, Cent ro, Derecha o Personalizado. Si selecciona
Personalizado, est arán disponibles los cam pos sit uados a la derecha de
Personalizado. El valor predet erm inado es 50% . Escriba un valor en el cam po
num érico y elij a una opción de unidad ( px, pt , pc, m m , cm , in, em , ex o % ) en la
list a desplegable del cam po de unidad. Si selecciona Personalizado y acept a los
valores predet erm inados, se insert ará la siguient e línea de código de m arcado CSS:
BACKGROUND-POSITION:50%
N o u t iliz a r im a ge n de fon do
Si est a opción est á act ivada, se quit ará la im agen de fondo de la página act ual. Los
at ribut os de I m agen no est án disponibles en el cuadro de diálogo. Si se especificó
una im agen para la página, la propiedad de im agen de fondo del est ilo se quit ará
cuando haya hecho clic en Acept ar
Te x t o, Ge n e r a dor de e st ilos ( Cu a dr o de
diá logo)
La página Text o del cuadro de diálogo Generador de est ilos perm it e definir at ribut os
CSS de posición del t ext o. Puede aplicar direct am ent e est os at ribut os a elem ent os
Para aplicar direct am ent e at ribut os de fuent e a t ext o de elem ent os HTML de la
página, abra el docum ent o HTML en la vist a Diseño del Diseñador HTML y
seleccione el t ext o al que desea aplicar el form at o. A cont inuación, elij a Generar
est ilo en el m enú Form at o para abrir el cuadro de diálogo Generador de est ilos y
seleccione la opción Text o en el panel de la izquierda.
CSS.
Cuando aplique est ilos al t ext o seleccionado en la vist a Diseño, los at ribut os de
est ilo CSS se insert arán en línea en el código de m arcado HTML de la página.
Cam bie a la vist a HTML para revisar los nuevos at ribut os de est ilo insert ados.
Para agregar at ribut os de t ext o a una regla de est ilo CSS definida en una hoj a de
est ilos ext erna, coloque el cursor dent ro de las llaves que siguen al select or del
cuadro de diálogo Generador de est ilos y seleccione la opción Text o en el panel de
la izquierda.
Se puede aplicar una clase de est ilos CSS definida en una hoj a de est ilos ext erna a
un elem ent o cont enido en la sección <BODY> de una página Web ( en est e caso,
incluida la propia sección <BODY>) m ediant e la asignación del select or de est ilo CSS
com o propiedad CLASS del elem ent o deseado.
Las opciones disponibles en la página Text o del cuadro de diálogo Generador de

est ilos son:
Alin e a ción
N ot a Para las siguient es opciones de alineación, si selecciona < Sin est ablecer> ,
no se agregará código al est ilo.
H or iz on t a l
Est ablece el valor del at ribut o TEXT-ALIGN para el t ext o al que se da form at o
con est e est ilo. Puede seleccionar < Sin est ablecer> ( ninguna opción
elegida) , I zquierda, Cent rado, Derecha o Just ificado. Los valores Let ras y
Líneas que est ablezca m ás abaj o se aj ust arán para adapt arse al at ribut o
Just ificado. Por ej em plo, si elige I zquierda, se insert ará la siguient e línea de
TEXT-ALIGN:left
V e r t ica l
Est ablece el valor del at ribut o VERTICAL-ALIGN para el t ext o al que se da
form at o con est e est ilo. Puede seleccionar < Sin est ablecer> ( ninguna opción
elegida) , Text o de subíndice o Text o de superíndice. Por ej em plo, si
selecciona Text o de subíndice, se insert ará la siguient e línea de código de
m arcado CSS:
VERTICAL-ALIGN:sub
Ju st ifica ción
Est ablece el valor de at ribut o TEXT-JUSTIFY para el t ext o al que se da
form at o con est e est ilo. Puede seleccionar < Sin est ablecer> ( ninguna opción
elegida) , Aut om át ico, Espaciar palabras, Est ilo de periódico, Dist ribuir
espaciado o Dist ribuir t odas las líneas. Por ej em plo, si elige Est ilo de
periódico, se insert ará la siguient e línea de código de m arcado CSS:
TEXT-JUSTIFY:newspaper
N ot a Los at ribut os de Just ificación sólo est arán disponibles si selecciona
Just ificado en el valor Horizont al.
Espa cia do e n t r e
Est ablece el espaciado ent re let ras y el espaciado vert ical ent re líneas del t ext o al
que se da form at o con est e est ilo.
Le t r a s
Est ablece el valor de espaciado horizont al ent re let ras para el t ext o al que se
da form at o con est e est ilo. Puede seleccionar < Sin est ablecer> ( ninguna
opción elegida) , Norm al o Personalizado. Si selecciona Personalizado,
est arán disponibles los cam pos sit uados a la derecha de Personalizado.
Escriba un valor ent re 1 y 512 en el cam po num érico y elij a una opción de
unidad ( px, pt , pc, m m , cm , in, em o ex) . Puede aj ust ar el valor que
est ablezca para adapt arlo al at ribut o j ust ificado horizont alm ent e. La opción
de unidad predet erm inada es pt . Por ej em plo, si elige Personalizado, escribe
5 en el cam po num érico y después acept a la opción de unidad
predet erm inada, se insert ará la siguient e línea de código de m arcado CSS:
LETTER-SPACING:5pt
Lín e a s
Est ablece el valor de espaciado vert ical ent re líneas para el t ext o al que se
da form at o con est e est ilo. Puede seleccionar < Sin est ablecer> ( ninguna
opción elegida) , Norm al o Personalizado. Si selecciona Personalizado,
est arán disponibles los cam pos sit uados a la derecha de Personalizado.
Escriba un valor ent re 1 y 512 en el cam po num érico y elij a una opción de
unidad ( px, pt , pc, m m , cm , in, em , ex o % ) . La opción de unidad
predet erm inada es pt . Por ej em plo, si elige Personalizado, escribe 5 en el
cam po num érico y después acept a la opción de unidad predet erm inada, se
insert ará la siguient e línea de código de m arcado CSS:
LINE-HEIGHT:5pt
N ot a El at ribut o j ust ificado horizont alm ent e t am bién m odifica el espaciado
vert ical de las líneas.
Flu j o de t e x t o
Sa n gr ía
Est ablece el valor de at ribut o TEXT-INDENT para el t ext o al que se da
form at o con est e est ilo. Escriba un valor ent re 1 y 512 en el cam po
num érico y elij a una opción de unidad ( px, pt , pc, m m , cm , in, em , ex o % ) .
La opción de unidad predet erm inada es pt . Por ej em plo, si escribe 5 en el
cam po num érico y después acept a la opción de unidad predet erm inada, se
TEXT-INDENT:5pt
D ir e cción de l t e x t o
Est ablece el valor de at ribut o DIRECTION para el t ext o al que se da form at o
con est e est ilo. Puede seleccionar < Sin est ablecer> ( ninguna opción
elegida) , De izquierda a derecha o De derecha a izquierda. Por ej em plo, si
elige De izquierda a derecha, se insert ará la siguient e línea de código de
m arcado CSS:
DIRECTION:ltr
Posición , Ge n e r a dor de e st ilos ( Cu a dr o de

diá logo)
La página Posición del cuadro de diálogo Generador de est ilos perm it e definir
at ribut os CSS de posición. Puede aplicar est os at ribut os direct am ent e a elem ent os
Para aplicar direct am ent e at ribut os de posición a elem ent os HTML de la página,
abra el docum ent o HTML en la vist a Diseño del Diseñador HTML y seleccione el
elem ent o al que desea aplicar el form at o. A cont inuación, elij a Generar est ilo en el
m enú Form at o para abrir el cuadro de diálogo Generador de est ilos y seleccione la
opción Posición en el panel de la izquierda.
CSS.
Cuando aplique est ilos a elem ent os seleccionados en la vist a Diseño, los at ribut os
de est ilo CSS se insert arán en línea en el código de m arcado HTML de los
elem ent os seleccionados. Cam bie a la vist a HTML para revisar los nuevos at ribut os
de est ilo insert ados.
Para agregar at ribut os de posición a una regla de est ilo CSS definida en una hoj a
de est ilos ext erna, coloque el cursor dent ro de las llaves que siguen al select or para
la regla de est ilo. A cont inuación, elij a Generar est ilo en el m enú Est ilos para abrir
el cuadro de diálogo Generador de est ilos y seleccione la opción Posición en el panel
de la izquierda.
Se puede aplicar una clase de est ilo CSS definida en una hoj a de est ilos ext erna a
un elem ent o cont enido en la sección <BODY> de una página Web m ediant e la
asignación del select or de est ilo CSS com o propiedad CLASS del elem ent o.
Las opciones disponibles en la página Posición del cuadro de diálogo Generador de

est ilos son:
M odo de posición
Est ablece el m odo que det erm ina los cam pos de posición que est arán disponibles.
Seleccione una de las siguient es opciones de la list a desplegable:
< Sin e st a ble ce r >

Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo.
Posición e n flu j o n or m a l
No cam bia la posición del elem ent o; se puede especificar el alt o y el ancho.
Por ej em plo, si elige Posición en fluj o norm al, se insert ará la siguient e línea
de código de m arcado CSS:
POSITION:static
N ot a La zona de vist a previa cont igua al select or Modo de posición se act ualiza de
form a que reflej e las selecciones de m odo.
D e spla z a m ie n t o de sde flu j o n or m a l
Perm it e especificar las posiciones superior e izquierda de un elem ent o con
respect o a su posición en el fluj o norm al; se puede especificar el alt o y el
ancho. El fluj o norm al de un elem ent o es su posición ant es de aplicar el
est ilo. Por ej em plo, si elige Desplazam ient o desde fluj o norm al, se insert ará
la siguient e línea de código de m arcado CSS:
POSITION:relative
Posición a bsolu t a
Perm it e especificar la posición superior absolut a, la posición izquierda
absolut a, el índice Z, el alt o y el ancho de un elem ent o. Lo norm al es que
coloque en posiciones absolut as los elem ent os que desee fij ar a una posición
específica. Por ej em plo, podría colocar un logot ipo en una posición absolut a
de form a que no se m oviese al agregar o edit ar ot ros elem ent os. Si elige
Posición absolut a, se insert ará la siguient e línea de código de m arcado CSS:
POSITION:absolute
Si selecciona un m odo de posición, est arán disponibles las siguient es opciones:
Su pe r ior
Est ablece la posición superior de un elem ent o, com o valor absolut o o com o
valor relat ivo, a su posición en el fluj o norm al. Escriba un valor y elij a una
opción de unidad ( px, pt , pc, m m , cm , in, em , ex o % ) . La opción de unidad
predet erm inada es px. Por ej em plo, si escribe 5 y después acept a la opción
de unidad predet erm inada, se insert ará la siguient e línea de m arcado CSS:
TOP:5px
I z qu ie r da
Est ablece la posición izquierda de un elem ent o, com o valor absolut o o com o
valor relat ivo a su posición en el fluj o norm al. Escriba un valor y elij a una
opción de unidad ( px, pt , pc, m m , cm , in, em , ex o % ) . La opción de unidad
LEFT:5px
Alt o
Est ablece el alt o de un elem ent o. Escriba un valor y elij a una opción de
HEIGHT:5px
An ch o
Est ablece el ancho de un elem ent o. Escriba un valor y elij a una opción de
WIDTH:5px
Í n dice Z
Est ablece el orden Z de un elem ent o. El orden Z cont rola la present ación de
elem ent os solapados; los elem ent os con orden Z elevado se m uest ran por
delant e de los elem ent os con orden Z baj o. Para m over un elem ent o hacia
arriba en el orden Z, escriba un núm ero posit ivo; por ej em plo:
Z-INDEX:99
Para m over un elem ent o hacia abaj o en el orden Z, escriba un núm ero m enor o un
núm ero negat ivo.
N ot a El valor de Í ndice Z y la posición est án relacionados. Si escribe valores de
posición que hacen que se solapen elem ent os, puede asignar valores apropiados de
Í ndice Z para cont rolar qué elem ent o se m uest ra en prim er lugar. Asigne el m ayor
valor de Í ndice Z al elem ent o que desee que aparezca sobre el ot ro elem ent o.
Pr e se n t a ción , Ge n e r a dor de e st ilos ( Cu a dr o de

diá logo)
La página Diseño del cuadro de diálogo Generador de est ilos perm it e definir
at ribut os CSS de diseño de página. Los at ribut os de diseño de página det erm inan
cóm o se colocarán los elem ent os en el fluj o de la secuencia HTML. Puede aplicar
est os at ribut os direct am ent e a elem ent os HTML o agregarlos a reglas de est ilo CSS.
Para aplicar direct am ent e at ribut os de diseño a elem ent os HTML de la página, abra
el docum ent o HTML en la vist a Diseño del Diseñador HTML y ut ilice la vent ana
Esquem a del docum ent o para seleccionar un elem ent o al que desee aplicar el
form at o. A cont inuación, elij a Generar est ilo en el m enú Form at o para abrir el
cuadro de diálogo Generador de est ilos y seleccione la opción Present ación en el
panel de la izquierda.
CSS.
Cuando aplique est ilos a elem ent os seleccionados en la vist a Diseño, los at ribut os
de est ilo CSS se insert arán en línea en el código de m arcado HTML de los
elem ent os seleccionados. Cam bie a la vist a HTML para revisar los nuevos at ribut os
de est ilo insert ados.
Para agregar at ribut os de diseño a una regla de est ilo CSS definida en una hoj a de
est ilos ext erna, coloque el cursor dent ro de las llaves que siguen al select or para la
regla de est ilo. A cont inuación, elij a Generar est ilo en el m enú Est ilos para abrir el
cuadro de diálogo Generador de est ilos y seleccione la opción Present ación en el
panel de la izquierda.
un elem ent o cont enido en la sección <BODY> de una página Web ( en est e caso,
incluida la propia sección <BODY>) m ediant e la asignación del select or de est ilo CSS
com o propiedad CLASS del elem ent o deseado.
Las opciones disponibles en la página Present ación del cuadro de diálogo Generador
de est ilos son:
Con t r ol de flu j o
Est e conj unt o de at ribut os perm it e cont rolar el fluj o de elem ent os en el docum ent o
HTML. Las zonas de vist a previa cont iguas a los select ores de Cont rol de fluj o se
act ualizarán a m edida que seleccione opciones. Los siguient es at ribut os pueden
afect ar a la apariencia y al rendim ient o de las páginas cuando se m uest ren en los
exploradores:
V isibilida d
Est ablece el valor Ocult o ( invisible) o Visible para la propiedad Visibilidad.
Puede seleccionar < Sin est ablecer> ( ninguna opción elegida) , Ocult o o
Visible. Por ej em plo, si elige Ocult o, se insert ará la siguient e línea de código
de m arcado CSS:
VISIBILITY:hidden
Pr e se n t a ción
Est ablece los valores de un at ribut o DISPLAY para un elem ent o. Puede
especificar si se present a un elem ent o y si un elem ent o present ado aparece
com o un elem ent o de bloque o dent ro del fluj o lineal. Puede seleccionar
< Sin est ablecer> ( ninguna opción elegida) , No m ost rar, Com o elem ent o de
bloque, o Com o elem ent o en línea. Un elem ent o de t ipo bloque suele iniciar
una línea nueva y no puede ser m ayor que el cont enedor prim ario. Por
ej em plo, un elem ent o con est ilo <H1> que est é dent ro de un elem ent o
<BODY> no puede ser m ayor que el elem ent o <BODY> que lo cont iene.
Norm alm ent e, un elem ent o en línea no inicia una línea nueva y se le asigna
un t am año en función del alt o y el ancho de su cont enido. Por ej em plo, si
elige " Com o elem ent o en bloque" , se insert ará la siguient e línea de código
de m arcado CSS:
DISPLAY:block
N ot a Si el valor del at ribut o es < Sin est ablecer> , no se agregará código al est ilo.
Su ge r e n cia Las propiedades Visibilidad y Most rar est án relacionadas, pero no son
iguales. Si ocult a un elem ent o de una página, no se reducirá el t iem po necesario
para que un explorador m uest re la página. Sin em bargo, el explorador ignorará el
elem ent o que no se va a m ost rar. En consecuencia, un explorador t ardará m enos
en m ost rar una página con elem ent os que no se m uest ran que una página con esos
m ism os elem ent os ocult os. Adem ás, cuando aj ust e líneas en t orno a un elem ent o
ocult o, parecerá que las líneas se aj ust an en t orno a un espacio vacío. Tenga en
cuent a est as dependencias al seleccionar las propiedades de diseño.
Pe r m it ir flu j o de t e x t o
Perm it e est ablecer at ribut os que det erm inan cóm o fluirá el t ext o en t orno a
un elem ent o. Puede seleccionar < Sin est ablecer> ( ninguna opción elegida) ,
No perm it ir t ext o en los lados, A la derecha o A la izquierda. Por ej em plo, si
elige A la derecha, se insert ará la siguient e línea de código de m arcado CSS:
FLOAT:left
Pe r m it ir obj e t os flot a n t e s
Perm it e est ablecer at ribut os que cont rolan en qué part e de la página se
perm it e que flot en obj et os. Puede seleccionar < Sin est ablecer> ( ninguna
opción elegida) , En cualquier lado ( los obj et os pueden flot ar en los lados
izquierdo y derecho de la página) , Sólo a la derecha ( los obj et os sólo pueden
flot ar en el lado derecho de la página) , Sólo a la izquierda ( los obj et os sólo
pueden flot ar en el lado izquierdo de la página) o No perm it ir ( la página no
adm it e obj et os flot ant es) . Por ej em plo, si elige Sólo a la derecha, se
CLEAR:left
Con t e n ido
D e sbor da m ie n t o
Perm it e est ablecer at ribut os que cont rolan el com port am ient o de los
elem ent os cuando su cont enido excede el alt o y el ancho definidos. Puede
seleccionar < Sin est ablecer> ( ninguna opción elegida) , Usar barras de
desplazam ient o si se necesit a ( se m uest ran barras de desplazam ient o si el
cont enido excede el t am año del elem ent o) , Ut ilizar siem pre barras de
desplazam ient o ( siem pre se m uest ran barras de desplazam ient o) , El
cont enido no est á recort ado ( el elem ent o se expande para adapt arse al
cont enido) o El cont enido est á recort ado ( no se m uest ra el cont enido que
exceda el t am año del elem ent o) . Por ej em plo, si elige El cont enido no est á
recort ado, se insert ará la siguient e línea de código de m arcado CSS:
OVERFLOW:visible
Re cor t e
Perm it e est ablecer at ribut os que cont rolan qué part e rect angular de un elem ent o se
va a m ost rar. Por ej em plo, puede m ost rar solam ent e la esquina superior derecha
de un elem ent o. Escriba valores en uno o m ás cam pos ( Superior, I nferior, I zquierdo
o Derecho) y seleccione una opción de unidad: px ( predet erm inada) , pt , pc, m m ,
cm , in, em , ex o % .
Sólo se pueden recort ar los elem ent os colocados en una posición absolut a. Los
valores que especifique est arán relacionados con el cont orno de un elem ent o. Por
ej em plo, si est ablece un valor de recort e Superior de 40px, la part e del elem ent o
que est é ent re 0px ( part e superior del elem ent o) y 40px no será visible. Por
ej em plo, si escribe 50 en los cam pos Superior e I nferior y después acept a la opción
de unidad predet erm inada, se insert ará el siguient e código de m arcado CSS:
CLIP: rect(50px auto 50px auto)
N ot a Si asigna valores a m enos de cuat ro cam pos de recort e, se asignará a los

dem ás cam pos el valor aut om át ico y no se recort arán los cont ornos no asignados.
I m pr im ir sa lt os de pá gin a
Los siguient es at ribut os perm it en cont rolar cuándo se ut ilizan salt os de página en
los elem ent os que ut ilicen el est ilo:
An t e s
Puede seleccionar < Sin est ablecer> ( ninguna opción elegida) , Aut om át ico o
Forzar un salt o de página. Por ej em plo, si elige Forzar un salt o de página, se
PAGE-BREAK-BEFORE:always
D e spu é s
Puede seleccionar < Sin est ablecer> ( ninguna opción elegida) , Aut om át ico o
Forzar un salt o de página. Por ej em plo, si elige Forzar un salt o de página, se
PAGE-BREAK-AFTER:always
Bor de s, Ge n e r a dor de e st ilos ( Cu a dr o de

diá logo)
La página Bordes del cuadro de diálogo Generador de est ilos perm it e definir
at ribut os de est ilos CSS que det erm inan el borde y los m árgenes que rodean un
elem ent o HTML. Puede aplicar direct am ent e est os at ribut os a elem ent os HTML o
agregarlos a reglas de est ilo CSS.
Para aplicar direct am ent e at ribut os de borde a un elem ent o HTML de la página,
abra el docum ent o HTML en la vist a Diseño del Diseñador HTML y ut ilice la vent ana
Esquem a del docum ent o para seleccionar un elem ent o al que desee aplicar el
form at o. A cont inuación, elij a Generar est ilo en el m enú Form at o para abrir el
cuadro de diálogo Generador de est ilos y seleccione la opción Bordes en el panel de
la izquierda.
CSS.

est ilo CSS se insert an en línea en el código de m arcado HTML de la página. Pase a
la vist a HTML para revisar los nuevos at ribut os de est ilo CSS insert ados.
Para agregar at ribut os de borde a un est ilo CSS definido en una hoj a de est ilos
ext erna, coloque el cursor dent ro de las llaves ( { } ) que siguen al select or para el
cuadro de diálogo Generador de est ilos y seleccione Bordes en el panel de la
izquierda.
la m ayoría de los elem ent os cont enidos en la part e <BODY> de una página Web
m ediant e la asignación del select or de est ilo CSS com o propiedad CLASS del
elem ent o deseado.
Las opciones disponibles en la página Márgenes del cuadro de diálogo Generador de

est ilos son:
M á r ge n e s
Perm it e est ablecer at ribut os que cont rolan la dist ancia ent re la superficie
rect angular que rodea a un elem ent o y ot ros elem ent os. Escriba valores en uno o
m ás cam pos ( Superior, I nferior, I zquierdo o Derecho) y seleccione una opción de
unidad: px ( predet erm inada) , pt , pc, m m , cm , in, em , ex o % . Por ej em plo, si
escribe 50 en los cam pos Superior e I nferior y después acept a la opción de unidad
predet erm inada, se insert ará el siguient e código de m arcado CSS:
MARGIN-TOP: 50px; margin-bottom:50px

N ot a Los valores de m argen pueden ser posit ivos o negat ivos.
Re lle n o
Est ablece at ribut os que cont rolan la cant idad de espacio exist ent e ent re un
elem ent o y su m argen o ent re un elem ent o y su borde ( si el obj et o t iene un borde) .
Escriba valores en uno o m ás cam pos ( Superior, I nferior, I zquierdo o Derecho) y
seleccione una opción de unidad: px ( predet erm inada) , pt , pc, m m , cm , in, em , ex
o % . Por ej em plo, si escribe 50 en los cam pos Superior e I nferior, y acept a la
opción de unidad predet erm inada, se insert ará el siguient e código de m arcado CSS:
PADDING-TOP: 50px; PADDING-BOTTOM:50px

N ot a Los valores de relleno deben ser posit ivos.
Bor de s
Los siguient es at ribut os perm it en cont rolar el borde de la superficie rect angular que
rodea a un elem ent o:
Se le ccion a r e l bor de qu e se va a ca m bia r
Puede seleccionar Todos, Superior, I nferior, I zquierdo o Derecho. No se

agregará el código al est ilo hast a que seleccione un est ilo de borde.
Est ilo
Puede seleccionar < Sin est ablecer> , Ninguno, Línea sólida, Línea doble,
Surco, Rugoso, Baj orrelieve o Alt orrelieve. Por ej em plo, si selecciona
Superior com o borde seleccionado y Línea sólida com o Est ilo, se agregará la
siguient e línea de código:
BORDER-TOP-STYLE:solid
An ch o
Puede seleccionar < Sin est ablecer> ( ninguna opción elegida) , Fino, Medio,
Grueso o Personalizado. Si selecciona Personalizado, est arán disponibles
cam pos cont iguos en los que podrá escribir un núm ero y seleccionar una
opción de unidad: px ( predet erm inada) , pt , pc, m m , cm , in, em , ex o % . Por
ej em plo, si selecciona Superior com o borde seleccionado, Línea sólida com o
est ilo, Personalizado com o ancho, escribe 50 en el cam po num érico y
después acept a la opción de unidad predet erm inada, se agregará la
BORDER-TOP:50px solid
Color
Perm it e est ablecer el color del t ext o m ost rado con el est ilo. Seleccione un
color en la list a desplegable o haga clic en el bot ón de punt os suspensivos
( ...) para abrir el cuadro de diálogo Select or de color y seleccionar colores
adicionales. Por ej em plo, si selecciona superior com o borde seleccionado,
Línea sólida com o est ilo y Azul com o color, se agregará la siguient e línea de
código:
BORDER-TOP:blue solid
List a s, Ge n e r a dor de e st ilos ( Cu a dr o de

diá logo)
La página List as del cuadro de diálogo Generador de est ilos perm it e definir
at ribut os de est ilos CSS que dan form at o a las list as creadas m ediant e las et iquet as
< OL> y < UL> . Puede aplicar direct am ent e est os at ribut os a elem ent os HTML o
agregarlos a reglas de est ilo CSS.
Para aplicar direct am ent e at ribut os de list a a elem ent os HTML de la página, abra el
docum ent o HTML en la vist a Diseño del Diseñador HTML y seleccione los elem ent os
a los que desea aplicar el form at o. A cont inuación, elij a Generar est ilo en el m enú
Form at o para abrir el cuadro de diálogo Generador de est ilos y seleccione la opción
List as en el panel de la izquierda.
CSS.

est ilo CSS se insert an en línea en el código de m arcado HTML de la página. Cam bie
a la vist a HTML para revisar los nuevos at ribut os de est ilo insert ados.
Para agregar at ribut os de list a a una regla de est ilo CSS definida en una hoj a de
est ilos ext erna, coloque el cursor dent ro de las llaves que siguen al select or para el
cuadro de diálogo Generador de est ilos y seleccione la opción List as en el panel de
la izquierda.
Se puede aplicar una clase de est ilo CSS definida en una hoj a de est ilos ext erna a
un elem ent o cont enido en la sección <BODY> de una página Web m ediant e la
asignación del select or de est ilo CSS com o propiedad CLASS del elem ent o.
Las opciones disponibles en la página List as del cuadro de diálogo Generador de

est ilos son:
List a s
Perm it e est ablecer los at ribut os para el t ipo de list a ( con viñet as o sin viñet as) .
Est os at ribut os suelen aplicarse a est ilos que afect an a et iquet as < LI > < / LI > o
< OL> < / OL> . Puede seleccionar < Sin est ablecer> ( ninguna opción elegida) , Con
viñet as o Sin viñet as. Por ej em plo, si selecciona Sin viñet as, se agregará la
LIST-STYLE-TYPE:none
Viñ e t a s
Los siguient es at ribut os perm it en dar form at o a las viñet as. Las Viñet as pueden ser
núm eros, let ras, num erales rom anos, im ágenes est ándar de viñet a ( Círculo, Disco,
Cuadrado) o im ágenes personalizadas de viñet a.
N ot a Los dist int os est ilos de viñet as est arán disponibles cuando seleccione Con
viñet as com o el t ipo de list a.
Est ilo
Perm it e est ablecer los at ribut os que cont rolan el est ilo de la viñet a. Hay
ocho est ilos disponibles. Puede seleccionar < Sin est ablecer> ( ninguna
opción elegida) , Círculo, Disco, Cuadrado, ( 1 2 3 4…) , ( i ii iii iv…) , ( I I I I I I
I V…) , ( a b c d….) o ( A B C D…) . Por ej em plo, si selecciona Con viñet as com o
t ipo de list a y Cuadrado com o est ilo, se insert ará la siguient e línea de código
de m arcado CSS:
LIST-STYLE-TYPE:square
Posición
Perm it e est ablecer los at ribut os que cont rolan la posición de la viñet a con
respect o al t ext o. Se incluyen dos form at os diferent es para la posición del
t ext o. Puede seleccionar < Sin est ablecer> ( ninguna opción elegida) , Ext erior
( el t ext o t iene sangría) o I nt erior ( el t ext o no t iene sangría) . Por ej em plo, si
selecciona Cuadrado com o est ilo, Con viñet as com o t ipo de list a y Ext erior
( el t ext o t iene sangría) com o posición, se insert ará la siguient e línea de
LIST-STYLE-TYPE:square; list-style-position:outside
V iñ e t a pe r son a liz a da
Perm it e est ablecer com o est ilo de viñet a una im agen, en lugar de los ocho
est ilos disponibles. Si selecciona Viñet a personalizada, est arán disponibles
las opciones I m agen y Ninguna.
I m a ge n
Perm it e est ablecer una im agen com o est ilo de viñet a. Escriba una rut a y un
nom bre de im agen en el cam po o haga clic en el bot ón de punt os
suspensivos ( ...) para abrir el cuadro de diálogo Seleccionar im agen de
viñet a y, a cont inuación, busque la ubicación de la im agen. Por ej em plo, si
selecciona Con viñet as com o t ipo de list a, Ext erior ( el t ext o t iene sangría)
com o posición y Viñet a personalizada com o est ilo de viñet a, y después
escribe " bullet .j pg" en el cam po I m agen, se insert a la siguient e línea de
LIST-STYLE-POSITION:outside
LIST-STYLE-IMAGE:url (bullet.jpg)
N in gu n a
Est ablece Ninguna com o valor de la im agen de la viñet a. Por ej em plo, si
selecciona Con viñet as com o t ipo de list a, Ext erior ( el t ext o t iene sangría)
com o posición y Viñet a personalizada com o est ilo de viñet a, y después
escribe " bullet .j pg" en el cam po I m agen, se insert a la siguient e línea de
LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:url (bullet.jpg)
Si después vuelve al Generador de est ilos y selecciona Ninguna com o opción de

Viñet a personalizada, se insert ará la siguient e línea de código de m arcado CSS:
LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:none
Ot r os, Ge n e r a dor de e st ilos ( Cu a dr o de

diá logo)
La página Ot ros del Generador de est ilos perm it e est ablecer dist int os at ribut os de
com port am ient o, int erfaz de usuario ( cursor) , borde de t abla y diseño, así com o
efect os visuales para los est ilos CSS que cree en el Generador de est ilos. Para
m odificar est a configuración, elij a Generar est ilo en el m enú Form at o o el m enú
Est ilos para abrir el cuadro de diálogo Generador de est ilos y seleccione la opción
Ot ros en el panel de la izquierda.
CSS. El m enú Est ilos aparecerá cuando abra una hoj a de est ilos CSS ext erna para
Las opciones disponibles en la página Ot ros del cuadro de diálogo Generador de

est ilos son:
I n t e r fa z de u su a r io
Cu r sor
Perm it e est ablecer at ribut os para el t ipo de cursor que se m uest ra con el
est ilo aplicado. Si un at ribut o es < Sin est ablecer> , no se agregará código al
est ilo.
Sin t a x is V a lor e s Cu r sor e s
CURSOR: aut o Aut om át ico El cursor que se m uest re
dependerá del cont ext o.
CURSOR: default Predet erm inado
CURSOR: crosshair Selección con precisión

CURSOR: default Selección de vínculo
CURSOR: m ove Mover

CURSOR: n- resize Aj ust e vert ical ( superior)
CURSOR: s- resize Aj ust e vert ical ( inferior)
CURSOR: w- resize Aj ust e horizont al

( izquierda)
CURSOR: e- resize Aj ust e horizont al
( derecha)
CURSOR: nw- resize Aj ust e diagonal 1
( izquierda)
CURSOR: sw- resize Aj ust e diagonal 2
( izquierda)
CURSOR: ne- resize Aj ust e diagonal 1
( derecha)
CURSOR: se- resize Aj ust e diagonal 2
( derecha)
CURSOR: t ext Text o
CURSOR: wait Ocupado
CURSOR: help Ayuda
Ta bla s
Puede aplicar los at ribut os de bordes y present ación a t ablas que ut ilicen un est ilo,
es decir, a t ablas a las que se aplique el est ilo act ual.
Bor de s
Perm it e est ablecer los at ribut os que cont rolan el com port am ient o de los
bordes. Puede seleccionar < Sin est ablecer> ( ninguna opción elegida) ,
Separar bordes de celdas o Cont raer bordes de celdas. El at ribut o Separar
divide explícit am ent e los bordes de cada celda; el at ribut o Cont raer perm it e
que dos celdas com part an un borde. Por ej em plo, si selecciona Separar
bordes de celdas, se insert ará la siguient e línea de código de m arcado CSS:
BORDER-COLLAPSE:separate
D ise ñ o
Perm it e est ablecer los at ribut os del diseño de una t abla en un est ilo. Est os
at ribut os fij an el t am año de una celda o perm it en el aj ust e aut om át ico del
t am año de las celdas para adapt arse al cont enido. Puede seleccionar < Sin
est ablecer> ( ninguna opción elegida) , Aut om át ico o Present ación fij a. Por
ej em plo, si selecciona Present ación fij a, se insert ará la siguient e línea de
TABLE-LAYOUT:fixed
Com por t a m ie n t o
D ir e cción URL
Guarda la rut a de acceso en un archivo de com port am ient os DHTML
com plem ent ario. Haga clic en el bot ón de punt os suspensivos ( ...) cont iguo
para abrir el cuadro de diálogo Seleccionar com port am ient o y, a
cont inuación, vaya al archivo de com port am ient os .ht a o .ht c que desee.
Los archivos de com port am ient os definen at ribut os dinám icos que se pueden
ut ilizar en secuencias de com andos para cam biar el aspect o de los elem ent os HTML
y volver a ubicar los elem ent os dependiendo de la inform ación que int roduzca el
usuario. Por ej em plo, los com port am ient os pueden cam biar el color del t ext o o
int roducir un elem ent o <DIV> desde el borde de la vent ana del explorador Web. Los
archivos de com port am ient os se deben agregar a una solución para que hagan
referencia a ellos las páginas HTML y los form ularios Web Form s. Para obt ener m ás
inform ación, vea I m plem ent ar com ponent es de secuencia de com andos de
com port am ient o DHTML, Crear un com ponent e de secuencia de com andos de
com port am ient o, HTA: APPLI CATI ON ( Elem ent o) | HTA: Applicat ion ( Obj et o) ,
Referencia del cont rolador de com port am ient o y Referencia de HTC.

Manual CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Manual CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Ce n t r o de Est u dios Polit é cn icos

I m plant ación de Aplicaciones CSS_01 – Hoj as de Est ilo en Cascada

I N TROD UCCI ÓN A LAS H OJAS D E ESTI LOS EN CASCAD A ............................................. 3

I n t r odu cción a la s H oj a s de e st ilos e n ca sca da

D e fin ir r e gla s de e st ilo CSS e n bloqu e s STYLE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Pr ior ida de s de la s r e gla s de e st ilo CSS

Asign a r e le m e n t os H TM L a u n e st ilo CSS CLASS

.head2 {font-size:14pt; text-align:center; color:red; font-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

BODY {background:#FBFBFB; font-family:Verdana, Arial, Helvetica,

<LINK REL=stylesheet Type="text/css" HREF="mystyles.css">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Com pa t ibilida d con H TM L 3 .2

Edit or de CSS de Visu a l St u dio .N ET

Las opciones disponibles en la página Fuent e del cuadro de diálogo Generador de

Proporciona una list a de opciones para la fuent e que se va a ut ilizar en el t ext o

FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif

• Escribir el nom bre de un color

N ot a Si selecciona un color en el Select or de color en lugar de hacerlo en la list a

N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo. No se

N ot a No se puede aplicar el at ribut o Versales a las fuent es del sist em a. Si el

N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo. No se

N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo.

N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo.

<SPAN Style="TEXT-DECORATION: UNDERLINE">Sample Text</SPAN>

Si selecciona Ninguno, no est ará disponible ningún efect o. Si la opción Ninguno no

TEXT-DECORATION: underline line-through

N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo.

Fon do, Ge n e r a dor de e st ilos ( Cu a dr o de

Al aplicar form at o a elem ent os seleccionados en la vist a Diseño, los at ribut os de

Las opciones disponibles en la página Fondo del cuadro de diálogo Generador de

BACKGROUND-IMAGE: url (images/background.bmp)

At r ibu t o de m osa ico D e scr ipción

Est ablece el valor de at ribut o BACKGROUND-ATTACHMENT para la im agen de fondo que

N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo.

Su ge r e n cia Debe seleccionar los valores horizont al y vert ical de la

propiedad no válido. Cuando seleccione valores de posición horizont al y

N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo.

N ot a Si el at ribut o es < Sin est ablecer> , no se agregará código al est ilo.

Las opciones disponibles en la página Text o del cuadro de diálogo Generador de

Posición , Ge n e r a dor de e st ilos ( Cu a dr o de

Las opciones disponibles en la página Posición del cuadro de diálogo Generador de

< Sin e st a ble ce r >

Si selecciona un m odo de posición, est arán disponibles las siguient es opciones:

Pr e se n t a ción , Ge n e r a dor de e st ilos ( Cu a dr o de

CLIP: rect(50px auto 50px auto)

N ot a Si asigna valores a m enos de cuat ro cam pos de recort e, se asignará a los

Bor de s, Ge n e r a dor de e st ilos ( Cu a dr o de

Al aplicar form at o a elem ent os seleccionados en la vist a Diseño, los at ribut os de

Las opciones disponibles en la página Márgenes del cuadro de diálogo Generador de

MARGIN-TOP: 50px; margin-bottom:50px

PADDING-TOP: 50px; PADDING-BOTTOM:50px

Se le ccion a r e l bor de qu e se va a ca m bia r

Puede seleccionar Todos, Superior, I nferior, I zquierdo o Derecho. No se

List a s, Ge n e r a dor de e st ilos ( Cu a dr o de

Al aplicar form at o a elem ent os seleccionados en la vist a Diseño, los at ribut os de

Las opciones disponibles en la página List as del cuadro de diálogo Generador de

Si después vuelve al Generador de est ilos y selecciona Ninguna com o opción de

Ot r os, Ge n e r a dor de e st ilos ( Cu a dr o de

Las opciones disponibles en la página Ot ros del cuadro de diálogo Generador de

CURSOR: crosshair Selección con precisión

CURSOR: m ove Mover

CURSOR: s- resize Aj ust e vert ical ( inferior)