Latest web development tutorials

crear CSS

Al leer una hoja de estilo, el navegador se basa en su documento HTML con formato.

¿Cómo insertar la hoja de estilo

Inserte la hoja de estilo de tres maneras:

  • hoja de estilos externa
  • hoja de estilo interna
  • estilo en línea

hoja de estilos externa

Cuando el estilo se aplica a muchas páginas se requiere, una hoja de estilos externa sería la opción ideal. En el caso de una hoja de estilos externa, puede cambiar un archivo para cambiar el aspecto de todo el sitio. Cada página utiliza la etiqueta <link> para enlazar a una hoja de estilo. <Link> etiqueta en la cabeza (documento):

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

El navegador leerá desde el archivo de declaración de estilo miestilo.css de acuerdo con ella para dar formato al documento.

hoja de estilos externa se puede editar en cualquier editor de texto. Los archivos no pueden contener ninguna etiqueta HTML. hoja de estilo debe guardarse con la extensión .css. Aquí está un ejemplo de un archivo de hoja de estilos:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("../images/back40.gif");}

observación No deje espacios entre el valor de la propiedad y las unidades. Si se utiliza el "margin-left: 20 px" en lugar "margin-left: 20px", sólo es válido en IE 6, pero no funciona en Mozilla / Firefox o Netscape en.

hoja de estilo interna

Cuando un solo documento requiere un estilo especial, hoja de estilo interna debe ser utilizado. Puede utilizar la etiqueta <style> en el encabezado del documento para definir la hoja de estilo interna, así:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

estilo en línea

Debido al rendimiento y el contenido mezclados entre sí, los estilos en línea a perder muchas de las ventajas de las hojas de estilo. Por favor advertir a este método, por ejemplo, cuando el estilo se debe aplicar sólo una vez en un solo elemento.

Para utilizar los estilos en línea, es necesario utilizar el atributo de estilo (estilo) en la etiqueta correspondiente. atributo de estilo puede contener cualquier propiedad CSS. Este ejemplo muestra cómo cambiar el color del párrafo y el margen izquierdo:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

múltiples estilos

Si algunos atributos se definen igual de selección en diferentes hojas de estilo, entonces el valor de la propiedad de la hoja de estilo más específica se extiende.

Por ejemplo, una hoja de estilos externa tiene tres propiedades del selector h3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

La hoja de estilo interna tiene dos propiedades para el selector de h3:

h3
{
text-align:right;
font-size:20pt;
}

Si el estilo tiene hojas de estilo internas y hojas de estilo externas vincular esta página al mismo tiempo, a continuación, obtener H3 es:

color:red;
text-align:right;
font-size:20pt;

Esa es la propiedad de color se hereda de la hoja de estilos externa y la disposición de texto (text-alineación) y el tamaño de la fuente (font-size) será reemplazado por las reglas de hojas de estilo internas.

Múltiples estilos se laminan uno

Las hojas de estilo permiten que la información de estilo especificado de varias maneras. Los estilos pueden ser especificados en un solo elemento HTML, el primer elemento de la página HTML, o en un archivo CSS externo. Incluso varias hojas de estilo externas pueden ser referenciados dentro de un solo documento HTML.

el orden de apilamiento

Cuando un mismo elemento HTML está definida por más de un estilo, el estilo que usarlo?

En general, todos los estilos, deberá ser colocada en una nueva hoja de estilos virtual de acuerdo con las siguientes reglas, donde el número 4 tiene la prioridad más alta.

  1. explorador predeterminado
  2. hoja de estilos externa
  3. hoja de estilo interna (en la etiqueta <head> en el interior)
  4. estilo en línea (elementos HTML dentro)

Por lo tanto, un estilo en línea (dentro de un elemento HTML) tiene la prioridad más alta, lo que significa que tiene prioridad sobre la siguiente declaración de estilo: declaración de estilo de etiqueta, declaración de estilo hoja de estilos externa, o declaración de estilo del navegador (valor por defecto).

observaciónConsejo: Si utiliza un archivo de estilo externo en el <head> es también define el estilo, la hoja de estilo reemplazará los archivos externos de estilo interna.