Scribd Logo
Carica

Benvenuto in Scribd!

  • Presentaci+ N CSS PDF

    Caricato da

    Margarita Vasco
    26 visualizzazioni12 pagine

    Titolo originale

    Presentaci+¦n CSS.pdf

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    26 visualizzazioni12 pagine

    Presentaci+ N CSS PDF

    Caricato da

    Margarita Vasco

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 12

    Tecnologías Web

    Puras
    Ing. Carlos Cevallos
    HTML5 - Estructura
    Estructura HTML <body>
    Logo, títulos,
    subtítulos
    Contenido Navegación (menús)
    principal

    Barra lateral
    Información no
    principal

    Derechos de autor
    Créditos
    Referencias
    Etiquetas nuevas HTML5
    Etiqueta Descripción
    hgroup Agrupa etiquetas h
    figure Declara secciones para imágenes y permite
    figcaption registrar una descripción
    mark Resalta un texto relevante
    small Contenido al margen (las letras pequeñas)
    cite Cita o referencia
    Cascade Style Sheet

     Sobre escribe estilos básicos del


    navegador
     Permite crear estilos propios
     CSS3 es totalmente compatible con
    versiones anteriores
     Ha sido dividido en módulos, ejemplo:
    selectores, modelos de caja, fondos y
    borders, efectos de texto, animaciones,
    interfaz de usuario
    CSS3 - Estructuras
    Block vs Inline - Block

    Block 1 Block 1 Block 1 Block 3

    Block 2 Block 4

    Block 3

    header, nav, div, footer, p …


    Estilos
     En línea: vista rápida
    <p style=“font-size: 20px”>Prueba</p>
     Estilos embebidos
    <style>
    p {font-size:20px}
    </style>
     Archivos Externos
    <link rel="stylesheet" href="estilo.css"/>
    Selector
     Universal
    *{
    font-size:20px;
    }
     Referencia por etiqueta
    p{
    font-size:20px; <p> Prueba </p>
    }
     Referencia por id (identificador único)
    p#mi-id {
    font-size:20px; <p id=“mi-id”> Prueba </p>
    }
    Selector

     Clases
    p.mi-clase {
    font-size:20px; <p class=“mi-clase”> Prueba</p>
    }

     Por atributo
    p[name=“eti”] {
    font-size:20px;
    }

     Pseudo-clases
    p[name=“eti”] {
    font-size:20px; <p name=“eti”> Prueba</p>
    }
    Selectores

     Otros
    Selector Ejemplo Descripción
    [attribute^=valu a[href^="https"] Selects every <a> element whose href
    e] attribute value begins with "https"
    [attribute$=valu a[href$=".pdf"] Selects every <a> element whose href
    e] attribute value ends with ".pdf"
    [attribute*=value a[href*="w3schools Selects every <a> element whose href
    ] "] attribute value contains the substring
    "w3schools"
    :first-of-type p:first-of-type Selects every <p> element that is the
    first <p> element of its parent

     http://www.w3schools.com/cssref/css_selectors.asp

    Potrebbero piacerti anche