Hojas de estilo: CSS

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

1.

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

navegador como presentar un documento. Cada regla de estilo consta de dos partes: Selector { propiedad: valor;... } 1. Selector. Representa una etiqueta est´ndar del HTML. a 2. Declaraci´n. Viene definido por un par propiedad:valor separados entre si por o 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´n se pueden a˜adir comentarios dentro de los ficheros css de la siguiente manera: e n /* COMMENTS CANNOT BE NESTED */

1.1.

Definici´n o

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

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

Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o

1

Por ejemplo si a un p´rrafo le queremos dar un tama˜o de fuente 10 y un margen a n izquierdo de 20 pts.

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

2. Se pueden definir en su conjunto para toda la p´gina HTML: a

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

Un ejemplo ser´ ıa:

<HTML> <HEAD>

Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o

2

<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´rrafo con letra 10</P> a </BODY> </HTML>

3. Se pude especificar en un fichero externo. Esta manera es la m´s flexible y recomena dada, ya que el estilo asociado a una p´gina HTML se puede cambiar sin modificar a el c´digo de dicha p´gina y adem´s la misma hoja de estilo se puede compartir o a a con diferentes documentos. Para enlazar la hoja de estilo con una p´gina HTML se a puede utilizar la etiqueta LINK: Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o 3

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

El fichero hoja estilos.css es un simple fichero de texto con extensi´n .css en el que o se define 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´n o

Estos tres modos de definir estilos pueden convivir en la misma p´gina html, pero si a sobre un mismo elemento se han definido diferentes estilos, s´lo se aplicar´ uno de ellos o a de acuerdo a las siguientes reglas, ordenadas de menor a mayor prioridad: 1. Las definidas por el navegador Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o 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´n para el selector h3: e h3 { text-align: right; font-size: 20pt } Si la p´gina con la hoja de estilo interna tambi´n est´ enlazada con la hoja de estilo a e a 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´n divididas en 6 grandes grupos que facilitan su utilizaci´n y a o

documentaci´n. o

Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o

5

2.1.

Propiedades de texto

Son propiedades que afectan a la presentaci´n visual de caracteres, espacios, palabras o y p´rrafos. Las propiedades que podemos utilizar son las siguientes: a color. Especificamos 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. Especifica, por medio de palabras reservadas, si las letras del texto deben transformarse en may´sculas, min´sculas, s´lo la primera letra de cada u u o palabra en may´sculas, o si ha de dejarse como est´. u a uppercase | lowercase | capitalize | none Ejemplo: H1 {text-transform:uppercase} vertical-align. Alineaci´n vertical del texto en relaci´n con la l´ o o ınea base del texto. baseline | sub | super | top | text-top | middle | mottom | text-bottom Ejemplo: STRONG {vertical-align:sub} text-align. Fija la alineaci´n del bloque, al margen izquierdo, al derecho, centrado o o a ambos. left | right | center | justify Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o 6

Ejemplo: H1{text-align: center} text-indent. Fija la sangr´ o indentaci´n de la primera l´ ıa o ı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´s caracter´ a ısticas ”decorativas”del texto, como subrayado, lineas superiores, caracteres tachados o parpadeantes. Si se aplica a un elemento de bloque la heredan s´lo los descendientes que sean de texto (o en-linea). Si o se aplica a uno de ´stos la heredan todos los descendientes. e underline | overline | line-through | blink | none Ejemplo: H1 {text-decoration: underline} letter-spacing. Especifica el espaciado entre letras. En el caso de especificar una longitud esta se sumara a la normal. normal | XX unidad Ejemplo: H1{letter-spacing: 0.5pc} word-spacing. Especifican el espaciado entre palabras. En el caso de especificar una longitud esta se sumara a la normal. normal | XX unidad Ejemplo: H1 { word-spacing: 0.5pc} Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o 7

2.2.

Propiedades de las fuentes

Con estas propiedades controlamos el estilo de una fuente, su tama˜o, su familia, su n 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 especificar 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. Especifica el estilo de la fuente, es decir, si los caracteres ir´n en normal, a en it´lica (cursiva) o en oblicua (un poco m´s inclinada que la it´lica). a a a normal | italic | oblique Ejemplo: H1,H2,H3{font-style:italic}

font-weight.Especifica el peso, densidad o grosor (cantidad de espacio ocupado en relaci´n con el rect´ngulo en que se inscribe el car´cter) de la fuente de caracteres o a a dentro de una familia de fuentes, con valores entre 100 y 900 siendo cada vez m´s a 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˜o y Evaluaci´n n o 8

STRONG{font-weight:bolder}

font-size. Especifica el tama˜o de la fuente. n 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 fijar el color del primer plano y fondo de un elemento. Las propiedades que podemos utilizar son las siguientes: background-color. Especifica 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 fijarse tambi´n un color que se colocar´ debajo de la imagen, e a y que asomar´ si la imagen no est´ disponible o, si lo est´, detr´s de sus zonas a a a a transparentes. none | url(direcci´n) o Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o 9

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

background-attachment. Establece si una imagen de fondo es fija o se mueve con el scroll del resto de la p´gina. S´lo funciona con la etiqueta body. a o scroll | fixed Ejemplo: body { background-image: url(fondo.gif); background-attachment: scroll }

background-repeat. Establece si una imagen si se repetir´ y c´mo. En Netscape a o 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˜o y Evaluaci´n n o

10

2.4.

Propiedades de margenes y padding

Con estas propiedades especificamos 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 especificar todos los valores de los margenes de una sola vez. Se pueden poner hasta cuatro valores, para especificar cada uno de los margenes. margin: ancho1 ancho2 ancho3 ancho4 Pero si s´lo especificamos ancho1 se refiere a los cuatro lados del margen. Si se o especifican dos valores, ancho1 se refiere a los lados superior e inferior y ancho2 al izquierdo y derecho. En el caso de poner los tres primeros, ancho1 se refiere 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˜o y Evaluaci´n n o 11

Ejemplo: Table {padding-top: 12pt}

padding. Mediante esta propiedad podemos definir en una unica 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 especificamos el ancho, color y estilo del ´rea de borde. Las a propiedades que podemos utilizar son las siguientes: border-top-width, border-bottom-width, border-left-width, border-rightwidth. Mediante estas cuatro propiedades especificamos el ancho del ´rea de borde a por encima, debajo, a la izquierda y derecha del elemento. thin | medium | thick | XX unidad Ejemplo: H1 {border-top-width:thin}

border-width. Especificamos en una unica propiedad el ancho de todo el ´rea de ´ a borde. Funciona de la misma manera que la propiedad margin. thin | medium | thick | XX unidad Ejemplo: Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o 12

H1 { border-width: thin thick medium}

border-style. Especificamos el estilo de visualizaci´n del borde. Los posibles valores o 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. Especificamos 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 especificar en conjunto todas las caracter´ ısticas de cada uno de los lados del borde: tama˜o, estilo y color. n Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o 13

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

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

2.6.

Propiedades de lista

Son propiedades que afectan a la presentaci´n visual de las marcas de los elementos o 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. Define el tipo de marcador de los elementos de una lista. Algunos navegadores s´lo soportan el valor disc. o Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o 14

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

list-style-position. Define 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´n de estilos de una manera independiente o

de los elementos del documento. Estos selectores pueden ser usados s´los o en conjunci´n o o con etiquetas. El selector Class necesita una modificaci´n en el documento html donde se va a o 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˜o y Evaluaci´n n o

15

En la hoja de estilo se debe a˜adir: n

.importante {color:red;}

El . indica que es un selector class. Si queremos a˜adir clases a etiquetas concretas, n ser´ de la siguiente manera: ıa

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´gina, un serlector id siempre se a aplica a un unico elemento. Un atributo ID debe ser unico en el documento. Adem´s ´ ´ a 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´lo una vez. o Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o 16

4.

Pseudo-Clases y Pseudo-Elementos
Son clases y elementos especiales que son autom´ticamente reconocidos por los navegaa

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

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

Estos selectores no se deber´ especificar con el atributo CLASS de HTML. Se pueden ıan usar tambi´n con selectores clases: e

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

4.1.

Pseudo-clases del ancla

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

A:link

{ color: red }

Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o

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´rrafo. Un ejemplo podr´ ser: a ıa

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˜o y Evaluaci´n n o

18

5.

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

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

5.1.

Relativas

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

5.2.

Absolutas

Las unidades de longitud absolutas son muy dependientes del medio de salida, y son por lo tanto menos utiles que las unidades relativas. Las siguientes unidades absolutas ´ est´n disponibles: a 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´gina. Por ejemplo, con: a * {color: red} Todos los elementos de la p´gina tendr´n como color de primer plano el rojo a a Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o 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´n debe ir antes que cualquier otra regla en la hoja de estilo. o

6.3.

La regla !important

la regla !important, suplantar con sus propias reglas de estilo las especificadas por el autor del documento. De este modo, los usuarios con requerimientos espec´ ıficos pueden modificar las opciones del creador de las p´ginas Web con el fin de mejorar su accesibilidad. a Los navegadores tienen opciones que permiten modificar la apariencia de las p´ginas a visitadas. Estas opciones constituyen de hecho la hoja de estilo del usuario. Explorer, adem´s de las opciones disponibles en los men´es, permite usar una hoja de estilo externa. a u De este modo, el usuario obtiene la m´xima flexibilidad para aplicar sus preferencias. a 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´s, editar las Propiedades de Internet de Explorer y en la opci´n General-Accesibilidad e o indicar la posici´n de su hoja de estilo. o

6.4.

Propiedad del cursor

Especifica el tipo de cursos que ser´ mostrado cuando se se˜ale un elemento. a n 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˜o y Evaluaci´n n o 20

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

6.5.

Propiedades de posicionamiento

Estas propiedades permiten especificar, de manera relativa o absoluta la posici´n de o un elemento, su forma y especifcar lo que deber´ pasar si el contenido de un elemento es ıa m´s grande que el area especifcada. a position. Sit´a un elemento en su posici´n normal, en una posici´n relativa con u o o respecto al elemento anterior o en cualquier posici´n fija de la p´gina. o a auto | relative | absolute Ejemplo: h1 { position:absolute; top:150px; } top. Especifica la situaci´n del borde superior de un elemento. o auto | % | unidad Ejemplo: Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o 21

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

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

overflow. Especifica qu´ sucede cuando el contenido de un elemento es mayor que e el ´rea de visualizaci´n. a o visible | hidden | scroll | auto Ejemplo: div { background-color:#00FFFF; width:150px; height:150px; overflow: scroll }

Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o

23

z-index. Indica el orden de superposici´n de los elementos en el caso de que coino cidan en el mismo espacio. Un elemento con un n´mero m´s alto siempre se posiu a cionar´ encima de un elemento con menor n´mero. a u auto | entero Ejemplo: img.x { position:absolute; left:0px; top:0px; z-index:1 }

7.

Bibliograf´ ıa
HTML din´mico http://html.programacion.net/dinamico/tutorial/indice.htm a 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´n de la especificaci´n CSS2: http://www.sidar.org/recur/desdi/traduc/es/css/cover.html o o

Hojas de estilo:CSS Sistemas Hipermedia: Dise˜o y Evaluaci´n n o

24

Sign up to vote on this title
UsefulNot useful