domingo, 18 de septiembre de 2016

08 CSS Display

Atributos de la propiedad Display y como ocultar con la propiedad Visibility.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/display.css">
<title>
Display
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p id="parrafo1">Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo2">Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo3">Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo4">Parrafo 4 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsaljkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkfjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
#parrafo1{
    width:150px;
    background-color:blue;
    display:block;
}
#parrafo2{
    width:150px;
    background-color:red;
    display:inline;
}
#parrafo3{
    width:150px;
    height:100px;
    background-color:pink;
        visibility:hidden;
}
#parrafo4{
    width:150px;
    background-color:yellow;
    display:block;
}

Espero os sea util, gracias.

No hay comentarios:

Publicar un comentario