Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Vincular CSS Con HTML

    Cargado por

    Bayron Araujo
    13 vistas11 páginas
    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
    html

    Copyright:

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

    Vincular CSS Con HTML

    Cargado por

    Bayron Araujo
    html

    Copyright:

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

    Clase 3

    Introducción a CSS (Conceptos básicos y sintaxis)

    Estas diapositivas son de uso exclusivo para alumnos y ex-alumnos de Hack Academy.
    CSS
    ¿Qué es CSS?
    ● CSS = Cascading Style Sheets.

    ● CSS es un lenguaje de hojas de estilo que permite darle estilo a los


    elementos de una página. Fue creado en 1996.

    ● CSS se vincula en el HTML, pero se escriben los estilos en un archivo aparte.

    Entonces, ¿qué podemos hacer con CSS?


    Con CSS se puede hacer de todo

    Subrayar un texto.

    Darle color a un texto, hacerlo negrita, hacerlo cursiva.

    Tamaño y la tipografía (Recomendación: nunca usar comic sans)

    Posicionar un texto hacia la derecha

    Cambiar el color de fondo

    Cambiar el borde de un elemento (color, ancho, estilo)


    CSS – Documentación

    ● MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started

    ● MDN (español): https://developer.mozilla.org/es/docs/Web/CSS/Introducci%C3%B3n

    ● W3 Schools: http://www.w3schools.com/css/

    TE
    AN
    RT
    PO
    IM
    Empiecen a acostumbrarse a consultar la documentación de cada tecnología.
    En general, suelen ser mejores la versiones en inglés.
    CSS – Links interesantes

    Con CSS versión 3 se pueden hacer varias cosas “locas”. Si bien no entran en el
    temario del curso, aquí se pueden ver algunos ejemplos:
    ● Flip Card: https://desandro.github.io/3dtransforms/examples/card-01.html.

    ● Girar Cubo: https://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html.

    ● Gallo que camina: https://codepen.io/judag/pen/zxKVQR. MIREN E


    STE!

    Conviene señalar que muchas veces este tipo de efectos requieren utilizar propiedades de
    CSS y HTML que no son soportadas por todos los navegadores.
    Sintaxis en CSS
    Sintaxis de CSS
    CSS consiste de una serie de reglas de estilo. Cada regla está conformada por un
    selector y declaraciones de pares “propiedad-valor” (o clave-valor).

    selector { Sintaxis:
    property: value; El selector encierra las propiedades entre llaves { y }.
    }
    Los pares de propiedad-valor se separan por : y terminan con un ;.

    body { En este ejemplo el selector es el tag body y se le asignaron 2


    color: blue; propiedades CSS.
    background-color: grey; La primera establece el color del texto en el body.
    }
    La segunda establece el color de fondo del body.
    Ejemplo de código CSS

    body {
    color: blue;
    background-color: grey;
    }

    Este código le indica al body que el color de texto debe ser azul y que el color de
    fondo debe ser gris.
    Vincular CSS con HTML
    Vincular CSS con HTML
    CSS se puede linkear o vincular dentro del HTML para que estén comunicados a
    través de la etiqueta <link> dentro de <head>.

    <link rel="stylesheet" href="style.css">

    También podría gustarte