Tutorial HTML-CSS-JAVASCRIPT
appsRegnare.com

Episodio 4 - Etiquetas Html con formato de estilos

Hay que ir familiarizándonos con las etiquetas y sus usos. Ya hemos usado etiquetas de bloque como <p> y <div>. Estas etiquetas se extienden todo el ancho del documento. También se denominan contenedores. La etiqueta <p> tiene un margen establecido por el navegador web de antemano que puede ser sobrescrito. Veámoslo con un ejemplo:

Etiquetas <p> y <div>


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title>

        <style>
            div {
                border: 1px solid #757575;
            }
            p {
                background-color: yellow;
            }
        </style>

    </head>
    <body>

        <h2>Etiquetas de bloque</h2>

        <div>
            <p>El texto se encuentra en 'p' que a su vez está dentro del elemento 'div'</p>
        </div>

    </body>
    </html>

Podemos ver en el ejemplo anterior que ambas etiquetas se extienden todo el ancho del documento. A la etiqueta div le dimos un estilo de borde y a p un color de fondo. Podemos ver que el navegador le agrega a p un margen superior e inferior. Se vería así:

El texto se encuentra en 'p' que a su vez está dentro del elemento 'div'

Quitemos este margen:


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title>

        <style>
            div {
                border: 1px solid #757575;
            }
            p {
                margin-top: 0;
                margin-bottom: 0;
                background-color: yellow;
            }
        </style>

    </head>
    <body>

        <h2>Etiquetas de bloque</h2>

        <div>
            <p>El texto se encuentra en 'p' que a su vez está dentro del elemento 'div'</p>
        </div>

    </body>
    </html>

Al quitarle el margen a p ambas etiquetas ahora se superponen.

El texto se encuentra en 'p' que a su vez está dentro del elemento 'div'

En el ejemplo anterior definimos un estilo de margen superior e inferior para las etiquetas p. Al hacerlo de esta manera definimos con la mayor especificidad. Podríamos haber obtenido el mismo resultado mediante: p { margin: 0 }. Definido así indicamos que queremos que los cuatro márgenes (superior, derecho, inferior, izquierdo) tengan 0px. Las propiedades de estilos como margin o border con varias propiedades individuales, pueden definirse en forma abreviada. En el ejemplo anterior definimos de modo abreviado para las etiquetas div {border: 1px solid #757575}; Definimos tres valores (separados por un espacio): el primero indica el ancho del borde, el segundo el estilo y el tercero el color del borde.

Anteriormente usamos selectores de estilo para dar formato de estilos a todas las etiquetas p y div. Podemos dar formato a un único elemento mediante el selector "#" (tener en cuenta que dos elementos del documento no pueden tener un mismo id), o a varios elementos que tengan el mismo atributo de clase, mediante el selector ".". Veamos un ejemplo:

Selectores # y .


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title>

        <style>
            #titulo {
                text-align: center;
                font-weight: bold;
                font-family: Helvetica;
            }
            .contenido {
                text-align: center;
                font-family: 'Courier New', Courier, monospace;
                padding: 10px;
            }
        </style>

    </head>
    <body>

        <h2>Selectores de id y de clase</h2>

        <table>
        <tbody>
            <tr>
                <td id="titulo" colspan="3">Tutorial</td>
            </tr>
            <tr>
                <td class="contenido">Html 5</td>
                <td class="contenido">Css 3</td>
                <td class="contenido">Javascript</td>
            </tr>
        </tbody>
        </table>

    </body>
    </html>

En el ejemplo anterior usamos una tabla. El atributo colspan define el número de columnas que una celda debe abarcar. tr define una fila en una tabla. Si omitimos tbody el navegador web lo pondrá automáticamente. En cuanto a los estilos, padding indica el espaciado dentro de la etiqueta que habrá entre el borde de la misma y el texto (en píxeles). Por otro lado margin indica el espaciado por fuera de la etiqueta.

Tutorial
Html 5 Css 3 Javascript

Hagamos algo más divertido usando Javascript. Vamos a cambiar el color de fondo y texto dinámicamente.

Algo más divertido...


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title>

        <style>
            #titulo {
                text-align: center;
                font-weight: bold;
                font-family: Helvetica;
            }
            .contenido {
                text-align: center;
                font-family: 'Courier New', Courier, monospace;
                padding: 10px;
            }
        </style>

        <script>
            function cambiar_fondo(el)
            {
                if (el.checked)
                {
                    document.body.style.backgroundColor = "#464646";
                    document.getElementById("titulo").style.color = "#fff";
                    document.getElementById("encabezado").style.color = "#fff";
                    document.getElementById("span1").style.color = "#fff";
                    var celdas = document.getElementsByClassName("contenido");
                    for (var celda of celdas)
                    {
                        celda.style.color = "#fff";
                    }
                }
                else
                {
                    document.body.style.backgroundColor = "#fff";
                    document.getElementById("titulo").style.color = "#000";
                    document.getElementById("encabezado").style.color = "#000";
                    document.getElementById("span1").style.color = "#000";
                    var celdas = document.getElementsByClassName("contenido");
                    for (var celda of celdas)
                    {
                        celda.style.color = "#000";
                    }
                }
                
            }
        </script>

    </head>
    <body>

        <h2 id="encabezado">Fondo Claro / Fondo Oscuro</h2>

        <div>
            <input id="check1" type="checkbox" onclick="cambiar_fondo(this)" /> <span id="span1">Color de fondo oscuro</span>
        </div>

        <div><br></div>

        <table>
            <tr>
                <td id="titulo" colspan="3">Tutorial</td>
            </tr>
            <tr>
                <td class="contenido">Html 5</td>
                <td class="contenido">Css 3</td>
                <td class="contenido">Javascript</td>
            </tr>
        </table>

    </body>
    </html>

Al hacer click en el checkbox ejecutamos la función cambiar_fondo(this). Con la palabra reservada this estamos pasando como parámetro de la función el mismo elemento. El elemento checkbox tiene un atributo checked que es true si está checkeado y false si no lo está. En Javascript podemos acceder a los atributos de los elementos con el operador "." -> elemento.atributo

Primero accedemos al atributo style de body para dar un valor a la propiedad backgroundColor. Notar que esta misma propiedad se escribe en Css background-color. Las propiedades de estilos en Javascript no llevan el caracter "-". Luego accedemos a los elementos: "titulo", "encabezado" y "span1" para cambiarles el color de texto. Finalmente guardamos en la variable celdas la colección de elementos que tienen como nombre de clase "contenido". Iteramos en una colección con: for (elemento of colección) { ... }

← Anterior Siguiente →