Como el número de etiquetas del HTML es reducido, a veces es necesario dar un formato distinto a elementos con la misma etiqueta. Se puede sortear esta limitación utilizando clases, que se pueden asignar a cualquier elemento de una página web.
Las clases se asignan con el atributo class. El valor del atributo class (el nombre de la clase) sólo pueden contener letras, números, guiones y subrayados, aunque el primer carácter no puede ser ni un número ni un guion.
Anteriormente hemos mencionado hojas de estilos CSS, que son las siglas de “Cascading Style Sheets” (hojas de estilo en cascada), aquí definiremos como queremos que se vea nuestra página web.
Veamos unos ejemplos de estilos que aplicaremos a una etiqueta para poner párrafos <p>
Borramos todo el contenido de <body> y en nuestra hoja de estilos ponemos
Aquí estamos definiendo .derecha e .izquierda con una serie de características que iremos comentando, ahora en el <body> del html ponemos <p c
Ahora entre las comillas ponemos izquierda que es el nombre del estilo que le queremos dar a ese párrafo
Como izquierda ya lo tenemos definido en la hoja de estilos ya me aparece en el desplegable, lo seleccionamos poniéndonos sobre el con el puntero del ratón y hacemos clic.
Y ahora entre las dos etiquetas ponemos “lo”
Seleccionamos “lorem”
Y nos aparece un texto que no tiene significado, se utiliza para pruebas, para no tener que escribir, después se cambiara por nuestro artículo, vemos que es muy largo y se sale de la pantalla, para acomodarlo pulsamos ALT + z
Llegados a este punto, hacemos un alto y visualizamos la web
Aquí ya vemos cosas diferentes que pasamos a comentar.
Tenemos un texto que ya no ocupa todo el ancho de la pantalla, porque en el estilo le hemos dado de ancho 400px “width: 400px;” y además le hemos puesto un margen izquierdo de 100px “margin-left: 100px;” ahora se puede apreciar el motivo de poner un marco al párrafo “border:1px solid #000;” a mí ayuda a ver el formato y disposición en pantalla.
Ahora insertamos otro párrafo con el estilo “derecha”
Si al asignar a class “derecha” no nos sale en la ayuda contextual puede ser por que no se actualizó la hoja de estilos, en ese caso lo escribimos nosotros.
Visualizamos la pagina
No hay comentarios:
Publicar un comentario