Tema 2 - LM

TEMA 2: CSS Lenguaje de marcas y sistemas de
gestión de información
TEMA 2
CSS
1. INTRODUCCIÓN AL CSS
1.1.¿Qué es CSS?
CSS (Cascading Style Sheets – Hojas de Estilo en Cascada), son un mecanismo simple que describe cómo se
va a presentar un documento en la pantalla, en un dispositivo de sonido, cómo se va a imprimir, en un dis-
positivo braille, aparatos móviles, etc.
CSS nos permite posicionar el contenido, diseñar tablas, definir características para sitios en diferentes
idiomas y propiedades relacionadas con la comunicación del usuario.
CSS nos ayuda a separar el contenido de la presentación. CSS nos permite controlar el estilo y el for-
mato de múltiples páginas web a la vez.
1.2.¿Por qué trabajar con Hojas de Estilo?

Las hojas de estilo nos ahorran mucho trabajo. La manera correcta de trabajar es separando el contenido de
cada página, del diseño de la misma.
Normalmente los estilos son guardados en un archivo externo con la extensión “.css”. Este archivo le
permite hacer los cambios de apariencia y disposición de los elementos en todas las páginas de su sitio web,
con tan solo editar un solo documento CSS.
2. ESTILOS CSS EN HTML

Probablemente queramos que nuestro sitio web tenga una unidad de estilo que lo haga armonioso y dife-
renciado de los otros sitios web. Esto se consigue con una potente herramienta del lenguaje HTML que se
denomina Estilos CSS o Estilos en cascada y que permite tres niveles de concreción diferenciados:
1. Estilos para una etiqueta concreta en un punto determinado.
2. Estilos para un documento entero.
3. Estilos para un sitio entero formado por varios documentos. Hoja de estilo externa.
2.1.Estilos para una etiqueta concreta en un punto determinado

La sintaxis es la siguiente:
<p style=”background-color:orange;”>
El párrafo afectado por la etiqueta anterior modificaría el color de fondo y se pondría en naranja. Lo
que hemos hecho en la etiqueta párrafo lo podríamos haber hecho en cualquier otra etiqueta. Se pueden,
además, añadir más opciones de estilo:
<p style=”margin-left:50px; font-style:italic; color:gray;”>
El párrafo afectado tendría un sangrado del margen izquierdo de 50 píxeles, estaría en cursiva y tendría
el texto en color gris.
49
Hay que tener especial cuidado en no cometer errores de sintaxis. El =, las “ al comenzar y al acabar,
los : para indicar el valor, el ; separando cada uno de los parámetros de estilo. Es fácil equivocarse porque
venimos arrastrando la sintaxis de las etiquetas y atributos normales y, ahora, las cosas son diferentes.
Aparte, claro está, del nombre y valores posibles de cada atributo de estilo de los que, más tarde, haremos
un listado.
2.1.1. LA ETIQUETA <div>

Se emplea para implementar un estilo determinado, no en una etiqueta concreta, sino en un fragmento (en
una división) del documento, que afecte a varias etiquetas: lo comprendido entre <div> y </div>.
<div style=”font-weight:900; text-align:right; color:#0000FF;”>
Por ejemplo:
<div style=”font-weight:900, text-align:right; color:#0000FF;”>

<p>Vamos a aplicar esta etiqueta a este párrafo.</p>
<p>Y a este otro</p>
<p>Hasta que cerremos la etiqueta. Lo hago después de este punto.</p>
</div>
<p>Ya volvemos a la situación anterior.</p>
2.1.2. LA ETIQUETA <span>

Se emplea de forma similar a la etiqueta <div> pero para hacer su efecto en un fragmento pequeño de texto,
una palabra o unas cuantas o unas letras dentro de una palabra.
<span style=”background-color:yellow; font-family:sans-serif;”>
Por ejemplo:
Aplico el estilo anterior a las dos letras centrales de la palabra

s<span style=”background-color:yellow; font-family:sans-serif;”>pa
</span>n.
2.2.Estilos para un documento entero

Si queremos que los estilos definidos afecten a todo el documento, haremos su declaración en la cabecera
del mismo, dentro de las etiquetas <head> y </head>.
La sintaxis es un poco diferente:
<html>
<head>
<title>Estilos CSS para un documento</title>
<style type=”text/css”>
body {margin-left:50px; margin-top:20px; margin-right:40px;
font-weight:bold; color:#996600; }
div {background:url(../imag/claro1.gif); }
</style>
</head>
Observa que las llaves de apretura { y de cierre } y los ;. En el caso de la etiqueta div se ha establecido
una imagen de fondo. Observa los paréntesis y, entre ellos, la ruta en la que se ha guardado la imagen.
50
2.3.Estilos para un sitio entero. Hoja de estilos externa

Si queremos definir de golpe los estilos para todos los documentos de un sitio, debemos hacerlo desde un
documento externo.
Abrimos el bloc de notas y, en él, escribimos el código:
body {margin-left:50px; margin-top:20px; margin-right:40px;

font-weight:bold; color:#996600; }
div {background:url(../imag/claro1.gif); }
Lo guardamos con el nombre que queramos pero con la extensión .css, por ejemplo, estilo.css. Ahora
habrá que hacer una llamada desde cada uno de los documentos que queramos vincular con esa hoja de
estilos. La llamada se hace dentro de <head> con la siguiente sintaxis:
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
Como puede deducirse, nuestro documento .css está en la misma carpeta que el resto de los docu-
mentos del sitio. Si no es así, habría que indicar la ruta completa dentro de las comillas de href. Por ejemplo:
href=”carpeta2/estilo.css”.
Los tres niveles de concreción pueden usarse simultáneamente en los documentos de un sitio. Para
que no haya problemas de entendimiento entre los tres, existen unas reglas:
1. Prevalecen las definiciones de estilo de la etiqueta puntual.
2. En segundo lugar la definición de estilo del documento.
3. En tercer lugar la hoja de estilos.
2.3.1. NOMBRAR A LOS ESTILOS DEFINIDOS EN LA HOJA

Podemos, en la hoja de estilos, hacer declaraciones de estilo no referidas a una etiqueta concreta sino a un
conjunto de parámetros que pueden afectar a más de una etiqueta. Y nombrar a ese estilo con una palabra
relacionada con la implementación que queremos hacer. Por ejemplo, este sitio está vinculado con una hoja
de estilos en los que, siempre que aparece una etiqueta en el texto explicativo, está de color azul. El estilo,
dentro de la hoja, se ha denominado .etiquetas (con el punto por delante) y su declaración se ha hecho de
forma similar a la declaración de las etiquetas. Veamos la hoja de estilos que se está empleando en un sitio:
.palabras_clave {color:#CC0000; }
.titulo {font-size:24px; font-weight:bold; }
.etiquetas {color:#0033CC; }
.traduccion {font-style:italic; }
.texto_codigo {color:#FFFFFF; }
.nombre_archivo {color:#999999; }
.english {color:#996600; }
Se guarda con el nombre que se desee: hoja.css y, ahora, cada vez que queremos utilizar uno de estos
estilos, además de hacer la declaración de vinculación en la cabecera, tendremos que emplear una etiqueta
span con la siguiente sintaxis:
<span class=”nombre_del_estilo”>texto afectado</span>
Veamos un ejemplo:
Esto es una <span class=”etiquetas”><etiqueta></span>.

Esto <span class=”nombre_archivo”>estilo.css</span> es el nombre de
un archivo. Esto es una <span class=”palabras_clave”>palabra clave
</span> y esto es un <span class=”titulo”>título</span>.
51
3. SELECTORES HTML PARA CSS

3.1.El selector class
Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML. Por ejemplo, el
elemento p puede ser de color azul o de color rojo. El valor del selector class debe ir antepuesto por un punto.
p.azul {color:blue; }
p.rojo {color:red; }
Ejemplo:
<head>
p.azul {color:blue; }
p.rojo {color:red; }
</style>
</head>
<body>
<p class=”azul”>Este texto es de color azul</p>
<p class=”rojo”>Este texto es de color rojo</p>
</body>
Con el selector class también podemos definir diferentes estilos para cualquier elemento HTML. Por
ejemplo, definimos un class rojo y uno azul.
.azul {color:blue; }
.rojo {color:red; }
Ejemplo:
<head>
.azul {color:blue; }
.rojo {color:red; }
</style>
</head>
<body>
<h3 class=”rojo”>Este título es de color rojo</h3>
<p class=”azul”>Este texto es de color azul</p>
<p class=”rojo”>Y este texto es de color rojo</p>
</body>
3.2.El selector ID
El selector id se utiliza para definir un atributo el cual tiene un valor único en todo el documento. Hacemos
referencia a él anteponiendo el símbolo “#”.
#centrado {text-align:center; } /*afecta a cualquier elemento */

h3#subrayado {text-decoration:underline; } /*afecta solo a h3 */
52
Ejemplo:
<head>
#centrado {text-align:center; }
h3#subrayado {text-decoration:underline; }
</style>
</head>
<body>
<h3 id=”centrado”>Título centrado</h3>
<h3 id=”subrayado”>Título subrayado</h3>
<p id=”centrado”>Texto centrado</p>
<p id=”subrayado>El selector id no afecta al elemento p ya que el
mismo no ha sido definido como texto subrayado</p>
</body>
4. FONDO
Las propiedades de fondo (en inglés background) en CSS, nos permiten controlar el color de fondo de un
elemento.
Colocar una imagen de fondo, la ubicación de la misma en la pantalla (centrada, a la izquierda, en
alguna coordenada de x-y, etc.) y la cantidad de veces que la misma se repetirá.
En términos del modelo de cajas, la propiedad background afectan tanto al fondo del elemento, al
relleno del mismo (padding) y a los bordes (border). Las propiedades de background se aplican a todos los
elementos.
4.1.La propiedad de los fondos o backgrounds

La propiedad background es la forma comprimida en la cual podemos definir todos los valores de los fondos
de una sola vez.
selector {background: valor1 valor2}
Nota: debemos dejar un espacio en blanco entre los valores.
Los posibles valores para definir los fondos son:
color | transparent | URL | none | repeat | repeat-x | repeat-y |

no-repeat | fixed | % | longitud | left | center | right | top
bottom
4.2.Aplicar color al fondo

La propiedad background-color especifica el color de fondo del elemento.
selector {background-color: valor}
Los posibles valores para definir los colores del fondo son:
color | transparent
4.3.Decorar el fondo con una imagen

La propiedad background-image inserta una imagen como fondo del elemento.
53
selector {background-image: url(“nombre-de-la-imagen”)}
Los posibles valores para la inserción de imágenes de fondo son:
url | none
4.4.Imagen más pequeña que el tamaño del fondo

Si la imagen que elegimos de fondo es más pequeña que este, podemos repetir la imagen horizontalmente
o verticalmente hasta cubrir todo el fondo. Para ello utilizamos la propiedad background-repeat.
selector {background-repeat: valor; }
Los posibles valores para la repetición de una imagen en el fondo son:
repeat | repeat-x | repeat-y | no-repeat
4.5.Imagen de fondo estática o dinámica

La propiedad background-attachment nos permite fijar o liberar una imagen de fondo, es decir, que al mo-
vernos por la página con la barra de desplazamiento, la imagen de fondo quede anclada en el lugar o se
desplace con la misma.
selector {background-attachment: valor; }
Los posibles valores para esta propiedad son:
fixed | Scroll
4.6.Elegir el lugar exacto para ubicar la imagen de fondo

La propiedad background-position nos permite ubicar una imagen en un lugar específico dentro del fondo.
selector {background-position: valor; }
Los posibles valores para la ubicación exacta de la imagen en el fondo son:
% | coordinadas x-y | left | center | right | top | bottom
5. TEXTO
Las propiedades de los textos nos permiten controlar la apariencia de los mismos. Entre los ajustes que po-
demos aplicar a los textos, tenemos las siguientes:
5.1.Sangría de los textos

La propiedad text-indent se utiliza para generar sangría en la primera línea de un texto.
selector {text-indent: valor}
Los posibles valores para definir la sangría son:
longitud | %
54
5.2.Alineado de los textos

La propiedad text-align se utiliza para alinear un texto a la derecha, izquierda o centro del bloque que lo
contiene.
selector {text-align: valor}
Los posibles valores para alinear los textos son:
left | right | center | justify
5.3.La decoración de los textos

La propiedad text-decoration se utiliza para subrayar, tachar, remarcar con una línea superior o parpadear
un texto.
selector {text-decoration: valor}
Los posibles valores para decorar los textos son:
none | underline | overline | line-through | vlink
5.4.Separación entre letras

La propiedad letter-spacing se utiliza para definir la distancia que queremos dejar entre letra y letra de un
mismo texto.
selector {letter-spacing: valor}
normal | distancia
5.5.Separación entre palabras

La propiedad word-spacing se utiliza para definir la distancia que queremos dejar entre palabras.
selector {word-spacing: valor}
normal | distancia
5.6.Transformar los textos a mayúsculas o minúsculas

La propiedad text-transform se utiliza para convertir un texto a mayúsculas o minúsculas.
selector {text-transform: valor}
Los posibles valores para convertir los textos son:
capitalize | uppercase | lowercase | none
55
5.7.Espacios en blanco
La propiedad white-space se utiliza para manipular el comportamiento de los espacios en blanco dentro de
cada elemento.
selector {white-space: valor}
normal | pre | nowrap | pre-wrap | pre-line
6. FUENTE
Las propiedades de las fuentes nos permiten controlar la apariencia de las mismas. Posiblemente la definición
de las fuentes sea el uso más común de CSS. Entre los ajustes que podemos aplicar a las fuentes, tenemos:
6.1.Familia de fuentes
Para definir el tipo de fuente usamos la propiedad font-family. Es recomendable usar un tipo de fuente co-
mún, que todos los navegadores reconozcan (ejemplo: Arial, Verdana, Helvetica, sans serif, etc.).
selector {font-family: familia de fuente, familia de fuente genérico}
Nota. Debemos utilizar comas entre los valores.
Los posibles valores para definir las familias de fuentes son:
las más comunes | arial | verdana | helvetica | “Times New Roman” |

courier | univers
Los posibles valores para definir las familias de fuentes genéricas son:
serif | sans-serif | cursive | fantasy | monospace
6.2.Intensidad de las fuentes

Una característica muy útil es el control de la intensidad de las fuentes. Para ello utilizamos la propiedad font-
weight.
selector {font-weight: valor}
Los posibles valores para definir los fondos son:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
700 | 800 | 900
6.3.Estilo de las fuentes

La propiedad font-style nos sirve para definir un estilo normal, oblicuo o italic.
selector {font-style: valor1}
Los posibles valores para definir los estilos son:
56
normal | italic | oblique
6.4.Tamaño de las fuentes

Controlar el tamaño de las fuentes suele ser de mucha utilidad. La propiedad encargada de eso es font-size.
selector {font-size: valor}
Los posibles valores para definir el tamaño de las fuentes son:
xx-small | x-small | small | medium | large | x-large | xx-large |

larger | smaller | tamaño | %
6.5.Variante de las fuentes

Una variación que se le puede dar a las fuentes es el de usar pequeñas mayúsculas, para eso usamos de la
propiedad font-variant.
selector {font-variant: valor}
Los posibles valores para definir las variantes de las fuentes son:
normal | small-caps
6.6.La propiedad de las fuentes

La propiedad font es la forma comprimida en la cual podemos definir todos los valores de las fuentes de una
sola vez. Esta propiedad se aplica a todos los elementos.
selector {font: valor1 valor2 valorn}
Nota. Debemos dejar un espacio en blanco entre los valores.
Los posibles valores para definir las fuentes son:
Todos los valores de font-family | font-style | font-variant |

font-weight | font-size | caption | icon | menu | message-box |
small-caption | status-bar
7. CONTORNO
Los contornos u outlines son líneas que se encuentran alrededor de objetos visuales tales como botones,
formularios activos o mapeado de imágenes. Los contornos se diferencian de los bordes en que los contornos
no ocupan espacios y no necesariamente son rectangulares. Un contorno definido con la propiedad outline
es dibujado “fuera” de la caja y siempre se encuentra por encima del elemento y no afecta a las cajas anexas
a este.
7.1.El espesor de los contornos

La propiedad outline-width especifica el espesor del contorno. Esta propiedad se puede aplicar a todos los
elementos.
selector {outline-width: valor}
57
Los posibles valores para definir el espesor de los contornos son:
thin | medium | thick | tamaño (px, pc, pt, mm, cm, in)
7.2.El estilo de los contornos

La propiedad outline-style especifica el estilo del contornos. Esta propiedad se puede aplicar a todos los
elementos.
selector {outline-style: valor}
Los posibles valores para definir el estilo de los contornos:
none | dotted | dashed | solid | double | groove | ridge | inset |

outset
7.3.El color de los contornos

La propiedad outline-color especifica el color del contornos. Esta propiedad se puede aplicar a todos los
elementos.
selector {outline-color: valor}
Los posibles valores para definir el estilo de los contornos son:
color | invert
7.4.La propiedad general de los contornos

La propiedad outline especifica todas las propiedades de los contornos de una sola vez.
selector {outline: valor1 valor2 valorn}
Los posibles valores para la propiedad outline son:
thin | medium | thick | tamaño (px, pc, pt, mm, cm, in) | none |
dotted | dashed | solid | double | groove | ridge | inset | outset |
color | invert
8. LISTAS
Las propiedades de las listas nos permiten establecer el estilo de las mismas, la imagen, número o letra de
los diferentes ítems y la posición de la misma.
8.1.El tipo de estilo de las listas

La propiedad list-style-type especifica el formato visual de la lista. Esta propiedad se aplica a todo elemento
con “display: list-item”.
selector {list-style-type: valor}
Los posibles valores para definir el estilo de las listas son:
disc | circle | square | decimal | decimal-leading-zero |

lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |
58
armenian | georgian | lower-alpha | upper-alpha | none
8.2.Listas con imágenes

La propiedad list-style-image define la imagen que va a ser usada como marca de cada ítem. Esta propiedad
se aplica a todo elemento con “display: list-item”.
selector {list-style-image: valor}
Los posibles valores para definir las imágenes de las listas son:
URL | none
8.3.La posición de la marca en la lista

La propiedad list-style-position especifica la posición del marcador de los ítems con respecto a la caja de la
lista. Esta propiedad se aplica a todo elemento con “display: list-item”.
selector {list-style-position: valor}
Los posibles valores para definir la posición de los marcadores son:
inside | outside
8.4.Todas las propiedades de las listas

La propiedad list-style se usa para definir todos los valores de las listas a la vez.
selector {list-style: valor1 valor2 valorn}
Los posibles valores para definir las imágenes de las listas son:
disc | circle | square | decimal | decimal-leading-zero |

lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |
armenian | georgian | lower-alpha | URL | none | inside | outside
9. TABLAS
Las propiedades de las tablas nos permiten definir el comportamiento, el diseño y la ubicación de los ele-
mentos que componen cada tabla.
9.1.Ubicación del título

La propiedad caption-side nos permite ubicar el título de la tabla por encima o por debajo de la misma. La
alineación horizontal del mismo se puede establecer con la propiedad text-align.
selector {caption-side: valor}
Los posibles valores para definir la ubicación del título son:
top | bottom | inherit
59
9.2.Formato de las tablas

La propiedad table-layout se usa para diseñar las filas, columnas o celdas de una tabla. Entre las posibilidades
de diseño podemos definir si las mismas van a tener el tamaño fijo que estipulemos (fixed) o se adecuarán
al contenido sin importar la medida que hayamos establecido (auto).
selector {table-layout: valor}
Los posibles valores para definir el formato de las tablas son:
auto | fixed | inherit
9.3.Modelo de los bordes

La propiedad border-collapse nos permite seleccionar la apariencia de los bordes de cada celda de la tabla.
Existen 2 modelos diferentes de bordes: separados y continuos.
selector {border-collapse: valor}
Los posibles valores para los diferentes modelos de bordes son:
collapse | separate | inherit
9.4.Espacio entre celdas

La propiedad border-spacing especifica la separación entre celdas adyacentes. Si especificamos un solo valor,
este actúa sobre toda la tabla. Si especificamos 2 valores, el primero define la separación horizontal y el
segundo la vertical.
selector {border-spacing: valor}
Los posibles valores para definir la separación entre celdas son:
distancia(horizontal) distancia(vertical) | inherit
9.5.Comportamiento de las celdas vacías

La propiedad empty-cells nos permite controlar la visualización de los bordes y fondos de una celda vacía.
selector {empty-cells: valor}
Los posibles valores para controlar las celdas vacías son:
show | hide | inherit
10. RELLENO – PADDING

El relleno se comporta exactamente igual que los márgenes con la excepción que deja el espacio blanco entre
el elemento y los bordes, o en caso que no posea bordes, con el margen.
60
10.1. El relleno
La propiedad padding se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el
borde del mismo.
Esta propiedad define el ancho para los cuatro lados de la caja.
selector {padding: valor}
Los posibles valores para definir los anchos de padding son:
longitud | %
10.2. El relleno de cada lado

Las propiedades padding-top, padding-right, padding-bottom, padding-left se utilizan para definir los an-
chos de los rellenos de cada uno de los bordes por separado. Puedes definir los 4 lados o sólo aquellos que
necesites.
selector {
padding-top: valor;
padding-right: valor;
padding-bottom: valor;
padding-left: valor;
}
Los posibles valores para definir los anchos de padding son:
longitud | %
11. BORDES
Los bordes nos sirven para decorar todos los elementos con líneas de diferentes espesores, colores y formas.
Esta propiedad se aplica al área de bordes de la caja.
11.1. La propiedad de los bordes

La propiedad border especifica el espesor, color y estilo de los bordes. Es la forma abreviada para definir los
bordes y puede comprender en ella todas las propiedades de los bordes juntas.
selector {border: valor1 valor2 valorn}
Nota. Debemos dejar un espacio en blanco entre los valores.
Los posibles valores para definir los espesores de los bordes son:
thin | medium | thick | tamaño (px, pc, pt, mm, cm, in) |
nombre del color(inglés) | #XXXXXX | transparent | none | hidden |
dotted | dashed | solid | double | groove | ridge | inset | outset
61
11.2. Espesor de los bordes

La propiedad border-width especifica el Espesor del borde. Para establecer el mismo espesor para todos los
bordes del selector:
selector {border-width: valor; }
Para establecer el espesor de cada borde del selector por separado:
selector {
border-top-width: valor;
border-right-width: valor;
border-bottom-width: valor;
border-left-width: valor;
}
Nota. No olvides poner ; al final de cada línea.
Los posibles valores para definir los espesores de los bordes son:
thin | medium | thick | tamaño (px, pc, pt, mm, cm, in)
11.3. Color de los bordes

La propiedad border-color especifica el color del borde. Para establecer el color de todos los bordes a la vez:
selector {border-color: valor; }
Para establecer el espesor de cada borde por separado:
selector {
border-top-color: valor;
border-right-color: valor;
border-bottom-color: valor;
border-left-color: valor;
}
Los posibles valores para colorear los bordes son:
nombre del color (inglés) | #XXXXXX | transparent
11.4. Estilo de los bordes

La propiedad border-style especifica el estilo del borde. Para establecer el estilo de todos los bordes a la vez:
selector {border-style: valor; }
Para establecer el estilo de cada borde por separado:
selector {
border-top-style: valor;
border-right-style: valor;
border-bottom-style: valor;
border-left-style: valor;
}
62
Los posibles valores para dar estilo a los bordes son:
none | hidden | dotted | dashed | solid | double | groove | ridge |

inset | outset
12. MÁRGENES
El margen es un espacio invisible alrededor del elemento, que le permite al mismo mantener distancia de
otros elementos.
Las propiedades de los márgenes margin nos permiten definir el ancho de los mismos.
12.1. El margen
La propiedad margin se utiliza para definir el ancho del espacio que se encuentra entre el borde de un ele-
mento y el elemento cercano a él.
Esta propiedad define el ancho del margen para los cuatro lados de la caja.
selector {margin: valor; }
Los posibles valores para definir el ancho de los márgenes son:
longitud | % | auto
12.2. Los márgenes de un elemento por separado

Las propiedades margin-top, margin-right, margin-bottom, margin-left se utilizan para definir el ancho de
los márgenes de cada uno de los lados del elemento por separado. Puedes definir los 4 lados o solo aquellos
que necesites.
selector {
margin-top: valor;
margin-right: valor;
margin-bottom: valor;
margin-left: valor;
}
Los posibles valores para definir los anchos de margin son:
longitud | % | auto
13. DIMENSIONES
Las propiedades de las dimensiones nos permiten definir al ancho y la altura de los elementos, como así
también controlar el espacio en blanco que dejamos entre líneas.
63
13.1. Ancho
La propiedad width define el ancho del elemento.
.ancho {width: 200px; }
13.2. Altura
La propiedad height define la altura del elemento.
.altura {height: 100px; }
13.3. Separación entre líneas

La propiedad line-height define la distancia que dejaremos entre líneas de un texto.
.separa {line-height: 40px; }
14. EFECTOS VISUALES

Los efectos visuales se utilizan entre otras cosas para definir la visibilidad de los elementos y también para
establecer el comportamiento del contenedor de los mismos.
14.1. La propiedad overflow

Overflow nos permite controlar el comportamiento de una caja en caso de que su contenido la desborde.
selector {overflow: valor; }
Los posibles valores que admite overflow son:
visible | hidden | scroll | auto
14.2. La propiedad clip

Usamos clip cuando queremos recortar una imagen a una medida determinada. Los valores de rect son en
este orden: superior, derecha, inferior, izquierda.
selector {clip: rect (0px 50px 100px 0px); }
Los posibles valores que admite clip son:
rect | auto
14.3. La propiedad display

Con display se puede definir el comportamiento del elemento.
selector {display: valor; }
Los posibles valores que admite display son:
inline | block | list-item | run-in | inline-block | table |

inline-table | none
64
14.4. La propiedad visibility

Visibility nos define si un elemento será visible o invisible.
selector {visibility: valor; }
Los posibles valores que admite display son:
visible | hidden | collapse
15. UBICACIÓN. PROPIEDAD POSITION

Esta propiedad nos permite posicionar un elemento dentro de la página. Por lo general, va acompañado de
las propiedades top, right, bottom y left.
Sus posibles valores son:
 static (estático). Siempre tiene la ubicación que la página da por defecto.
 relative (relativa). Mueve el elemento relativamente de su posición normal.
 absolute (absoluta). Posiciona al elemento con coordenadas relativas al bloque que lo contiene.
 fixed (fija). Posiciona al elemento con coordinadas relativas a la ventana del navegador.
15.1. La propiedad float

La propiedad float define donde ubicar un texto o una imagen dentro de otro elemento. Solo puede ubicarlo
a la derecha o a la izquierda del elemento.
selector {float: valor; }
Los posibles valores que admite float son:
left | right | none
15.2. La propiedad clear

La propiedad clear no permite ubicar a los lados de una foto o texto ningún otro elemento flotante.
selector {clear: valor; }
Los posibles valores que admite clear son:
none | left | right | both
15.3. La propiedad vertical-align

La propiedad vertical-align se usa para alinear verticalmente los elementos.
selector {vertical-align: valor; }
Los posibles valores que admite vertical-align son:
baseline | sub | super | top | text-top | middle | bottom |

text-bottom | longitud | %
65

Tema 2 - LM

Cargado por

Copyright:

Formatos disponibles

Tema 2 - LM

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 2 - LM

Cargado por

Copyright:

Formatos disponibles

TEMA 2: CSS Lenguaje de marcas y sistemas de

1.2.¿Por qué trabajar con Hojas de Estilo?

2. ESTILOS CSS EN HTML

2.1.Estilos para una etiqueta concreta en un punto determinado

<p style=”margin-left:50px; font-style:italic; color:gray;”>

2.1.1. LA ETIQUETA <div>

<div style=”font-weight:900; text-align:right; color:#0000FF;”>

<div style=”font-weight:900, text-align:right; color:#0000FF;”>

2.1.2. LA ETIQUETA <span>

<span style=”background-color:yellow; font-family:sans-serif;”>

Aplico el estilo anterior a las dos letras centrales de la palabra

2.2.Estilos para un documento entero

2.3.Estilos para un sitio entero. Hoja de estilos externa

body {margin-left:50px; margin-top:20px; margin-right:40px;

<link href=”estilo.css” rel=”stylesheet” type=”text/css”>

2.3.1. NOMBRAR A LOS ESTILOS DEFINIDOS EN LA HOJA

<span class=”nombre_del_estilo”>texto afectado</span>

Esto es una <span class=”etiquetas”>&lt;etiqueta&gt;</span>.

3. SELECTORES HTML PARA CSS

#centrado {text-align:center; } /*afecta a cualquier elemento */

4.1.La propiedad de los fondos o backgrounds

selector {background: valor1 valor2}

Nota: debemos dejar un espacio en blanco entre los valores.

Los posibles valores para definir los fondos son:

color | transparent | URL | none | repeat | repeat-x | repeat-y |

4.2.Aplicar color al fondo

selector {background-color: valor}

4.3.Decorar el fondo con una imagen

selector {background-image: url(“nombre-de-la-imagen”)}

Los posibles valores para la inserción de imágenes de fondo son:

4.4.Imagen más pequeña que el tamaño del fondo

selector {background-repeat: valor; }

Los posibles valores para la repetición de una imagen en el fondo son:

repeat | repeat-x | repeat-y | no-repeat

4.5.Imagen de fondo estática o dinámica

selector {background-attachment: valor; }

Los posibles valores para esta propiedad son:

4.6.Elegir el lugar exacto para ubicar la imagen de fondo

selector {background-position: valor; }

Los posibles valores para la ubicación exacta de la imagen en el fondo son:

% | coordinadas x-y | left | center | right | top | bottom

5.1.Sangría de los textos

selector {text-indent: valor}

Los posibles valores para definir la sangría son:

5.2.Alineado de los textos

selector {text-align: valor}

Los posibles valores para alinear los textos son:

left | right | center | justify

5.3.La decoración de los textos

selector {text-decoration: valor}

Los posibles valores para decorar los textos son:

none | underline | overline | line-through | vlink

5.4.Separación entre letras

selector {letter-spacing: valor}

Los posibles valores para esta propiedad son:

5.5.Separación entre palabras

selector {word-spacing: valor}

Los posibles valores para esta propiedad son:

5.6.Transformar los textos a mayúsculas o minúsculas

Esto es una <span class=”etiquetas”><etiqueta></span>.

#centrado {text-align:center; } /afecta a cualquier elemento /