Foros del Web » Creando para Internet » CSS »

Pregunta de principiante

Estas en el tema de Pregunta de principiante en el foro de CSS en Foros del Web. hola amigos, he visto que a veces en las hojas de estilo ponen cosas como esta: Código PHP: #contenedor  y en otras algo asi: Código ...
  #1 (permalink)  
Antiguo 11/12/2006, 12:05
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Pregunta de principiante

hola amigos, he visto que a veces en las hojas de estilo ponen cosas como esta:

Código PHP:
#contenedor 
y en otras algo asi:

Código PHP:
.contenedor 
¿quisiera saber cual es la diferencia entre estas dos, con numeral y con un punto al principio?

Mil gracias
DX
  #2 (permalink)  
Antiguo 11/12/2006, 12:11
Avatar de hanscruz  
Fecha de Ingreso: junio-2005
Mensajes: 278
Antigüedad: 12 años, 5 meses
Puntos: 0
Re: Pregunta de principiante

Bueno tambien estoy empezando en esto pero se qeu el primero es un identificador y lo llamas asi id="contenedor" el segundo es una clase y lo llamas asi class="contenedor" ademas hay un tercero que no llevan ni punto ni numeral solo el nombre esos se ejecutaran si o si en la pagina sin necesidad de ser llamados.
__________________
:policia:
  #3 (permalink)  
Antiguo 11/12/2006, 12:36
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Re: Pregunta de principiante

Hola Dragoncito,

agregar a lo dicho por hanscruz que un id define a un elemento único en el documento y una clase define a un grupo de elementos que pueden ser de la misma clase dentro de un mismo documento.

Un saludo
  #4 (permalink)  
Antiguo 11/12/2006, 13:12
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Pregunta de principiante

perfecto, pero para entender un poco más y mejor, el id="contenedor" abarca todo lo que existe dentro de un <div>....</div>; y la clase class="contenedor" aplicaria solamente a donde nosotros le indiquemos, por ejemplo <a href="#" class="contenedor">....</a>

Entendí bien amigos?

Tunait
  #5 (permalink)  
Antiguo 11/12/2006, 13:28
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Re: Pregunta de principiante

mmmno exactamente. id y class se comporta exactamente igual. Si se define un id="contenedor" a un div se referirá a ese div, tenga o no algo adentro y si las propiedades definidas a ese id son heredables serán entonces heredadas por los elementos contenidos en ese div. Pero funcionaría exactamente igual si en vez de asignarle un id se le asignara una clase.

No sé si logro explicarme ...


  #6 (permalink)  
Antiguo 11/12/2006, 13:37
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Re: Pregunta de principiante

Ampliando ...

Usa clases cuando quieras asignar las mismas características a más de un elemento y usa un id cuando necesite unas características únicas.

Por ejemplo, puedes crear la clase .menu para definir el contenedor de tu menú pero como será el único menú de tu sitio pues puedes asignarle un id #menu.

Si el contenedor `principal debe tener tal anchura, tal margen y tales propiedades puedes hacerlo asignándole una clase o un id, pero teniendo en cuenta que será el único elemento con esas dimensiones y características, pues se le asigna un id. Pero si lo hicieramos con una clase y la aplicáramos sólo a ese elemento, pues funcionaría igual.

Con una clase defines un tipo de elementos y puedes crear elementos que pertenezcan a esa clase. Con un id defines a un elemento único. Pero los css se aplican igual
  #7 (permalink)  
Antiguo 11/12/2006, 13:51
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Pregunta de principiante

EXCELENTE TUNAIT!!!!!!!!!!!!!!!! me quedó más que claro, realmente sos un 10 explicando

Gracias de nuevo
DX
  #8 (permalink)  
Antiguo 11/12/2006, 13:56
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: Pregunta de principiante

OK yo tratare de explicarlo de nuevo:

Un ID y un CLASS en palabras simples se diferencian solo en una cosa, una es para ser usado una sola ves, y el otro puede ser reutilizado todas las veces que quieras,

Ejemplo: tengo mi pequeño codigo:

Cita:
<style type="text/css">

#contenedor{
background-color: #333333;
border: solid 1px #000;
}

.estilorojo{
background-color: red;
border: solid 1 px: blue;
}

.estiloamarillo{
background-color: yellow;
border: solid 1 px: green;
}

</style>
</head>
<body>
<div id="contenerdor">
<p class="estilorojo">Esto es un texto de para probar la clase estilo rojo</p><br />
<p class="estiloamarillo">Esto es un texto para probar la clase estiloamarillo</p><br />
<p class="estilorojo">Estoy probando la clase estilo rojo de nuevo</p><br />
<p class="estiloamarillo">Una ves mas la clase estiloamarillo</p><br />
</div>
Puedo utilizar las clases tantas veces quieras, pero el identificador solamente una, por supuesto puede ponerle un ID a una etiqueta <p> como ponerle un class a una etiqueta <div>

Ademas a los selectores a los que se refiere hanscruz es que puedes aplicarle un estilo a un elemento que tengas ya en tu codigo html, por ejemplo:

Si le agregamos un heading (<h#>) a tu codigo de ejemplo podrias usar las mismas propiedades para todos los elementos de un mismo tipo.


Cita:
<style type="text/css">

#contenedor{
background-color: #333333;
border: solid 1px #000;
}

.estilorojo{
background-color: red;
border: solid 1 px: blue;
}

.estiloamarillo{
background-color: yellow;
border: solid 1 px: green;
}

h1{
color: navy;
}

</style>
</head>
<body>
<div id="contenerdor">
<h1>Titulo para todas las clases</h1>
<p class="estilorojo">Esto es un texto de para probar la clase estilo rojo</p><br />
<h1>Titulo para todas las clases</h1>
<p class="estiloamarillo">Esto es un texto para probar la clase estiloamarillo</p><br />
<h1>Titulo para todas las clases</h1>
<p class="estilorojo">Estoy probando la clase estilo rojo de nuevo</p><br />
<h1>Titulo para todas las clases</h1>
<p class="estiloamarillo">Una ves mas la clase estiloamarillo</p><br />
</div>
Esto se puede complicar mas, pero por ahora esto es bueno para empezar, no quiero que me des mala reputacion por sobrecargarte el cerebro

Suerte amigo

EDITO: Tunait se me adelanto :(, pero como siempre explicacion 10+
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com

Última edición por fearlex; 11/12/2006 a las 13:57 Razón: Tunait se me adelanto
  #9 (permalink)  
Antiguo 12/12/2006, 06:58
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Pregunta de principiante

fearlex mil gracias muy buena!!!!
  #10 (permalink)  
Antiguo 12/12/2006, 10:22
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: Pregunta de principiante

Cita:
Iniciado por DragonX Ver Mensaje
fearlex mil gracias muy buena!!!!
Gracias, para eso estamos
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #11 (permalink)  
Antiguo 12/12/2006, 11:44
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Pregunta de principiante

Ahora te hago otra pregunta ¿como embebo una fuente? algo asi como:

<style type="text/css">
@fontdef url (http://www.misitio.com.ar/fuente.pfr)
</style>


estoy buscando un programa llamado (WebFont Wizard // WebFont Maker) que según un manual de w3c dice que con este programita que crear archivos *.pfr se pueden armar ficheros de fonts para utilizar cualquier font

Alguien esta al tanto de esto??

DX
  #12 (permalink)  
Antiguo 12/12/2006, 13:27
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: Pregunta de principiante

Cita:
Iniciado por DragonX Ver Mensaje
Ahora te hago otra pregunta ¿como embebo una fuente? algo asi como:

<style type="text/css">
@fontdef url (http://www.misitio.com.ar/fuente.pfr)
</style>

estoy buscando un programa llamado (WebFont Wizard // WebFont Maker) que según un manual de w3c dice que con este programita que crear archivos *.pfr se pueden armar ficheros de fonts para utilizar cualquier font

Alguien esta al tanto de esto??

DX
Te cuento que hace poco vi un post con relacion a esto, incluso hay una FAQ que puso Tunait acerca de esto, pero no estoy seguro que funcione por que nunca lo he echo:

Cita:
Iniciado por tunait Ver Mensaje
P-/ Fuentes NO instaladas

R-/

Actualizado el 09-07-05
NOTA: Estaba la opción @font-face pero ha sido eliminada de los estandares a partir de css2.1 http://www.forosdelweb.com/showpost....11&postcount=6

Alternativas a cómo hacerlo en la web de kemie
http://www.disenorama.com/articulos/...textos_una.htm


http://www.forosdelweb.com/showpost....2&postcount=15

Dejame saber que conseguistes
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #13 (permalink)  
Antiguo 12/12/2006, 13:51
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Pregunta de principiante

fearlex mil gracias, pero también mire las FAQ's y vi eso, pero no me convensió así que segui investigando y encontré esto WEFT

Un soft gratuito de Microsoft que genera .eot los cuales segun estuve viendo, son parecidos o iguales a los .pfr Otras caracteristicas del programa las podes ver ACA

Yo me lo baje, cree unos archivos .eot, pero se me complicó un poco asignarlo.... te dejo esto para que lo vallamos investigando!!

Gracias
  #14 (permalink)  
Antiguo 12/12/2006, 14:04
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: Pregunta de principiante

Cita:
Iniciado por DragonX Ver Mensaje
fearlex mil gracias, pero también mire las FAQ's y vi eso, pero no me convensió así que segui investigando y encontré esto WEFT

Un soft gratuito de Microsoft que genera .eot los cuales segun estuve viendo, son parecidos o iguales a los .pfr Otras caracteristicas del programa las podes ver ACA

Yo me lo baje, cree unos archivos .eot, pero se me complicó un poco asignarlo.... te dejo esto para que lo vallamos investigando!!

Gracias
Seguro en cuanto llegue a la casa lo miro,
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:35.