Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Clase HTML CSS

    Hochgeladen von

    oscar bueno
    5 Ansichten21 Seiten
    clases fundamentales de css

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    clases fundamentales de css

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    5 Ansichten21 Seiten

    Clase HTML CSS

    Hochgeladen von

    oscar bueno
    clases fundamentales de css

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 21

    Programación

    Web
    Html5 – CSS3
    HTML, siglas de HyperText Markup
    Language («lenguaje de marcas de hipertexto»)
    DOM (Document Object Model)
    html, CSS básico y el uso de selectores
    Hoja de estilo en cascada o CSS (siglas en
    inglés de cascading style sheets) es un
    lenguaje usado para definir y crear la
    presentación de un documento estructurado
    escrito en HTML o XML
    Selectores
    index.html

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <title>Programacion II</title>
    </head>
    <body>

    </body>
    </html>
    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <title>Programacion II</title>
    </head>
    <body>
    <header>
    <h1 >Tecnología en informática y sistemas </h1>
    <h2 >programación II</h2>
    </header>

    <nav> <!-- defino la navegacion de mi sitio -->


    <ul>
    <li><a href="">Inicio</a></li>
    <li><a href="">Contacto</a></li>
    <li><a href="">Deportes</a></li>
    <li><a href="">Sucesos</a></li>
    </ul>
    </nav>
    </body>
    </html>
    style.css
     Selector universal * Se utiliza para
    seleccionar todos los elementos de la página

    *{
    font-family: Arial, Helvetica, sans-serif;
    color: maroon;
    font-size:24px;
    }
    Pero antes debemos relacionar nuestro
    CSS con nuestro html.

    <head>
    <meta charset="UTF-8">
    <title>Programacion II</title>
    <link rel="stylesheet" href="estilos/style.css">
    </head>
     Selector de elemento Se utiliza para
    seleccionar una o algunas etiquetas

    h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: maroon;
    font-size:24px;
    }
     Selector de elemento Se utiliza para
    seleccionar una o algunas etiquetas

    h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: maroon;
    font-size:24px;
    }

    h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: blue;
    font-size:24px;
    }
     Selector de ID se marca con un
    identificador un elemento del html.

    #topbar {
    background-color: pink;
    }

    <nav> <!-- defino la navegacion de mi sitio -->


    <ul id="topbar">
    <li><a href="">Inicio</a></li>
    <li><a href="">Contacto</a></li>
    <li><a href="">Deportes</a></li>
    <li><a href="">Sucesos</a></li>
    </ul>
     Selector de clase similar al id solo que
    este si se puede repetir

    .background-pink {
    background-color: pink;
    }
    <nav> <!-- defino la navegacion de mi sitio -->
    <ul class="background-pink">
    <li><a href="">Inicio</a></li>
    <li><a href="">Contacto</a></li>
    <li><a href="">Deportes</a></li>
    <li><a href="">Sucesos</a></li>
    </ul>
    </nav>

    <ul class="background-pink">
    <li><a href="">login</a></li>
    <li><a href="">Register</a></li>
    <li><a href="">Contact</a></li>
    </ul>
     Permiten seleccionar elementos HTML en
    función de sus atributos y/o valores de esos
    atributos.

    li[data-equipo="martinez"]{
    background-color: blue;
    color:white;
    }

    li[data-equipo="james"]{ <ul>
    background-color: white; <li data-equipo="martinez">Atletico madrid</li>
    color:black; <li data-equipo="james">Real madrid</li>
    } <li data-equipo="messi">Barcelona</li>
    </ul>
    li[data-equipo="messi"]{
    background-color: maroon;
    color:white;
    }
    Pseudo Selectores

     Selectores de pseudo clase puede ser


    utilizado para agregar información
    adicional de las características de las
    etiquetas y divisiones

    Test para pseudo Selectores


    https://css-tricks.com/examples/nth-child-tester/
    input:focus{
    background-color: blue;
    color:white;
    }

    input[type="email"]:valid{
    background-color: green;
    }

    input[type="email"]:focus:invalid{
    background-color: red;
    }

    <ul>
    <li>Control Texto: <input type="text"></li>
    <li>Control email: <input type="email" required></li>
    </ul>
    .marcar:checked +.checked{
    background-color: green;
    }

    .checked{
    width: 200px;
    height: 200px;
    background-color: red;
    }

    <input type="checkbox" class="marcar">


    <div class="checked"></div>
    <div class="checked"></div>
    <div class="checked"></div>
    <div class="checked"></div>
    Gracias !!!

    Das könnte Ihnen auch gefallen