Unidad Hojas de Estilos

CSS Cascade Style Sheet
1. 2. 3. 4. 5. 6. 7. 8. 9.
Definicin Tipos Estructura de un documento Reglas de estilo Criterios de seleccin Propiedades y valores Herencia y precedencia Diseo visual Validacin del cdigo
Por
qu se utilizan? Fichero de texto con extensin css Cascada se heredan los estilos Versiones: CSS1 CSS2
1.
Aplicar estilos directamente a los elementos HTML

<p style=codigo_css> HOLA </p>
2.
Aplicar estilos a una pgina HTML

<style type=text/css> ..codigo css . </style> colocado en la cabecera de la pgina
3.
Aplicar estilos a todas las pginas del sitio Web.

<link rel=stylesheet type=text/css href=archivo.css> colocado en la cabecera de la pgina
1.
Directamente a una etiqueta:
<html> <head> </head> <body> <p style="color:#000000;background-color:yellow;font-family:vardana;fontsize:25px;text-align:center">Esto es un ejemplo</p> </body> </html>
1.
En una pgina HTML
<html> <head> <title>Problema</title> <style type="text/css"> h1 {color:#ff0000;background-color:#ffff00} </style> </head> <body> <h1>Primer ttulo</h1> <h1>Segundo ttulo</h1> </body> </html>
Ejercicio 1. Crear una pgina HTML y definir tres mensajes entre las marcas h1, h2 y h3. Definir el mismo color para el texto de cada bloque y colores diferentes para el fondo de los mismos (cada marca HTML debe tener definida la propiedad style). Grbalo con el nombre ejercicio1.html Ejercicio 2. Definir un estilo diferente para las marcas h1,h2,h3,h4,h5 y h6. Mostrar mensajes utilizando estas marcas a las que se le han definido estilos (por ahora slo conocemos el color de texto y fondo). ejercicio2.html
Los archivos de hojas de estilo tienen extensin .css y estn formados por un conjunto de reglas puestas una a continuacin de otra.
Selector body { background: white; font-size: 11pt; font-family: Arial,Helvetica,sans-serif; color: black; text-align:justify; }
Declaracin que establece las propiedades y sus valores
selector { propiedad1: valor1; propiedad2: valor2; propiedad3: valor3; ... }
p { text-indent: 2em; }
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
Ejercicio 3. Crea una pagina de estilos con el nombre ejercicio3.css con el cdigo CSS del ejemplo anterior. Crea un archivo HTML con el nombre ejercicio3.html con dos parrafos de texto a los que apliques las hojas de estilos anterior.
Identificador Clase Pseudo-clase Pseudo-elemento
Identificador.:
se identifica un elemento del HTML con el atributo id. <etiqueta id="identificador"> (HTML) e#identificador { ( En la hoja de estilos ) propiedad1: valor1; propiedad2: valor2; propiedad3: valor3; }
Clase.
Agrupa varios elementos de una pgina Web. Un elemento puede pertenecer a una o varias clases.
<img src="mesa.jpg" class="muebles"> <img src="cama.jpg" class="muebles habitacion"> .muebles { border-width: 1px; border-color: red; } .habitacion { border-width: 2px; border-style: dashed; }
Se aplica un estilo a la clase muebles y otro estilo a la clase habitacin. Los elementos que pertenecen a mas de un estilo se combinan ambos.
Pseudo-clases:
clasifican al elemento segn el estado en el que se encuentre.

Normalmente se utilizan para los enlaces.
a:link /*Enlaces que no se han visitado*/ a:visited /*Enlaces que se han visitado*/ a:hover /*Enlaces con el cursor encima*/ a:active /*Enlaces en que se est pulsando el ratn*/ a:focus /*Enlaces seleccionados con el teclado*/
Los
pseudo-elementos hacen referencia a algunas partes de los elementos de una pgina a los que HTML no otorga identidad propia. Solamente existen Ejemplo cuatro, que son:
:first-letter /*Primer carcter del elemento*/ :first-line /*Primera lnea del elemento*/ :before /*Elemento anterior*/ :after /*Elemento posterior*/
p:first-letter { font-size: 16pt; }
Ejercicio 4. Crea una Web con 4 prrafos y aplica una hoja de estilos al tercer prrafo con un identificador. El estilo aplicado a ese identificador ser el texto verde y el tamao de la letra 15. Guarda los archivos con los nombres ejercicio4.html y ejercicio4.css Ejercicio 5. Utiliza la pgina del ejercicio 4 y haz que los prrafos 2 y 4 pertenezcan a una clase. El estilo aplicado a esa clase es texto de color azul y tamao de la letra 7. Guarda los archivos como ejercicio5.html y ejercicio5.css Ejercicio 6. Crea una pgina Web con tres enlaces a diferentes pginas Web externas. Crea una hoja de estilo donde los enlaces sin visitar sean rojos, los visitados verdes, los activos amarillos y cuando se le pase el ratn por encima sean azules. Ejercicio 7. Partiendo del documento HTML del ejercicio 4, aplica un estilo CSS para que la primera letra de cada prrafo tenga tamao 18 puntos y la primera letra de cada encabezado h3 tenga un tamao de 22 puntos.
En
esta seccin se detallarn los mtodos que existen para elegir los elementos que se vern afectados por una regla de estilo.
Existen
cinco criterios:
Por tipo o nombre de elemento Por el contexto en que se encuentra el elemento. Hay tres
contextos: ascendiente, padre y hermano. Por clase o identificador del elemento. Por la pseudo-clase del elemento Por los atributos que tiene el elemento
Todas
las propiedades se pueden encontrar en la Gua de referencia rpida CSS 2.1 A tener en cuenta:
Para los valores numricos se pueden utilizar
distintas unidades de medida. Para insertar un cursos en CSS es necesario tener un archivo .ico o .cur cursor:url{direccion del cursor}, auto;
Herencia
de las propiedades en cascada Preferencia de propiedades cuanto mas concreto es el selector mayor valor tiene la regla (id mayor que class)
<html> <head> <title>Ejemplo de conflictos con CSS</title> <style type="text/css"> p { color: blue; } p.grupo { color: green; } p#tercero { color: red; } </style> </head> <body> <p>Este prrafo no pertenece a ninguna clase ni lleva ningn identificador. Estar escrito en azul.</p> <p class="grupo">Este prrafo pertenece a la clase "grupo" pero no lleva identificador. Estar escrito en verde.</p> <p class="grupo" id="tercero">Este prrafo pertenece a la clase "grupo" y tiene el identificador "tercero". Estar escrito en rojo.</p> <p style="color:#999999">Este prrafo se escribir en gris, siguiendo el estilo definido localmente.</p> </body> </html>
Modelo de cajas
Normalmente se suele utilizar el modelo de cajas para estructurar adecuadamente los contenidos de una pgina web. Para ello se suelen utilizar las etiquetas <div> para dividir la pgina en secciones. A cada etiqueta <div> se le asigna un identificador para poder referirse a ella desde la hoja de estilos y as poder situarla en la pgina con sus caractersticas propias (color de fondo, bordes, tipos de letra, etc.).
<html> <head> <title>Ejemplo de modelo visual</title> </head> <body> <div id="contenedor"> <div id="cabecera">  </div> <div id="indice">  </div> <div id="contenido">  </div> <div id="foto1">  </div> <div id="foto2">  </div> </div> </body> </html>
#cabecera { position: absolute; top: 0px; left: 0px; width: 100%; height: 60px; } #indice { position: absolute; width: 200px; left: 0px; top: 64px; } #foto1 { position: absolute; width: 200px; left: 0px; top: 200px; } #foto2 { position: absolute; width: 200px; left: 0px; top: 350px; } #contenido { position: absolute; left: 215px; top: 65px; padding: 15px; }

Unidad Hojas de Estilos

Cargado por

Información del documento

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

Unidad Hojas de Estilos

Cargado por

Copyright:

Formatos disponibles

CSS Cascade Style Sheet

Aplicar estilos directamente a los elementos HTML

Aplicar estilos a una pgina HTML

Aplicar estilos a todas las pginas del sitio Web.

Directamente a una etiqueta:

<html> <head> </head> <body> <p style="color:#000000;background-color:yellow;font-family:vardana;fontsize:25px;text-align:center">Esto es un ejemplo</p> </body> </html>

En una pgina HTML

selector { propiedad1: valor1; propiedad2: valor2; propiedad3: valor3; ... }

Identificador Clase Pseudo-clase Pseudo-elemento

clasifican al elemento segn el estado en el que se encuentre.

También podría gustarte