Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Métodos para Aplicar Css Al HTML

    Cargado por

    Miguel Ángel Chocontá Motavita
    4 vistas9 páginas

    Título original

    2. Métodos Para Aplicar Css Al HTML

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    4 vistas9 páginas

    Métodos para Aplicar Css Al HTML

    Cargado por

    Miguel Ángel Chocontá Motavita

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 9

    MÉTODOS PARA APLICAR

    CSS AL HTML
    MÉTODOS PARA APLICAR CSS AL HTML
    Existen 3 métodos para añadir estilos CSS a un sitio web:

    1. CSS “en línea”


    2. CSS “interno”
    3. CSS “externo”
    1. CSS EN LÍNEA (I)
    ● Estilo CSS que afecta a un sólo elemento.

    ● Se definen dentro de las etiquetas HTML de cada elemento a modificar, mediante el


    atributo style.
    1. CSS EN LÍNEA (II)
    A pesar de que los estilos en línea funcionan correctamente y algunos sitios aún los utilizan,
    NO ES LA FORMA CORRECTA DE IMPLEMENTAR ESTILOS, por las siguientes razones:

    ● Complica el mantenimiento de un sitio web, pues al necesitar, por ejemplo, modificar el


    valor de una propiedad se tendría que ir a cada elemento que la utiliza y cambiarlo
    manualmente.
    ● Mezcla la estructura de la página con el diseño, dificultando la lectura y comprensión del
    código.

    El CSS en línea se debe usar únicamente en casos en que sea imposible agregar estilos de
    una manera diferente, por ejemplo, hay herramientas para creación de sitios mediante
    arrastrar y soltar, los cuales permiten editar únicamente el código HTML. Otro ejemplo en el
    que suele usarse mucho es en el correo electrónico en formato HTML para lograr la máxima
    compatibilidad con el mayor número de clientes.
    2. CSS INTERNO (I)
    El CSS interno es cuando no hay ningún archivo CSS externo, sino que se crean los estilos
    dentro de un elemento <style> contenido dentro del elemento <head> del HTML.
    2. CSS INTERNO (II)
    ● Puede utilizarse en ciertas circunstancias pero NO ES TAN EFICIENTE como
    el CSS externo.

    ● La desventaja que presenta es que en caso de requerir los mismos estilos en


    diferentes documentos HTML, se tendría que repetir el CSS en cada una de
    las páginas y en caso de que se quiera cambiar cualquier regla, se tendría que
    actualizar cada documento.
    3. CSS EXTERNO (I)
    El CSS externo se refiere a la creación de un archivo independiente que contiene los estilos CSS
    únicamente (el cual tendrá extensión “.css” ) y se vincula a los documentos HTML que quieran
    utilizarlo. La vinculación se realiza mediante el elemento <link> de HTML, definido dentro del
    elemento head, el cual maneja los atributos:

    ● “rel”: Maneja el valor “stylesheet”, que indica que se está enlazando una hoja de estilos.
    ● “href”: Indica la ruta en la que se encuentra el archivo de estilos con extensión “.css”.

    index.html mis-estilos.css
    3. CSS EXTERNO (II)
    ● Es el método más común y útil para añadir CSS a un sitio web.

    ● Permite utilizar el mismo CSS para múltiples documentos HTML.

    ● Al llamar desde diferentes documentos HTML un mismo documento CSS, la


    modificación de reglas se hará en un único archivo, que será el documento de
    estilos, el HTML no se tocará, facilitando el mantenimiento del sitio web.
    EJERCICIO - MANEJO DE ESTILOS
    Replicar el documento HTML ejemplo.

    ● Usar los contenedores header, main y footer. Cada uno tendrá diferente color
    de fondo.

    ● Los encabezados h1, h2 y h3, manejan diferente color.

    ● Los enlaces deben ser de color rojo.

    ● El estilo de los enlaces se dará mediante el método "en línea".

    ● El estilo de los encabezados se dará mediante el método "interno".

    ● El estilo de fondo de los contenedores se dará mediante el método "externo".

    También podría gustarte