Scribd Logo
Upload

Welcome to Scribd!

  • Guia 4 Estilos CSS

    Uploaded by

    Sergio Gonzalez
    55 views6 pages
    Guia FUSM Estilos CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Guia FUSM Estilos CSS

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    55 views6 pages

    Guia 4 Estilos CSS

    Uploaded by

    Sergio Gonzalez
    Guia FUSM Estilos CSS

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    Guas HTML

    2012

    GUIA 4. Estilos CSS


    CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.
    Las hojas de estilo es una tecnologa que nos permite controlar la apariencia de una pgina
    web.

    Definicin de estilos a nivel de marca HTML.


    Es la forma ms fcil pero menos recomendada para aplicacin de un estilo a una marca
    HTML. Se define en la propiedad style los estilos a definir para dicha marca.

    La sintaxis para definir un estilo a una marca HTML es la siguiente:


    <body>
    <h1 style="color:#ff0000;background-color:#ffff00">
    Este mensaje es de color rojo sobre fondo amarillo.
    </h1>
    </body>
    Cuando definimos estilos directamente en las marcas HTML, tenemos que tener en cuenta que
    el estilo se aplica nicamente a la marca donde inicializamos la propiedad style, es decir, si
    tenemos dos secciones h1, deberemos definir la propiedad style para cada marca.

    Definicin de estilos a nivel de pgina.


    Es la definicin de estilos en una seccin de la cabecera de la pgina HTML donde podemos
    definir estilos que se aplican a las distintas marcas HTML de la pgina.
    <html>
    <head>
    <title>Problema</title>
    <styletype="text/css">
    .St1 {color:#ff0000}
    .st2 {color:#00ff00}
    .st3 {color:#0000ff}
    </style>
    </head>
    <body>
    <h1 classSt1>rojo</h1>
    <h2 classSt1>>verde</h2>
    <h3 classSt1>>azul</h3>
    </body>
    </html>
    Se declaran los estilos entre las etiquetas <styletype="text/css"> y </style> en la cabecera y
    se llama en la etiqueta.

    Propiedades relacionadas a fuentes.


    Contamos con una serie de propiedades relacionadas a fuentes:
    font-family
    font-size
    font-style

    Gua 1 HTML. Elaborada por: Daniel Mora

    Guas HTML
    2012
    font-weight
    font-variant
    Podemos inicializar algunas o todas las propiedades relacionadas a fuentes, un ejemplo:
    <html>
    <head>
    <title>Problema</title>
    <styletype="text/css">
    .st1 {
    font-family:times new roman;
    font-size:30px;
    font-style:italic;
    font-weight:bold;
    text-align:left;

    // Tipo de letra
    // Tamao
    // Estilo
    // Negrita
    // Alineacion

    }
    .st2 {
    font-family:verdana;
    font-size:20px;
    }
    </style>
    </head>
    <body>
    <h1class=st1>Titulo de nivel 1</h1>
    <h2class=st2>Titulo de nivel 2</h2>
    </body>
    </html>

    Definicin de hojas de estilo en un archivo externo.


    <head>
    <title>Problema</title>
    <link rel="StyleSheet" href="estilos.css" type="text/css">
    </head>

    Propiedades relacionadas al borde de una marca HTML.


    background-color:#ffff00;
    border-width:1px;
    border-style:solid;
    border-color:#000000;
    En sta hemos cambiado el estilo de borde. Disponemos de los siguientes estilos de borde:
    None hidden dotted dashed solid doubl Groove ridge inset - outset
    Como vimos en el concepto anterior tenemos propiedades que nos permiten fijar el grosor,
    estilo y color del borde de una marca HTML. Pero podemos ir un paso ms alla, las CSS nos
    permiten modificar independientemente cada uno de los cuatro bordes del rectngulo.
    border-top-width:1px;
    border-right-width:3px;
    border-bottom-width:3px;
    border-left-width:1px;
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:solid;

    Gua 1 HTML. Elaborada por: Daniel Mora

    Guas HTML
    2012
    border-left-style:dotted;
    border-top-color:#ffaa00;
    border-right-color:#ff0000;
    border-bottom-color:#ff0000;
    border-left-color:#ffaa00;

    Propiedades relacionadas al fondo (background)


    Hay otras propiedades relacionadas al fondo que nos permiten, entre otras cosas, disponer un
    archivo de imagen. Las propiedades relacionadas al background y sus valores son:
    background-color
    background-image
    background-repeat
    background-position
    background-attachment
    <!DOCTYPE html>
    <html>
    <head>
    <title>Problema</title>
    <link rel="StyleSheet" href="estilos.css" type="text/css">
    </head>
    <body>
    </body>
    </html>
    body {
    background-image:url(fondo.jpg);
    }
    La nica propiedad que hemos inicializado es background-image indicando el nombre del
    archivo de imagen a mostrar.
    La imagen se repite en x e y hasta llenar la pgina por completo, ya que por defecto
    background-repeat est inicializada con el valor repeat, probar de modificar el estilo primero
    con:
    body {
    background-image:url(fondo.jpg);
    background-repeat:repeat-x;
    }
    Luego con:
    body {
    background-image:url(fondo.jpg);
    background-repeat:repeat-y;
    }
    Y por ltimo:
    body {
    background-image:url(fondo.jpg);
    background-repeat:no-repeat;
    }

    Gua 1 HTML. Elaborada por: Daniel Mora

    Guas HTML
    2012
    Tener en cuenta que podemos aplicar una imagen a otras marcas HTML (h1,h2,h3,p, etc.).
    La ltima propiedad background-position podemos indicar la posicin de la imagen segn los
    siguientes valores:
    top left
    top center
    top right
    center left
    center center
    center right
    bottom left
    bottom center
    bottom right
    x-% y-%
    x-pos y-pos
    Para que tenga sentido esta propiedad debemos inicializar la propiedad background-repeat
    con el valor no-repeat.
    Por ejemplo:
    body {
    background-image:url(fondo.jpg);
    background-repeat:no-repeat;
    background-position:20% 50%;
    }
    Ejercicios
    1. Crear una pgina HTML y definir tres mensajes entre las marcas h1, h2 y h3. Definir el
    mismo color para el texto de cada bloque y colores diferentes para el fondo de los
    mismos (cada marca HTML debe tener definida la propiedad style).
    2. Definir un estilo diferente para las marcas h1,h2,h3,h4,h5 y h6. Mostrar mensajes
    utilizando estas marcas a las que se le han definido estilos (por ahora slo conocemos
    el color de texto y fondo)
    3. Definir reglas para las marcas HTML: h1,h2,h3,h4,h5 y h6. Inicializar la propiedad
    font-size con valores decrecientes para cada una de las marcas (40,30,25,20,15 y 10
    pxeles). Inicializar la propiedad font-family para las tres primeras marcas con los
    valores: Arial, Arial Black y Arial Narrow.
    4. Crear una pgina web que contenga una cabecera de nivel 1 (h1), luego una cabecera
    de
    nivel
    2
    (h2)
    y
    un
    prrafo.
    Definir reglas de estilo para las tres marcas h1,h2 y p. Inicializar propiedades vistas
    en conceptos anteriores mediante un archivo externo.
    5. Inicializar las marcas h1,h2 y h3 con bordes de 2 pixeles, color azul y diferentes
    estilos para cada una. Crear una pgina HTML que los utilice.
    6. Crear una tabla con que inicialice el borde superior e inferior con ancho de 2 pixeles y
    los bordes laterales con cero pixel. A su eleccin queda el estilo y color.
    7. Realizar la siguiente pagina aplicando estilos CSS.

    Gua 1 HTML. Elaborada por: Daniel Mora

    Guas HTML
    2012

    8. Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en
    la siguiente imagen:

    9. Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en
    la siguiente imagen:

    Gua 1 HTML. Elaborada por: Daniel Mora

    Guas HTML
    2012

    10. Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en
    la siguiente imagen:

    11. Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en
    la siguiente imagen:

    Bibliografa
    http://www.cssya.com.ar
    http://www.w3schools.com/css/

    Gua 1 HTML. Elaborada por: Daniel Mora

    You might also like