fbpx

Referencia por nombre. HTML y CSS

Etiquetado: 

  • Referencia por nombre. HTML y CSS

    Posted by Angel Sánchez on 24 marzo, 2020 en 8:41 am

    Que tal colegas, hago esta publicación por si alguien quedó con dudas sobre la sección de referencia por nombre de modulo de CSS, del curso de HTML, CSS y JS.

    Referencias.

    A la hora de estar trabajando con estilos en CSS nosotros tenemos que identificar cual es el elemento al que queremos asignarle los estilos, para eso debemos de buscar como referirnos a ellos. En el curso estamos viendo tres formas de referirnos a los elementos; ID, Clase y Nombre.

    Imaginemos que tenemos el siguiente código HTML, un párrafo con el nombre de nuestra plataforma:

    <p>Azul School</p></span><span style="font-family: inherit; font-size: inherit;">

    A ese mismo elemento le podemos agregar un identificador y una clase sin problemas, y quedaría así.

    <p id="nombrePlataforma" class="textoCuerpo">Azul School</p>

    Ahora veamos como podemos hacer para agregarle estilos a ese elemento utilizando las tres referencias, y como afecta cada uno.

    1.- Referencia por nombre.

    El nombre del elemento es “p”, así que la forma para agregar estilos por referencia de nombre es el siguiente:

    p{ color: #696969; font-size: 20px; font-weight: bold;

    }

    El problema aquí es que este estilo va a afectar a todos los elementos “p” no solo al de arriba, así que se debe de usar cuando deseas que los estilos afecten a todos los elementos con el mismo nombre.

    2.- Referencia por ID.

    Los ID están hechos para que sean únicos, por esa razón no deben de ir en mas de un elemento. En caso que desees asignarle estilos a un elemento por su id, es de la siguiente forma, tomando de ejemplo el código HTML anterior.

    #nombrePlataforma{ color: #696969; font-size: 20px; font-weight: bold;

    }

    La desventaja sería que solo se aplica a un elemento, ya que un ID no se debe de repetir.

    3.- Referencia por clase.

    Esta es la mejor opción a la hora de estas agregando estilos a los elementos, ya que las clases se pueden repetir muchas veces y puedes agregarle una clase a todos los elementos que quieras que se ven igual.

    .textoCuerpo{ color: #696969; font-size: 20px; font-weight: bold;

    }

    Espero que con esta publicación todo haya quedado claro, si no, pueden preguntar en este hilo todas sus dudas, con gusto las contesto.

    Angel Sánchez respondido 3 años, 8 meses 1 Miembro · 0 Respuestas
  • 0 Respuestas

    Sorry, there were no replies found.

    Inicia sesión para responder.

    Start of Discussion
    0 de 0 respuestas Junio 2018
    Ahora

    Obtén una membresía premium 🎁

    Con motivo de nuestro cuarto aniversario, te ofrecemos no solo el mejor precio del año, sino el mejor precio de toda nuestra trayectoria. Esta oferta es válida solo para las primeras 200 personas que la soliciten. ¡No dejes pasar esta oportunidad!