Comunidad de diseño web y desarrollo en internet online

No entiendo la sintaxis de este CSS,.....

Citar            
MensajeEscrito el 23 Oct 2006 09:12 pm
Hola, estoy aprendiendo aun atrabajar con los CSS y tengo una duda que quizas ustedes me puedan aclarar.....se trata de la sintaxis de esto: #menu div.barraMenu a.botonMenu:hover.....no comprendo bien, como es que estan juntos un id y una clase y para que me sirve eso.copiare aqui el ejemplo donde lo encontre....si alguien me puede explicar por fa, se los agradecderia!

#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botonMenu {
background-color:#FF3366;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #637D4D;
color: black;
}
</style>
</head>
<body>
<div id="menu"><div class="barraMenu">
<a class="botonMenu" href="">Opción 1</a>
<a class="botonMenu" href="">Opción 2</a>
<a class="botonMenu" href="">Opción 3</a>
<a class="botonMenu" href="">Opción 4</a>
</div>
</div>

Por tabarich

30 de clabLevel



 

Cuba

firefox
Citar            
MensajeEscrito el 23 Oct 2006 10:11 pm
Los selectores de CSS van de manera descendiente, por ejemplo #menu div.barraMenu a.botonMenu es para un ancla con la clase "botonMenu" dentro de la div con la clase "barraMenu", que está dentro de un elemento con la id "menu".

Saludos, y espero que esto haya respondido tu pregunta.

Por Alan

470 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 24 Oct 2006 02:56 am
imagina que tienes esto:

medio nuevo escribió:

Los selectores de CSS van de manera descendiente, por ejemplo #menu div.barraMenu a.botonMenu es para un ancla con la clase "botonMenu" dentro de la div con la clase "barraMenu", que está dentro de un elemento con la id "menu".

<div id="menu">
<div class="barraMenu">
<a href="http://www.cristalab.com">Cristalab</a>
</div>
</div>


Un "id" puede estar en cualquier etiqueta html... no solo en un "div", lo mismo pasa con "class"

U_U

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino  

Lima, Perú

firefox
Citar            
MensajeEscrito el 24 Oct 2006 02:50 pm
#menu {} todo contenido por el id menu.
.barraMenu {} todo contenido por las clases barraMenu.
#menu .barraMenu {} solo el contenido de la clase barraMenu -dentro- del id menu.
#menu a {} todos los enlaces dentro del menu.
#menu .barraMenu a {} solo afecta a todos los enlaces -dentro- de las clases barraMenu -dentro- del id menu.
#menu .barraMenu a.botonMenu {} solo afecta a los enlaces con clase botonMenu dentro de barraMenu dentro del menu.

Todo va en forma descendente tal y como una cascada por algo es CSS (hojas de estilos en forma de cascada).

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 24 Oct 2006 05:22 pm
creo que eso es solo el producto de alguienq ue no se save organizar... jejeje no no es cierto, pero lo que si es cierto que eso pudo definirse haciendo refernecioa solo a la clase y no a todos sus padres... a menos claro que tengas otros elementos de la misma clase que lleven disitintas declaraciones, de ser asi por que no solo se les da un nombre de clase distinto y se evitna tantas complicaciones que en efecto solo confunden a los nuevitos... yo diria que es bueno usar los selectores de hijo cuando se va a hacer referencia a un elemento ej\

#midiv h1{}

lo que hace referencia a todos los h1 que esten dentro de "midiv" o mejro dicho que sean hijos de "midiv" que logicamente es un div con id="midiv"(no usar midiv como nombre de un div en la vida real, esto es solo un ejemplo)

para hacer referencia a un selector tipo id se usa el gato (#) seguido del nombre de id del div, para hacer referencia a un nombre de clase se usa el punto (.) seguido del nombre de clase del div (tambien puede ser cualquier otro elemento, no solo div)

Por que id y class???

id es un idetificador unico, solo le corresponde a un elemento, ej:

si un div tiene id="menu" no podemos aplicar o tro div un id igual a menu, por que menu ya es id de el primer div

una clase se usa cuando mas de un elemento llevaran el mismo identificador por ejemplo el elemento span, podemos asignarel un valor de clase y darle su estilo y suarlo a lo largo de la pagina cuantas veces sea necesario...

span class="enfatizado"

le asigno estilos, por ejemplo tipo de letra italica, y strong entonces puedo usarlo muchas veces para enfatizar distintos segmentos de un parrafo o de distintos parrafos icluso en distintos divs...

Por buzu

163 de clabLevel



 

Los Angeles, California

firefox
Citar            
MensajeEscrito el 24 Oct 2006 06:27 pm

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino  

Lima, Perú

firefox
Citar            
MensajeEscrito el 26 Oct 2006 03:06 pm
Holaaaa!!!Gracias mil a todos, me han esclarecido mis dudas y muy bien!!!Pero como bien dices buzu par atras,ni para coger impulso y entonces tengo mas dudas.....porque soy nuevita y me gusta mucho trabajar con los estilos.
un saludo a todos.
tabarich

Por tabarich

30 de clabLevel



 

Cuba

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.