Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Css DW

    Încărcat de

    Edgar Soto Arizaca
    8 vizualizări4 pagini
    Hojas de estilo CSS

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Hojas de estilo CSS

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    8 vizualizări4 pagini

    Css DW

    Încărcat de

    Edgar Soto Arizaca
    Hojas de estilo CSS

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 4

    Diseo WEB </>

    HOJAS DE ESTILO CSS

    Las hojas de estilo en cascada o CSS (Cascading Style Sheets) son un lenguaje utilizado para la
    presentacin de un documento estructurado escrito en HTML.

    La idea que subyace en las hojas de estilo es separar la estructura de un documento de su


    presentacin. Por ejemplo, podemos utilizar la etiqueta <H1> para definir una cabecera de
    pgina, sin darle ningn aspecto a la misma. Luego, en CSS definiremos el aspecto de dicha
    etiqueta (color, tipo de fuente, tamao, o incluso volumen de un sintetizador de voz). Esto nos
    permite compartir fcilmente los estilos entre mltiples documentos de un mismo sitio Web.
    Las reglas de estilo se aplican de forma jerrquica.

    SINTAXIS DE CSS:

    Forma general:

    Selector {propiedad: valor}

    Selector {propiedad1: valor1;

    propiedad2: valor2;

    ......

    propiedadN: valorN }

    Ejemplo:

    h1 { text-align: center;

    color: blue}

    INSERCIN DE ESTILOS CSS EN HTML

    Cmo aplicar una hoja de estilo?

    Existen tres formas de aplicar estilos a un documento:

    Un estilo en lnea. Insertamos un estilo directamente dentro de una etiqueta HTML. Se utiliza
    el atributo STYLE para cambiar directamente el estilo de cada elemento HTML.

    Ejemplo:

    <h2>La primavera </h2>

    <p style="margin-left: 1cm; magin-right: 1cm; font-style: italic">

    Des de la primavera final...</p>

    1
    Diseo WEB </>
    Una hoja de estilo interna. Incrustamos dentro de la cabecera del documento HTML los estilos
    que vamos a aplicar. En la cabecera del fichero HTML dentro de las etiquetas HEAD, se definen
    las propiedades de la hoja de estilo.

    <head>

    <title>Html y css</title>

    <style>

    body { background-color:#00FF99;}

    h1 {text-align: center;

    Color: red;

    Font-family: Dauphin, "Book Antiqua", Arial}

    h2 {font-family: "Square 721 BT", Tahoma, Arial}

    </style>

    </head>

    Una hoja de estilo externa. Almacenaremos en un fichero .css las reglas de estilo del
    documento. Es la forma ms adecuada, separando el estilo completamente del documento.

    En la cabecera del fichero HTML se incluye un enlace al fichero de estilo:

    <link rel=StyleSheet href=estilos.css" >

    En el fichero de estilo se incluyen las propiedades de las etiquetas o clases:

    /* Ejemplo de un fichero de estilo */

    body { background-color:#00FF99;}

    h1 {text-align: center;

    Color: red;

    Font-family: Dauphin, "Book Antiqua", Arial}

    h2 {font-family: "Square 721 BT", Tahoma, Arial}

    2
    Diseo WEB </>
    HERENCIA

    En esta estructura existe un elemento raz que es el que acta de contenedor de todos los
    dems elementos. En HTML se puede considerar como elemento raz al elemento <body> o al
    elemento <html>. La importancia de este hecho es que cada elemento hereda las propiedades
    del elemento que lo contiene (llamado el elemento padre). Quiere decir que si especificamos
    la propiedad color: red para <BODY> en la hoja de estilos, todos los elementos de la pgina
    heredarn esta caracterstica y no ser necesario especificar nuevamente la propiedad color en
    cada uno de ellos. Aqu es necesario hacer algunas precisiones:

    1. No todas las propiedades son hereditables y para cada propiedad se define si sta se
    hereda o no.
    2. El valor inherit puede aplicarse a cualquier propiedad de los elementos. Este valor
    puede usarse para reforzar explcitamente la herencia de una propiedad o para lograr
    que un elemento herede de su padre una propiedad que de otro modo no sera
    heredada.
    *.peligro { color: inherit; }
    3. Cuando se asigna una propiedad a un elemento, el valor especificado reemplaza al
    valor heredado, como si se sobrescribiera el valor heredado del padre..
    4. Los elementos heredan los valores computados (expresados con base a porcentajes o
    tamaos relativos) del padre, no los valores especificados. Todas las propiedades
    tienen siempre un valor asignado. El valor por defecto, el valor heredado o el valor
    asignado en el archivo CSS).

    CASCADA

    Cuando varias hojas de estilos se aplican sobre un documento y hay conflictos sobre la regla
    que debe aplicarse. El orden de la cascada determina, en el caso en que existan reglas
    incompatibles, cul de ellas tiene preponderancia. Las hojas de estilo pueden tener tres
    orgenes:

    El autor: como hemos visto hasta ahora, puede hacerlo a travs de una hoja externa
    El usuario: tambin puede especificar su propia hoja de estilo.
    La aplicacin del usuario: el navegador tambin aplica una hoja de estilo
    predeterminada

    Las siguientes son las normas que determinan la fuerza de las reglas de estilo:

    1. La primera disposicin se hace por el origen: las reglas de la hoja de estilo del autor
    tienen ms fuerza que las del usuario y stas, a su vez, prevalecen por sobre las del
    navegador.
    2. La segunda disposicin es por especificidad: los selectores ms especficos tienen
    mayor fuerza que los selectores generales.
    3. Finalmente, se dispone por el orden especificado: si dos reglas tienen la misma fuerza,
    origen y especificidad, la ltima en ser especificada es la que vence.

    3
    Diseo WEB </>
    REGLAS

    Un documento CSS est compuesto por una coleccin de reglas. Como lo ms probable es que
    haya ms de una regla, una coleccin de reglas. Una regla consiste en un selector acompaado
    de un bloque de declaraciones.

    S-ar putea să vă placă și