Despertando dormiluna. Cargando datos.

domingo, 29 de noviembre de 2009

Dormiluna

Diferenciando entre identidad y clase

+/- Leer entrada

Los selectores nos permiten dar nombre a los elementos en HTML.
Los atributos que se pueden utilizar con casi todos los elementos son id y class.
Una id con un nombre asignado, solo puede aparecer una vez en una página Web.
Para poder utilizar el id como un selector le asignaremos un nombre con #.
ej: # dormiluno (el nombre es asignado en la hoja de estilos, <style type="text/css"> )
El atributo class se bautiza poniéndole un punto al principio del nombre.
ej: . dormiluna (también ira instalado en la hoja de estilos)
El atributo class (al contrario que el atributo id) puede aparecer varias veces en una página Web.
Id y class aparecerán en la página Web de la siguiente manera:
<div id='dormiluno'>
<div class='dormiluna'>
.....................................................
</div>
</div>
Para ver esto más claro, crearemos un marco, que en su interior encontraremos una imagen y un texto.
El tamaño del marco, la definición del borde y donde estará situado su contenido (dentro del marco), lo realizaremos mediante este código (ira en la hoja de estilos):
.somediv{
width: 120px;
clear: left;
border: 6px outset #ffaeff;
}
.somediv .floatbox{
float: left;
width: 10px;
}
* html .somediv p{ /* IE 3px jog hack*/
height: 1%;
}
.somediv p{
margin-top: 0;
margin-left: 50px;
}
Para que se visualice podemos poner el siguiente código, ya sea en una entrada o en un widget.
<div class='somediv'>
<div class='floatbox'>
<img border='0' src='http://imagen' width='50' />
</div>
<p>Las palabras que encierran la verdad nunca suenan bien. Las palabras que suenan bien no expresan la verdad. Felices Fiestas.</p>
</div>



El tamaño de la imagen width a de ir en consonancia con el marco, porque sino quedara todo el contenido descentrado.
Ahora si queremos complementar este código podemos añadir un atributo id:
#dormiluno {
margin: 0px 1px 0px 2px; float: left;
background-image:url(http://imagen);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 65%;
letter-spacing: -.08em;
}
Y para visualizar el conjunto en una entrada o como un widget, ponemos el siguiente código:
<div id='dormiluno'>
<div class='somediv'>
<div class='floatbox'>
<img border='0' src='http://imagen' width='50'/>
</div>
<p>Las palabras que encierran la verdad nunca suenan bien. Las palabras que suenan bien no expresan la verdad. Felices Fiestas.</p>
</div>
</div>

Ej. con id y class

Ej. con class




Las palabras que encierran la verdad nunca suenan bien. Las palabras que suenan bien no expresan la verdad. Felices Fiestas.




votar
Compartir

4 comentarios:

Regina Castejon dijo...

Hola,Carlos, tienes un premio un blog, FELICIDADES!!! pasa por él por favor. Un abrazo

rudy spillman dijo...

Flores rojas, gracias por tan detallada y amplia información.
Un saludo.

gaiter dijo...

Hooola Carlos, me ha gustado mucho. Nos vemos el miércoles, ahhh y sempre barça!!!!

Regina Castejon dijo...

Hola Carlos, hay otro premio esperando por tí en mi Blog, FELICITACIONES!!!, pasa por él por favor. Un abrazo

Arte e Historia con YouTube.

Curiosa página de Internet en la cual puedes encontrar videos relacionados con la Historia de España, el Arte Universal e Historia Universal.

A parte de los videos tiene otros contenidos que son:

-Destacados -Actualidad -Secciones

La página esta abalada por la Junta de Castilla y León.Arte e Historia.

YouTube. Canal de Arte e Historia
ShinChan
Yoshito Usui 1958-2009
Juegos

TRES EN RAYA



WebBlog con Historia

Ell@s comentan

PAZ

Dormiluno
Blog
¿Muy interesante?
 
Subir