Scribd Logo
Upload

Welcome to Scribd!

  • Introduccic3b3n Css

    Uploaded by

    Milton Accostupa
    9 views17 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views17 pages

    Introduccic3b3n Css

    Uploaded by

    Milton Accostupa

    Copyright:

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

    CSS

    Hojas de Estilo en
    Cascada

    RAFAEL MOURGLIA
    ¿Qué son las Hojas de Estilo? (CSS)

    • CSS son las siglas de Cascade Style Sheet que


    traducido significa hojas de estilo en cascada.
    • Las hojas de estilo es una tecnología que nos
    permite controlar la apariencia de una página
    web.
    • En un principio, los sitos web se concentraban
    más en su contenido que en su presentación.
    • HTML no pone mucha atención en la
    apariencia del documento.
    ¿Qué son las Hojas de Estilo? (CSS)

    • CSS describe como los elementos


    dispuestos en la página son presentados
    al usuario. CSS es un gran avance que
    complementa el HTML y la Web en
    general.
    • Con CSS podemos especifiar estilos
    como el tamaño, fuentes, color,
    espaciado entre textos y recuadros así
    como el lugar donde disponer texto e
    imagenes en la página.
    Aplicar estilos a una página
    • Existen 3 formas de aplicar
    estilos a una página html:
    1. Directamente en una etiqueta
    2. En el <head> de la página
    3. Agrupar reglas de estilo en un
    archivo externo (*.css). En esta
    opción es en la que haremos
    énfasis por ser la más
    recomendada.
    Sintaxis para definir un estilo
    Propiedad : Valor_propiedad
    • A diferencia de html, se utiliza dos puntos (:)
    luego del nombre de la propiedad en vez de
    igual (=), y el valor de la propiedad NO VA
    entre comillas.

    • Como ejemplo, utilizaremos un estilo para


    modificar el color de la fuente.

    color : red
    Propiedad Valor de la Propiedad
    Sintaxis para definir un estilo
    • Es posible definir todos los estilos que
    querramos para un elemento. Para esto
    debemos separar los estilos con punto y
    coma (;).
    • Ejemplo: además de cambiar el color de
    la fuente, cambiaremos también el
    tamaño.
    color: red; font-size: 30px;
    Estilo para cambiar Estilo para cambiar
    el color de fuente el tamaño de fuente
    Definición de estilo a nivel de marca
    html
    • Es la forma más fácil pero menos recomendada para
    aplicación de un estilo a una marca HTML.
    • Se define en la propiedad style de cada elemento
    HTML.
    • Puede ser de utilidad definir estilos directamente en
    las marcas HTML cuando estamos diseñando la
    página y posteriormente trasladar el estilo creado a
    una hoja de estilos.
    Definición de estilo a nivel de marca
    html
    • En caso de necesitar aplicar los mismos estilos para el
    resto de los párrafos, es necesario copiar estos estilos
    para cada párrafo que se encuentre en la página.
    • Esto consume tiempo y en caso de querer cambiar un
    estilo (por ejemplo que los párrafos en vez de color
    azul se vean rojos), será necesario modificarlo en
    cada párrafo.
    Definición de estilo a nivel de
    página.
    • Es la definición de estilos en una sección de
    la cabecera de la página HTML (HEAD)
    donde podemos definir estilos que se
    aplican a las distintas marcas HTML de la
    página.
    • El problema del concepto anterior donde
    debíamos crear un estilo similar para la
    marca <p> se puede resolver en forma más
    adecuada empleando la definición de
    estilos a nivel de página.
    Definición de estilo a nivel de
    página.

    Todas las parcas


    <p> tendrán el
    mismo estilo
    Definición de estilo a nivel de
    página.
    • Si ahora deseamos modificar el color de
    los párrafos de azul a verde, sólo
    modificaremos la propiedad de ese
    estilo por única vez.
    Definición de estilo en un archivo
    externo.
    • La definición de una hoja de estilo en
    un archivo separado, es la metodología
    mas utilizada. Este archivo deberá tener
    la extensión css.
    • Este archivo contendrá las reglas de
    estilo (igual como las hemos visto hasta
    ahora) pero estarán separadas del
    archivo HTML.
    Definición de estilo en un archivo
    externo.
    • Ventajas de este método:
    – Permite aplicar las mismas reglas de estilo a parte o a
    todas las páginas del sitio web. Ésto será muy provechoso
    cuando necesitemos hacer cambios de estilo (cambiando
    las reglas de estilo de este archivo estaremos cambiando
    la apariencia de múltiples páginas del sitio).
    – Al programador le resulta más ordenado tener lo
    referente a HTML en un archivo y las reglas de estilo en un
    archivo aparte.
    – Cuando un navegador solicita una página, se le envía el
    archivo HTML y el archivo CSS, quedando guardado este
    último archivo en la caché de la computadora, con lo cual,
    en las sucesivas páginas que requieran el mismo archivo
    de estilos, ese mismo archivo se rescata de la caché y no
    requiere que el servidor web se lo reenvíe (ahorrando
    tiempo de transferencia).
    Crear archivo externo CSS
    • De la misma forma que HTML, un
    archivo CSS se crea en un programa que
    maneje texto sin formato (como el
    block de notas).
    • En este archivo se especifican las reglas
    de estilos de la misma forma que se
    haría a nivel de página, y luego se
    guarda con la extención .css.
    Crear archivo externo CSS
    estilos.css
    Asociar página HTML con archivo
    externo CSS
    • La asociación se realiza en el HEAD de cada
    página HTML utilizando el elemento <link>.
    Propiedades del elemento <link>

    • rel: se usa para definir la relación entre


    el archivo enlazado y el documento
    HTML.
    • href: dirección o URL del archivo
    externo CSS. Se especifica de la misma
    forma que un hipervínculo o imagen.
    • type: indica al navegador cual es el
    formato de archivo.

    You might also like