DevTools para principiantes: Introducción a CSS

En este tutorial, aprenderá a usar CSS para dar estilo a una página web. También aprenderá a usar Microsoft Edge DevTools para experimentar con cambios CSS.

Este artículo forma parte de una serie de tutoriales que le enseñarán los conceptos básicos del desarrollo web y Microsoft Edge DevTools. Para obtener experiencia práctica, cree su propio sitio web. No tiene que completar los tutoriales anteriores antes de hacerlo. Configurar el código muestra cómo configurarse.

Al principio del tutorial, el sitio debe ser parecido a la siguiente figura.

Después de completar el tutorial, el sitio debe tener el aspecto siguiente.

Objetivos

Siga este tutorial para comprender mejor los siguientes conceptos y tareas.

• Cómo usar CSS para dar estilo a una página web.
• Cómo usar Microsoft Edge DevTools para experimentar con CSS.
• La diferencia entre los marcos CSS y CSS.

Está creando un sitio web real.

Requisitos previos

Complete los siguientes requisitos previos antes de realizar este tutorial.

• Complete Introducción html y dom o asegúrese de que ya conoce HTML y DOM.
• Descargue el explorador web Microsoft Edge. En el siguiente tutorial se usa un conjunto de herramientas de desarrollo web, denominadas Microsoft Edge DevTools, integradas en Microsoft Edge.

Configurar el código

Para crear el sitio, realice primero los siguientes pasos para configurar el código.

1. Abra el código fuente. La pestaña del explorador que está seleccionado actualmente se denomina pestaña de edición.

   

   La pestaña de edición

2. Seleccione cooked-amphibian. Aparece un menú.

   

   Menú Opciones del proyecto

3. Seleccione Remezcla Project. Glitch crea una copia del proyecto que puede editar.

   Nota

   Glitch genera un nombre aleatorio para el nuevo proyecto.

4. Seleccione Mostrar y, a continuación, seleccione En una nueva ventana. Se abre otra pestaña con una vista en directo del sitio. La pestaña del explorador que está seleccionado actualmente se denomina pestaña activa.

   

   La pestaña activa

Comprender CSS

CSS es un lenguaje de equipo que controla el diseño y el estilo de las páginas web. La siguiente figura es un párrafo con un borde.

El siguiente fragmento de código es el código HTML y CSS usado para crear el párrafo de la figura anterior.

<p style="border: 1px dashed red; padding: 5px;">
    This has been styled with CSS.
</p>

Es posible que el atributo HTML style="border: 1px dashed red; padding: 5px;" tenga un aspecto nuevo. El resto debería ser familiar. Si no es así, Introducción con HTML y dom antes de intentar las siguientes secciones.

Agregar estilos en línea

Puede usar estilos en línea para aplicar estilos a un solo elemento.

1. Vuelva a la pestaña de edición y abra index.html .

   

   Abrir index.html en la pestaña de edición

2. Agregue el atributo style="background-color: aliceblue;" en el <nav> elemento. En el bloque de código siguiente, la cuarta línea de código es la única que necesita cambiar. Las otras líneas de código se muestran aquí para ayudarle a colocar el nuevo atributo en el lugar correcto.

   <header>
       <p>Welcome to my site!</p>
   </header>
   <nav style="background-color: aliceblue;">
       <ul>
           <li><a href="/">Home</a></li>
           ...
       ...
   ...
   

3. Para mostrar los cambios, vaya a la pestaña activa. El fondo de la <nav> sección es ahora azul.

   

   El color de fondo detrás de los vínculos Inicio y Contacto ahora es azul

Reutilizar estilos en una sola página con hojas de estilos internas

En un fragmento de código anterior, un estilo en línea aplicó un estilo a una sola <p> etiqueta.

<p style="border: 1px dashed red; padding: 5px;">
    This has been styled with CSS.
</p>

¿Qué sucede si desea que todos los elementos de la página web se den el mismo <p> estilo? Tendrías que copiar y pegar el código en cada etiqueta del sitio, lo que requeriría <p> mucho tiempo y esfuerzo. Si necesita realizar una edición, tendrá que cambiar todas las etiquetas de nuevo. En su lugar, en los pasos siguientes, se usa una hoja de estilos Interna para escribir el CSS una vez, de modo que se aplique a varios elementos.

1. En la pestaña activa, seleccione Contacto para navegar a la página de contacto. Observe la fuente de los vínculos Inicio y Contacto.

   

   La página Contacto

2. En la pestaña editor, abra contact.html .

3. Agregue el siguiente código a contact.html . Recuerde que las líneas que comienzan <style> con y terminan con son las que necesita </style> agregar. El otro código se muestra aquí para que sepa dónde colocar el nuevo código.

   ...
       <head>
           ...
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <style>
               li a {
                 font-family: 'Courier New', Courier, Serif;
               }
           </style>
           ...
       </head>
       ...
   ...
   

4. Vuelva a la pestaña activa.

5. Seleccione Contacto para volver a la página de contacto. Observe que la fuente de los vínculos Inicio y Contacto ha cambiado.

   

   La fuente de los vínculos Inicio y Contacto ha cambiado

Comprender hojas de estilos internas

Las hojas de estilos internas aplican estilos mediante selectores. Los selectores son patrones que pueden aplicarse a uno o varios elementos HTML. El fragmento de código anterior agregó el siguiente estilo.

<style>
    li a {
      font-family: 'Courier New', Courier, Serif;
    }
</style>

li a es un selector que se traduce a "cualquier <li> elemento que contenga un <a> elemento". El explorador cambia la fuente de los vínculos Inicio y Contacto porque cada uno de los grupos de etiquetas coincide con el patrón.

<li><a href="/">Home</a></li>
<li><a href="/contact.html">Contact</a></li>

font-family: 'Courier New', Courier, serif es una declaración. Se realiza una declaración de dos partes siguientes.

Por ejemplo, font-family: 'Courier New', Courier, serif proporciona al explorador la siguiente instrucción: "Establecer la fuente de los elementos que coinciden con el patrón en li a 'Courier New' . Si esa fuente no está disponible, use Courier . Si eso no está disponible, use serif ."

Agregar varios selectores a un conjunto de reglas

El siguiente fragmento de código CSS se denomina conjunto de reglas.

li a {
  font-family: 'Courier New', Courier, monospace;
}

En los pasos siguientes se describe cómo usar comas para agregar varios selectores a un conjunto de reglas.

1. En la pestaña editor, abra contact.html .

2. Después li a del tipo , h1 .

   <style>
       li a, h1 {
         font-family: 'Courier New', Courier, Serif;
       }
   </style>
   

   El fragmento de código anterior indica al explorador que le de estilo a los elementos de la misma forma que estilos <h1> de elementos que coinciden con el patrón li a .

3. Vaya a la pestaña activa.

4. Seleccione el vínculo Contacto para volver a la página de contacto. Ahora, Póngase en contacto conmigo. tiene la misma fuente que los vínculos de navegación.

   

   ¡El texto Póngase en contacto conmigo! ahora tiene la misma fuente que los vínculos Inicio y Contacto

Experimentar con DevTools

A medida que continúa su viaje para convertirse en un experto en desarrollo web, puede que encuentre que CSS es complicado. Es posible que escribas algún código que no muestre lo que pretendías. Microsoft Edge DevTools facilita la experimentación mostrando los cambios en la página en tiempo real.

Agregar una declaración a un conjunto de reglas existente en DevTools

Para agregar una declaración a un conjunto de reglas existente

1. Mantenga el mouse en el vínculo Inicio, abra el menú contextual (haga clic con el botón secundario) y seleccione Inspeccionar.

   

   Inspeccionar el vínculo Inicio

   DevTools se abrirá junto a la página. El código que representa el vínculo Inicio, <a href="/">Home</a> se resalta en azul en el árbol DOM. El fragmento de código y la vista previa deben estar familiarizados Introducción html y dom.

   En la siguiente figura, la declaración que agregó anteriormente se muestra en la pestaña Estilos debajo font-family: 'Courier New', Courier, serif contact.html del árbol DOM. ****

   

   La pestaña Estilos está debajo del árbol DOM :::image-end:::

   Si la ventana DevTools es amplia, la pestaña Estilos está a la derecha del árbol DOM.

   

   La pestaña Estilos está a la derecha del árbol DOM :::image-end:::

2. Seleccione la línea vacía siguiente font-family: 'Courier New', Courier, Serif para agregar una nueva declaración.

   

   Agregar una nueva declaración

3. Escriba color y seleccione Enter . La interfaz de usuario de autocompletar sugiere opciones a medida que escribe.

   

   Tipo color

4. Escriba magenta y seleccione Enter . Todo el texto de la página de contacto ahora es magenta.

   

   Tipo magenta

Editar una declaración en DevTools

Para editar declaraciones existentes en DevTools

1. Seleccione el cuadrado magenta junto a magenta . Aparece un selector de colores.

   

   Selector de colores

2. Use el selector de colores para cambiar el texto de fuente a un color que quiera.

   

   Cambiar el color de fuente a púrpura con el Selector de colores

Agregar un nuevo conjunto de reglas en DevTools

Para agregar nuevos conjuntos de reglas en DevTools

1. Seleccione Nueva regla de estilo ( Nueva regla de estilo ), que está junto a .cls. Aparece un conjunto de reglas vacío a con como selector.

   

   Agregar una nueva regla

2. Reemplace a por a:hover .

   

   Reemplazar a por a:hover

   :hover es una pseudo-clase. Use pseudo-clases para elementos de estilo que puedan entrar en estados especiales. Por ejemplo, el estilo solo tiene efecto cuando se pasa el a:hover mouse sobre un <a> elemento.

3. Seleccione el área vacía entre corchetes para agregar una nueva declaración.

4. Escriba background-color el nombre de declaración y seleccione Enter .

   

   Tipo background-color

5. Escriba green para el valor de declaración y seleccione Enter .

   

   Tipo green

6. Mantenga el mouse sobre el vínculo Inicio. El fondo del vínculo se vuelve verde.

   

   Mantenga el mouse en el vínculo Inicio para mostrar su fondo verde

Reutilizar estilos en páginas con hojas de estilos externas

En un paso anterior, agregó el siguiente fragmento de código como hoja de estilos interna a contact.html .

...
    ...
        ...
        <style>
            li a, h1 {
              font-family: 'Courier New', Courier, Serif;
            }
        </style>
        ...
    ...
...

¿Qué sucede si quieres dar index.html el mismo estilo? ¿Qué sucede si tuviera un gran número de páginas a las que desea aplicar sus estilos? Tendría que copiar y pegar la hoja de estilos interna en cada página web del sitio. En los pasos siguientes se describe cómo agregar una hoja de estilos externa para que pueda escribir el CSS una vez y aplicarlo a varias páginas.

1. En primer lugar, actualice la pestaña activa para quitar los cambios realizados en DevTools.

   

   Después de actualizar la página, los cambios realizados en DevTools han desaparecido
   

2. Vuelva a la pestaña editor y abra contact.html .

   

   contact.html

3. Elimine todo lo <style> que esté entre y , </style> <style> incluidos y </style> .

   

   Se ha quitado la etiqueta de estilo

4. Abra index.html y quite de la style="background-color: aliceblue;" <nav> etiqueta. Ahora ha quitado todo el CSS que agregó anteriormente al sitio.

   

   El estilo en línea se ha quitado del elemento nav

5. Seleccione Nuevo archivo.

   

   El nuevo cuadro de diálogo de archivo

6. Reemplace cool-file.js por y seleccione Agregar style.css archivo.

   

   Tipo style.css

7. Agregue el siguiente fragmento de código al style.css archivo.

   li a, h1 {
     font-family: 'Courier New', Courier, Serif;
   }
   a:hover {
     background-color: green;
   }
   nav {
     background-color: aliceblue;
   }
   

   

   Agregar código a style.css

   Asegúrese de que ha creado una hoja de estilos externa. El HTML no es consciente de que existe.

8. Abra index.html .

9. Agregue <link rel="stylesheet" href="style.css"> a su HTML.

   <head>
       ...
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="style.css">
   </head>
   

   

   Vínculo a style.css

10. Abra el contact.html archivo y agregue el vínculo allí.

    

    Vincular a style.css en contact.html

11. Vaya a la pestaña activa. La página principal ahora tiene la misma fuente de la última sección y una sección de navegación azul.

    

    La página principal

12. Seleccione el vínculo Contacto para navegar a la página de contacto. La página de contacto tiene el mismo formato que la página principal.

    

    La página de contacto

Usar un marco CSS

Los marcos CSS son colecciones de estilos creados por otros desarrolladores que facilitan la creación de sitios web atractivos. En lugar de definir estilos usted mismo, un marco le proporciona una colección de estilos que puede usar en los elementos de la página.

Siga estos pasos para agregar el marco CSS de Bootstrap a la página.

1. Copie el código siguiente:

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   

2. Abra la pestaña de edición y pegue el código en contact.html .

   

   Vínculo al marco en contact.html

3. Abra el index.html archivo y agregue el código allí.

   

   Vínculo al marco en index.html

4. Vuelva a la pestaña activa para ver los cambios. Aunque el color de fondo del elemento y la fuente de los elementos y son los mismos, la fuente <nav> de los otros elementos ha <li> <a> cambiado.

   

   Parte de la fuente de la página principal ha cambiado debido al marco

Usar una clase

En la última sección, agregó Bootstrap a las páginas web, lo que cambió las fuentes de algunos de los elementos del sitio. Los marcos CSS le ayudan a realizar cambios importantes en la página con muy poco código. Siga estos pasos para usar una de las clases de Bootstrap para cambiar el encabezado.

1. Copie el siguiente fragmento de código.

   class="jumbotron jumbotron-fluid"
   

2. Agregue el fragmento de código anterior a la <header> etiqueta en index.html .

   

   Agregar clases index.html

3. Agregue el código a la <header> etiqueta en contact.html .

   

   Agregar clases contact.html

4. Ver los cambios en la pestaña activa. Hay un cuadro grande y gris alrededor del encabezado.

   

   El encabezado ahora tiene un cuadro gris grande alrededor de él

Comprender clases

Las clases permiten asignar colecciones de estilos a elementos arbitrarios. Use el siguiente fragmento de código para aplicar varios estilos al <header> elemento después de establecer el atributo en class jumbotron .

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: .3rem;
}

Una ventaja de una clase es que le permite aplicar estilos a los elementos que desee. Por ejemplo, supongamos que desea establecer el color de fondo de algunos <p> elementos en púrpura, pero no todos los <p> elementos. Use el siguiente fragmento de código para definir el estilo de una clase.

.my-class-name {
  background-color: purple;
}

A continuación, aplique la clase solo a los <p> elementos que desee aplicar estilo.

<p>The text is not purple.</p>
<p class="my-class-name">The text is purple.</p>
<p>The text is not purple.</p>
<p class="my-class-name">The text is purple.</p>

Alinear elementos

Complete los pasos siguientes para usar otras clases de Bootstrap que sean útiles para alinear elementos.

1. Vuelva a la pestaña editor y abra index.html .

2. Agregue class="container-fluid" a la <body> etiqueta.

   

   Agregar la container-fluid clase

3. Ajuste los <nav> elementos <main> y en <div class="row"> . Asegúrese de colocar </div> después </main> para cerrar correctamente la nueva etiqueta.

   

   Agregar una fila

4. Agregue class="col-3" a la etiqueta y a la <nav> class="col-9" <main> etiqueta.

   

   Agregar las col-3 clases y col-9

5. Ver los cambios en la pestaña activa.

   

   El contenido de navegación está ahora a la izquierda del contenido principal

Pasos siguientes

Enhorabuena, ha terminado.

• La mejor forma de mejorar el desarrollo web es crear más sitios. No te preocupes por las cosas que se rompen. Simplemente diviértase y aprenda lo más posible a lo largo del camino.
• Para obtener más información sobre el estilo de páginas web, vaya a Introducción a CSS.
• Para obtener más información sobre cómo experimentar con CSS en DevTools, vaya a Introducción con Ver y cambiar CSS.

Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.