Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Introducción A Css

    Cargado por

    Eduard abreu jimenez
    7 vistas21 páginas
    El documento presenta una cita de Henry Ford que dice "El fracaso es la oportunidad de comenzar de nuevo con más inteligencia".

    Descripción original:

    in

    Título original

    Introducción a Css

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PPTX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    El documento presenta una cita de Henry Ford que dice "El fracaso es la oportunidad de comenzar de nuevo con más inteligencia".

    Copyright:

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

    Introducción A Css

    Cargado por

    Eduard abreu jimenez
    El documento presenta una cita de Henry Ford que dice "El fracaso es la oportunidad de comenzar de nuevo con más inteligencia".

    Copyright:

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

     

    “El fracaso es la oportunidad


    de comenzar de nuevo con
    más inteligencia.”

    Henry Ford
    CSS
    CSS
    CSS significa hojas de estilo en cascada
    CSS describe cómo se deben mostrar los elementos
    HTML en la pantalla, el papel o en otros medios
    CSS ahorra mucho trabajo. Puede controlar el
    diseño de varias páginas web a la vez
    Las hojas de estilo externas se almacenan en
    archivos CSS
    ¿POR QUÉ USAR CSS?

    CSS se usa para definir estilos para sus páginas web, incluido el diseño, el diseño
    y las variaciones en la visualización para diferentes dispositivos y tamaños de
    pantalla.
    INTRODUCCIÓN A CSS

    HTML NUNCA tuvo la intención de contener etiquetas para formatear una página web.
    HTML fue creado para describir el contenido de una página web, como:
    <h1>Este es un encabezado</h1>
    <p>Esto es un párrafo.</p>
    Cuando se agregaron etiquetas como <font> y atributos de color a la especificación HTML 3.2,
    comenzó una pesadilla para los desarrolladores web. El desarrollo de grandes sitios web, donde
    se añadía información de fuentes y colores a cada página, se convirtió en un proceso largo y
    costoso.
    Para resolver este problema, el World Wide Web Consortium (W3C) creó CSS.
    ¡CSS eliminó el formato de estilo de la página HTML!
    SINTAXIS
    Una regla CSS consta de un selector y un bloque de declaración.
     El selector apunta al elemento HTML que desea diseñar.
    El bloque de declaración contiene una o más declaraciones separadas por punto y
    coma.
    Cada declaración incluye un nombre de propiedad CSS y un valor, separados por
    dos puntos.
    Varias declaraciones CSS se separan con punto y coma, y ​los bloques de
    declaración están rodeados por llaves.
    EJEMPLO

    p {
      color: red;
      text-align: center;
    }

    En este ejemplo, todos los elementos


    <p> estarán alineados al centro, con un
    color de texto rojo:
    EJEMPLO EXPLICADO

    P es un selector en CSS (apunta al


    elemento HTML que desea diseñar:
    <p>).

    Color es una propiedad, y red es el


    valor de la propiedad
    text-align es una propiedad,
    y center es el valor de la propiedad.
    TRES FORMAS DE INSERTAR CSS

    Hay tres formas de insertar una hoja de


    estilo:

    • CSS externo
    • CSS interno
    • CSS en línea
    CSS EXTERNO

    ¡Con una hoja de estilo externa, puede cambiar la


    apariencia de un sitio web completo cambiando solo
    un archivo!

    Cada página HTML debe incluir una referencia al


    archivo de hoja de estilo externo dentro del
    elemento <link>, dentro de la sección de
    encabezado.
    EJEMPLO
    Los estilos externos se definen dentro del elemento <link>, dentro de la sección <head> de una
    página HTML:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>

    <h1>Css</h1>
    <p>parrafo>

    </body>
    </html>
    TOMAR EN CUENTA:
    Una hoja de estilo externa se puede escribir en cualquier
    editor de texto y debe guardarse con una extensión .css.
    El archivo .css externo no debe contener ninguna etiqueta
    HTML.
    Así es como se ve el archivo "mystyle.css“

    Nota: No agregue un espacio entre el valor de la propiedad y la unidad:


    Incorrecto (espacio): margin-left: 20 px;
    Correcto (sin espacio):margin-left:20px;
    IMPLEMENTA Y COMENTA

    Tienes que tener en cuenta los siguientes requisitos:


    Copia un párrafo en html y de manera externa darle el
    sigte formato

    – El color del texto es azul: #00F.


    – El color de fondo del texto es verde claro: #CFC.
    – El tipo de letra es la secuencia: Georgia, Cambria,
    serif.
    – El tamaño del texto: 16px.
    CSS INTERNO

    Se puede usar una hoja de estilo interna si una sola


    página HTML tiene un estilo único.
    El estilo interno se define dentro del elemento <style>,
    dentro de la sección de cabecera.
    EJEMPLO
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    }
    </style>
    </head>
    <body>
    <h1>Encabezado</h1>
    <p>Parrafo</p>
    </body>
    </html>
    IMPLEMENTA Y EXPLICA

    Inserta un encabezado en html y aplica


    mediante el Css interno lo sigte:

    – El color del texto es rojo claro: #F00.


    – El tipo de letra es la secuencia:
    Verdana, Calibri, sans-serif.
    – El tamaño del texto: 32px.
    CSS EN LÍNEA

    Se puede usar un estilo en línea para


    aplicar un estilo único a un solo
    elemento.
    Para usar estilos en línea, agregue el
    atributo de estilo al elemento
    relevante. El atributo de estilo puede
    contener cualquier propiedad CSS.
    EJEMPLO
    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="color:blue;text-align:center;">Encabezado</h1>
    <p style="color:red;">Parrafo</p>

    </body>
    </html>

    Nota: un estilo en línea pierde muchas de las ventajas de una hoja de estilo (al mezclar
    contenido con presentación). Utilice este método con moderación.
    IMPLEMENTA Y EXPLICA

    Inserte enlaces en html y aplícale formato con


    css en línea:

    – El color del texto es rojo claro: #A00.

    – El tipo de letra es la secuencia: Verdana,


    Calibri, sans-serif.

    – El tamaño del texto: 24px.


    ORDEN EN CASCADA

    ¿Qué estilo se utilizará cuando haya más de un estilo especificado para un elemento
    HTML?
    • Todos los estilos en una página "caerán en cascada" en una nueva hoja de estilo
    "virtual" según las siguientes reglas, donde el número uno tiene la prioridad más alta:
    • Estilo en línea (dentro de un elemento HTML)
    • Hojas de estilo externas e internas (en la sección de cabecera)
    • predeterminado del navegador
    • Por lo tanto, un estilo en línea tiene la prioridad más alta y anulará los estilos
    externos e internos y los valores predeterminados del navegador.

    También podría gustarte