Estos dos atributos sirven para cargar una instrucción ya sea puesta dentro de la misma página mediante <style> </style> o mediante <link type='text/css' /> en un archivo externo que ya vimos en implementaciones de estilos CSS.
Identificadores ID
Los identificadores son elementos que podemos asignar a un único elemento o etiqueta web mediante el atributo id. A los atributos de Identificadores no se le pueden agregar más de un solo identificador a la vez (no pueden combinarse), por ejemplo id="reglaid1" es correcta, mientras que id="reglaid1 reglaid2", es erronea, cualquier navegador web solamente tomará el primer elemento ID, si existe otro elemento con la misma ID, será ignorado.
ID aplicado al código CSS: Reglas ID
En el Código CSS todos los elementos ID deben por fuerza comenzar con el signo "#" el cual es la marca para los ID:
Ejemplo (Para crear reglas CSS lea Creación de reglas: Estructura y tipos):
<style>Aplicar las reglas ID a una etiqueta HTML
#reglaid1</style>
{propiadades css}
#reglaid2
{propiadades css}
Una vez creadas las reglas ID ahora deberemos aplicarlas a elementos HTML dentro de las etiquetas <body> y </body> o el cuerpo de la página web. Para este ejemplo aplicaremos a dos DIV reglaid1 y reglaid2.
Las reglas ID se asignan mediante el atributo id="nombreid", por ejemplo: para la regla CSS "#reglaid1", asignamos id="reglaid1" (sin el # que solamente se pone en la sección de CSS)
Ejemplo:
<body>Clases CLASS
<div id="reglaid1"> contenido 1 </div></body>
<div id="reglaid2"> contenido 2 </div>
Las clases podremos agregarla a múltiples elementos en una página, las Clases se declaran en la sección de CSS con un punto ".", también podemos asignar más de una clase a un atributo class, por ejemplo si tenemos las reglas de clase .reglaid1 y .reglaid2, class="reglaid1" es correcto de la misma forma que class="reglaid1 reglaid2" separando cada clase con un espacio. Los navegadores web pasan los valores CSS a todos los elementos con la misma clase.
Clase aplicando al código CSS: Reglas CSS
Ejemplo (Para crear reglas CSS lea Creación de reglas: Estructura y tipos), recuerde que las reglas de clase se inician con un punto ".":
<style>Aplicar las reglas de clase a etiquetas HTML
.reglaclass1</style>
{propiedades CSS}
.reglaclass2
{propiedades CSS}
Para aplicar reglas de clase se usa el atributo class="nombreclase" (los atributos no deben incluir el punto), por ejemplo:
<body>Clases e Identificadores
<div class="reglaclass1"> contenido 1 </div></body>
<div class="reglaclass2"> contenido 2 </div>
<p class="reglaclass1"> Texto 1 </p>
<span class="reglaclass1"> contenido 1 </span>
Como pueden observar es muy simple el uso de ID y Class, es posible usar ambos atributos en la misma etiqueta, algo bastante útil, ya que no tenemos que escribir todo el código en un único ID, sino que podemos asignar, por ejemplo: font-size a un ID, mientras que con class ponemos otras propiedades, por ejemplo el background-color, que compartamos con otras etiquetas.
Vamos a crear dos reglas ID (reglaid1 y reglaid2) a cada uno le asignamos dos tamaños de fuente diferente y creamos una Clase con un color que podemos asignar a varias etiquetas HTML
Reglas CSS:
<style>Ahora agregaremos los atributos ID a un DIV diferente reglaid1 y reglaid2, pero a ambos DIV les agregaremos el la misma clase, reglaclass1 lo que hará que cada div tenga un tamaño de fuente diferente, pero el mismo color de texto.
#reglaid1</style>
{font-size:20px;}
#reglaid2
{font-size:12px;}
.reglaclass1
{color:#c00;}
<body>Inicialmente se puede asignar los estilos directamente a las etiquetas HTML, pero con el tiempo es imprescindible aprender el uso de ID y Class para que CSS llegue a todo su potencial, aunque ahí no termina el uso de las clases, ha muchas maneras de agrupar instrucciones CSS.
<div id="reglaid1" class="reglaclass1"> contenido 1 </div></body>
<div id="reglaid2" class="reglaclass1"> contenido 2 </div>
◄ Viene de CSS para novatos parte 2: CSS para novatos parte 2: Creación de reglas CSS
►Seguiremos en Pseudo-clases y Subclases.
La vida de Pi es una apasionante película sobre la existencia y la religión con una historia cautivadora con una reflexión final sobre lo espiritual que a nadie dejará ajeno.
Trece años han pasado desde que Ridley Scott hizo una buena película, Gladiador es la historia sobre Maximus, general del ejército romano y su vida como gladiador.
Windows 8 y Surface RT pueden convertirse en el fin de Microsoft o uno de sus errores más costosos.
Un nuevo tutorial sobre
la creación de reglas CSS, publicado
regularmente.
Comentarios y Consultas
Los mensajes son moderados serán revisados antes de publicarse.
Si el número de comentarios excede 200, pulse el botón "Cargar más", hasta abajo de la caja de comentarios.
Los comentarios que utilicen un lenguaje inapropiado, sean irrelevantes, de tipo difamatorio, o no se adhieran a una ortografía, gramática y puntuación correcta serán rechazados.
2 comentarios:
Bueno , que paso con el siguiente tutorial . Donde esta el tutorual de SUBCLASES, parece interesante
ResponderEliminarVoy a ponerlo en calendario.
Eliminar