Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Intro A CSS

    Cargado por

    kpresley404
    13 vistas16 páginas

    Título original

    Intro_a_CSS.pptx

    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
    13 vistas16 páginas

    Intro A CSS

    Cargado por

    kpresley404

    Copyright:

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

    Introducción a CSS

    > Intro a CSS | Video


    1 Qué es CSS
    ÍNDICE
    2 Vinculación con HTML
    3 Estructura
    4 Selectores
    5 Propiedades

    6 Cascada, Especificidad y
    Jerarquía
    Cascading
    Style Sheets
    (CSS)
    > Cascading Style Sheets (CSS)

    ● Lenguaje de diseño gráfico para definir estilo y presentación de un lenguaje de


    marcado (HTML, XML).

    ● Establece un sistema de cascada para determinar la prioridad de una regla de estilo


    en caso de conflicto.

    ● CSS se ideó para aplicar el formato en las páginas, de una manera mucho más
    detallada, con nuevas posibilidades que no estaban al alcance de HTML

    ● Será el responsable de toda la personalización sobre la web y su aspecto


    Vinculación
    con HTML
    > Vinculación con HTML
    Existen 3 formas de vinculación con HTML

    1- Con el atributo style en una 3- Mediante un archivo externo con la etiqueta link:
    etiqueta
    <head>
    <p style="color: blue; font-size: <link rel="stylesheet" href="styles/main.css">
    2rem"> .... </p> </head>

    2- Mediante la etiqueta style en el head del HTML:

    <head>
    <title>Mi página Web</title>
    <style>
    p{
    color: blue;
    font-size: 2rem;
    }
    </style>
    Estructura
    Estructura

    selector {
    propiedad: valor;
    propiedad: valor;
    }

    selector {
    propiedad: valor;
    propiedad: valor;
    propiedad: valor;
    }
    Selectores
    > Selectores

    ● * : selector general ● div p : selector de descendencia

    ● p : selector de etiqueta ● h1,h2,h3 : selector múltiple

    ● .class-name : selector de clase ● div.class-name : selector de clase específico

    ● #id : selector de id ● a[href="#"] : selector de atributo

    ● div>p : selector de hijo directo


    Propiedades
    > Propiedades
    Cada elemento del HTML tiene un listado de propiedades
    posibles con valores predeterminados por el navegador.
    Mediante CSS, podemos acceder a estas propiedades y
    modificarlas.

    ● color : blue | #000FF | rgb(0, 0, 255) | rgba (0, 0 ,255,1) ; ● font-size : xx-small | 2rem | 20%;
    [Permite cambiar el color de algunos elementos, por [Especifica el tamaño de la letra (Es aconsejable
    ejemplo un texto] evitar el uso de valores que no sean relativos)]

    ● font-family : "Gill Sans Extrabold";


    ● background : violet | ./image/background.png; [Define una lista de fuentes o familias de fuentes,
    [Se utiliza para establecer un fondo ya sea en colores con un orden de prioridad]
    o imagen]

    ● width : 5rem | 75% | 20px | 5vw; ● object-fit : cover | contain | fill;


    [Establece el ancho de un elemento] [Ayuda a ajustar una imagen o video a un
    contenedor]
    ● height : 5rem | 75% | 20px | 5vh;
    [Establece el alto de un elemento]
    Cascada,
    Especificidad
    y Jerarquía
    > Sistema de Cascada

    El sistema de cascada especifica qué hacer si dos o más


    reglas de estilo para un mismo o varios elementos entran
    en conflicto. La prioridad se establece para la última regla.

    Por ejemplo:

    p{
    color: yellow;
    margin-left: 2rem;
    }
    Si ponemos una misma
    propiedad para una misma
    p{ etiqueta pero con diferente
    color: blue; valor, se tomará el último
    } valor colocado. La
    excepción a esta regla es la
    Jerarquía
    > Especificidad y Jerarquía
    Especificidad: Jerarquía básica:
    Es la manera en la cual priorizamos la relevancia de la Iremos de mayor jerarquía a menor
    propiedad, esto dependerá de qué tipo de selector utilicemos. jerarquía,

    Aquí entra el orden de Jerarquía de selectores. 1. Selector de ID [ #id ]


    Es decir, si tenemos una etiqueta p que tiene una clase llamada
    “resumen-inicial” 2. Selector de Clase [ .clase ]

    .resumen-inicial { 3. Selector de Etiqueta [ p ]


    color: violet
    }

    p{
    color: blue;
    }

    Por más que pongamos el selector de etiqueta debajo, la


    Jerarquía indica que tiene más prioridad la clase, por ende se
    aplicaría el color “violet” y no el “blue”

    También podría gustarte