Presentacióncss

Aplicando CSS a un documento HTML
Podemos aplicar CSS a un documento HTML de tres maneras diferentes: Mtodo 1: En lnea (el atributo style) Un modo de aplicar CSS a HTML es usando el atributo de HTML style.
<html> <head> <title>Ejemplo</title> </head> <body style="background-color: #FF0000;"> <p>Esta es una pgina con fondo rojo</p> </body> </html>
Mtodo 2: Interno (la etiqueta style) Otra forma es incluir el cdigo CSS usando la etiqueta HTML <style>. Por ejemplo, as: <html> <head> <title>Ejemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Esta es una pgina con fondo rojo</p> </body> </html>
Mtodo 3: Externo (enlace a una hoja de estilo) El mtodo recomendado es enlazar con lo que se denomina hoja de estilo externa. A lo largo de este tutorial usaremos este mtodo en todos nuestros ejemplos. Una hoja de estilo externa es sencillamente un fichero de texto con la extensin .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro. Por ejemplo, digamos que tu hoja de estilo se llama style.css y est localizada en una carpeta que se llama style. Esta situacin se puede ilustrar de la siguiente manera:
El truco consiste en crear un vnculo desde el documento HTML (por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vnculo se puede crear con una sencilla lnea de cdigo HTML: <link rel="stylesheet" type="text/css" href="style/style.css" /> Fjate cmo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo href.
La lnea de cdigo debe insertarse en la seccin de encabezado del cdigo HTML, es decir, entre la etiqueta <head> y </head>. De esta manera: <html> <head> <title>Mi documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" /> </head>
<body> ...
Este vnculo indica al navegador que debera usar la presentacin del fichero CSS al mostrar el fichero HTML. Lo realmente bueno de este mtodo es que se pueden vincular varios documentos HTML con la misma hoja de estilo. En otras palabras, se puede usar un nico fichero CSS para controlar la presentacin del muchos documentos HTML.
<html> <head> <title>Mi documento</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Mi primera hoja de estilo</h1> </body> </html>
Fichero estilo.css body { background-color: #FF0000; }
Abre el Bloc de notas (o el editor de texto que utilices) y crea un archivo con el siguiente contenido: Fichero default.htm
Ahora coloca los dos ficheros en la misma carpeta. Recuerda grabar los ficheros con las extensiones correctas (".htm" y ".css", respectivamente). Abre el fichero default.htm con el navegador y observa que la pgina tiene un color de fondo rojo. Enhorabuena! Acabas de crear tu primera hoja de estilo!
Colores y fondos
color background-color background-image background-repeat background-attachment background-position background
Color de primer plano: la propiedad 'color'

La propiedad color describe el color de primer plano de un elemento. Por ejemplo, imagina que queremos que todos los ttulos de un documento aparezcan con color rojo oscuro. Todos los ttulos estn marcados con el elemento <h1>. El cdigo siguiente establece el color de los elementos <h1> como rojo. h1 { color: #ff0000; } Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).
La propiedad 'background-color'
La propiedad background-color describe el color de fondo de los elementos. El elemento <body> contiene todo el contenido de un documento HTML. As pues, para cambiar el color de fondo de una pgina, la propiedad background-color debera aplicarse al elemento <body>. Tambin se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarn diferentes colores a los elementos <body> y <h1>. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }
Imgenes de fondo [background La propiedad CSS background-image se usa para insertar image] una imagen de fondo.
Para insertar una imagen como imagen de fondo de una pgina web, aplica sencillamente la propiedad background-image al elemento <body> y especifica la localizacin de la imagen. body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }
NOTA: Fjate cmo hemos especificado la localizacin de la imagen: url("butterfly.gif"). Esto significa que la imagen est en la misma carpeta que la hoja de estilo. Tambin puedes hacer referencia a imgenes en otras carpetas usando url("../imagenes/butterfly.gif") o incluso imgenes de internet si indicas la direccin completa del fichero: url("http://www.html.net/butterfly.gif").
Repetir la imagen de fondo [backgroundrepeat] La tabla siguiente resume los cuatro valores diferentes para la propiedad background-repeat.
Valor Descripcin Background-repeat: repeat-x La imagen se repite en el eje horizontal background-repeat: repeat-y La imagen se repite en el eje vertical background-repeat: repeat La imagen se repite en el eje horizontal y vertical background-repeat: no-repeat La imagen no se repite
Por ejemplo, para evitar que se repita un imagen de fondo, el cdigo que tendramos que usar sera el siguiente: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }
Fijar la imagen de fondo [background-attachment] La propiedad background-attachment especifica si una imagen est fija o se desplaza con el elemento contenedor. Una imagen de fondo fija no se mover con el texto cuando el lector se desplace por la pgina, mientras que una imagen de fondo no fija se desplazar con el texto de la pgina web. La tabla siguiente resume los dos valores posibles para la propiedad background-attachment Valor Descripcin Background-attachment: scroll La imagen se desplaza con la pgina - no est fija Background-attachment: fixed La imagen est fija
Ubicacin de la imagen de fondo [background-position]

Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedad background-position te permitir cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras. Hay muchas formas diferentes de establecer los valores de la propiedad background-position. Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 pxeles del margen izquierdo y a 200 pxeles del margen superior del la ventana del navegador. Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (pxeles, centmetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha). El modelo siguiente ilustra cmo funciona el sistema:
La tabla siguiente proporciona varios ejemplos. Valor Descripcin background-position: 2cm 2cm La imagen se posiciona a 2 cm del margen izquierdo y a 2 cm del margen superior de la pgina. background-position: 50% 25% La imagen se posiciona en el centro de la pgina y un 25 % del margen superior de la misma. background-position: top right La imagen se posiciona en la esquina superior derecha de la pgina
El ejemplo de cdigo siguiente posiciona la imagen de fondo en la esquina inferior derecha: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }
Fuentes
Se describirn las siguientes propiedades CSS: font-family font-style font-variant font-weight font-size font Familia de fuentes [font-family] La propiedad font-family se usa para establecer una lista ordenada de fuentes que se usarn para mostrar un elemento determinado o una pgina web. Si la primera fuente de la lista no est instalada en el equipo desde el que se accede al sitio, se seguir probando con la siguiente fuente hasta encontrar una fuente apropiada. Para clasificar las fuentes se usan dos tipos de nombres: nombres de una familia y familias genricas. Estos dos trminos se explican a continuacin.
La diferencia se puede ilustrar as:
Al listar fuentes para el sitio web, por supuesto se empieza por la preferida, seguida sta de algunas fuentes alternativas. Se recomienda completar la lista con una familia de fuentes genrica. As, al menos, la pgina se mostrar usando una fuente de la misma familia si ninguna de las especificadas estn disponibles. Un ejemplo de lista de fuentes por orden de prioridad podra tener este aspecto: h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: "Times New Roman", serif; }
Los encabezados marcados con la etiqueta <h1> se mostrarn usando la fuente "Arial". Si esta fuente no est instalada en el equipo del usuario, se usar en su lugar la fuente "Verdana". Si ambas fuentes no estn disponibles, se usar una fuente de la familia sans-serif para mostrar los encabezados. Fjate cmo el nombre de fuente "Times New Roman" contiene espacios y, por lo tanto, se lista usando comillas.
Estilo de la fuente [font-style]

La propiedad font-style define la fuente elegida bien con el valor normal, el valoritalic o el valor oblique. En el ejemplo que sigue, todos los encabezados marcados con <h2> aparecern en cursiva. h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: "Times New Roman", serif; font-style: italic; }
Variante de fuente [font-variant]

La propiedad font-variant se usa para elegir entre las variantes normal o small-caps (versalita) de una fuente. La fuente a la que se aplica el valorsmall-caps es una fuente que usa letras en mayscula inicial ms pequeas, en vez de letras en minscula.
Si la propiedad font-variant se establece con el valor small-caps y no hay disponible una fuente en versalita, el navegador probablemente mostrar el texto en mayscula. h1 { font-variant: small-caps; } h2 { font-variant: normal; }
Peso de la fuente [font-weight]

La propiedad font-weight describe qu intensidad o "peso" en negrita debera tener la fuente. Toda fuente puede tener los valores normal o bold. Algunos navegadores soportan, incluso, el uso de nmeros entre 100 y 900 (de cien en cien) para describir el peso de dicha fuente. p{ font-family: arial, verdana, sans-serif; } td { font-family: arial, verdana, sans-serif; font-weight: bold; }
Tamao de la fuente [font-size]

El tamao de la fuente se establece por medio de la propiedad font-size. A la hora de describir el tamao de las fuentes, existen muchas unidades diferentes (por ejemplo, pxeles y porcentajes) entre las que elegir.. Como ejemplo, podemos incluir: h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}
Existe una diferencia clave entre las cuatro unidades anteriores. Las unidades 'px' y 'pt' establecen el tamao de la fuente de forma absoluta, mientras que '%' y 'em' permiten al usuario ajustar el tamao de la misma segn considere oportuno. Muchos usuarios son discapacitados, mayores o sufren de disminuacin visual, o disponen de un monitor de mala calidad.Para que tu sitio web sea accesible para todo el mundo, deberas usar unidades ajustables como, por ejemplo, '%' o 'em'.
Combinacin de propiedades [font]

Si usamos la propiedad abreviada font es posible incluir todas las propiedades diferentes relativas a fuentes en una nica propiedad. Por ejemplo, imagina estas cuatro lneas de cdigo que usamos para describir las propiedades de fuente para la etiqueta <p>: p{ font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } Usando la propiedad abreviada, el cdigo se puede simplicar as: p { font: italic bold 30px arial, sans-serif; } El orden de los valores para la propiedad font es: font-style | font-variant | font-weight | font-size | font-family
Texto
Formatear y aadir estilo al texto es un tema clave para cualquier diseador web. Describiremos las siguientes propiedades: text-indent text-align text-decoration letter-spacing text-transform
Sangra del texto [text-indent]

La propiedad text-indent permite aadir un toque de elegancia a los prrafos de texto al aplicar sangra a la primera lnea de dicho prrafo. En el ejemplo siguiente se ha aplicado una sanga de 30px a todos los prrafos de texto marcados con la etiqueta <p>: p { text-indent: 30px; }
Alineacin del texto [text-align]

La propiedad CSS text-align es el equivalente al atributo align usado en versiones anteriores de HTML. Los valores posibles de esta propiedad son: left(texto alineado a la izquierda), right (texto alineado a la derecha) o center (texto con alineacin centrada). Adems, el valor justify(alineacin justificada) alargar cada lnea de forma que los mrgenes izquierdo y derecho estn justificados. Esta tipo de presentacin la habrs visto, por ejemplo, en peridicos y revistas. En el ejemplo que sigue, el texto de los encabezados de la tabla, <th>, se ha alineado a la derecha, mientras que los datos de la tabla, <td>, aparecen centrados. Adems, los prrafos de texto normales estn justificados: th { text-align: right; } td { text-align: center; } p { text-align: justify; }
Decoracin del texto [text-decoration]

La propiedad text-decoration permite aadir diferentes "decoraciones" o "efectos" al texto. Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior. En el ejemplo siguiente, el elemento <h1>aparecer subrayado, el elemento <h2> aparecer con un subrayado por encima del texto y el elemento <h3> tendr el texto tachado. h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }
Espaciado entre caracteres [letter-spacing]

El espaciado entre los caracteres de texto se puede especificar usando la propiedad letterspacing. El valor de esta propiedad corresponde, sencillamente, al ancho deseado. Por ejemplo, si queremos un espaciado de 3px entre los caracteres de un prrafo de texto <p> y6px entre los caracteres de los encabezados <h1>, usaramos el siguiente cdigo: h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }
Transformacin del texto [text-transform]

La propiedad text-transform controla la escritura en maysculas de un texto. Puedes elegir entre los valorescapitalize, uppercase o lowercase, sin importar cmo aparece el texto original en el cdigo HTML. Un ejemplo podra ser la palabra "ttulo" que se puede presentar al usuario como "TTULO" o "Ttulo". A continuacin ofrecemos una explicacin de los valores de la propiedadtext-transform mencionados en el prrafo anterior: capitalize Pone en mayscula la primera letra de cada palabra. Por ejemplo, "john doe" aparecer como "John Doe". uppercase Convierte todas las letras a mayscula. Por ejemplo, "john doe" aparecer como "JOHN DOE". lowercase Convierte todas las letras a minscula. Por ejemplo, "JOHN DOE" aparecer como "john doe". none No se realiza transformacin alguna; el texto se presenta tal como aparece en el cgido HTML. Como ejemplo, usaremos una lista de nombres. Todos los nombres estn marcados con la etiqueta <li> (de "list element", es decir, elemento de lista). Supongamos que queremos que las iniciales de los nombres aparezcan en mayscula y los ttulos con todos los caracteres en mayscula.
El cdigo fuente del ejemplo el texto aparece en minscula. h1 { text-transform: uppercase; } li { text-transform: capitalize; }
Enlaces
Ya puedes aplicar lo que aprendiste en las lecciones anteriores a los enlaces (es decir, cambiar colores, fuentes, subrayado, etc.). La novedad respecto a los enlaces es que CSS te permite definir estas propiedades de forma diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o si el cursor est sobre dicho enlace. Esto permite aadir efectos divertidos y tiles a tu sitio web. Para controlar estos efectos se usan lo que se ha denominado como pseudo-clases. Qu es una pseudo-clase? Una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML. Veamos un ejemplo. Como ya sabes, los enlaces se especifican en HTML con la etiqueta <a>. Por lo tanto, podemos usar a como selector en CSS: a { color: blue; } Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado. Puedes usar una pseudo-clase para asignar diferentes estilos a los enlaces visitados y no visitados. a:link { color: blue; } a:visited { color: red; }
Usa a:link y a:visited para enlaces visitados y no visitados, respectivamente. A los enlaces activos se les aplica la pseudo-clase a:active, y a:hover cuando el cursor se coloca o pasa sobre el enlace. Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y ms explicaciones.
Pseudo-clase a:link
La pseudo clase :link se usa para enlaces que dirigen a pginas que el usuario no ha visitado. En el ejemplo de cdigo que sigue, los enlaces no visitados tendrn un color azul claro. a:link { color: #6699CC; }
Pseudo-clase a:visited
La pseudo clase :visited se usa para enlaces que dirigen a pginas que el usuario ya ha visitado. Por ejemplo, el cdigo siguiente har que todos los enlaces visitados sean de color prpura oscuro: a:visited { color: #660099; }
Pseudo-clase a:active:
La pseudo clase :active se usa para enlaces que estn activos. El cdigo de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo: a:active { background-color: #FFFF00; }
Pseudo-clase a:hover
La pseudo clase a:hover se usa cuando el puntero del ratn pasa por encima de un enlace. Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estn en cursiva cuando el cursor pase sobre ellos, el cdigo CSS que utilizaremos ser el siguiente: a:hover { color: orange; font-style: italic; }
Identificacin y agrupacin de elementos (class e id)

Agrupacin de elementos con el atributo class Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El cdigo HTML sera el siguiente: <p>Uvas para el vino blanco:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a> </li> </ul> <p>Uvas para el vino tinto:</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a> </li> </ul>
As pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la pgina web sigan siendo azules. Para lograr esto, dividiremos los enlaces en dos categoras. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo class. Intentemos especificar algunas clases en el ejemplo anterior: <p>Uvas para el vino blanco:</p> <ul> <li> <a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a> </li> </ul> <p>Uvas para el vino tinto:</p> <ul> <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li> <li><a href="pn.htm" class="redwine">Pinot Noir</a> </li> </ul>
A partir de aqu, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente. a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }
Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase unsando .nombredelaclase en la hoja de estilo del documento.
Identificacin de un elemento usando el atributo id

Adems de agrupar elementos, podras necesitar identificar un elemento nico. Esto se hace con el atributo id. Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser nico. En cualquier otro caso, se debera usar el atributo class en su lugar. Ahora, examinemos un ejemplo de un posible uso del atributo id: <h1>Captulo 1</h1> ... <h2>Captulo 1.1</h2> ... <h2>Captulo 1.2</h2> ... <h1>Captulo 2</h1> ... <h2>Captulo 2.1</h2> ... <h3>Captulo 2.1.2</h3> ...
El cdigo anterior podra hacer referencia a encabezados de cualquier documento dividido en captulos y prrafos. Sera normal asignar un id a cada captulo de la siguiente manera: <h1 id="c1">Captulo 1</h1> ... <h2 id="c1-1">Captulo 1.1</h2> ... <h2 id="c1-2">Captulo 1.2</h2> ... <h1 id="c2">Captulo 2</h1> ... <h2 id="c2-1">Captulo 2.1</h2> ... <h3 id="c2-1-2">Captulo 2.1.2</h3> ...
Digamos que el ttulo del captulo 1.2 tiene que estar en rojo. Usando el cdigo CSS necesario, se podra hacer as: #c1-2 { color: red; }
Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento especfico usando #nombre del identificador en la hoja de estilo del documento.
Agrupacin de elementos (span y div)

Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarn, a menudo, junto con los atributos class e id. 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. Agrupacin con el elemento <span> Agrupacin con el elemento <div> Agrupacin con <span> El elemento <span> es lo que se podra denominar un elemento neutro que no aade nada al documento en s. Pero con CSS <span> se puede usar para aadir caractersticas visuales distintivas a partes especficas de texto en los documentos. Un ejemplo de esto podra ser esta cita de Benjamin Franklin: <p>El que pronto se acuesta y pronto se levanta, es hombre saludable, rico y sabio.</p>
Digamos que queremos que lo que el seor Franklin considera como las ventajas de no pasarse todo el da durmiendo, aparezca enfatizado en rojo. Para este fin, podemos marcar dichas ventajas con el elemento <span>. A cada elemento span se le aade el atributo class, que podemos definir as en nuestra hoja de estilo: <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> El cdigo CSS necesario para producir este efecto es el siguiente: span.benefit { color:red; }
Por supuesto, se puede usar tambin el atributo id para aadir estilo a los elementos definidos con <span>. Pero recuerda que tendrs que aplicar siempre un atributo id nico para cada uno de los tres elementos <span>, tal como aprendimos en la leccin anterior.
Agrupacin 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 ms elementos a nivel de bloque. Aparte de esta diferencia, la agrupacin con <div> funciona ms o menos igual. Veamos un ejemplo con dos listas de presidentes de los EE.UU., divididas segn su filiacin poltica. <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>
En nuestra hoja de estilo podemos utilizar la agrupacin del mismo modo que antes: #democrats { background:blue; } #republicans { background:red; }

Presentacióncss

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Presentacióncss

Caricato da

Copyright:

Formati disponibili

Aplicando CSS a un documento HTML

Color de primer plano: la propiedad 'color'

Ubicacin de la imagen de fondo [background-position]

La diferencia se puede ilustrar as:

Estilo de la fuente [font-style]

Variante de fuente [font-variant]

Peso de la fuente [font-weight]

Tamao de la fuente [font-size]

Combinacin de propiedades [font]

Sangra del texto [text-indent]

Alineacin del texto [text-align]

Decoracin del texto [text-decoration]

Espaciado entre caracteres [letter-spacing]

Transformacin del texto [text-transform]

Identificacin y agrupacin de elementos (class e id)

Identificacin de un elemento usando el atributo id

Agrupacin de elementos (span y div)

Agrupacin con el elemento <div>

Potrebbero piacerti anche