http://www.w3schools.com/css/default.asp
http://www.w3c.es/divulgacion/guiasbreves/hojasestilo
sábado, 23 de julio de 2011
¿Como funciona el sistema css?
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
h1 {color: red;}h1 es el selector{color: red;} es la declaraciónEl selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector
h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.Las tres formas más conocidas de dar estilo a un documento son las siguientes:
- Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento
<link>, el cual debe ir situado en la sección<head>.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"> <html> <head> <title>Título</title> <link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" /> </head> <body> . . . . </body> </html> - Utilizando el elemento
<style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección<head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"> <html> <head> <title>hoja de estilo interna</title> <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", serif; color: red; background-color: #d8da3d; } h1 { font-family: Helvetica, Geneva, Arial, sans-serif; } </style> </head> <body> <h1>Aquí se aplicará el estilo de letra para el Título</h1> </body> </html> - Utilizando estilos directamente sobre aquellos elementos que lo permiten a través del atributo
<style>dentro de<body>. Pero este tipo de definición del estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.
Algunas normas básicas a la hora de crear una CSS son las siguientes:
- En el siguiente ejemplo,
h1{color: red;}, el selector,<h1>, le dice al navegador la parte del documento que se verá afectada por esa regla. Los selectores pueden aparecer individualmente o agrupados, separándolos con comas:h1, h2, h3 { color: red; }o lo que es lo mismoh1 {color: red;} h2 {color: red;} h3 {color: red;} - La propiedad, que en este caso sería
color, especifica qué aspecto se va a cambiar. En este ejemplo la propiedad cambiada será el color. Las propiedades que se desean modificar en una CSS para un mismo selector pueden agruparse, pero será necesario separar cada una de ellas con un punto y coma.p {text-align:center;color:red}Normalmente se describe una propiedad por línea, de la siguiente manera:h1 { padding-left: 11em; font-family: Georgia, "Times New Roman",Times, serif; color: red; background-color: #d8da3d; } - El valor, representado a la derecha de los dos puntos (
:), establece el valor de la propiedad. Es importante recordar que si el valor está formado por más de una palabra, hay que ponerlo entre comillas.p {font-family: "sans serif";}
Diagramado de página en CSS
Antes de que estuviera disponible CSS, la única forma de componer espacialmente una página era el uso de tablas. Aunque es una técnica cómoda y versátil, se está usando un elemento con una semántica particular, que es la de expresar información tabular, solamente por su efecto en la presentación.
La introducción de CSS ha permitido en muchos casos reemplazar el uso de tablas. Sin embargo, CSS no permite aún la versatilidad que ofrecían las tablas, lograr un diagramado de una página compleja suele ser una tarea difícil en CSS y las diferencias entre navegadores dificultan aún más la tarea. Se espera que futuros desarrollos en CSS3 resuelvan esta deficiencia y hagan de CSS un lenguaje más apto para describir la estructura espacial de una página.
Los tres tipos de estilos
CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página Web:
- Una hoja de estilo externa, 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:
- Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML. (Va a la derecha dentro del elemento <head>.) De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). 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, por ejemplo, si se está enviando algo a la página Web.
- Un estilo en línea (inline) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente 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 manera 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 de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro o estructurado que debería ser, pero funciona. Éste es el método recomendado para maquetar correos electrónicos en HTML.
lunes, 18 de julio de 2011
Caracteristicas de las hojas de estilo
El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a:
- Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
- Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página.
- Una porción del documento, aplicando estilos visibles en un trozo de la página.
- Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con margenes, sin ellos...
- Podemos definir la distancia entre líneas del documento.
- Se puede aplicar identado a las primeras líneas del párrafo.
- Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.
- Y mucho más, como definir la visibilidad de los elementos, margenes, subrayados, tachados...
- Pixels (px) y porcentaje (%), como antes.
- Pulgadas (in)
- Puntos (pt)
- Centímetros (cm)
HOJA DE ESTILOS .CSS
Las hojas de estilos son un resurso muy util a la hora de crear una pagina web por medio del lenguaje html, en estas hojas se dan las caracteristicas del cuerpo, con color, tamaño, fuente y todo al igual q para imagenes titulos y tablas.
Estas hojas de texto nos proporcionan un buen espacio en la ventana del codigo html, ya que todo se hace en una archivo aparte que se nombra con ".css" (ejemplo.css). De esta forma todas las caracteristicas que valla a tener nuestra àgina se formalizan en este archivo.
Suscribirse a:
Comentarios (Atom)