You are on page 1of 24

Hojas de estilo: CSS

Con la intenci on de separar el contenido de la presentaci on y de ofrecer mayores y m as f aciles posibilidades de presentaci on el W3 Consortium sugiri o la utilizaci on de las Hojas de Estilo (CSS, Cascade Style Sheet) en la Web. En la actualidad las especicaciones CSS se encuentran en el nivel 2, aunque las del nivel 1 (CSS1)son las m as soportadas.

1.

Sintaxis CSS
Una hoja de estilo est a formada de un conjunto de reglas de estilo que le dice al

navegador como presentar un documento. Cada regla de estilo consta de dos partes: Selector { propiedad: valor;... } 1. Selector. Representa una etiqueta est andar del HTML. 2. Declaraci on. Viene denido por un par propiedad:valor separados entre si por dos puntos. En propiedad indicamos que caracter stica (tipo de fuente, color, etc...) queremos cambiar y en valor el valor que le damos. H1 { color: blue } Para no repetir reglas que se aplican sobre las mismas etiquetas se pueden agrupar los selectores. Por ejemplo, todas las cabeceras van a tener el mismo color: H1, H2, H3, H4, H5, H6 { color: blue } Tambi en se pueden a nadir comentarios dentro de los cheros css de la siguiente manera: /* COMMENTS CANNOT BE NESTED */

1.1.

Denici on

Hay tres maneras de denir los estilos: 1. Se pueden declarar directamente sobre la etiqueta HTML:

<ETIQUETA style="propiedad:valor;....">... </ETIQUETA>

Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on

Por ejemplo si a un p arrafo le queremos dar un tama no de fuente 10 y un margen izquierdo de 20 pts.

<P STYLE="font-size:10pt; margin-left:20pt;"> Mi Primer p arrafo con Estilo </P>

2. Se pueden denir en su conjunto para toda la p agina HTML:

<STYLE TYPE="text/css"> <!...... etiqueta {propiedad:valor; .........} ...... --> </STYLE>

Un ejemplo ser a:

<HTML> <HEAD>

Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on

<TITLE>Ejemplo CSS</TITLE> <STYLE TYPE="text/css"> <!BODY {margin-left: 0.5in; margin-right: 0.5in} H1 {color:blue;} P {font-size:10pt; marginleft:20pt;} --> </STYLE> </HEAD> <BODY> <H1>Titulo en azul</H1> <P>P arrafo con letra 10</P> </BODY> </HTML>

3. Se pude especicar en un chero externo. Esta manera es la m as exible y recomendada, ya que el estilo asociado a una p agina HTML se puede cambiar sin modicar el c odigo de dicha p agina y adem as la misma hoja de estilo se puede compartir con diferentes documentos. Para enlazar la hoja de estilo con una p agina HTML se puede utilizar la etiqueta LINK: Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 3

<HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="hoja_estilos.css"> </HEAD> ...... </HTML>

El chero hoja estilos.css es un simple chero de texto con extensi on .css en el que se dene la hoja de estilo.

/*Fichero hoja_estilos.css*/ BODY {margin-left: 0.5in; margin-right: 0.5in} H1 {color:blue;} P {font-size:10pt; marginleft:20pt;} /*Fin del fichero hoja_estilo.css*/

1.2.

Orden de aplicaci on

Estos tres modos de denir estilos pueden convivir en la misma p agina html, pero si sobre un mismo elemento se han denido diferentes estilos, s olo se aplicar a uno de ellos de acuerdo a las siguientes reglas, ordenadas de menor a mayor prioridad: 1. Las denidas por el navegador Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 4

2. Hoja de estilo externa 3. Hoja de estilo interna (dentro de la etiqueta head) 4. Directamente sobre la etiqueta HTML Por ejemplo, una hoja de estilo externa tiene las siguientes propiedades para el selector h3: h3 { color: red; text-align: left; font-size: 8pt } Y una hoja de estilo externa tiene estas propiedades tambi en para el selector h3: h3 { text-align: right; font-size: 20pt } Si la p agina con la hoja de estilo interna tambi en est a enlazada con la hoja de estilo externa, las propiedades para h3 ser an: color: red; text-align: right; font-size: 20pt El color es heredado desde la hoja de estilo externa, y el text-alignment y el font-size son reemplazados por las de la hoja de estilo interna.

2.

Propiedades de las hojas de estilo


Las propiedades est an divididas en 6 grandes grupos que facilitan su utilizaci on y

documentaci on.

Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on

2.1.

Propiedades de texto

Son propiedades que afectan a la presentaci on visual de caracteres, espacios, palabras y p arrafos. Las propiedades que podemos utilizar son las siguientes: color. Especicamos el color del primer plano del contenido del texto. Nombre Color | Valor HEX | Rgb (R %,G %,B %) | Rgb(R, G,B) Ejemplo: H1{color:red}

text-transform. Especica, por medio de palabras reservadas, si las letras del texto deben transformarse en may usculas, min usculas, s olo la primera letra de cada palabra en may usculas, o si ha de dejarse como est a. uppercase | lowercase | capitalize | none Ejemplo: H1 {text-transform:uppercase} vertical-align. Alineaci on vertical del texto en relaci on con la l nea base del texto. baseline | sub | super | top | text-top | middle | mottom | text-bottom Ejemplo: STRONG {vertical-align:sub} text-align. Fija la alineaci on del bloque, al margen izquierdo, al derecho, centrado o a ambos. left | right | center | justify Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 6

Ejemplo: H1{text-align: center} text-indent. Fija la sangr a o indentaci on de la primera l nea del texto. XX unidad | % Ejemplo: P {text-indent:2em} line-height. Indica la distancia entre dos lineas adyacentes. normal | XX unidad | % text-decoration. Fija una o m as caracter sticas decorativasdel texto, como subrayado, lineas superiores, caracteres tachados o parpadeantes. Si se aplica a un elemento de bloque la heredan s olo los descendientes que sean de texto (o en-linea). Si se aplica a uno de estos la heredan todos los descendientes. underline | overline | line-through | blink | none Ejemplo: H1 {text-decoration: underline} letter-spacing. Especica el espaciado entre letras. En el caso de especicar una longitud esta se sumara a la normal. normal | XX unidad Ejemplo: H1{letter-spacing: 0.5pc} word-spacing. Especican el espaciado entre palabras. En el caso de especicar una longitud esta se sumara a la normal. normal | XX unidad Ejemplo: H1 { word-spacing: 0.5pc} Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 7

2.2.

Propiedades de las fuentes

Con estas propiedades controlamos el estilo de una fuente, su tama no, su familia, su grosor, etc. Las propiedades que podemos utilizar son las siguientes: font-family.Indicamos la familia de la fuente a utilizar. Sus posibles valores son los nombres de las fuentes, pudiendo especicar un conjunto de familias. Se selecciona la primera que se encuentra en el sistema. Ejemplo: BODY{ font-family: Verdana, Arial, Helvetica, sans-serif}

font-style. Especica el estilo de la fuente, es decir, si los caracteres ir an en normal, en it alica (cursiva) o en oblicua (un poco m as inclinada que la it alica). normal | italic | oblique Ejemplo: H1,H2,H3{font-style:italic}

font-weight.Especica el peso, densidad o grosor (cantidad de espacio ocupado en relaci on con el rect angulo en que se inscribe el car acter) de la fuente de caracteres dentro de una familia de fuentes, con valores entre 100 y 900 siendo cada vez m as densos. El valor 400 equivale a normal, y el 700 a bold. lighter | normal | bold | bolder | 100 | 200 | 300 | ...... | 900 Ejemplo: Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 8

STRONG{font-weight:bolder}

font-size. Especica el tama no de la fuente. XX units | % | larger | smaller | xx-small | x-small | medium | large | x-large | xx-large Ejemplo: H1 {font-size: 150%}

2.3.

Propiedades del fondo

Son las propiedades que permiten jar el color del primer plano y fondo de un elemento. Las propiedades que podemos utilizar son las siguientes: background-color. Especica el color del fondo del elemento, que puede ser un color o la palabra reservada transparent. transparent | Nombre Color | Valor HEX | Rgb (R %,g %,B %) | Rgb(R, G,B) Ejemplo: H1{background-color:#0000FF}

background-image. Designa una imagen para rellenar el fondo del elemento por medio de una URL o la palabra reservada none para indicar que no se utilizara ninguna imagen. Puede jarse tambi en un color que se colocar a debajo de la imagen, y que asomar a si la imagen no est a disponible o, si lo est a, detr as de sus zonas transparentes. none | url(direcci on) Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 9

Ejemplo: H1 {background-image: white url("fondo.gif")}

background-attachment. Establece si una imagen de fondo es ja o se mueve con el scroll del resto de la p agina. S olo funciona con la etiqueta body. scroll | xed Ejemplo: body { background-image: url(fondo.gif); background-attachment: scroll }

background-repeat. Establece si una imagen si se repetir a y c omo. En Netscape no funciona con la etiqueta body. repeat | repeat-x | repeat-y | no-repeat Ejemplo: body { background-image: url(fondo.gif); background-attachment: scroll }

Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on

10

2.4.

Propiedades de margenes y padding

Con estas propiedades especicamos los margenes de cualquier elemento y con el padding controlamos la distancia entre el borde y el contenido. Las propiedades que podemos utilizar son las siguientes: margin-top, margin-bottom, margin-left, margin-right. Fijamos el margen superior, inferior, izquierdo o derecho. Con la propiedad auto el navegador un valor adecuado dependiendo del tipo de elemento. XX unidades | % | auto (el valor por defecto es 0) Ejemplo: BODY {margin-top:1cm}

margin.Mediante esta propiedad podemos especicar todos los valores de los margenes de una sola vez. Se pueden poner hasta cuatro valores, para especicar cada uno de los margenes. margin: ancho1 ancho2 ancho3 ancho4 Pero si s olo especicamos ancho1 se reere a los cuatro lados del margen. Si se especican dos valores, ancho1 se reere a los lados superior e inferior y ancho2 al izquierdo y derecho. En el caso de poner los tres primeros, ancho1 se reere al lado superior, ancho2 al izquierdo y derecho y ancho3 al inferior. Ejemplo: BODY {margin: 1in 2in}

padding-top, padding-bottom, padding-left, padding-right. Distancia entre el borde superior, inferior, izquierdo o derecho y el contenido. XX unidades | % Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 11

Ejemplo: Table {padding-top: 12pt}

padding. Mediante esta propiedad podemos denir en una u nica propiedad los cuatro valores anteriores. Funciona de la misma manera que la propiedad margin. margin: ancho1 ancho2 ancho3 ancho4 Ejemplo: H1 {padding:10%}

2.5.

Propiedades del borde

Con estas propiedades especicamos el ancho, color y estilo del area de borde. Las propiedades que podemos utilizar son las siguientes: border-top-width, border-bottom-width, border-left-width, border-rightwidth. Mediante estas cuatro propiedades especicamos el ancho del area de borde por encima, debajo, a la izquierda y derecha del elemento. thin | medium | thick | XX unidad Ejemplo: H1 {border-top-width:thin}

border-width. Especicamos en una u nica propiedad el ancho de todo el area de borde. Funciona de la misma manera que la propiedad margin. thin | medium | thick | XX unidad Ejemplo: Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 12

H1 { border-width: thin thick medium}

border-style. Especicamos el estilo de visualizaci on del borde. Los posibles valores son: none: ninguno, anchura cero dottet: punteado dashed: discontinuo solid: liso double: doble groove: hundido ridge: resaltado inset: toda la caja hundida outset: toda la caja resaltada none | dottet | dashed | solid | double | groove | ridge | inset | outset Ejemplo: Table {border-style: double}

border-color. Especicamos el color del borde. nombre del color | valor HEX | Rgb (R %, G %, B %) | Rgb (R,G,B) Ejemplo: Table {border-color: red}

border-top, border-bottom, border-left, border-right. En cada una de las cuatro propiedades podemos especicar en conjunto todas las caracter sticas de cada uno de los lados del borde: tama no, estilo y color. Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 13

anchura | estilo | color Ejemplo: Table {border-top: thin dashed red}

border. Mediante esta propiedad podemos especicar de forma conjunta todas las propiedades de un borde: tama no, estilo y color. anchura | estilo | color Ejemplo: Table {border: thick double red}

2.6.

Propiedades de lista

Son propiedades que afectan a la presentaci on visual de las marcas de los elementos de una lista. Las propiedades que podemos utilizar son las siguientes: list-style-image. Reemplaza el marcador de los elementos de una lista por una imagen. url () | none Ejemplo: ol { list-style-image: url(blueball.gif); }

list-style-type. Dene el tipo de marcador de los elementos de una lista. Algunos navegadores s olo soportan el valor disc. Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 14

none | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha Ejemplo: ul { list-style-type: disc }

list-style-position. Dene si el marcador se situa como parte del texto o lo mantiene a la izquierda del texto. inside | outside Ejemplo: ol { list-style-position: inside }

3.

Selectores avanzados:Class e ID
Estos tipos de selectores permiten la asignaci on de estilos de una manera independiente

de los elementos del documento. Estos selectores pueden ser usados s olos o en conjunci on con etiquetas. El selector Class necesita una modicaci on en el documento html donde se va a aplicar, es decir las etiquetas necesitan el atributo CLASS:

<P CLASS="importante">NOTA: Es necesario incluir el atributo CLASS </P> <H3 CLASS="importante">

Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on

15

En la hoja de estilo se debe a nadir:

.importante {color:red;}

El . indica que es un selector class. Si queremos a nadir clases a etiquetas concretas, ser a de la siguiente manera:

P.importancia{color:red;}

Los selectores ID son diferentees a los selectores class. Mientras que un selector class puede ser aplicado a diferentes elementos en una p agina, un serlector id siempre se aplica a un u nico elemento. Un atributo ID debe ser u nico en el documento. Adem as su sintaxis es diferente, van precedidos de un #. #importancia{color:red;} p#para1 { text-align: center; color: red }

Para aplicarlos sobre una etiqueta es decesario el atributo ID. <P ID="importante">NOTA: Es necesario incluir el atributo CLASS </P>

La diferencia entre estos dos tipos de selectores es que Class puede ser usado varias veces en el mismo documento mientras que el selector ID solamente puede ser aplicado una y s olo una vez. Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 16

4.

Pseudo-Clases y Pseudo-Elementos
Son clases y elementos especiales que son autom aticamente reconocidos por los navega-

dores que soportan CSS. Las pseudo-clases distinguen entre diferentes tipos de elementos (por ejemplo, enlaces visitados o activos). Los pseudo-elementos se reeren a subpartes de los elementos como la primera letra de un p arrafo. Las reglas con pseudo-clases tienen la siguiente sintaxis:

selector:pseudo-clase { propiedad: valor } o selector:pseudo-elemento { propiedad: valor }

Estos selectores no se deber an especicar con el atributo CLASS de HTML. Se pueden usar tambi en con selectores clases:

selector.clase:pseudo-clase { propiedad: valor } o selector.clase:pseudo-elemento { propiedad: valor }

4.1.

Pseudo-clases del ancla

En CSS1 s olo hay tres pseudo-clases y son asignadas al elemento A para mostrar de diferente manera los enlaces no visitados, los activos, los visitados y cuando el rat on pasa sobre un enlace.

A:link

{ color: red }

Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on

17

A:active

{ color: blue; font-size: 125% }

A:visited { color: green; font-size: 85% } A:hover {}

4.2.

Pseudo-elemento primera l nea

Permite cambiar el estilo a la primera l nea de un elemento de nivel de bloque como puede ser el p arrafo. Un ejemplo podr a ser:

P:first-line { font-variant: small-caps; font-weight: bold }

4.3.

Pseudo-element primera letra

Este pseudo-elemento es utilizado para cambiar el estilo de la primera letra de un elemento de nivel de bloque. Por ejemplo:

P:first-letter { font-size: 300%; float: left }

Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on

18

5.

Unidades de longitud
Un valor de longitud se forma por un signo + o - opcional, seguido de un n umero y

de una abreviaci on de dos letras que indica la unidad. No hay espacios en un valor de longitud (1.3em). Una longitud de 0 no necesita las dos letras para identicar la unidad.

5.1.

Relativas

Las unidades relativas dan una longitud relativa a otra propiedad longitud. Las siguientes unidades relativas est an disponibles: em (ems, la altura de la fuente de los elementos) ex (x-height, altura de la letra x) px (pixels, relativa a la resoluci on del lienzo)

5.2.

Absolutas

Las unidades de longitud absolutas son muy dependientes del medio de salida, y son por lo tanto menos u tiles que las unidades relativas. Las siguientes unidades absolutas est an disponibles: in (pulgadas; 1 pulgada=2.54 cm) cm (cent metros; 1 cm = 10 mm) mm (mil metros) pt (puntos; 1pt = 1/72 pulgada) pc (picas; 1 pc = 12 pt)

6.
6.1.

CSS Avanzado
Selector universal

El selector universal se escribe con un asterisco (*) y representa a cualquier elemento de la p agina. Por ejemplo, con: * {color: red} Todos los elementos de la p agina tendr an como color de primer plano el rojo Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 19

6.2.

La regla @import

La regla @import permite importar hojas de estilo desde otras hojas de estilo. Se puede usar de las siguientes formas: @import "hoja_de_estilo.css"; @import url("hoja_de_estilo.css"); Esta declaraci on debe ir antes que cualquier otra regla en la hoja de estilo.

6.3.

La regla !important

la regla !important, suplantar con sus propias reglas de estilo las especicadas por el autor del documento. De este modo, los usuarios con requerimientos espec cos pueden modicar las opciones del creador de las p aginas Web con el n de mejorar su accesibilidad. Los navegadores tienen opciones que permiten modicar la apariencia de las p aginas visitadas. Estas opciones constituyen de hecho la hoja de estilo del usuario. Explorer, adem as de las opciones disponibles en los men ues, permite usar una hoja de estilo externa. De este modo, el usuario obtiene la m axima exibilidad para aplicar sus preferencias. Probar la siguiente hoja de estilo: * { visibility: background-color: background-image: background-repeat: hidden visible black no-repeat !important;} !important; !important; !important; !important;}

BODY { visibility:

url(borrando.gif) !important;

background-position: 200px 120px

Depu es, editar las Propiedades de Internet de Explorer y en la opci on General-Accesibilidad indicar la posici on de su hoja de estilo.

6.4.

Propiedad del cursor

Especica el tipo de cursos que ser a mostrado cuando se se nale un elemento. url() | default | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 20

Ejemplo: h2 { cursor: crosshair } p { cursor : url("first.cur"), url("second.cur"), pointer }

6.5.

Propiedades de posicionamiento

Estas propiedades permiten especicar, de manera relativa o absoluta la posici on de un elemento, su forma y especifcar lo que deber a pasar si el contenido de un elemento es m as grande que el area especifcada. position. Sit ua un elemento en su posici on normal, en una posici on relativa con respecto al elemento anterior o en cualquier posici on ja de la p agina. auto | relative | absolute Ejemplo: h1 { position:absolute; top:150px; } top. Especica la situaci on del borde superior de un elemento. auto | % | unidad Ejemplo: Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 21

h1 { position:absolute; top:150px; } bottom. Especica la situaci on del borde inferior de un elemento. auto | % | unidad Ejemplo: h1 { position:absolute; bottom:150px; } left. Especica la situaci on del borde izquierdo de un elemento. auto | % | unidad Ejemplo: h1 { position:absolute; top:150px; left:30px; } right. Especica la situaci on del borde derecho de un elemento. auto | % | unidad Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on 22

Ejemplo: h1 { position:absolute; top:150px; right:30px; } clip. Especica la forma de un elemento. rect (top, right, bottom, left) | auto Ejemplo: img { clip: rect(10px, 5px, 10px, 5px) }

overow. Especica qu e sucede cuando el contenido de un elemento es mayor que el area de visualizaci on. visible | hidden | scroll | auto Ejemplo: div { background-color:#00FFFF; width:150px; height:150px; overflow: scroll }

Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on

23

z-index. Indica el orden de superposici on de los elementos en el caso de que coincidan en el mismo espacio. Un elemento con un n umero m as alto siempre se posicionar a encima de un elemento con menor n umero. auto | entero Ejemplo: img.x { position:absolute; left:0px; top:0px; z-index:1 }

7.

Bibliograf a
HTML din amico http://html.programacion.net/dinamico/tutorial/indice.htm CSS Cascading Style Sheets, level 1 http://www.w3.org/TR/REC-CSS1 CSS Cascading Style Sheets, level 2 http://www.w3.org/TR/REC-CSS2/ Listado de propiedades soportadas por los navegadores http://www.webreview.com/style/

Traducci on de la especicaci on CSS2: http://www.sidar.org/recur/desdi/traduc/es/css/cover.html

Hojas de estilo:CSS Sistemas Hipermedia: Dise no y Evaluaci on

24

You might also like