Css Ejercicios

Ejemplos y ejercicios CSS 1
CASCADING STYLE SHEETS (CSS)

La sintaxis que rige en las css es diversa respecto del HTML clásico:
• los atributos se introducen entre llaves { }
• en lugar del signo = se usan los dos puntos:
• los argumentos consecutivos se separan mediante el signo ; en lugar del signo ,
• los atributos compuestos por más de un término se separan mediante un guión -
• cuando un atributo se considera propiedad de un objeto los guiones se eliminan y las iniciales de los términos se
vuelven mayúsculas (por ejemplo: font-style se vuelve FontStyle)
Estilos indicados en el encabezado del documento:

<HTML>
<HEAD>
<style type="text/css">
H1 { font-size:17px; font-family:verdana; color:green }
H2 { font-size:18px; font-family:arial; color:red }
</style>
</HEAD>
<BODY>
<H1>Este texto es de color verde, impostado en verdana de 17 píxel</H1>
<H2>Este texto es de color rosso, impostado en arial de 18 píxel</H2>
</BODY>
</HTML>
Cuando se definen los estilos en un archivo externo (.css), se debe llamarlo desde el encabezado de la página:
<link rel=stylesheet href="style.css" type="text/css">
Con esta opción no se pueden sustituir en ningún caso, los estilos definidos en el propio documento. Si queremos
hacerlo, nos veremos obligados a usar la sentencia:
<style type=”text/css”>
@import URL(“misestilos.css”);
</style>
Estilo aplicado directamente a una etiqueta DIV (a un bloque de texto) en el cuerpo del documento
<DIV STYLE="font-size:18px; font-family:arial; color:red">
Este texto tiene color rojo
</DIV>
El tag <SPAN> es uno de los nuevos tags que se han agregado al HTML para poder manejar y aplicar estilos, este tag
se usa para marcar bloques de texto. El tag <SPAN> por si mismo no tiene ningún efecto, hasta que se usa alguno de
sus atributos, la siguiente tabla muestra esos atributos.
Atributo Valor Ejemplo Significado
id Una palabra que identifique <SPAN id="rojillo"> En este ejemplo se asigna el estilo llamado
el nombre de un estilo "rojillo" .
class Una palabra que de nombre <SPAN class="describe"> En este ejemplo se identifica como miembro
a una clase de estilo. de la clase "describe" a cierto bloque de texto
style Diversos atributos en formato <SPAN style="color:red; text- En el ejemplo anterior se aplica directamente
CSS align:center;"> un estilo a cierto bloque de texto.
Los atributos "id" y "class" no son exclusivos del tag <SPAN>, se pueden usar el mayoría de los tags del HTML, el
atributo "style" también se puede usar en la mayoría de los tags.
Definiendo estilos particulares.

A veces es necesario definir un estilo que solo se aplicará en una parte del documento y no a todos los tags de cierto
tipo u otras partes del documento. Para solucionar el problema anterior se definen estilos particulares de la siguiente
forma: #Nombre_de_estilo{diversos atributos del estilo... }
1. Se usa el símbolo "#" antes del nombre de estilo e inmediatamente después (sin espacios) el nombre del estilo.
2. Se puede usar cualquier nombre de estilo de una sola palabra, siempre y cuando no exista otro con ese nombre.
3. Se usan las llaves "{" y "}" de la misma forma que en los ejemplos anteriores.
4. Para aplicar el estilo se debe de usar un tag con el atributo "id" cuyo valor sea el nombre del estilo, para un estilo
particular no se puede usar el atributo "class".
<STYLE>
#mi_estilo{color:red; text-align:left;}
</STYLE>
Luego se aplica el estilo en el documento.
<SPAN id="mi_estilo">Este párrafo usa un estilo definido</SPAN>
Como se puede ver se define el estilo en la hoja de estilo y posteriormente se debe aplicar a través de un atributo "id"
en cualquier tag solo una vez. A continuación se muestra otro ejemplo:
<HTML>
<HEAD>
<TITLE>Otro estilo</TITLE>
<STYLE type="text/css">

</STYLE>
</HEAD>
<BODY>
<SPAN id="estilouno">Este texto esta definido usando un estilo</SPAN>
<DIV id="estilodos">Este texto también esta definido usando un estilo.</DIV>
<P id="estilotres">Este texto también.</P>
</BODY>
</HTML>
Definiendo clases de estilos.

Se puede definir un estilo que no se aplicará solo a cierta parte del documento o a ciertos tags, si no a muchos otros
elementos de un documento, esto se logra definiendo una clase de estilo de la siguiente forma:
.mi_estilo{caracteristicas del estilo...}
1. Una clase de estilo se define usando un punto e inmediatamente después el nombre que tendrá la clase de estilo,
también se puede usar un "*" antes del punto. Se podría usar la palabra "all" antes del punto, pero esto no trabaja
con Microsoft Internet Explorer 5.0.
2. Se usan las llaves y propiedades de la misma forma que en los ejemplos anteriores.
3. El estilo se aplica en diversas partes del documento a través del atributo "class" usado en varios tags, el valor del
atributo "class" será el nombre de la clase de estilo.
<STYLE type="text/css">
.nuestro_estilo{color:blue; text-align:center;}
</STYLE>
Luego se aplica el estilo usando el atributo "class" en uno o más tags.
<DIV class="nuestro_estilo">Nuestro estilo aplicado aqui</DIV>
<P class="nuestro_estilo">Estilo aplicado otra vez.</P>
<H1 class="nuestro_estilo">Otra vez aplicamos el estilo.</H1>
Un ejemplo más complejo es:
<HTML>
<HEAD>
<TITLE>Un ejemplo mas</TITLE>
<STYLE>
BODY{background-color:red;}
.nuestro_estilo{color:white; text-align:center;}
#titulo{color:yellow;}
.otro{color:aqua;}
</STYLE>
</HEAD>
<BODY>
<DIV id="titulo">TITULO</DIV>
<SPAN class="nuestro_estilo"> El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el
veloz gasu, el veloz gasu, el veloz gasu. </SPAN>
<p class="otro"> Otro estilo, otro estilo, otro estilo</p>
<SPAN class="nuestro_estilo"> Otra vez aplicamos nuestro estilo</span>
<DIV class="otro">Aplicar estilos</DIV>
</BODY>
</HTML>
Agrupar estilos
Por último, se pueden agrupar distintos parámetros. Podríamos hablar de tres casos: cuando son los mismos, los de
texto y los de márgenes.
Si se quiere aplicar los mismos atributos a varias directivas.
H1, H2, H3 {font size: 15pt; color: blue}
Agrupar parámetros de texto:
P {font-weight: bold; font-size: 13pt; line-height: 16pt; font-family: Arial, Helvetica;}
P {font: bold 13pt/16pt Arial, Helvetica;}. El orden es importante: font-weight y font-style antes que los demás.
Agrupar parámetros de márgenes:
BODY {margin-top: 20 px; margin-right: 10px; margin-left: 10px}
BODY {margin: 20px 10px 0px 10px} El orden es importante: superior, derecho, inferior e izquierdo.
Definiendo estilos contextuales

Por ejemplo se desea que solo los tags <BLOCKQUOTE> dentro de tags <P> tengan texto de color rojo, o por ejemplo
se desea que solo los tags <H3> de cierta clase dentro de tags <BLOCKQUOTE> tengan determinado color. Esto es
posible usando un criterio de selección contextual en la definición de la hoja de estilo, por ejemplo.
P BLOCKQUOTE {color:red;}
La definición del estilo anterior indica que los tags <BLOCKQUOTE> usaran texto color rojo cuando estén dentro o
anidados dentro de tags <P>.
El estilo se define usando los nombres de los tags separados por espacios, el criterio para la aplicación del
estilo se le de derecha a izquierda, como en el ejemplo anterior el estilo se aplica a los tags <BLOCKQUOTE> que
estén dentro de tags <P>.
BLOCKQUOTE P UL LI{color:blue; font-weight:bold;}
En el ejemplo anterior se indica que se utilizara letra azul de tipo negrita en los tags <LI> de listas que estén dentro de
tags <P> que a su vez estén dentro de tags <BLOCKQUOTE>.
También es posible definir una clase de criterio contextual, por ejemplo:
H1.miencabezado{color:blue; text-align:center;}
El estilo anterior indica que solo se aplicara el mismo a los tags <H1> que sean de la clase "miencabezado".
Para aplicar el estilo se tendría que escribir en el documento el tag <H1> de la siguiente forma:
<H1 class="miencabazado">Este es mi encabezado.</H1>
Otro ejemplo:
P B {text-align:justify; text-indent:5cm}
OL LI {text-align:justify; text-indent:0cm}
En estos casos se aplicarán sólo en las zonas de negrita de un párrafo, en el primer caso, y en elementos de una lista
ordenada, en el segundo caso.
Un ejemplo más complejo de las diversas formas de usar la selección contextual de estilos es:
<HTML>
<HEAD>
<TITLE>Otro ejemplo mas</TITLE>
<STYLE>

</STYLE> </HEAD>
<BODY>
<H1>Esta parte del documento esta usando el tag heading 1<H3>Ahora estamos usando el tag heading 3 .
<BLOCKQUOTE>Ahora usamos una sangría<EM>Ahora usamos texto con énfasis al cual se le aplica un estilo
contextual</EM>Volvemos al texto con sagria</BLOCKQUOTE>volvemos al texto heading3</H3> volvemos al texto de
heading 1 </H1>
<H1>Texto heading 1 sin un estilo contextual asignado</H1>
<P><H1 class="tu_estilo">Este es tu estilo</H1></P>
<EM>Texto con énfasis sin un estilo contextual aplicado. </EM>
</BODY>
</HTML>
Pseudoclases y pseudoelementos
Se trata de clases y de elementos ya predefinidos por el navegador. Las pseudoclases actuales son:
• :link: representa cómo se verán los enlaces
• :active: representa cómo se verán los enlaces activos
• :visited: representa cómo se verán los enlaces ya visitados
• :hover: representa como se verán los enlaces cuando el puntero del mouse pasa encima (sólo IE).
Actualmente, sólo la etiqueta <A> puedo hacer uso de estas pseudoclases (a:link{definicion_de_estilo}. Si queremos
definir variantes para las pseudoclases, la sintáxis será: A.clase:pseudoclase{definicion_de_estilo}. Por ejemplo:
A.bonito:link{text-decoration:none}, para hacer vínculos sin subrayado.
Los pseudoelementos actuales son:
• :first-line: la primera línea de un bloque de texto (un párrafo, un div, ...)
• :first-letter: la primera letra de un elemento texto. Por ejemplo, para hacer capitulares.
La sintaxis será: elemento:pseudoelemento{definicion_de_estilo}. Por ejemplo: P:first-letter{font-size:200%}, para hacer
que la primera letra de cada párrafo sea de tamaño doble.
Propiedades CSS
Familia de fuente (font-family)
Sintaxis: font-family: nombre-familia | familia-genérica
Posibles valores: nombre-familia
Cualquier nombre de familia. Como no todos los ordenadores tendrán las familias instaladas, se pueden poner varias
alternativas separadas por comas
Valor por defecto: La fuente por defecto
Se aplica a: Todos los elementos
P { font-family: "New Century Schoolbook", Times, serif }
Las hojas de estilo reconocen 5 categorías de fuentes genéricas:
• Serif El término se traduce por "gracias" y es aconsejable para largas secciones de texto. Dos casos típicos de
fuente serif son times new roman o garamond
<STYLE>
BODY { font-family:serif }
</STYLE>
• Sans Serif Típicos los tipos arial y helvética
<STYLE>
BODY { font-family:"sans serif" }
</STYLE>
• Cursivas Tipos en cursiva que imitan la caligrafía.
<STYLE>
BODY { font-family:cursive }
</STYLE>
• Fantasy Caracteres decorativos como, por ejemplo, comic sans
<STYLE>
BODY { font-family:fanct }
</STYLE>
• Monospace Estas fuentes tienen como característica la de ocupar un espacio idéntico. Los otros caracteres, sin
embargo, ocupan un espacio por letra proporcional a la misma. Una clásica fuente es courier.
<STYLE>
BODY { font-family:monospace }
</STYLE>
Estilo de fuente (font-style)

Sintaxis: font-style: valor
Posibles valores: normal | italic | oblique
Valor por defecto: normal
Ejemplo:
H1 { font-style: oblique }
P { font-style: normal }
BODY { font-size:oblique }
El valor oblique funciona aparentemente como "italic", pero se diferencia por inclinar hacia la derecha la fuente normal y
no precisa cargar otro carácter como en el caso de italic.
Variante de fuente (font-variant)

Sintaxis: font-variant: valor
Posibles valores: normal | SMALL-CAPS
Ejemplo: SPAN { font-variant: small-caps }
Permite especificar si la letra se verá normal o en versalita.
Peso de fuente (font-weight)

Sintaxis: font-weight: valor
Es posible asignar a este atributo 7 valores diferentes:
<STYLE>
BODY { font-weight: extra-light }
h1 { font-weight: demi-light }
h2 { font-weight: light }
h3 { font-weight: medium }
h4 { font-weight: extra-bold }
h5 { font-weight: demi-bold }
h6 { font-weight: bold }
</STYLE>
Tamaño de fuente (font-size)

Sintaxis: font-size: tamaño-absoluto | tamaño-relativo | longitud | porcentaje
Posibles valores:
• tamaño-absoluto: xx-small | x-small | small | medium | large | x-large | xx-large
• tamaño-relativo: larger | smaller
• longitud
• porcentaje (en relación al elemento anterior)
Valor por defecto: medium
Ejemplo:
H1 { font-size: large }
P { font-size: 12pt }
LI { font-size: 90% }
STRONG { font-size: larger }
BODY { font-size:1in }
Fuente (font)
Sintaxis: font: valor
Posibles valores: font-style || font-variant || font-weight || font-size /line-height || font-family
Valor por defecto: Ninguno
Ejemplo: P { font: italic bold 12pt/14pt Times, serif }
Especifica un párrafo en negrita, cursiva, Times con un tamaño de 12 puntos y un interlineado de 14 puntos.
La propiedad font es una forma de abreviar propiedades de fuente y de interlineado.
Separación entre palabras (Word-Spacing)

Sintaxis: word-spacing: valor
Posibles valores: normal | longitud
Ejemplo:
P EM { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }
Permite cambiar la cantidad de separación que habrá entre las palabras. Se permiten valores negativos.
Espaciado entre letras (letter-spacing)

Sintaxis: letter-spacing: valor
Posibles valores: normal | longitud
Ejemplo:
H1 { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }
<DIV STYLE="font-family:arial; letter-spacing:1em">
Permite definir el espacio entre las letras (interletraje o kerning). Se permiten valores negativos. Los valores se expresan
en em.
</DIV>
Decoración de texto (text-decoration)

Sintaxis: text-decoration: valor
Posibles valores: none || underline || overline || line-through || blink
Valor por defecto: none
Ejemplo: A:link, A:visited, A:active { text-decoration: none }
Alineación vertical (vertical-align)

Sintaxis: vertical-align: valor
Posibles valores: baseline | sub | super | top | text-top | middle | bottom | text-bottom | porcentaje
Valor por defecto: baseline
Se aplica a: Elementos de línea (EM, A, IMG)
Ejemplo:
IMG.middle { vertical-align: middle }
IMG { vertical-align: 50% }
.exponent { vertical-align: super }
Permite especificar como se alinearan los elementos con respecto a la línea base del texto.
<p><a href=http://www.leonsinho.com.ar style="vertical-align: super " >
Muestra una página web</a> otro texto cualquiera</p>
Transformaciones del texto (text-transform)

Sintaxis: text-transform: valor
Posibles valores: none | capitalize | UPPERCASE | lowercase
• uppercase: aplica las mayúsculas a todas las letras del elemento:
<DIV STYLE="font-family:arial; text-transform:uppercase">
uppercase aplica las mayúsculas a todas las letras del elemento.
</DIV>
• capitalize: aplica la mayúscula sólo a la primera letra de cada palabra:
<DIV STYLE="font-family:arial; text-transform:capitalize">
capitalize aplica la mayúscula sólo a la primera letra de cada palabra.
</DIV>
• lowercase: aplica las minúsculas a todas las letras del elemento:
<DIV STYLE="font-family:arial; text-transform:lowercase">
lowercase: aplica las minúsculas a todas las letras del elemento.
</DIV>
Alineación de texto (text-align)

Sintaxis: text-align: valor
Posibles valores: left | right | center | justify
Valor por defecto: Determinado por el navegador
Se aplica a: Bloques
Ejemplo:
H1 { text-align: center }
P.newspaper { text-align: justify }
Sangrados (text-indent)
Sintaxis: text-indent: valor
Posibles valores: longitud | porcentaje
Valor por defecto: 0
Se aplica a: Bloques
Ejemplo:
<DIV STYLE="font-family:arial; text-indent: 5em">
Este atributo define la cantidad de espacio (expresada en valores absolutos em o en pulgadas) que se deja
inmediatamente antes de la primera palabra.
</DIV>
Interlineado (line-height)
Sintáxis: line-height: valor
Posibles valores: normal | número | longitud | porcentaje
Ejemplo: Doble espacio

<DIV STYLE="font-family:arial; font-size:14px; width:400px; line-height: 200%">
El atributo line-height define la distancia vertical entre las varias líneas de texto. Los valores se expresan en porcentajes
o en unidades absolutas em. Dichos valores son directamente proporcionales al tamaño del texto (font-size). Por ello, en
el ejemplo que sigue, estando el valor absoluto line-height impostado en 2 y el texto en 14px, la distancia será 28px
(14px * 2em).
</DIV>
Márgenes
Sintaxis: margin-top, margin-right, margin-top, margin-bottom, margin: valor
Posibles valores: longitud | porcentaje | auto
Ejemplo:
BODY { margin-top: 0 }
BODY { margin: 5em } /* todos los márgenes de 5em */
P { margin: 2em 4em } /* margen superior e inferior de 2em, e izquierdo y derecho de 4em */
DIV { margin: 1em 2em 3em 4em } /* margen superior de 1em, derecho de 2em, inferior de 3em, e izquierdo de 4em */
La propiedad margin permite definir todos los márgenes de una sola vez si se desean uniformes, o poner 4 valores
separados por espacios que corresponderán a los márgenes superior, derecho, inferior e izquierdo, respectivamente.
<H2 style="margin: 1em 2em 3em 10em ">Este texto es de color rosso y tiene margenes</H2>
Separaciones
Sintaxis: padding-top, padding-right, padding-bottom, padding-left, padding: valor
Posibles valores: [ longitud | porcentaje
Ejemplo: BLOCKQUOTE { padding: 2em 4em 5em }
La propiedad padding permite definir el espacio que habrá entre un elemento y su margen de una sola vez si se desean
uniformes, o poner 4 valores separados por espacios que corresponderán a los espaciados superior, derecho, inferior e
izquierdo, respectivamente.
<H2 style="padding: 2em 4em 5em ">Este texto es de color rojo y espaciado con su margen</H2>
Es posible usar las medidas estándar (pulgadas, centímetros, puntos, píxel, etc.) o valores porcentuales:
BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2in }
BODY { padding: 10pt 10px 110% 2in }
Grosor de los bordes

Sintaxis: border-top-width, border-right-width, border-bottom-width, border-left-width, border-width: valor
Posibles valores: thin | medium | thick | longitud
Valor por defecto: No definidos
La propiedad border-width permite definir el grosor de los bordes de una sola vez si se desean uniformes, o poner 4
valores separados por espacios que corresponderán al grosor de los bordes superior, derecho, inferior e izquierdo,
respectivamente.
Color del borde (border-color)

Sintáxis: border-color: valor
Posibles valores: color
Valor por defecto: El valor de la propiedad color
Estilo de los bordes (border-style)

Sintaxis: border-style: valor
Posibles valores: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Se puede dar un sólo valor o 4. En este caso último caso corresponderán a los lados superior, derecho, inferior e
izquierdo, respectivamente.
<H1 style="border-width: 10pt 10px 1em 2in ;border-color: red;border-style:solid ">Este es mi encabezado con grosor de
borde</H1>
<H1 style="border-top:dotten green; border-left:dashed black; border-right:solid blue; border-bottom:groove yellow ">Este
es mi encabezado con grosor de borde y estilo</H1>
Bordes
Sintaxis: border-top, border-right, border-bottom, border-left, border: valor
Posibles valores: <border-width> || <border-style> || <color>
Valor por defecto: No definido
H2 { border: groove 3em }
A:link { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active { border: thick double red }
La propiedad border permite definir de una sola vez varias características de los bordes. Si se quiere sólo especificar los
de un border habrá que usar el respectivo.
Anchura (width)
Sintaxis: width: valor
Posibles valores: longitud | porcentaje | auto
Valor por defecto: auto
Se aplica a: Elementos de bloque
<p style="width: 300px"> El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz
gasu, el veloz gasu, el veloz gasu. </p>
<input type="button" value="Botón" name="B3" style="width: 10em">
Altura (height)
Sintaxis: height: valor
Posibles valores: longitud | auto
Valor por defecto: auto
Se aplica a: Elementos de bloque. La altura afecta a todo el bloque.
<p style="width: 300px; height:100px"> El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz
gasu, el veloz gasu, el veloz gasu, el veloz gasu. </p>
Alineación (float)
Sintaxis: float: valor
Posibles valores: left | right | none
Esta propiedad permite hacer que el texto contornee el bloque.
<p style="width:350px"> El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu,
<img border="0" src="allah.gif" width="121" height="120" style="float: right ">el veloz gasu, el veloz gasu, el veloz gasu,
el veloz gasu. </p>
Clear
Sintaxis: clear: valor
Posibles valores: none | left | right | both
Permite especificar donde se puede o no hacer flotar elementos. La zona especificada NO tendrá elementos, se quedará
vacía.
Display
Sintaxis: display: valor
Posibles valores: block | inline | list-item | none
Valor por defecto: block
Permite determinar como se ha de visualizar un elemento en la página. Da lugar a que el elemento aparezca en un
nuevo cuadro, saltando de línea (block), en la misma línea (inline) o saltando y con un topo de lista (list-item).
Espacios en blanco (white-space)

Sintaxis: white-space: valor
Posibles valores: normal | pre | nowrap
Se aplica a: Elementos de bloque
Determina la forma en que se tratará el espacio en blanco de una página. El valor normal hace que sólo se vea un
espacio entre palabras, pre muestra los espacios tal como estén escritos, y nowrap no permite retorno automático
dentro de una etiqueta <BR>
Estilos de lista (list-style-type)

Sintaxis: list-style-type: valor
Posibles valores: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Valor por defecto: disc
<ol style="list-style-type: upper-alpha ">
<li>pan</li>
<li>dulce de leche </li>
<li>manteca</li>
<li>cafe</li>
<li>leche</li>
</ol>
Estilos de imágenes en las listas (list-style-image)

Sintaxis: list-style-image: valor
Posibles valores: <url> | none
<ul style="list-style-image: url(firefox.png) ">
<li>pan</li>
<li>manteca</li>
<li>cafe</li>
<li>leche</li>
</ul>
Posición de estilos de lista (list-style-position)

Sintaxis: list-style-position: valor
Posibles valores: inside | outside
Valor por defecto: outside
<ul style="list-style-image: url(firefox.png); list-style-position:inside ">
<li>pan</li>
<li>manteca</li>
<li>cafe</li>
</ul>
Estilos de lista (list-style)

Sintaxis: list-style: valor
Posibles valores: <list-style-type> || <list-style-position> || <url>
Color
Sintaxis: color: color
Valor por defecto: Depende del navegador. Normalmente negro
H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }
Para evitar problemas conviene definirlo junto con el background.
Color de fondo (background-color)

Sintaxis: background-color: valor
Posibles valores: color | transparent
Valor por defecto: transparent
BODY { background-color: white }
H1 { background-color: #000080 }
<p style="background-color: #000080 ">parrafo con color de fondo</p>
Imagen de fondo (background-image)

Sintaxis: background-image: valor
Posibles valores: url | none
Valor por defecto: ninguno
BODY { background-image: url(/images/foo.gif) }

P { background-image: url(http://www.htmlhelp.com/bg.png) }
Cuando se define una imagen de fondo conviene definir también un background color similar para que si se desactiva la
carga de imágenes el texto siga pudiéndose leer.
<DIV STYLE="background-image: url(firefox.png);background-color: yellow ">
Atributo background-image: Tiene una función similar al background="image.gif" de HTML clásico, invocando una
imagen en formato GIF o JPG cargada en el fondo de la css
</DIV>
Repetir fondo (background-repeat)

Sintaxis: background-repeat: valor
Posibles valores: repeat | repeat-x | repeat-y | no-repeat
Valor por defecto: repeat
BODY { background: white url(candybar.gif);background-repeat: repeat-x }
repeat-x repetirá la imagen sólo horizontalmente, mientras que repeat-y lo hará verticalmente.
<DIV STYLE="background-image: url(firefox.png); background-repeat: repeat-y">
Atributo background-repeat: Este atributo permite repetir la imagen de fondo tal y como sucede con la marca BODY de
HTML. Puede asumir distintos valores: repeat (la imagen se reduplica en vertical y horizontal), repeat-x (reduplica la
imagen sólo en horizontal), repeat-y (reduplica la imagen sólo en vertical):
</DIV>
<DIV STYLE="background-image: url(firefox.png); background-repeat: repeat-x">
Atributo background-repeat: Este atributo permite repetir la imagen de fondo tal y como sucede con la marca BODY de
HTML. Puede asumir distintos valores: repeat (la imagen se reduplica en vertical y horizontal), repeat-x (reduplica la
imagen sólo en horizontal), repeat-y (reduplica la imagen sólo en vertical):
</DIV>
Background Attachment (background-attachment)

Sintaxis: background-attachment: valor
Posibles valores: scroll | fixed
Valor por defecto: scroll
BODY { background: white url(candybar.gif); background-attachment: fixed }
Posición del fondo (background-position)

Sintaxis: background-position: valor
Posibles valores: [porcentaje | longitud | top | center | bottom | left | center | right
Valor por defecto: 0% 0%
Se aplica a: Bloques y IMG, INPUT, TEXTAREA, SELECT, OBJECT
<DIV STYLE="background-image: url(firefox.png); background-position: right center">
Las hojas de estilo permiten elegir un punto de inicio para la imagen de fondo distinto del clásico ángulo superior
izquierdo. HTML clásico, de hecho, está impostado para que el fondo se visualice desde el punto extremo superior
izquierdo. Con las CSS es posible usar algunas palabras clave para la colocación vertical (top, center y bottom) y
horizontal (left, center y right). Si se expresan dos coordenadas, la primera es la horizontal y la segunda la vertical:
</DIV>
Fondo
Sintaxis: background: valor
Posibles valores: <background-color> || <background-image> || <background-repeat> || <background-attachment> ||
<background-position>
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right }
!Important
Indica que la regla marcada como importante prevalezca sobre las demás
<style>
P {color:red!important}
</style>
<p style=”color:green”>texto de color rojo>/p>
Ejemplos de distintas propiedades:

• Enlace sin subrayado
A:link, A:visited { text-decoration: none }
</style>
• Enlace subrayado sólo cuando pasa el ratón
En los enlaces que no llevan subrayado éste aparecerá sólo cuando el ratón pasa por encima gracias a la propiedad
A:hover.
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>
En el siguiente ejemplo los enlaces están subrayados por defecto pero el subrayado desaparece cuando el ratón pasa
por encima:
A:link, A:visited { text-decoration: underline }
A:hover { text-decoration: none }
</style>
• Enlace que cambia de color cuando pasa el ratón
Explotando todavía más la propiedad A:hover, es posible crear un efecto mediante el cual los enlaces tengan un color
por defecto que cambiará cuando el ratón pase por encima.
A:hover { color: red }
</style>
• Enlace que cambia color de fondo cuando pasa el ratón
Cuando el cursor del ratón pasa por encima del enlace, éste se activa con un color de texto y de fondo.
A:hover { color: white; background:blue }
</style>
• Enlace que cambia el tamaño del texto cuando el ratón lo activa
Último ejemplo de A:hover. Esta vez el texto se agranda cuando el ratón pasa por encima.
A:link { font-size: 15px }
A:visited { font-size: 15px }
A:hover { font-size: 16px }
</style>
Las hojas de estilo consideradas hasta ahora son incorporadas, ya que están colocadas entre las marcas HEAD del
documento y se refieren a todos los elementos de la página.
Exigencias particulares pueden requerir que se activen estos efectos sólo por lo que se refiere a algunos enlaces. Si por
ejemplo los enlaces se quieren subrayar excepto por lo que se refiere a un único elemento de la página, se usan las
hojas de estilo en línea de esta manera:
<A STYLE="text-decoration: none" HREF="http://www.leonsinho.com.ar">VISITA Leonsinho web</A>
• Ejemplo de jerarquía de estilos
<Html><Head>
<Style>
ul {list-Style-type:square}
ul ol {font-style:italic;color:red}
ul ol P {font-size:20pt}
</Style>
</Head>
<Body>
<Center><H2> Ejemplo de jerarquía en estilos </H2></Center>
Lo que viene a continuación es una lista:
<UL>
<LI>Primer elemento primera lista
<OL>
<LI> Primer elemento segunda lista
<LI> Segundo elemento segunda lista
<P> Párrafo dentro del elemento </P>
<LI> Tercer elemento segunda lista
</OL>
<LI> Segundo elemento primera lista
<P> Segundo párrafo </P>
<LI> Tercer elemento primera lista

</UL>
<P> Tercer párrafo </P>
</Body></Html>
• Enlaces con estilos que simulan botones
Vamos a definir la clase "enlaceboton", que es el estilo que se ha asignado para el enlace. Como sabemos, los enlaces
tienen diferentes estados (visitados, no visitados, o con el cursor del ratón por encima), así que tendremos que definir el
estilo para cada estado.
.enlaceboton { font-family: verdana, arial, sans-serif;
font-size: 10pt;
font-weight: bold;
padding: 4px;
background-color: #ffffcc;
color: #666666;
text-decoration: none;
}
.enlaceboton:link,
.enlaceboton:visited {
border-top: 1px solid #cccccc;
border-bottom: 2px solid #666666;
border-left: 1px solid #cccccc;
border-right: 2px solid #666666;
}
.enlaceboton:hover {
border-bottom: 1px solid #cccccc;
border-top: 2px solid #666666;
border-right: 1px solid #cccccc;
border-left: 2px solid #666666;
}
Como los estilos los vamos a aplicar con CSS, el enlace es tan sencillo como este:
<a href="#" class="enlaceboton">Hola!!</a>
Texto vertical
Junto con CSS3 llegan nuevos atributos, el único explorador en soportarlo es Internet Explorer.
writing-mode, que permite enderezar un texto en dirección vertical.
<p style="writing-mode: tb-rl; filter: flipv fliph">texto vertical</p>
Dar formato a las barras de desplazamiento

Si queremos que las barras de Scroll de nuestro navegador se ajusten al diseño de la web podemos cambiar su formato
con estilos. Los componentes a cambiar pueden ser los siguientes:
- FACE: color de fondo
- TRACK: color de la barra
- ARROW: Color de flecha
- 3DLIGHT: color de la luz 3D
- HIGHLIGHT: color de la luz fuerte
- SHADOW: color de la sombra
- DARCKSHADOW: color de la sombra mas oscura.
El código se debe colocar en el <HEAD> del documento.
body{
scrollbar-face-color: red;
scrollbar-highlight-color: plate;
scrollbar-shadow-color: yellow;
scrollbar-3dlight-color: blue;
scrollbar-arrow-color: orange;
scrollbar-track-color: green;
scrollbar-darkshadow-color: #000000;
}
</style>
Efectos de transición de página

Son 23 efectos diferentes de transición, se agregan en el encabezado.
Para obtener efectos similares al salir de la página basta sustituir "page-enter" con "page-exit".
Algunos ejemplos:
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=0)"> (Box in)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=1)"> (Box out)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=2)"> (Circle in)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=3)"> (Circle out)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=4)"> (Wipe up)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=5)"> (Wipe down)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=6)"> (Wipe right)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=7)"> (Wipe left)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=8)"> (Vertical blinds)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=9)"> (Horizontal blinds)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=10)"> (Checkerboard across)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=11)"> (Checkerboard down)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=12)"> (Random dissolve)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=13)"> (Split vertical in)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=14)"> (Split vertical out)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=15)"> (Split horizontal in)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=16)"> (Split horizontal out)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=17)"> (Strips left down)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=18)"> (Strips left up)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=19)"> (Strips right down)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=20)"> (Strips right up)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=21)"> (Random bars horizontal)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=22)"> (Random bars vertical)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=23)"> (Random)
Filtros en las imágenes

Blur: efecto de desenfocado de la imagen
Wave: efecto ondulado en la imagen
Flip horizontal: imagen invertida hacia la izquierda
Flip vertical: imagen dada la vuelta
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<img border="0" src="allah.gif" width="121" height="120" style="filter:wave()"></td>
<td align="center">
<img border="0" src="allah.gif" width="121" height="120" style="filter:invert()"></td>
<td align="center">
<img border="0" src="allah.gif" width="121" height="120" style="filter:flipv()"></td>
<td align="center">
<img border="0" src="allah.gif" width="121" height="120" style="filter:fliph()"></td>
<td align="center">
<img border="0" src="allah.gif" width="121" height="120" style="filter:wave()invert()flipv()"></td>
<td align="center">
<img border="0" src="allah.gif" width="121" height="120" style="filter:blur()" ></td>
</tr>
<tr>
<td align="center"><b> Wave></b></td>
<td align="center"><b>INVERTIR</b></td>
<td align="center"><b>FLIP-VERTICAL</b></td>
<td align="center"><b>Flip horizontal</b></td>
<td align="center"><b>WAVE<br>INVERT<br>Flip vertical</b></td>
<td align="center"><b>ORIGINAL</b></td>
</tr>
</table>
Opacity
La propiedad opacity funciona tanto en Internet Explorer como en Firefox, se puede aplicar en capas, imágenes,
formularios, etc…
IE:
filter: alpha(opacity=50)
Firefox:
opacity: .5
El siguiente ejemplo funciona en los dos navegadores:

<style type=”text/css”>
.ejemplo {width: 100%; background-color: red}
.opaco {filter: alpha(opacity=50); opacity: .5}
</style>
<h3 class="ejemplo">Ejemplo sin opacity.</h3>

<h3 class="ejemplo opaco">Ejemplo con opacity a 50%.</h3>
<h3><img src="allah.gif" width="100" height="109"><img src="allah.gif" class="opaco" width="100" height="109"></h3>
Degradado
El filtro Alpha Channel, capaz de aclarar con efecto degradado a cualquier objeto de nuestra página.
Para que Alpha Channel funcione correctamente hay que definir algunas propiedades:
• Width
• Height
• Background
• Filter
Width y Height definen el área en donde Alpha Channel va a actuar.
Background contendrá el color que predominará en el degradado.
Filter contiene las propiedades que le dan vida al efecto que queremos lograr.
Filter:Alpha([Opacity], [FinishOpacity], [Style], [StartX], [StartY], [FinishX], [FinishY])
Opacity: Determina cuan opaco es el color predominante en el comienzo del degradado.
FinishOpacity: Determina cuan opaco es el color predominante en el final del degradado.
Style: Determina que efecto degradé vamos a utilizar.
StartX, StartY, FinishX, FinishY: Determinan si el degradé es horizontal o vertical.
Para lograr un fondo de página con Alpha Channel puedes copiar el siguiente ejemplo:
<html>
<head>
body {margin:0; background:#0000ff}
#body {background:red;width:100%; height:100%; filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0,
StartY=0, FinishX=0, FinishY=100%)}
</style>
</head>
<body>
<div id="body"></div>
</body>
</html>
Controles del cursor

Ms Internet Explorer implementa desde la versión 4 la propiedad CSS cursor para controlar el cursor del ratón cuando el
usuario coloca el mismo en un determinado elemento. Efectos de cursor:
• Auto: El cursor se define según las impostaciones automáticas por defecto del navegador
• Crosshair: El navegador visualiza el cursor con la clásica cruz (que podría ser también una mira)
• Default: El navegador visualiza el cursor siempre en su forma estándar (generalmente una flecha dirigida hacia
arriba y hacia la izquierda)
• Hand: El cursor asume para todo el documento la forma de mano.
• Move: El cursor asume la forma típica de los elementos arrastrados
• e-resize: El cursor asume la forma de una flecha dirigida hacia la izquierda (típicamente activada cuando se
redimensionan ventanas u objetos)
• ne-resize: Flecha por defecto dirigida hacia arriba y hacia la derecha
• nw-resize: Flecha dirigida hacia lo alto y hacia la izquierda
• n-resize: Flecha no estándar dirigida hacia arriba.
• se-resize: Flecha estándar dirigida hacia abajo y hacia la derecha
• sw-resize: Flecha estándar dirigida hacia abajo y hacia la izquierda.
• s-resize: Flecha no estándar dirigida hacia abajo.
• w-resize: Flecha no estándar dirigida hacia la izquierda
• text: Al cursor se le asigna la típica forma de la barra vertical que los navegadores impostan cuando encuentran
texto sin enlaces o sin imágenes.
• Wait: El clásico cursor con forma de reloj de pulsera o de arena.
• Help: El cursor con forma de signo de interrogación que, generalmente indica la posibilidad de obtener mayor
información sobre el objeto.
<div>El navegador visualiza el cursor con la clásica cruz (que podría ser también una mira) <div style="FONT-SIZE:
12px; CURSOR: crosshair; COLOR: gray; FONT-FAMILY: arial"><b>PARA PROBAR, PASA POR AQUÍ EL
RATÓN</b></div></div>
<a href="http://usuarios.lycos.es/leonsinho" style="CURSOR:help">página del webmaster</a>
Colocación dinámica
Los documentos HTML se colocan dentro de la página según un esquema de flujo de datos. Esto significa que se parte
del margen superior izquierdo del documento y cada elemento se coloca en base al anterior, sin posibilidad de
superponer objetos. Las especificaciones de las CSS-P (CSS positioning) permiten, sin embargo, tres tipos distintos de
colocación:
• estática: se trata de la colocación predefinida por el navegador, es decir la tradicional de HTML, por la que cada
elemento se coloca según el flujo de datos del documento;
• absoluta: este tipo de colocación permite abstraer la CSS del flujo de datos, permitiendo su colocación en cualquier
punto de la página de manera completamente independiente de los demás elementos, los cuales pueden además
superponerse por encima o por debajo.
• relativa: dicha colocación no sale del flujo de datos ni produce ninguna modificación respecto a los elementos
colocados de manera estática. Asume características propias de la colocación dinámica cuando se impostan las
propiedades left y right, que mueven el elemento a la izquierda y arriba del que lo precede.
La colocación absoluta y relativa permiten a los elaboradores sistematizar con precisión elementos en el documento,
superponerlos y, mediante los script, moverlos.
He aquí un ejemplo de colocación absoluta con uso de las propiedades top y left:
<DIV STYLE="position:absolute; top:100px; left:100px">
<IMG SRC=" firefox.png" border=0>
</DIV>
Las medidas se expresan en píxel (px), pero se pueden expresar también con otros valores: puntos (pt), centímetros
(cm), pulgadas (in), etc. Todas hacen referencia al margen superior izquierdo.
El ejemplo que consideramos crea una hoja de estilo con colocación absoluta (position:absolute) distanciada del margen
superior e izquierdo de 100 píxel. Todo lo que se encuentra dentro de la CSS (la imagen elemento01.gif) se colocará de
esta manera.
Para comprender la diferencia práctica entre colocación absoluta y relativa, pongamos otro ejemplo. Se trata de un
sencillo texto sin ningún tipo de formato, que el documento interpreta como flujo de elementos. Dentro de este texto,
agregamos una colocación relativa de las palabras "mucho material", con una distancia del elemento a la izquierda más
cercano de 10 píxel y 10 píxel hacia abajo:
En tripod Leonsinho puede encontrar <SPAN STYLE="position:relative; top:10px; left:10px"><B>mucho
material</B></SPAN> : Decenas de tutorialiales de diferentes temas.
Hemos usado la marca SPAN en lugar de DIV ya que esta última es más apropiada para secciones de texto de una
cierta envergadura, mientras que la primera se adapta mejor a frases breves como ésta. Otra consideración se refiere al
salto de línea que DIV impone a los elementos.
Otros parámetros que pueden agregarse son width y height que establecen, respectivamente, la anchura en horizontal
y la altura en vertical de la capa. También en este caso pueden usarse indiferentemente las medidas permitidas por las
hojas de estilo:
<DIV STYLE="position:absolute; top:300px; left:300px; width:150px; height:150px">
Otros parámetros que pueden agregarse son width y height que establecen, respectivamente, la anchura en horizontal
y la altura en vertical de la capa
</DIV>
La propiedad visibility determina la visibilidad de un elemento. Puede ser hidden o visible
<DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px; visibility:hidden">
<IMG SRC="firefox.png" border=0>
</DIV>
hidden hace invisibles los elementos, mientras visibile los hace visibles:
<DIV STYLE="position:absolute; top:100px; left:150px; width:200px; height:150px; visibility:visible">
<IMG SRC="firefox.png" border=0>
</DIV>
Se ha dicho al inicio que las CSS-P permiten superponer imágenes, texto y elementos de unos y otros. La jerarquía con
la cual se superponen dichos elementos depende, si no se establece de otra forma, de la colocación en el código HTML.
Un elemento colocado detrás de otro se superpondrá a éste, como en el ejemplo que sigue
<IMG SRC="elemento01.gif" border=0>
</DIV>
</DIV>
Es posible modificar como se superponen las capas mediante la propiedad z-index. Esta propiedad define el orden
gráfico de los elementos mediante valores numéricos. El elemento principal se indica como valor positivo "1", mientras
los otros, que están en posición inferior, lo hacen con valor negativo "-1". Retomando el ejemplo precedente y dejando
inalterado el orden jerárquico, es posible superponer el segundo elemento al primero gracias a la propiedad z-index:
<DIV STYLE="position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible z-index:1">
</DIV>
<DIV STYLE="position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible z-index:2">
</DIV>
La propiedad overflow permite gestionar, mediante el uso de scroller, los contenidos de los documentos que sobrepasan
el área indicada con height y width. Para ello, es necesario que la propiedad overflow este en "scroll" y no en "hidden".
En este segundo caso, de hecho, los elementos se visualizan con los límites del tamaño del área de recorte pero sin el
scroller lateral:
<DIV STYLE="position:absolute; overflow:scroll; float:left; top:10px; left:10px; width:150px; height:100px">
HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de
Javascript, de applet Java, de demo para Dynamic HTML.
</DIV>
<DIV STYLE="position:absolute; overflow:hidden; float:left; top:150px; left:10px; width:150px; height:100px">
HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de
Javascript, de applet Java, de demo para Dynamic HTML.
</DIV>
Todos los elementos soportan la colocación estática y relativa; la colocación absoluta sólo los siguientes:
• Applet • IFrame • Select
• Button • IMG • Span
• Div • Input • Table
• Fieldset • Object • Textarea
Con CSS-P podemos obtener títulos con efecto de sombreado usando simple texto en lugar de imágenes. Se crea un
texto asignándole un estilo, un tamaño y una cierta colocación absoluta en la página:
<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:10px; left:600px; color:black; z-index:1">
CSS
</DIV>
Para el texto se ha usado la fuente impact de tamaño igual a 100 píxel y color negro, distanciado 600 píxel del margen
izquierdo y superior. La propiedad z-index tiene el valor positivo 1. Hasta aquí nada de particular, visto que se trata de un
texto negro sin sombreado. Para insertar la sombra, tenemos que añadir este código:
<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:15px; left:605px; color:gray; z-index:-1">
CSS
</DIV>
El texto queda del mismo tamaño y con el mismo estilo pero cambia el color (del black precedente al gray actual). La
distancia del estilo del margen superior e izquierdo aumenta respectivamente 5 píxel y la propiedad z-index está
impostada en el valor negativo -1. Todo esto crea el primer texto superpuesto al segundo, el cual al estar distanciado 5
píxel pero ser de igual dimensión, crea un efecto sombreado.
Textscroll
La propiedad Overflow es capaz de generar un scroll cuando el contenido dentro de un elemento excede las
propiedades de su ancho y su alto. Podemos usar la propiedad Overflow si queremos tener un mayor control sobre
nuestras capas. Para que Overflow funcione correctamente hay que definir las siguientes propiedades:
• Background
• Width
• Height
• Overflow
• Visible (opcional)
• Hidden (opcional)
• Auto (opcional)
• Inherit (opcional)
Para generar un scroll en cualquier parte del texto puedes copiar el siguiente ejemplo:
<html><head>
h4 {background: white; width:200px; height:100px; overflow: scroll}
</style>
</head><body>
<h4>Aquí me pongo a cantar al compás de la vigüela, que el hombre que lo desvela una pena extraordinaria, como la
ave solitaria con el cantar se consuela.<br>José Hernández<br><u>El gaucho Martín Fierro</u></h4>
</body></html>
Bisel exterior
¿Cómo aplicar un efecto de bisel en una capa? Para lograr que el efecto funcione hay que definir algunas propiedades:
• Position
• Background
• Width
• Top
• Left
Position contendrá el valor "relativo" que nos permitirá cambiar el valor de Top y Left.
Background será definido en dos oportunidades y contendrá el color de base y el color de sombra.
Width contendrá el ancho de la capa.
Top y Left serán definidos en dos oportunidades y contendrán los valores de posición de la capa base y capa sombra.
Para lograr el bisel exterior puedes copiar el siguiente ejemplo:
<html><head>
body {background:#626262}
#sombra {position:relative; background:black; width:100%; top:-1px; left:1px}
#base {position:relative; background:#D7D7D7; top:-1px; left:-1px;}
</style>
</head><body>
<div id="sombra">
<div id="base">
bisel exterior
</div>
</div>
</body></html>
Un texto sobre una imagen

<DIV Id="cont1" STYLE = "position:absolute; top:50px; left:100px">
<IMG src="Image1.gif" width=200 height=250>
</DIV>
<DIV Id="cont1" STYLE="position:absolute; top:75px; left:75px; width:400px; height:400; font-size:48pt; color:blue">
Este texto está por encima de la imagen
</DIV>
CSS y JavaScript
Como cambiar de estilo de una celda utilizando css y algo de javascript.
Primero definimos dos estilos; el out y el over. El primero se activará cuando estamos fuera de la celda, y el segundo
cuando estamos dentro de ella.
.out {background: red; border: 1px dotted blue; font: normal bold 12px Verdana; width: 100%; height: 30px}
.over {background: blue; border: 1px dotted red; font: normal bold 12px Verdana; color: white; width: 50%; height: 30px}
Ahora solo falta insertar el siguiente código html para que el ejemplo funcione:
<span class="out" ONMOUSEOVER="this.className='over';" ONMOUSEOUT="this.className='out';">CSS y
JavaScript</span>
Una barra de navegación (http://usuarios.lycos.es/leonsinho/cuba)

<script language="javascript">

</script>
<style>

</style>
</head><body>
<table width="180" cellpadding="2" cellspacing="1" id="table1">
<tr>
<td id="cel0" onmouseover="mousein(cel0);" onmouseout="mouseout(cel0);" bgcolor="#FF0000" height="20"
style="color: white; font-family: Arial; font-size: 10pt; font-weight: normal"><strong><font face="Arial" size="2">
<a href="http://usuarios.lycos.es/leonsinho/cuba" style="text-decoration: none; color: white"> Brigadas Solidarias
</a></font></strong></td>
</tr>
<tr>
<a href="http://usuarios.lycos.es/leonsinho/cuba/12brigadasur.html" style="text-decoration: none; color: white">XII
Brigada Suramericana </a></font></strong></td>
</tr>
<tr>
<a href="http://usuarios.lycos.es/leonsinho/cuba/proximabrigadasur.html" style="text-decoration: none; color: white">
Próximas brigadas</a></font></strong></td>
</tr>
<tr>
style="color: white; font-family: Arial; font-size: 10pt; font-weight: normal"><strong> <a
href="http://usuarios.lycos.es/leonsinho"> <font face="Arial, Helvetica, sans-serif" color="#FFFFFF">
<span style="text-decoration: none">Página personal</span></font></a></strong></td>
</tr>
<tr>
style="color: white; font-family: Arial; font-size: 10pt; font-weight: normal"><strong><a
href="http://usuarios.lycos.es/leonsinho/visitas.html"> <font face="Arial, Helvetica, sans-serif" color="#FFFFFF">
<span style="text-decoration: none">Libro de visitas</span></font></a></strong><font size="2" face="Arial, Helvetica,
sans-serif"><strong><a href="Web/leonsinho/cuba/fidel.html" style="text-decoration: none; color: white">
</a></strong></font></td>
</tr>
<tr>
<a href="http://www.leonsinho.com.ar" target="_blank"> <span style="color: #FFFFFF; text-decoration: none">Leonsinho
web</span></a> </font></strong></td>
</tr>
<tr>
style="color: white; font-family: Arial; font-size: 10pt; font-weight: normal"><strong><a
href="mailto:leonsinho@ciudad.com.ar"><span style="color: #FFFFFF; text-decoration:
none">Contacto</span></a></strong></td>
</tr>
</table>
Shorthand
Como escribir de forma reducida nuestras reglas CSS para que nuestros archivos de estilo tengan menor peso y sean
más entendibles a la hora de una actualización.
Según la W3C hay dos formas de escribir la misma regla de CSS: la estándar y la shorthand. Una es la larga y la otra es
la reducida.
Propiedad Font (fuente)
font-style || font-variant || font-weight || font-size / line-height || familia de fuente
Ejemplo:
P {font: italic normal bold 12px/14pt Verdana, Tahoma, Arial}
Propiedad Background (fondo)

background-color || background-image || background-repeat || background-attachment || background-position
Ejemplo:
Body {background: #FFF url(../images/ejemplo.gif) no-repeat fixed center}
Margin (Margen)
longitud | porcentaje | auto
Ejemplo:
Body {margin: 5px} /* todos los márgenes a 5px */
P {margin: 2px 4px} /* márgenes superior e inferior a 2px, márgenes izquierdo y derecho a 4px */
DIV {margin: 1px 2px 3px 4px} /* margen superior a 1px, right margin a 2px, bottom margin a 3px, left margin a 4px */
Padding (Relleno)
longitud | porcentaje | auto
Ejemplo:
Body {padding: 2em 3em 4em 5em} /* Si definimos cuatro valores estamos aplicando el padding superior, derecho,
inferior e izquierdo */
Body {padding: 2em 4em) /* Si definimos dos o tres valores, los valores faltantes se toman del lado opuesto: superior e
inferior a 2em, derecho e izquierdo a 4em */
Body {padding: 5em} /* Si definimos un solo valor se aplican a todos los lados */
Border (Borde)
border-width || border-style || color
Ejemplo:
H3 {border: thick dotted blue}
Unidades
Unidades de Longitud
El formato de una valor de longitud es un signo opcional + o -, seguido por un número y una unidad de medida sin
espacios; P.ej., 1.3 em no es válido, pero 1.3em sí es válido.
Tipos de unidades relativas:
• em (ems, la altura de la fuente, normalmente la altura de las mayúsculas)
• ex (la mitad de la altura de la fuente, normalmente la altura de la letra "x")
• px (pixels, relativos a la resolución del lienzo)
Tipos de unidades absolutas:
• in (pulgadas; 1in=2.54cm)
• cm (centimetros; 1cm=10mm)
• mm (milimetros)
• pt (puntos; 1pt=1/72in)
• pc (picas; 1pc=12pt)
Unidades de porcentaje
Un valor de porcentaje está formado por un signo opcional + o -, seguido por un número y % sin espacios; P.ej., 3%.
Unidades de color
Un valor de color es un nombre de color o una descripción numérica RGB.
Los valores numéricos RGB se pueden dar de 4 maneras:
• #rrggbb (P.ej., #00cc00)
• #rgb (P.ej., #0c0)
• rgb(x,x,x) donde x es un número entero entre 0 y 255 inclusive (P.ej., rgb(0,204,0))
• rgb(y%,y%,y%) where y es un número entre 0.0 y 100.0 inclusive (P.ej., rgb(0%,80%,0%))
Los ejemplos anteriores especifican todos el mismo color.
URLs
Los valores de URL tienen la sintaxis url(nombre), en donde nombre es la URL. La URL puede estar escrita,
opcionalmente, entre comillas sencillas (') o dobles (").
Paréntesis, comas, espacios, comillas sencillas o dobles que queramos que sean escritas literalmente dentro de la URL
deberán ser precedidas de una contrabarra.
BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */

Css Ejercicios

Î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

Css Ejercicios

Încărcat de

Drepturi de autor:

Formate disponibile

Ejemplos y ejercicios CSS 1

CASCADING STYLE SHEETS (CSS)

Estilos indicados en el encabezado del documento:

Definiendo estilos particulares.

Definiendo clases de estilos.

Definiendo estilos contextuales

Estilo de fuente (font-style)

Variante de fuente (font-variant)

Peso de fuente (font-weight)

Tamaño de fuente (font-size)

Separación entre palabras (Word-Spacing)

Espaciado entre letras (letter-spacing)

Decoración de texto (text-decoration)

Alineación vertical (vertical-align)

Transformaciones del texto (text-transform)

Alineación de texto (text-align)

Ejemplo: Doble espacio

Grosor de los bordes

Color del borde (border-color)

Estilo de los bordes (border-style)

Espacios en blanco (white-space)

Estilos de lista (list-style-type)

Estilos de imágenes en las listas (list-style-image)

Posición de estilos de lista (list-style-position)

Estilos de lista (list-style)

Color de fondo (background-color)

Imagen de fondo (background-image)

BODY { background-image: url(/images/foo.gif) }

Repetir fondo (background-repeat)

Background Attachment (background-attachment)

Posición del fondo (background-position)

Ejemplos de distintas propiedades:

<LI> Tercer elemento primera lista

Dar formato a las barras de desplazamiento

Efectos de transición de página

Filtros en las imágenes

El siguiente ejemplo funciona en los dos navegadores:

<h3 class="ejemplo">Ejemplo sin opacity.</h3>

Controles del cursor

Un texto sobre una imagen

Una barra de navegación (http://usuarios.lycos.es/leonsinho/cuba)

p {font-family: Arial, Helvetica, sans-serif;color: #000000;}

Propiedad Background (fondo)

S-ar putea să vă placă și