-
Cómo hacer múltiples elementos de los mismos en CSS
-
CSS (Cascading Style Sheets) proporciona a los diseñadores y desarrolladores web con la capacidad de estilo de varios aspectos de la página web en HTML marcado. Una de las características principales de la CSS que hace que sea tan efectiva es la capacidad de aplicar el mismo estilo a sitios y páginas de varios elementos. El uso de CSS para crear un estilo similar o idéntica a una serie de elementos en una página web es sencillo. Incluso los principiantes pueden llevar a cabo esta tarea, que es un elemento clave para aprender a diseñar sitios web.Instrucciones
1 Crear la página HTML. Abra un nuevo archivo en un programa de edición de texto e introduzca el siguiente código de esquema, el ahorro de su página con la extensión ".html":
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
Esta es la estructura básica de una página HTML. El contenido de su página debe ser colocado dentro de la sección del cuerpo.
2 Cree el archivo CSS. Abra un nuevo archivo en el editor de texto y guardarlo con la extensión ".css", por ejemplo "multistyle.css" para reflejar su propósito. Añadir un enlace a su archivo CSS dentro de la sección de cabecera de la página, lo que refleja su ubicación. Introduzca la siguiente sintaxis entre las etiquetas de apertura y cierre de la cabeza en su página HTML:
<Link rel = "stylesheet" type = "text / css" href = "multistyle.css" />
Alterar el valor del atributo "href" si guardó su archivo CSS con un nombre diferente o si no va a ser almacenado en el mismo directorio que su página.
3 Crear algunos elementos HTML en su página. Escriba el siguiente código HTML ejemplo entre la apertura y cierre de etiquetas del cuerpo en su página:
<Div class = "style1"> Estilo Div 1 </ div>
<Div class = "style2"> div style 2 </ div>
<Div class = "style1"> Estilo Div 1 de nuevo </ div>
<Div class = "style2"> Estilo Div 2 de nuevo </ div>
Los elementos se les ha dado un atributo de clase. Múltiples elementos en una página pueden compartir el mismo atributo de clase, "style1" y "style2" en este ejemplo. Mediante el uso de las clases, que está identificando ciertos elementos como pertenecientes a una categoría en particular.
4 Agregue un poco de reglas CSS para definir cómo deben aparecer los elementos. Introduzca el siguiente código CSS define el estilo de sus elementos "div":
div {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: bold;}
Este código CSS utiliza el tipo de elemento para definir un estilo, en este caso la aplicación de las propiedades de fuente a todos los elementos "div" en la página. Esta es una de las principales formas de estilo a varios elementos de la misma manera, pero también significa que todos los elementos de este tipo se incluye dentro de su página tendrá estas propiedades que se le aplican.
5 Usar atributos de la clase HTML para el estilo de su página. Agregue el siguiente código CSS, que utiliza la clase de cada elemento para determinar cómo debe ser de estilo:
div.style1 {
color: # FF0000;
background-color: # 333333;}
.style2 {
color: # 0000FF;
background-color: # FF99FF;}
Este código se aplica diferentes estilos a los elementos que utilizan sus atributos de clase. Esto le permite declarar propiedades de estilo para un subconjunto de elementos dentro de su sitio, en lugar de la simple aplicación de las mismas propiedades a todos los elementos de un tipo particular. La segunda clase de estilo también demuestra que no es necesario incluir el tipo de elemento para identificar una clase en el CSS. Puede asignar el mismo atributo de clase de elementos de diferentes tipos en HTML.
Consejos y advertencias
- También puede utilizar el atributo "id" de un elemento HTML única para aplicar un estilo a ella, pero una sola "id" no puede ser compartida por múltiples elementos en una página.
- navegadores web interpretan código CSS de manera diferente, por lo que su apariencia de la página pueden variar para algunos usuarios.
