Manual de Css paso a paso

Introduccion al CSS

• ¿Qué es CSS?

• CSS significa C ascading S tyle S heets

• Estilos definen la forma de mostrar los elementos HTML

• Estilos normalmente se almacena en las Hojas de Estilo

• Estilos han sido agregadas a 4,0 HTML para resolver un problema

• Hojas de Estilo exterior le puede ahorrar mucho trabajo

• Hojas de Estilo exterior se almacenan en archivos CSS
• Estilos de resolver un problema común

Etiquetas HTML se diseñaron originalmente para definir el contenido de un documento. Se suponía que decir "Esto es una cabecera", "Este es un párrafo", "Esta es una mesa", mediante el uso de etiquetas como y así sucesivamente. La presentación del documento tenía que ser atendidos por el navegador, sin necesidad de utilizar etiquetas de cualquier formato.

Como los dos principales navegadores - Netscape e Internet Explorer - continuó añadir nuevas etiquetas HTML y los atributos (como la etiqueta y el atributo de color) para la especificación de HTML original, se hizo cada vez más difícil para crear sitios Web donde el contenido de documentos HTML fue claramente separados de la presentación del documento de diseño.

Para resolver este problema, la World Wide Web Consortium (W3C) - sin ánimo de lucro, la normativa de consorcio, responsable de la normalización de HTML - creado ESTILOS además de HTML 4,0.

Todos los principales navegadores apoyo Hojas de Estilo en Cascada. ________________________________________

Hojas de Estilo puede ahorrar una gran cantidad de trabajo

Estilos de hojas de definir cómo son los elementos HTML que se mostrará, al igual que la fuente etiqueta y el atributo de color en HTML 3,2. Los estilos son normalmente guardados en exteriores. Css archivos. Exteriores hojas de estilo le permiten cambiar la apariencia y disposición de todas las páginas en su Web, con sólo editar un único documento CSS!

CSS es un gran avance en diseño de páginas Web, ya que permite a los desarrolladores el control de estilo y diseño de múltiples páginas Web al mismo tiempo. Como desarrollador web puede definir un estilo para cada elemento HTML y aplicarlo a la mayor cantidad de páginas web como quieras. Para hacer un cambio global, basta con cambiar el estilo, y todos los elementos en la Web se actualizan automáticamente.

________________________________________

Múltiples estilos en cascada en una Hojas de estilo permiten el estilo de información que deben especificarse en muchas maneras.

Los estilos pueden ser especificadas dentro de un único elemento HTML, dentro de la elemento de una página HTML, o en un fichero CSS externo. Incluso múltiples hojas de estilo exterior se puede referenciar dentro de un único documento HTML.
Orden en cascada

¿Qué estilo se usa cuando hay más de un estilo especificado por un elemento HTML?

En términos generales podemos decir que todos los estilos "en cascada" en un nuevo "virtual" hoja de estilo por las siguientes normas, cuando el número cuatro tiene la más alta prioridad:

1. Navegador por defecto 2. Exterior de hojas de estilo 3. Interior de hojas de estilo (dentro de la etiqueta ) 4. Inline estilo (dentro de un elemento HTML)

Por lo tanto, una línea de estilo (dentro de un elemento HTML) tiene la máxima prioridad, lo que significa que se anularán un estilo declaran dentro de la etiqueta , en una hoja de estilo externa, o en un navegador (un valor por defecto).

Sintaxis

La sintaxis CSS se compone de tres partes: un selector, una propiedad y un valor:
selector (propiedad: valor)

El selector es normalmente el elemento HTML / etiqueta que desea definir, la propiedad es el atributo que desea cambiar, y cada propiedad puede tener un valor. La propiedad y el valor están separados por dos puntos, y rodeado de llaves: cuerpo (color: negro)
Nota: Si el valor es múltiple, es decir, poner las comillas alrededor del valor: p (font-family: "sans serif")

Nota: Si desea especificar más de una propiedad, usted debe separar cada propiedad con un punto y coma. El ejemplo siguiente muestra cómo definir un centro alineado apartado, con un texto de color rojo: p (text-se suman: centro; color: rojo)
Para realizar las definiciones de estilo más legible, se puede describir una propiedad en cada línea, como este: p (text-se suman: centro; color: negro; font-family: Arial)

________________________________________

Agrupación

Puede grupo de selectores. Separe cada selector con una coma. En el siguiente ejemplo hemos agrupado todos los elementos de cabecera. Todos los elementos de cabecera se mostrará en verde el color del texto: H1, H2, H3, H4, h5, h6 (color: green) ________________________________________

La clase Selector

Con el selector de clase se pueden definir diferentes estilos para el mismo tipo de elemento HTML.

Decir que le gustaría tener dos tipos de párrafos de su documento: uno alineados a la derecha párrafo, y un centro alineados párrafo. Aquí es cómo puede hacerlo con los estilos:

p.right (text-se suman: el derecho p.center) (texto-se suman: center) Tienes que utilizar el atributo de clase en su documento HTML:

Este párrafo se alineados a la derecha. Este párrafo será centro alineados. Nota: Para aplicar más de una clase dada por elemento, la sintaxis es la siguiente:

Se trata de un párrafo.

El párrafo anterior será de estilo de la clase "centro" y la clase "negrita". También puede omitir el nombre de etiqueta en el selector de definir un estilo que será utilizada por todos los elementos HTML que tienen una cierta clase. En el siguiente ejemplo, todos los elementos HTML con class = "centro" será centro alineados: . centro (text-se suman: center)

En el código que aparece a continuación, tanto el elemento h1 y el p elemento han class = "centro". Esto significa que ambos elementos se seguirán las normas en el ". Centro" selector:

Esta partida será el centro alineados

Este párrafo también será centro alineados. NO iniciar un nombre de clase con un número! No va a trabajar en Mozilla / Firefox.

________________________________________

Añadir estilos a los elementos con los atributos particulares

También puede aplicar estilos a elementos HTML con los atributos particulares. El estilo imperio continuación se ajusten a todos los elementos de entrada que tienen un tipo de atributo con un valor de "texto": de entrada [type = "text"] (fondo-color: azul)

_______________________________________

_

El ID Selector

También puede definir estilos para elementos HTML con el selector de id. El selector de id se define como una #. El estilo imperio continuación coincidir con el elemento que tiene un atributo id con un valor de "verde": # verde (color: green) El estilo imperio continuación coincidir con el p elemento que tiene un id con un valor de "para1": p # (para1 texto-se suman: centro; color: rojo) No inicie un nombre de identificación con un número! No va a trabajar en Mozilla / Firefox.

________________________________________

Comentarios CSS Los comentarios son utilizados para explicar su código, y puede ayudar a usted cuando editar el código fuente en una fecha posterior. Un comentario será ignorado por los navegadores. Un comentario CSS comienza con "/*", y termina con "*/", como esto: / * Este es un comentario * / p (text-se suman: centro; / * Este es otro comentario * / color: negro; font-family: Arial) ________________________________________ Cómo insertar una Hoja de Estilo Cuando un navegador lee una hoja de estilo, es el formato de documento de acuerdo a ella. Hay tres maneras de insertar una hoja de estilos:

Exterior de hojas de estilo

Un estudio externo de hoja de estilo es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilo externa, puede cambiar el aspecto de todo un sitio Web de cambiar un archivo. Cada página debe enlazar con la hoja de estilos utilizando la etiqueta . El etiqueta va dentro de la sección de cabecera:

rá el estilo de las definiciones de archivo mystyle.css, y el formato de documento de acuerdo a ella.

Un estudio externo de hoja de estilo se pueden escribir en cualquier editor de texto. El archivo no debe contener ninguna etiqueta HTML. Su hoja de estilos debe ser guardada con extensión. Css extensión. Un ejemplo de un archivo de hojas de estilo se muestra a continuación: hr (color: sienna) p (margin-left: 20px) (cuerpo-imagen de fondo: url ( "images/back40.gif")) No deje espacios entre el valor de la propiedad y las unidades! Si utiliza "margin-left: 20 px" en vez de "margin-left: 20px" que sólo funciona correctamente en IE6 pero no funciona en Mozilla / Firefox o Netscape.

Interior hoja de estilo

Una hoja de estilo interno debe ser utilizada cuando un único documento tiene un estilo único. Para definir los estilos internos en la sección de cabecera mediante el uso de la etiqueta

El navegador ahora leer las definiciones de estilo y formato del documento de acuerdo a ella. Nota: El navegador normalmente ignora las etiquetas desconocidas. Esto significa que un viejo navegador que no soporta estilos.

Estilos Inline

Una línea de estilo pierde muchas de las ventajas de hojas de estilo mediante la mezcla de contenido con presentación. Use este método con moderación, como cuando un estilo se aplica a una sola aparición de un elemento.

Para utilizar los estilos en línea que utiliza el atributo de estilo en la pertinente etiqueta. El estilo atributo puede contener cualquier propiedad CSS. El ejemplo muestra cómo cambiar el color y el margen izquierdo de un párrafo:

Esto es un párrafo

________________________________________

Múltiples hojas de estilo

Si algunas propiedades se han establecido para el mismo selector en diferentes hojas de estilo, los valores serán heredadas de la más específica de hojas de estilo.

Por ejemplo, una hoja de estilo externa tiene estas propiedades para el selector h3: h3 (color: rojo; texto-se suman: a la izquierda; font-size: 8 puntos)

Y una hoja de estilo interna tiene estas propiedades para el selector h3: h3 (text-se suman: el derecho; font-size: 20pt)

Si la página interior con la hoja de estilo también enlaces externos a la hoja de estilo para las propiedades h3 serán los siguientes: color: rojo; texto-se suman: el derecho; font-size: 20pt