Hola que tal en esta ocasión vamos a ver los selectores de tipo identificador que son muy distintos a los que vimos la vez pasada que fueron los selectores globales
Así que comencemos
Para comenzar
ya sabes cuales son los atributos que se le pueden dar a una etiqueta HTML y no
solo eso sabes a cuales se le pueden poner y a cuales no
Digamos que tú
tienes un nombre pero realmente eso no te identifica ya que quizás existen
miles de personas que tengan tú mismo nombre y quizás también los mismo
apellidos así que cada país para
remediar este problema crea medios de identificación únicos para cada persona
como en México puede ser el número del seguro social que no se puede repetir o
también el de CURP
Entonces
digamos que en nuestro documento HTML queremos crear etiquetas que se distingan
y sean distintas a la demás y aún más cuando queremos darle estilo específica a
esa etiqueta, para eso sirve el id sirve para identificar y crear como única la
etiqueta y que ninguna otra del documento puede tener el mimo ID
Así que esto
se explica de la mejor forma con ejemplos
Un ejemplo de
ello es crear un contenedor donde se coloca un texto pero que sea distinto a los demás contenedores (llamo
contenedores a las etiquetas DIV)
Ejemplo:
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<!--contenedor(div) con id-->
<div id='diferente'>
<p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
</p>
</div>
<!--contenedor sin identificador-->
<div >
<p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
</p>
</div>
<!--contenedor sin identificador-->
<div >
<p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
</p>
</div>
</body>
</html>
#diferente{
text-align: center;
color: red;
font-family: verdana;
}
De esta forma
también podemos empezar a usar el DOM para dar más estilos a las etiquetas que
están dentro del ID usando también en conjunto selectores globales
Ejemplo
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<!--contenedor(div) con id-->
<div id='diferente'>
<p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
</p>
</div>
<!--contenedor sin identificador-->
<div >
<p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
</p>
</div>
<!--contenedor sin identificador-->
<div >
<p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
</p>
</div>
</body>
</html>
> #diferente p{
text-align: center;
color: red;
font-family: verdana;
}
Este es un
breve ejemplo pero explica perfectamente la función del selector ID
(identificador)
En breves
palabras queda lo siguiente:
Selector ID
sirve para identificar a un elemento HTML donde se pueden aplicar estilos solo
a ese identificar aunque las etiquetas en el HTML sean repetitivas solo se verá
afectada la etiqueta que tenga ese identificador
Así que
saludos y lo veo en otro tutorial
Hola amigo, como podria ponerme en contacto con tigo para poder recibir algunos consejos en especifico, gracias
ResponderEliminar