03-hojas de estilo en casacada - ing.karina esquivel · presentación de los documentos...

ELECTIVA FE I

Tema 3: Introducción a las hojas de estilo en cascada CSS

2

¿Qué son las hojas de estilo en cascada o CSS?

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

ELECTIVA FE I

3

Ejemplo de una página sin hojas de estilo

<html><head>

<title>Ejemplo de estilos sin CSS</title></head><body>

<h1><font color="red" face="Arial" size="5">Titular de la página</font></h1><p><font color="gray" face="Verdana" size="2">Un párrafo de texto no muy largo.</font></p>

</body></html>

Ver ejemplo 01

ELECTIVA FE I

4

Glosario Básico

CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:

h1 {

color: red; }

/*Esto es un comentario*/

Selector

Propiedad Valor

Regla

ELECTIVA FE I

5

1. Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaraciones" y por último, un símbolo de "llave de cierre" (}).

2. Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.

3. Declaración: especifica los estilos que se aplican a los elementos. Estácompuesta por una o más propiedades CSS.

4. Propiedad: permite modificar el aspecto de una característica del elemento.

5. Valor: indica el nuevo valor de la característica modificada en el elemento.

ELECTIVA FE I

6

Ejemplo de una página con hojas de estilo

<html >

<head> <title>Ejemplo de estilos con CSS</title>

<style type="text/css">

h1 { color: red; font‐family: Arial; font‐size: 40px; }

p { color: gray; font‐family: Verdana; font‐size: medium; }

</style>

</head>

<body>

<h1>Titular de la página</h1>

<p>Un párrafo de texto no muy largo.</p>

</body>

</html>

ELECTIVA FE I

7

Incluir hoja de estilo desde un fichero diferente

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>. Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite. En este ejemplo, el fichero prodria llamarse style.css y su contenido sería:

h1 { color: red; font‐family: Arial; font‐size: 40px; }

p { color: gray; font‐family: Verdana; font‐size: medium; }

Y la forma de incluir el archivo css en en el head de la siguiente manera:

<head><title>Ejemplo de estilos CSS en un archivo externo</title><link rel="stylesheet" type="text/css" href="/css/estilos.css“>

</head>

Ver ejemplo 02

ELECTIVA FE I

8

Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS:

1.rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet

2.type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css

3.href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas las páginas HTML que enlazan ese archivo.

ELECTIVA FE I

9

Incluir estilos en los elementos HTML

<html><head>

<title>Ejemplo de estilos CSS en el propio documento</title></head><body>

<p style="color: black; font‐family: Verdana;">Un párrafo de texto.</p>

</body></html>

Ver ejemplo 03

ELECTIVA FE I

10

Selectores básicos

Selector universal: Se utiliza para aplicarle una propiedad a todos los elementos de la página.

/*Establece el margen a 0 para todos los elementos de la página*/* {

margin: 0;padding: 0;

}

Selector de tipo o etiqueta: Aplica la propiedad a todos los elementos que concuerden con el valor del selector.

h2{

color: blue;}

p {

color: black;}

ELECTIVA FE I

11

Si hay una propiedad que se desea aplicar a un conjunto de elementos y hay otras que se quieren aplicar de manera independiente, se puede hacer de la siguiente manera.

h1, h2, h3 {color: #8A8E27;font‐weight: normal;font‐family: Arial, Helvetica, sans‐serif;

}

h1 { font‐size: 2em; }h2 { font‐size: 1.5em; }h3 { font‐size: 1.2em; }

Ver ejemplo 04

ELECTIVA FE I

12

Selectores descendentes

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

<html><head> <title>Ejemplo de estilos con CSS</title><style type="text/css">

p span { color: red;

}</style></head><body>

<p>Un párrafo de <span>texto</span> no muy largo.</p></body></html>

Ver ejemplo 05

ELECTIVA FE I

13

Selectores de clase

Son los que aplican sus propiedades utilizando el atributo class de las etiquetas.

/* estilo.css */

.aviso {padding: 0.5em;border: 1px solid #98be10;background: #f6feda;}.error {color: #930;font‐weight: bold;}

Ver ejemplo 06

<!– Pagina principal ‐‐>

<html><head><title>Selectores de clase</title><link rel="stylesheet" type="text/css" href=“estilo.css" /></head>

<body>

<span class="error">Este es un primer ejercicio</span><div class="aviso">Espero que nos funcione</div>

</body></html>

ELECTIVA FE I

14

Unidades de medida

Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida

Unidades relativas

La mas utilizada son los pixeles o px, ya que dependen del tamaño de la pantalla del usuario.

h1 { font‐size: 15px;

}

ELECTIVA FE I

15

Unidades absolutas

1.in, del inglés "inches", pulgadas (1 pulgada son 2.54 centímetros)2.cm, centímetros3.mm, milímetros4.pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros)5.pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros)

Ejemplo de utilización

body { margin: 0.5in; }h1 { line‐height: 2cm; }p { word‐spacing: 4mm; }a { font‐size: 12pt }span { font‐size: 1pc }

ELECTIVA FE I

16

Los porcentajes

Generalmente se utilizan para definir la anchura de los elementos

.contenido{width:600px;background: yellow;

}

.principal{width:80%;background:blue;

}

Ver ejemplo 07

<html><head><title>Ejemplo de medidas</title><link rel="stylesheet" type="text/css" href="07_pag36.css" /></head><body>

<div class="contenido">Hola como estas

<div class="principal">Este es el otro div.

</div></div>

</body></html>

ELECTIVA FE I

17

Asignación de Colores

Existen palabras reservadas que definen algunos colores:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow.

También se puede especificar mediante su valor en hexadecimal

.contenido{background:#9966FF;

}

.fondo{background:red;

}

ELECTIVA FE I

18

Modelo de cajas: Propiedades mas interesantes

width: Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla.height: Todos los elementos, salvo los elementos en línea que no sean imágenes, las columnas de tabla y los grupos de columnas de tabla.

margin‐top, margin‐right, margin‐bottom, margin‐left: Establece los márgenes que tendrá un elemento en relación a su contenedor.

ELECTIVA FE I

19

margin: Esta propiedad sirve para establecer los cuatro valores de una manera más directa.

div img {margin‐top: .5em;margin‐bottom: .5em;margin‐left: 1em;margin‐right: .5em;

}

Alternativa directa:div img {

margin: .5em .5em .5m 1em;}

Otra alternativa:div img {

margin: .5em;}

ELECTIVA FE I

20

padding‐top, padding‐right, padding‐bottom, padding‐left: Define cada uno de los relleno que deberá de contener un determinado cuadrado.

padding: Al igual que margin, se utiliza para establecer los cuatro valores a la vez.

Ver ejemplo 08.

ELECTIVA FE I

21

Bordes

border‐top‐width, border‐right‐width, border‐bottom‐width, border‐left‐width: Sirve para indicar el ancho de cada uno de los bordes.

div {border‐top‐width: 10px;border‐right‐width: medium; /*Borde medio*/border‐bottom‐width: thick; /*Borde grueso*/border‐left‐width: thin; /*Borde delgado*/

}

border‐width: Se utiliza para definir todos los grosores en una sola sentencia.

p { border‐width: thin } /*Se aplica el borde thin a los cuatro lados*/

p { border‐width: thin thick medium thin }

ELECTIVA FE I

22

Color de Bordes

border‐top‐color, border‐right‐color, border‐bottom‐color, border‐left‐color:Establece el color de cada uno de los bordes del area.

div {border‐top‐color: #CC0000;border‐right‐color: blue;border‐bottom‐color: #00FF00;border‐left‐color: #CCC;

}

border‐color: Se utiliza para definir todos los colores en una sola sentencia.

ELECTIVA FE I

24

Fondos

background‐color: Define el color de fondo del elemento.background‐color: #F5F5F5;

background‐image: Define una imagen como fondo del cuadro.background‐image: url("imagenes/fondo.png")

background‐repeat: Indica como debe de repetirse una imagen.background‐repeat: repeat (Repite la imagen en todas las direcciones)background‐repeat: repeat‐x (Repite la imagen solo horizontalmente)background‐repeat: repeat‐y (Repite la imagen solo verticalmente)background‐repeat: no‐repeat (No repite la imagen)

background‐position: permite indicar la distancia que se desplaza la imagen de fondo respecto de su posición original situada en la esquina superior izquierda.

Si se indican dos porcentajes o dos medidas, el primero indica el desplazamiento horizontal y el segundo el desplazamiento vertical respecto del origen (situado en la esquina superior izquierda). Ver ejemplo 10

ELECTIVA FE I

25

Texto

color: Permite establecer el color del texto.

h1 { color: #369; }p { color: black; }

font‐family: Permite establecer el tipo de letra.font‐family: Arial, Helvetica, sans‐serif;

font‐size: Permite estabecer el tamaño de letra.font‐size: x‐small

Para definir un tamaño se pueden usar cualquiera de las unidades antes vistas o algunas palabras reservadas: xx‐small, x‐small, small, medium, large, x‐large, xx‐large.

font‐weight: Define la anchura. Esta puede ser: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

ELECTIVA FE I

26

font‐style: Define el estilo de la letra. Esta puede ser: normal | italic | oblique | inherit.

.especial {font‐weight: bold;font‐style: normal;

}

text‐align: Define la alineación del texto. Sus posibles valore son: left | right | center | justify.

line‐height: Controla el interlineado que se quiere tener dentro de un texto. Se especifican valores en cualquiera de las unidades de medida antes vistas.

text‐transform: permite mostrar el texto original transformado en un texto completamente en mayúsculas (uppercase), en minúsculas (lowercase) o con la primera letra de cada palabra en mayúscula (capitalize).

ELECTIVA FE I

03-hojas de estilo en casacada - ing.karina esquivel · presentación de los documentos...

Documents