fbpx

Referencia por nombre. HTML y CSS

Etiquetado: 

  • Referencia por nombre. HTML y CSS

    Posted by Angel Sánchez Espinoza 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 Espinoza respondido 2 años, 3 meses 1 Miembro · 0 Respuestas
  • 0 Respuestas

    Sorry, there were no replies found.

    Start of Discussion
    0 de 0 respuestas Junio 2018
    Ahora