duda css (#etiqueta,. etiqueta, )

[bellleti]

buenas compañeros y perdonad mi poco uso de css ( iniciandome en ello) una question, no encuentro la diferencia entre teclarar una etiqueta con #delante o sin esto... por ejemplo... o con un punto "." delante.... tienge este algun significado especial? muestro ejemplo siguiente gracias!!

Código PHP:

  #topbottom{ 
    clear: both; 
    background: url(images/toptopbottom.gif) bottom right no-repeat; 
    height: 10px; 
} 
/* just the c#content box*/ 
h2{ 
    font: normal normal 1.5em "Georgia",serif; 
    color: #000; 
    text-decoration: none; 
    background: url(images/h2.gif) top left no-repeat; 
    padding: 3px 0 0 8px; 
} 
h3{ 
    font: normal normal 1em "Georgia",serif; 
    text-transform: uppercase; 
    text-indent: 2em; 
    margin: 7px 0 2px 0; 
} 
#headline{ 
    background: url(images/header.jpg) no-repeat top left; 
    width: 590px; 
    height: 90px; 
    position: relative; 
} 
#headline h1{ 
    position: absolute; 
    bottom: 5px; 
    right: 5px; 
    color: #FFF; 
    margin: 0; 
    padding: 0; 
    text-decoration: none; 
    font: normal normal 2.2em "Trebuchet MS","Arial",sans-serif; 
} 
p{ 
    text-indent: 1.3em; 
    margin: 0 0 5px 0; 
    padding: 0; 
} 
/* sidebar */ 
#inner{ 
    padding: 0 10px; 
} 
form{ 
    margin: 0; 
    padding: 0 0 30px 0; 
    border-bottom: 1px #999 solid; 
} 
form input{ 
    background: #F5F5F5; 
    border: 0; 
    border-bottom: 1px #EFEFEF dotted; 
} 
form label{ 
    font-family: "Georgia",serif; 
} 
form .button{ 
    background: #FFF; 
    border-bottom: none; 
    cursor: pointer; 
} 
form a{ 
    font-family: "Georgia",serif; 
} 
h5{ 
    background: url(images/nav-h.gif) center left no-repeat; 
    font: 1.5em "Arial",sans-serif; 
    padding-left: 25px; 
    margin: 7px 0 3px 3px; 
} 
.nav{ 
    margin: 2px; 
    padding: 0; 
} 
.nav li{ 
    display: inline; 
    list-style-type: none; 
     
} 
.nav li a{ 
    display: block; 
    background: #EFEFEF; 
    padding: 1px 1px 1px 5px; 
    margin: 1px; 
    text-decoration: none; 
    color: #000; 
}  
   

algunos con # otros sin nada.. otros con un punto.. "."


gracias amigos! :P

[willyfc]

El # es un identificador, el . es una clase y si no llevan ninguna de las dos es solo una etiqueta html que tomará los estilos que les des.

Pues hacer tu web solo con id o solo con clases, o con ambos, pienso que el trabajo es lo que decidirá que es lo que combiene.

Un id, al llamarse identificador(#) solo se puede utilizar una vez en un documento y las clases(.) las veces que quieras, por ejemplo no podrías hacer esto:

Código:

<div id="derecha">
   <div id="texto">contenido</div>
</div>
<div id="centro">
   <div id="texto">contenido</div>
</div>

se esta declarando 2 veces el id texto, esto según la W3C es incorrecto y no entra en los estándares.Lo correcto sería:

Código:

<div id="derecha">
   <div class="texto">contenido</div>
</div>
<div id="centro">
   <div class="texto">contenido</div>
</div>
<div id="izq">
   <div class="texto">contenido</div>
</div>

y las etiquetas que están solas son solo de html. si colocas

Código:

h2{color:#999;font-size:2em;}

esto quiere decir que esto afectará a todos los h2 de tu web.O puedes de esta manera:

Código:

.texto h2{color:#999;font-size:2em;}

afectará a todos los h2 que sean declarados dentro de la clase texto.

y así las veces que quieras.Espero haber sido claro(aunque sea un poco, es que me cuesta bastante explicar).

[bellleti]

Iniciado por willyfc

El # es un identificador, el . es una clase y si no llevan ninguna de las dos es solo una etiqueta html que tomará los estilos que les des.

Pues hacer tu web solo con id o solo con clases, o con ambos, pienso que el trabajo es lo que decidirá que es lo que combiene.

Un id, al llamarse identificador(#) solo se puede utilizar una vez en un documento y las clases(.) las veces que quieras, por ejemplo no podrías hacer esto:

Código:

<div id="derecha">
   <div id="texto">contenido</div>
</div>
<div id="centro">
   <div id="texto">contenido</div>
</div>

se esta declarando 2 veces el id texto, esto según la W3C es incorrecto y no entra en los estándares.Lo correcto sería:

Código:

<div id="derecha">
   <div class="texto">contenido</div>
</div>
<div id="centro">
   <div class="texto">contenido</div>
</div>
<div id="izq">
   <div class="texto">contenido</div>
</div>

y así las veces que quieras.Espero haber sido claro(aunque sea un poco, es que me cuesta bastante explicar).

super claro!!! perfecto! :) es la respuesta que necesitava!! muuuuuuchas gracias! :)

un saludo!

[DragonX]

los tags reservados de html se escriben sin nada, como ser:

h1 / h2 / p / img / body / span / ul / li

Los ID's (elementos único e irrepetibles dentro de tu código) se escriben con numeral adelante

#divcontenido / #divfooter / #divheader

y los Class (se pueden utilizar todas las veces que quieras dentro del código) se escriben con punto(.) adelante

.rojo / .listaschicas / .efectocaja

Espero haberte ayudado.
Slds.-

[dacho]

Hola amigo, te comento:

Como primero lo que deberiamos tener en cuenta es que existen elementos en HTML, estos elementos (h1, h2, p, a img, form, div o lo que sea) pueden ser unicos en la pagina o pueden estar repetidos.

Es decir por ejemplo encabezados hay uno en la pagina, al menos generalmente, entonces si definimos un div para un encabezado, podemos colocaremos en el HTML

Código HTML:

<div id="header">
 <h1>El titulo de mi paginas</h1>
<p>Mi pagina es para que entres y la veas :)</p>
</div> 

Ese podria ser un encabezado en HTML para la pagina, ahora si yo quiero que ese encabezado sea instanciado en el css tengo 2 formas:

Código HTML:

div{ aqui pongo las propieedades del div }

o

Código HTML:

div#header{ aqui pongo las propieedades del div }

Cual es la direfencia? bueno, la diferencia principal es que del primer modo cada vez que coloques un elemento div en la pagina tomara las propiedades que pusiste. En cambio de la segunda forma solo cambiara o dara las propiedades que colocaste en el div que contenga el id="header", es decir:

Si tenes un elemento con un id="ejemplo" en el html, la forma de instanciarlo en el css es

#ejemplo


Ademas una caracterisitica de usar ID es que solo puede utilizarse 1 vez, es decir si colocas un id es porque es unico en la pagina. Ahora si es un elemento que esta repetido muchas veces y le queres dar un estilo, entonces tenes que utilizar class, por ejemplo de la siguiente forma:

Código HTML:

<div id="contenido">
 <h2>noticia 1</h2>
<p class="noticia">aqui ponemos el resumen de la noticia y aparecera en el formato que le de al css</p>
 <h2>noticia 2</h2>
<p class="noticia">aqui ponemos el resumen de la noticia y aparecera en el formato que le de al css</p>
 <h2>noticia 3</h2>
<p class="noticia">aqui ponemos el resumen de la noticia y aparecera en el formato que le de al css</p>
</div> 

Si tenes un elemento con un class="ejemplo" en el html, la forma de instanciarlo en el css es

.ejemplo{}

------------------------------------------------------------------

Ademas las estructuras de las paginas son complejas generalmente, es decir que la forma de instanciar elementos es instanciar todo los elementos que lo contienen y el mismo elemento luego, esto permite además heredar propiedades de los elementos padres, como tamaños, tipografias, fondos, etc.

La mejor forma de armar un html con css es tener estructuras de html claras, y ordenadas, te recomiendo que te busques un tutor o un curso de estas dos cosas para poder aprender como armar bien als cosas y para que sirve cada elemento y con el tiempo y practicas aprenderas cual es la mejor forma de trabajar, es decir la que te ahorra mucho tiempo en la creacion y actualizacion de paginas.

espero que te sirva si tenes alguna duda pregunta

[dacho]

jaaa.. me ganaron... bueno que bueno que hayas entendido :)