Preguntas basicas CSS

[cristian_cena]

1) Si determinado elemento ha de ser usado una sola vez, usa un identificador unico, si por el contrario necesitas usarlo más de una vez, usa clases.

• Destacar que css no penaliza por usas identificadores duplicados, pero es una buena práctica usar identificadores únicos: es decir, usar una id distinta y única por cada etiqueta html.
• ¿Por que?: bien una respuesta podría ser que html, css y javascript estan muy relacionados entre sí y una forma muy habitual en javascript de acceder a los elementos es mediante el método "getElementById()" el cual nos proporciona un acceso directo a el elemento que posea ese id, si esta se encuentra duplicada accederá al primer elemento e ignorará al resto.
• Es para mantener esta integridad entre lenguajes que es aconsejable usar identificadores únicos: Para comprender en profundidad este concepto te será util leer sobre "modelo de objeto de documento", "document object model" o simplemente "dom" que es la forma en la cual los navegadores interpretan/renderizan el html creando un modelo o "api" de objetos (nodos) la cual está disponible para javascript y otros lenguajes.

por que usar una y por que usar otra

• No se trata de usar una u otra, puedes usar ambas al mismo tiempo. Según lo que hagas te hará falta un id o un class, o ambos. Destacar que el atributo html class permite una lista de palabras separadas por espacios, es decir, múltiples clases.

Veamos esto que dijimos pero a través de un ejemplo:

Código HTML:

​<p id="parrafo">lorem ipsum</p> <!-- JS solo afecta a este parrafo -->
<p id="parrafo">dolor amet</p>
<p id="p3" class="parrafo">párrafo 3</p>
<p id="p4" class="parrafo negritas">párrafo 4</p>
​<span class="negritas">negrita</span>
 

Código CSS:

#parrafo{
    color:cornflowerBlue;
}
.parrafo{
    color:crimson;
}
.negritas{
    font-weight:bold;
}
 

Código Javascript:

window.onload = function(){
    //con id duplicada: solo afecta al primer parrafo
    document.getElementById("parrafo").innerHTML = "texto nuevo";
    //con id unica:
    document.getElementById("p3").innerHTML = "el tercero"; 
    document.getElementById("p4").innerHTML = "el cuarto";
}
 

2) Apilar capas en css es una tarea que requiere comprender dos cosas: la propiedad z-index y los tipos de posicionamiento disponibles (y su incidencia en el flujo de documento).
Si prescindieramos de z-index, "#aves" no se hubicaría entre "#cielo" y "#universo" porque "por flujo" está por encima de "#universo", entonces como arreglamos esto: dando valores a la propiedad z-index, los cuales pueden ser negativos o positivos. Usamos un contenedor relativo para que las cotas de los hijos absolutos dependan de su posición y no de body, en el link que te pasé, está muy bien explicado.
Para ser más claros veamos esto nuevamente con un ejemplo:

Código HTML:

<div id="wrap">
    <p class="capas" id="tierra">tierra</p>
    <p class="capas" id="cielo">cielo</p>
    <p class="capas" id="universo">universo</p>
    <p class="capas" id="aves">v v v v v v v v v v v v v v v v v v v v v v v v v v v v v vv v v v</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
 

Código CSS:

#wrap{ 
    width:300px;
    height:300px;
    background:beige;
    overflow:hidden;
    position:relative;
}
.capas{ 
    padding:10px;
    width:180px;
    height:180px;
    position: absolute;
}
#tierra{
    background:peru;
    top: 0; 
    left:0;
    z-index: 0;
}
#cielo{
    background:skyBlue;
    top: 33px; 
    left:33px;
    z-index: 1;
}
#universo{
    background:black; color:whitesmoke;
    top: 100px; 
    left:100px;
    z-index: 3;
}
#aves{
    font-weight:bold;
    color:white;
    outline: 2px dotted yellow;
    font-size:2em;
    top: 66px; 
    left:66px;
    z-index: 2;
}
 

Aquí los ejemplos funcionando. espero te haya sido útil. Saludos.