Lección 8: Agrupación de elementos (span y div)
Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a menudo, junto con los atributos class e id.
En esta lección revisaremos el uso de los elementos <span> y <div>, ya que estos dos elementos de HTML son, precisamente, de importancia clave en lo que se refiere a CSS.
Agrupación con el elemento <span>
Agrupación con el elemento <div>
Agrupación con <span>
El elemento <span> es lo que se podría denominar un elemento neutro que no añade nada al documento en sí. Pero con CSS <span> se puede usar para añadir características visuales distintivas a partes específicas de texto en los documentos.
Un ejemplo de esto podría ser esta cita de Benjamin Franklin:
Digamos que queremos que lo que el señor Franklin considera como las ventajas de no pasarse todo el día durmiendo, aparezca enfatizado en rojo. Para este fin, podemos marcar dichas ventajas con el elemento <span>. A cada elemento span se le añade el atributo class, que podemos definir así en nuestra hoja de estilo:
El código CSS necesario para producir este efecto es el siguiente:
Ver ejemplo
Por supuesto, se puede usar también el atributo id para añadir estilo a los elementos definidos con <span>. Pero recuerda que tendrás que aplicar siempre un atributo id único para cada uno de los tres elementos <span>, tal como aprendimos en la lección anterior.
Agrupación con el elemento <div>
Mientras que <span> se usa dentro de un elemento a nivel de bloque como vimos en el ejemplo anterior, <div> se usa para agrupar uno o más elementos a nivel de bloque.
Aparte de esta diferencia, la agrupación con <div> funciona más o menos igual. Veamos un ejemplo con dos listas de presidentes de los EE.UU., divididas según su filiación política.
En nuestra hoja de estilo podemos utilizar la agrupación del mismo modo que antes:
Ver ejemplo
En los ejemplos anteriores, sólo hemos usado <div> y <span> con cosas muy sencillas como, por ejemplo, texto y colores de fondo. Ambos elementos tienen el potencial para realizar cosas más avanzadas. Sin embargo, esto no se presentará en esta lección; lo veremos más adelante a lo largo del tutorial.
Resumen
En y 8 has aprendido nociones sobre los selectores id y class y los elementos span y div
Ahora ya deberías de ser capaz de agrupar e identificar, más o menos, todas las partes de un documento, lo que supone dar un gran paso adelante hacia el dominio de CSS. En la lección 9 te presentaremos el modelo de caja.
Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a menudo, junto con los atributos class e id.
En esta lección revisaremos el uso de los elementos <span> y <div>, ya que estos dos elementos de HTML son, precisamente, de importancia clave en lo que se refiere a CSS.
Agrupación con el elemento <span>
Agrupación con el elemento <div>
Agrupación con <span>
El elemento <span> es lo que se podría denominar un elemento neutro que no añade nada al documento en sí. Pero con CSS <span> se puede usar para añadir características visuales distintivas a partes específicas de texto en los documentos.
Un ejemplo de esto podría ser esta cita de Benjamin Franklin:
[color=#000000]<p>El que pronto se acuesta y pronto se levanta,
es hombre saludable, rico y sabio.</p>[/color]
Digamos que queremos que lo que el señor Franklin considera como las ventajas de no pasarse todo el día durmiendo, aparezca enfatizado en rojo. Para este fin, podemos marcar dichas ventajas con el elemento <span>. A cada elemento span se le añade el atributo class, que podemos definir así en nuestra hoja de estilo:
[color=#000000]<p>El que pronto se acuesta y pronto se levanta,
es hombre <span class="ventaja">saludable</span>,
<span class="ventaja">rico</span>
y <span class="ventaja">sabio</span>.</p>[/color]
El código CSS necesario para producir este efecto es el siguiente:
[color=#000000]
span.benefit {
color:red;
}[/color]
Ver ejemplo
Por supuesto, se puede usar también el atributo id para añadir estilo a los elementos definidos con <span>. Pero recuerda que tendrás que aplicar siempre un atributo id único para cada uno de los tres elementos <span>, tal como aprendimos en la lección anterior.
Agrupación con el elemento <div>
Mientras que <span> se usa dentro de un elemento a nivel de bloque como vimos en el ejemplo anterior, <div> se usa para agrupar uno o más elementos a nivel de bloque.
Aparte de esta diferencia, la agrupación con <div> funciona más o menos igual. Veamos un ejemplo con dos listas de presidentes de los EE.UU., divididas según su filiación política.
[color=#000000]
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>[/color]
En nuestra hoja de estilo podemos utilizar la agrupación del mismo modo que antes:
[color=#000000]#democrats {
background:blue;
}
#republicans {
background:red;
}[/color]
Ver ejemplo
En los ejemplos anteriores, sólo hemos usado <div> y <span> con cosas muy sencillas como, por ejemplo, texto y colores de fondo. Ambos elementos tienen el potencial para realizar cosas más avanzadas. Sin embargo, esto no se presentará en esta lección; lo veremos más adelante a lo largo del tutorial.
Resumen
En y 8 has aprendido nociones sobre los selectores id y class y los elementos span y div
Ahora ya deberías de ser capaz de agrupar e identificar, más o menos, todas las partes de un documento, lo que supone dar un gran paso adelante hacia el dominio de CSS. En la lección 9 te presentaremos el modelo de caja.