INSTITUTO TECNOLGICO DE NUEVO LEN

Cascading Style Sheets Hojas de Estilo en Cascada

Qu son?

Las hojas de estilo en cascada es una tecnologa que nos permite disear pginas web de una manera ms fcil creando formatos tipo plantilla para documentos HTML. No es necesario tener grandes conocimientos de programacin, para trabajar cmodamente con ellas.

Para qu las puedo usar?

Usando hojas de estilo, podemos generar un estilo patrn para todo el resto de los documentos de una web, con el consiguiente ahorro de tiempo en diseo y mantenimiento.
Las hojas de estilo constituyen el complemento ideal para el HTML o XHTML.

Ventajas:

o Modificar
rpido.

un diseo web ms
atributos y precisos exactamente y mas para un

o Comandos
potentes maquetar documento

o Es un lenguaje muy sencillo o Reutilizacin y ahorro de cdigo o Se puede combinar con Java
Script, VBScript, Flash, etc.

o Pginas web ms funcionales

Desventajas:

o Su nico lado negativo es

la incompatibilidad entre navegadores.

La W3C es un consorcio que se encarga del desarrollo de protocolos y guas que aseguren la calidad, el buen diseo, adems del crecimiento futuro de una Pgina web.

CSS1 CSS2

CSS3

o La primera especificacin oficial

de CSS, recomendada por la W3C Publicada en diciembre 1996 o Funcionalidades:

o Propiedades de las Fuente o Color o Atributos del texto o Alineacin o Propiedades de identificacin y
presentacin de listas

o Publicada en mayo de 1998 o Ampliacin de CSS1 o Funcionalidades:

o Propiedad de las capas (<div>)
como de posicionamiento relativo/absoluto/fijo.

o Soporte para las hojas de estilo

auditivas

o Texto
etc.

bidireccional, sombras,

o Corrige

algunos errores encontrados en CSS2 los navegadores.

o Mejora la compatibilidad en

o Dividida o o o o o

varios documentos separados, llamados "mdulos". Colores gradientes Bordes redondeados Mltiples imgenes de fondo Colores RGBA Mejora la compatibilidad de navegadores

en

INTERNOS
Declaracin del cdigo dentro del documentos HTML
Archivo XHTML

EXTERNOS
Declaracin del cdigo en un archivo externo .css
Archivo XHTML Archivo CSS

o La etiqueta @import
Nos permite importar una hoja de estilos CSS externa en el interior de nuestras etiquetas style
<style> @import url("estilos.css"); </style> <style> @import "estilos.css"; </style>

ID

Solo permiten su utilizacin en un elemento, no podr haber otro ID con el mismo nombre Es case sensitive

idelemento {propiedad:valor}

Permite especificar CLASES distintos estilos para un mismo elemento.

Elemento.nombreclas e {propiedad:valor}

Ejemplo:
p.amarillo {color:yellow} p.verde{color:green} p.colorextrao {color:#ca36e1}

< p class=amarillo> Este saldr de color amarillo.</p>

<p class=verde Este encabezado saldr de color verde</p> <p class=colorextrao>Esta negrita es de colorvioleta?</p>

Ejemplo:
.amarillo {color:yellow} .verde{color:green} .colorextrao {color:#ca36e1}

< p class=amarillo> Este saldr de color amarillo.</p> <h1 class=verde Este encabezado saldr de color verde</h1>

<b class=colorextrao>Esta negrita es de colorvioleta?</b>

Ejemplo:
#titulo1 { font-weight:bold; color: #3333CC; font-size:12pt; text-align:justify; width: 250px; }

<p id="titulo1"> Una tarde de verano Mam&aacute; Pata se hallaba ocupada en la tarea de empollar sus huevos, cosa que la aburr&iacute;a. ....Al atardecer lleg&oacute; a una peque&ntilde;a caba&ntilde;a de labradores, tan ruinosa, que parec&iacute;a que se iba a derrumbar de un momento a otro. La tormenta oblig&oacute; al patito a agacharse en el suelo, y entonces advirti&oacute; que la .... </p>

oFont-family
font-family: Courier; font-family: New Century Schoolbook, Times, serif;

oFont-weight
font-weight: 700; font-weight: bold;

ofont-style
Font-style: italic;

ofont-variant
Font-variant: small-caps;

ofont-size
Font-size: 100%; Font-size: 20pt; Font-size:large;

oword-spacing
Word-spacing: 3em;

oletter-spacing
Letter-spacing: 4em;

oText-decoration
Text-decoration: underline;

oVertical-align
Vertical-align: super; Vertical-align: 50%;

o Text-align
Text-align: justify;

o Color
Color: red;

o Background-color:
Background-color: White; Background-color: #000080;

o Background-image
Background-image: textura.gif; Background-image: url(/imagenes/foto.jpg);

o Background-repeat
Background-repeat: no-repeat; Background-repeat: repeat-x,

o Margin; margin-top; marginright, margin-bottom; marginleft

Margin-top: 25px; Margin-right: 50%; Margin: 1em 2em 3em 4em; Margin-top: 2.5em;

o Width
Width: 50%; Widht: 10em;

o Height
Height: 100px;

o Float
Float: left;

No utilizar mas de dos tipos

de fuentes distintas.

No

abuse de los textos en maysculas. principal.

Icono de enlace a la pgina

Utilice
solo las imgenes necesarias.

Aadir en varias paginas el contenido de la web. Usar colores neutros para el fondo

No utilizar fondos grficos muy recargados.

Descripcin de los enlaces debe ser lo ms clara posible.

Ofrezca

Informe al usuario de otros No

sitios web que contienen informacin afn al tema

a los visitantes la posibilidad de comunicarse con usted conocer su opinin.

disee su web solo para un navegador.