Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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.
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.
Desventajas:
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 Propiedades de las Fuente o Color o Atributos del texto o Alineacin o Propiedades de identificacin y
presentacin de listas
o Texto
etc.
bidireccional, sombras,
o Corrige
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}
Elemento.nombreclas e {propiedad:valor}
Ejemplo:
p.amarillo {color:yellow} p.verde{color:green} p.colorextrao {color:#ca36e1}
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>
Ejemplo:
#titulo1 { font-weight:bold; color: #3333CC; font-size:12pt; text-align:justify; width: 250px; }
<p id="titulo1"> Una tarde de verano Mamá Pata se hallaba ocupada en la tarea de empollar sus huevos, cosa que la aburría. ....Al atardecer llegó a una pequeña cabaña de labradores, tan ruinosa, que parecía que se iba a derrumbar de un momento a otro. La tormenta obligó al patito a agacharse en el suelo, y entonces advirtió 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,
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
Aadir en varias paginas el contenido de la web. Usar colores neutros para el fondo
Ofrezca