Hojas de estilo: CSS · Sintaxis CSS Una hoja de estilo est´a formada de un conjunto de reglas de...

Hojas de estilo: CSSCon la intencion de separar el contenido de la presentacion y de ofrecer mayores y mas

faciles posibilidades de presentacion el W3 Consortium sugirio la utilizacion de las Hojas

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 mas soportadas.

1. Sintaxis CSS

Una hoja de estilo esta 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 estandar del HTML.

2. Declaracion. Viene definido 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 }

Tambien se pueden anadir comentarios dentro de los ficheros css de la siguiente manera:

/* COMMENTS CANNOT BE NESTED */

1.1. Definicion

Hay tres maneras de definir los estilos:

1. Se pueden declarar directamente sobre la etiqueta HTML:

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

Hojas de estilo:CSSSistemas Hipermedia: Diseno y Evaluacion

1

Por ejemplo si a un parrafo le queremos dar un tamano de fuente 10 y un margen

izquierdo de 20 pts.

<P STYLE="font-size:10pt; margin-left:20pt;">

Mi Primer parrafo con Estilo

</P>

2. Se pueden definir en su conjunto para toda la pagina HTML:

<STYLE TYPE="text/css">

<!-

......

etiqueta {propiedad:valor; .........}

......

-->

</STYLE>

Un ejemplo serıa:

<HTML>

<HEAD>


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>Parrafo con letra 10</P>

</BODY>

</HTML>

3. Se pude especificar en un fichero externo. Esta manera es la mas flexible y recomen-

dada, ya que el estilo asociado a una pagina HTML se puede cambiar sin modificar

el codigo de dicha pagina y ademas la misma hoja de estilo se puede compartir

con diferentes documentos. Para enlazar la hoja de estilo con una pagina HTML se

puede utilizar la etiqueta LINK:


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 extension .css en el que

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 aplicacion

Estos tres modos de definir estilos pueden convivir en la misma pagina html, pero si

sobre un mismo elemento se han definido diferentes estilos, solo se aplicara uno de ellos

de acuerdo a las siguientes reglas, ordenadas de menor a mayor prioridad:

1. Las definidas por el navegador


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 tambien para el selector h3:

h3

{

text-align: right;

font-size: 20pt

}

Si la pagina con la hoja de estilo interna tambien esta 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 estan divididas en 6 grandes grupos que facilitan su utilizacion y

documentacion.


5

2.1. Propiedades de texto

Son propiedades que afectan a la presentacion visual de caracteres, espacios, palabras

y parrafos. Las propiedades que podemos utilizar son las siguientes:

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 mayusculas, minusculas, solo la primera letra de cada

palabra en mayusculas, o si ha de dejarse como esta.

uppercase | lowercase | capitalize | none

Ejemplo:

H1 {text-transform:uppercase}

vertical-align. Alineacion vertical del texto en relacion 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 alineacion del bloque, al margen izquierdo, al derecho, centrado

o a ambos.

left | right | center | justify


6

Ejemplo:

H1{text-align: center}

text-indent. Fija la sangrıa o indentacion 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 mas caracterısticas ”decorativas”del texto, como subra-

yado, lineas superiores, caracteres tachados o parpadeantes. Si se aplica a un ele-

mento de bloque la heredan solo 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. 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}


7

2.2. Propiedades de las fuentes

Con estas propiedades controlamos el estilo de una fuente, su tamano, 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 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 iran en normal,

en italica (cursiva) o en oblicua (un poco mas inclinada que la italica).

normal | italic | oblique

Ejemplo:

H1,H2,H3{font-style:italic}

font-weight.Especifica el peso, densidad o grosor (cantidad de espacio ocupado en

relacion con el rectangulo en que se inscribe el caracter) de la fuente de caracteres

dentro de una familia de fuentes, con valores entre 100 y 900 siendo cada vez mas

densos. El valor 400 equivale a normal, y el 700 a bold.

lighter | normal | bold | bolder | 100 | 200 | 300 | ...... | 900

Ejemplo:


8

STRONG{font-weight:bolder}

font-size. Especifica el tamano 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 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 tambien un color que se colocara debajo de la imagen,

y que asomara si la imagen no esta disponible o, si lo esta, detras de sus zonas

transparentes.

none | url(direccion)


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 pagina. Solo funciona con la etiqueta body.

scroll | fixed

Ejemplo:

body

{

background-image: url(fondo.gif);

background-attachment: scroll

}

background-repeat. Establece si una imagen si se repetira y como. 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

}


10

2.4. Propiedades de margenes y padding

Con estas propiedades especificamos los margenes de cualquier elemento y con el pad-

ding 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 mar-

genes de una sola vez. Se pueden poner hasta cuatro valores, para especificar cada

uno de los margenes.

margin: ancho1 ancho2 ancho3 ancho4

Pero si solo especificamos ancho1 se refiere a los cuatro lados del margen. Si se

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 |%


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 area de borde. Las

propiedades que podemos utilizar son las siguientes:

border-top-width, border-bottom-width, border-left-width, border-right-

width. Mediante estas cuatro propiedades especificamos 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. Especificamos en una unica propiedad el ancho de todo el area de

borde. Funciona de la misma manera que la propiedad margin.

thin | medium | thick | XX unidad

Ejemplo:


12

H1 { border-width: thin thick medium}

border-style. Especificamos el estilo de visualizacion 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. 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: tamano, estilo y color.


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: tamano, estilo y color.

anchura | estilo | color

Ejemplo:

Table {border: thick double red}

2.6. Propiedades de lista

Son propiedades que afectan a la presentacion 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. Define el tipo de marcador de los elementos de una lista. Algunos

navegadores solo soportan el valor disc.


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 man-

tiene 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 asignacion de estilos de una manera independiente

de los elementos del documento. Estos selectores pueden ser usados solos o en conjuncion

con etiquetas.

El selector Class necesita una modificacion 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">


15

En la hoja de estilo se debe anadir:

.importante {color:red;}

El . indica que es un selector class. Si queremos anadir 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 pagina, un serlector id siempre se

aplica a un unico elemento. Un atributo ID debe ser unico en el documento. Ademas

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 solo una vez.


16

4. Pseudo-Clases y Pseudo-Elementos

Son clases y elementos especiales que son automaticamente 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 refieren a subpartes

de los elementos como la primera letra de un parrafo. 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 especificar con el atributo CLASS de HTML. Se pueden

usar tambien con selectores clases:

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

o

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

4.1. Pseudo-clases del ancla

En CSS1 solo 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 raton pasa

sobre un enlace.

A:link { color: red }


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 parrafo. 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 }


18

5. Unidades de longitud

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

de una abreviacion 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 identificar la unidad.

5.1. Relativas

Las unidades relativas dan una longitud relativa a otra propiedad longitud. Las si-

guientes unidades relativas estan disponibles:

em (ems, la altura de la fuente de los elementos)

ex (x-height, altura de la letra ”x”)

px (pixels, relativa a la resolucion del lienzo)

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

estan 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. CSS Avanzado

6.1. Selector universal

El selector universal se escribe con un asterisco (*) y representa a cualquier elemento

de la pagina. Por ejemplo, con:

* {color: red}

Todos los elementos de la pagina tendran como color de primer plano el rojo


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 declaracion 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 especificadas por el

autor del documento.

De este modo, los usuarios con requerimientos especıficos pueden modificar las opciones

del creador de las paginas Web con el fin de mejorar su accesibilidad.

Los navegadores tienen opciones que permiten modificar la apariencia de las paginas

visitadas. Estas opciones constituyen de hecho la hoja de estilo del usuario. Explorer,

ademas de las opciones disponibles en los menues, permite usar una hoja de estilo externa.

De este modo, el usuario obtiene la maxima flexibilidad para aplicar sus preferencias.

Probar la siguiente hoja de estilo:

* { visibility: hidden !important;}

BODY { visibility: visible !important;

background-color: black !important;

background-image: url(borrando.gif) !important;

background-repeat: no-repeat !important;

background-position: 200px 120px !important;}

Depues, editar las Propiedades de Internet de Explorer y en la opcion General-Accesibilidad

indicar la posicion de su hoja de estilo.

6.4. Propiedad del cursor

Especifica el tipo de cursos que sera mostrado cuando se senale 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


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 posicion de

un elemento, su forma y especifcar lo que deberıa pasar si el contenido de un elemento es

mas grande que el area especifcada.

position. Situa un elemento en su posicion normal, en una posicion relativa con

respecto al elemento anterior o en cualquier posicion fija de la pagina.

auto | relative | absolute

Ejemplo:

h1

{

position:absolute;

top:150px;

}

top. Especifica la situacion del borde superior de un elemento.

auto | % | unidad

Ejemplo:


21

h1

{

position:absolute;

top:150px;

}

bottom. Especifica la situacion del borde inferior de un elemento.

auto | % | unidad

Ejemplo:

h1

{

position:absolute;

bottom:150px;

}

left. Especifica la situacion del borde izquierdo de un elemento.

auto | % | unidad

Ejemplo:

h1

{

position:absolute;

top:150px;

left:30px;

}

right. Especifica la situacion del borde derecho de un elemento.

auto | % | unidad


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 que sucede cuando el contenido de un elemento es mayor que

el area de visualizacion.

visible | hidden | scroll | auto

Ejemplo:

div

{

background-color:#00FFFF;

width:150px;

height:150px;

overflow: scroll

}


23

z-index. Indica el orden de superposicion de los elementos en el caso de que coin-

cidan en el mismo espacio. Un elemento con un numero mas alto siempre se posi-

cionara encima de un elemento con menor numero.

auto | entero

Ejemplo:

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:1

}

7. Bibliografıa

HTML dinamico 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/

Traduccion de la especificacion CSS2: http://www.sidar.org/recur/desdi/traduc/es/css/cover.html


24

Hojas de estilo: CSS · Sintaxis CSS Una hoja de estilo est´a formada de un conjunto de reglas de...

Documents

Transcript of Hojas de estilo: CSS · Sintaxis CSS Una hoja de estilo est´a formada de un conjunto de reglas de...