Manual css

UNIVERSIDAD DE EL SALVADOR
FACULTAD MULTIDISCIPLINARIA PARACENTRAL
DEPARTAMENTO DE INFORMÁTICA
INGENIERÍA DE SISTEMAS INFORMÁTICOS
TÉCNICAS DE PROGRAMACIÓN PARA INTERNET
CICLO II/2009
DOCENTE: ING. JOSSUÉ HUMBERTO HENRÍQUEZ

MANUAL DE REFERENCIA DE CSS

Hojas de Estilo en cascada (Cascading Style Sheets), CSS es un lenguaje de hojas de estilos creado para controlar el aspecto opresentación de los documentos electrónicos definidos con HTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.

[pic]
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Los tres tipos de estilos

CSS proporciona tres caminos diferentes para aplicar las reglas deestilo a una página Web:
1. Una hoja de estilo externa, que es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
Ejemplo:


Título.
.


Otro método para emplear hojas de estilo externas es el "importado", en el cual se indicaría según muestra el siguiente ejemplo:

@import url(estilo.css);

2. Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML. (Va dentro del elemento ). De esta manera se obtiene el beneficio de separar la información delestilo, del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra. En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero.
Ejemplo:


hoja de estilo interna


body {padding-left: 11em;
font-family: Georgia, "Times New Roman", serif;
color: red;
background-color: #d8da3d;
}

h1 {
font-family: Helvetica, Geneva, Arial, sans-serif;
}




Aquí se aplicará el estilo de letra para el Título



3. Un estilo en línea, quees un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código se convierte en una tarea larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar demanera ocasional.
Ejemplo:
Texto de ejemplo...

UNIDADES DE MEDIDA

Relativas:
· em (ems, altura de la fuente actual)
· ex (x-height, altura de la letra "x" de la fuente actual)
· px (pixels, relativo a la resolución de pantalla)
Absolutas:
· in (pulgadas; 1in=2.54cm)
· cm (centímetros; 1cm=10mm)
· mm (milímetros)
· pt (puntos; 1pt=1/72in)
· pc (picas; 1pc=12pt)

SINTAXIS BÁSICA[pic]

El selector puede ser uno ya definido de html como: body, table, h1, etc. En este caso no es necesario que cambiemos nada en el código html.

Ejemplo: p { color: black; font-family: Verdana; }

A estos se les llaman selectores de etiqueta, para aplicárselos a más de uno los separamos por comas.
H1, h2, h3 { color: black; font-family: Verdana; }

El selector también puede ser unelemento que nosotros definamos (clase o identificador), así:

Estilos por clases (class)
Se define con un punto(.) en el css
Es necesario que en el elemento de html se inserte esto class=”nombre clase”
Se puede utilizar de forma independiente o dependiendo de un elemento
Independiente:
.nuevo{color:blue;}

Dependiente
p.nuevo{ color:blue;}

/* Todos los elementos de tipo "p" con...