DIV y SPAN

LAS ETIQUETAS: <DIV> Y <SPAN>
LOS
ATRIBUTOS: ID Y CLASS
Certificado de Profesionalidad IFCD0210

Agrupación de elementos
 Los elementos <span> y <div> se usan para
agrupar y estructurar un documento.
 Se usarán, a menudo, junto con los atributos class

e id, las cuales actúan en coordinación con CSS.
El elemento <div>
<h1>Tim Berners-Lee</h1>
 El elemento div es un 
 <div style="color: #040; font-style: italic">

contenedor genérico sin un  <p>Timothy "Tim" John Berners-Lee es un científico
significado semántico en de la computación británico, conocido por ser el
padre de la Web. Estableció la primera
particular. comunicación entre un cliente y un servidor.
 Se utiliza comúnmente en el
desarrollo de documentos con Tim Berners-Lee
Timothy "Tim" John Berners-Lee es un científico de la computación
propósitos estilísticos. británico, conocido por ser el padre de la Web. Estableció la primera
comunicación entre un cliente y un servidor usando el protocolo
 La etiqueta div es más fácil de HTTP en noviembre de 1989.
usar que la etiqueta table

Elemento <span>
 El elemento <span> podría 
 <div style="color: #040; font-style: italic">

decirse que es un elemento  <p><span style="color: blue; font-style: nomal
neutro no aporta nada al Timothy "Tim" John Berners-Lee> </span> es un
científico de la computación británico, conocido por
documento en si ser el padre de la Web. Estableció la primera
comunicación entre un cliente y un servidor.
 Pero con CSS se puede usar
para añadir características Tim Berners-Lee
visuales distintivas a partes Timothy "Tim" John Berners-Lee es un científico de la computación
británico, conocido por ser el padre de la Web. Estableció la primera
específicas de texto en los comunicación entre un cliente y un servidor usando el protocolo
HTTP en noviembre de 1989.
documentos.
Estilos dentro de la sección <HEAD>
<html>
<head>
<title>
Tim Berners-Lee </title>
<style>
Tim Berners-Lee
div { Timothy "Tim" John Berners-Lee es un científico de
color:#D50E0E;
font-style: italic; la computación británico, conocido por ser el padre
}
div span { de la Web. Estableció la primera comunicación entre
color: blue; un cliente y un servidor usando el protocolo HTTP en
font-style: normal;
} noviembre de 1989.
div p {
font-size: 20px;
}
</style>
</head>
<body >
<div >
<p><span >Timothy "Tim" John Berners-Lee </span> es un científico de la computación
británico, conocido por ser el padre de la Web. Estableció la primera comunicación
entre un cliente y un servidor usando el protocolo HTTP en noviembre de 1989.</p>
</div>
</body>
</html>
El atributo id dentro de un <div>
 El valor del atributo “id” de un elemento es único.
 No debería haber otro elemento con el mismo nombre de

identificador (id) dentro de tu documento HTML.
 En la sección <style> se conforma anteponiendo almohadilla ‘#‘.
 Apuntará a todos los elementos del documento al que afecte la

hoja de estilos que tengan declarado ese valor.
El atributo id dentro de un <div>
 Para declarar un selector de "id" lo podemos hacer
de la siguiente manera: SELECTOR
<style>
#unico {
background: yellow;
margin: 1rem;
<div id=“unico”>Selector ID</div> padding: 1rem;
text-align: center;
color: orange;
font-size: 2rem;
}
</style>
ATRIBUTO
Atributo <class>
 El valor del atributo “class”, puede ser utilizado en más de un
elemento del documento HTML.
 En la sección <style> se conforma anteponiendo un punto '.‘
 Apuntará a todos los elementos del documento al que afecte la hoja

de estilos que tengan declarado ese valor.
Atributo <class>

<p class="una_clase">...</p>
<p class="una_clase otra_clase">...</p>
/* En el CSS */
.una_clase {} /* Aplica al primer 'p' */
otra_clase {} /* Aplica al segundo 'p' */
Elementos <div> y <span> con sección <style>
.general { <div id=“general”>………</div>
margin: 1rem; .
padding: 1rem;
.
text-align: center;
font-size: 2rem; .
} <div class=“planta”>…….
.planta {
background: #1abc9c; <span class=“agua”>……….</span>
color: #16a085; </div>
}
.
.agua { .
background: #3498db; .
color: #2980b9; <span class=“fuego”>……. </span>
}
.fuego {
background: #e67e22;
color: #d35400;
}

DIV y SPAN

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

DIV y SPAN

Hochgeladen von

Copyright:

Verfügbare Formate

LAS ETIQUETAS: <DIV> Y <SPAN>

Certificado de Profesionalidad IFCD0210

 Se usarán, a menudo, junto con los atributos class

 <div style="color: #040; font-style: italic">

 La etiqueta div es más fácil de HTTP en noviembre de 1989.

usar que la etiqueta table

 <div style="color: #040; font-style: italic">

 No debería haber otro elemento con el mismo nombre de

 En la sección <style> se conforma anteponiendo almohadilla ‘#‘.

 Apuntará a todos los elementos del documento al que afecte la

 En la sección <style> se conforma anteponiendo un punto '.‘

 Apuntará a todos los elementos del documento al que afecte la hoja

Das könnte Ihnen auch gefallen