oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso CSS - Lección 8: Elementos "span" y "div"
¿Para qué usaremos estos dos nuevos elementos? Los elementos <span> y <div> los usaremos para agrupar y estructurar un documento e irán muchas veces con los atributos class e id.
Agrupación con el elemento <span>
Usando el elemento <span> en CSS podemos añadir características visuales a partes aisladas de texto en los documentos.
Pasemos a ver un ejemplo usando estas dos frases:
<p>No por mucho madrugar amanece más temprano.</p>
<p>Al que madruga Dios le ayuda.</p>
Digamos que en la primera frase queremos que aparezca enfatizado en color rojo la palabra "madrugar" y "temprano", en la segunda frase enfatizaremos la palabra "Dios". Para llevarlo a cabo deberemos marcar las tres palabras con el elemento span. Después a cada elemento span habrá que añadirle el atributo class.
El código HTML quedaría de la siguiente manera:
<p>No por mucho <span class="enfarojo">madrugar</span> amanece más <span class="enfarojo">temprano</span>.</p>
<p>Al que madruga <span class="enfarojo">Dios</span> le ayuda.</p>
Y el código CSS para producir el efecto sería el siguiente:
span.enfarojo { color: #ff0000; }
Vosotros en lugar de usar la palabra "enfarojo" podeis utilizar la que queráis, siempre que utiliceis la misma tanto para el código HTML y el código CSS.
Por lo tanto en muestro navegador vríamos las dos frases así:/p>
No por mucho madrugar amanece más temprano.
Al que madruga Dios le ayuda.
Tal y como hemos aprendido en la lección anterior también podemos usar el atributo id, pero recuerda que el atributo id solo podremos identificar un elemento único.
Agrupación con el elemento <div>
El elemento <div> lo utilizaremos para agrupar uno o más elementos a nivel de bloque.
Pasemos a ver un ejemplo con dos listas de jugadores, una de varios jugadores de la selección Española de futbol y otra lista de jugadores de la selección Francesa.
Ejemplo código HTML:
<div id="españoles">
<ul>
<li>Fernando Torres</li>
<li>David Villa</li>
<li>Xavi Alonso</li>
<li>Carles Puyol</li>
<li>Iker Casillas</li>
<ul>
<div id="franceses">
<ul>
<li>Lassana Diarrá</li>
<li>Thierry Henry</li>
<li>Karim Benzema</li>
<li>Nicolas Anelka</li>
<li>Patrice Evra</li>
<ul>
Y en nuestra hoja de estilos pondríamos lo siguiente:
#españoles {background: #ff0000; }
#franceses {background: #5858FA; }
De este modo conseguiríamos que los jugadores de la selección española se mostrarían con el color rojo de fondo y los jugadores franceses con el color azul de fondo, visualizandose así en tu navegador:
Hasta ahora hemos visto cosas sencillas para hacer con los elementos <span> y <div>, pero en las siguientes lecciones veremos como hacer cosas más avanzadas.
Con todo lo aprendido hasta ahora ya debes de ser capaz de darle un toque de elegancia a tu página web mediante CSS, pero aún nos quedan muchas cosas por aprender, así que sigue leyendo para avanzar todavía más en tus conocimientos.
Quiero aprender más!!!
- Avanzar a Lección 9: Modelo de caja
- Retroceder a Lección 7: Atributos "class" e "id"
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®