Sin categoría |

Selector ID.

El valor del atributo “id” de un elemento es único; es decir, no debería haber otro elemento con el mismo nombre de identificador (id) dentro de tu documento HTML.

Dentro de los selectores que tenemos en CSS (por tipo, por clase y por id), cada uno tiene un determinado peso, siendo el Selector de Id el que tiene más peso (1-0-0), seguido del selector de Clase (0-1-0) y finalmente el selector de tipo (0-0-1). Para que quede más claro lo anterior, si tenemos una etiqueta con un id = “rojo” y una class = “azul” a esta etiqueta se le aplicarán las propiedades establecidas a #rojo {} porque tiene un peso mayor.

Selector Class.

Sirve para dar estilo sólo a determinados elementos marcados con el atributo class y la clase definida, un consejo para aplicar este selector, es que el nombre debe ser descriptivo del clase es decir que acción o que es lo que hará esa clase en específico, es recomendable que solo vaya una sola acción. Y también para mayor facilidad de búsqueda se puede agrupar las clases que sean del mismo tipo.

¿Cuál es la diferencia de selector Id y selector Class?

«Id» está pensado para que no se repita y se utilice sólo una vez a pesar de que sí es posible usarlo más de una ocasión.

En el caso de «class» está pensado para que se utilice las veces que sea requerido. Es una de esas reglas no escritas de la programación.

Es de considerar que al usar «id» o «class» se deben agrupar los parámetros que estén relacionados. La intención es que no se deba escribir tanto código y simplemente mandar a llamar el estilo que se necesite dar. Al hacer esto se puede mezclar «id» y «class» en una sola línea (<h1 id=»principalID» class=»claseUno claseDos»>).

Por ejemplo:

Si se tiene una página con un menú de navegación que aparece una única vez, se puede asignar un id a la capa donde está la barra de navegación. Ese ID sería único, porque no hay otra barra de navegación igual a esa en la página. El id sería único y entonces sería viable aplicarle el estilo mediante el selector de identificador. Ahora bien, si esa misma barra de navegación se quiere repetir varias veces a lo largo de la página se tendría que crear una clase (class de CSS) y asignarla a cada una de esas barras. De ese modo definiría el estilo una única vez y se reutilizaría un número indefinido de veces.

¿cómo se escribe correctamente la etiqueta?

ID.
id=»palabra»

Ejemplo:
#RojoFuerte{
Color: Red;
Font-weight: bold;
}
#Amarillo{
Color: yellow;
}
<p id=»rojoFuerte»>Este párrafo con atributo id es de color rojo y en negrita</p>
<p id=»amarillo»>En cambio este párrafo con diferente atributo id es de color amarillo</p>

Class
Class=»palabra»

Ejemplo:
p, h2{
Color: purple;
}
.naranja{
Color: orange;
}
<h2 class=»naranja»Título con atributo class</h2>
<p>Párrafo afectado por la regla CSS global.</p>
<p Class=»naranja»>Párrafo con atributo class.</p>
<p>Otro párrafo que se ve afectado por la regla global.</p>

¿cómo se incrusta al Html?

<!DOCTYPE html> — Es simplemente un artefacto antiguo que a nadie le importa, pero que debe ser incluido para que todo funcione correctamente. Por ahora, eso es todo lo que se necesita saber.
<html></html> — el elemento <html>. Este elemento encierra todo el contenido de la página entera, y, a veces, se le conoce como el elemento raíz (root element).
<head></head> — el elemento <head>. Este elemento actúa como un contenedor de todo aquello que queremos incluir en la página HTML que no es contenidovisible por los visitantes de la página. Incluye cosas como palabras clave, una descripción de la página que quieres que aparezca en resultados de búsquedas, CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.
<body></body> — el elemento <body>. Encierra todo el contenido que deseas mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de audio reproducibles, y demás.
<meta charset="utf-8"> — este elemento establece el juego de caracteres que tu documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas humanos. Básicamente, puede manejar cualquier contenido de texto que puedas incluir. No hay razón para no establecerlo, y puede evitar problemas en el futuro.
<title></title> — establece el título de tu página, que es el título que aparece en la pestaña del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida a los marcadores o como favorita.