Quiero saber si el orden esta correcto

DoPeY-BBS · #1 (**permalink**) 25/07/2013, 18:03

Quiero saber si el orden esta correcto ante de seguir, la estructura del css.

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset ="UTF-8" />
  <meta name="description" content="Black & Death Metal por un tubo" />
  <meta name="keywords" content="black metal, death metal, thrash metal, brutal death metal" />
<title>Black & Death Metal por un tubo - un placer para tus oidos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
  <div id="cuerpo">
    <header id="cabecera">
      <h1 class="titulo1">Black & Death Metal por un tubo</h1>
      <h2 class="titulo2">Un placer para tus oidos</h2>
    </header>
    <nav id="menu">
     <ul>
      <li>principal</li>
      <li>fotos</li>
      <li>conciertos</li>
      <li>contacto</li>
    </ul>
  </nav>
<section id="contenido">
  <article id="articulos">
    <p id="parrafos">ejemplo ejemplo ejemplo ejemplo</p>
  </article>
</section>
<footer id="pie">
  <p>Derechos Reservados</p>
</footer>
</div>
</body>
</html>

Código CSS:

Ver original* {
    margin: 0px;
    padding: 0px;
}
 
#cabecera {
    background-color: #000000;
}
 
 
h1,h2 {
    font: bold 20px;
    color: #FFFFCC;
    font-family verdana, sans-serif;
    text-align:center; 
}
 
header, section, footer,  nav, article,
    {
display: block;
}
 
body {
text-align: center;
}

CesarHC · #2 (**permalink**) 26/07/2013, 07:23

Yo lo veo bien estructurado, si quieres conocer mas sobre la estructura puedes leer esto.

DoPeY-BBS · #3 (**permalink**) 26/07/2013, 12:32

Ese mismo libro estoy leyendo y voy por el capitulo 2, estoy pensando en comprar el libro pero la cosa es que no hace mucho vi un video de css en desarrollo del web donde te explicaba que los h1,p etc iban juntos y los id y los class por igual. no se si sea cierto esto.

¿que tanto afectaría el orden en los css?

pzin · #4 (**permalink**) 26/07/2013, 13:42

Pues yo veo el orden mal.

Yo lo pondría así:

Código CSS:

Ver original/* Reset global */
* {
  margin: 0px;
  padding: 0px;
}
 
/* Para navegadores viejunos */
header, section, footer,  nav, article {
  display: block;
}
 
/* Lo demás */
body {
  text-align: center;
}
 
#cabecera {
  background-color: #000000;
}
 
h1, h2 {
  font: bold 20px;
  color: #FFFFCC;
  font-family verdana, sans-serif;
  text-align:center; 
}

El orden afecta en que la última regla es la que se aplica, siempre y cuando no sea más importante la especificidad o cueles algún !important por ahí.

DoPeY-BBS · #5 (**permalink**) 26/07/2013, 15:32

Muchas gracias, por esa misma razón es que hay que preguntar, siempre tuve la ligera sospecha de que el orden que pusiste estaba correcto pero lo había puesto tal cual en el libro y eso me confundió.

hackjose · #6 (**permalink**) 26/07/2013, 15:33

Cita:

Iniciado por DoPeY-BBS

Ese mismo libro estoy leyendo y voy por el capitulo 2, estoy pensando en comprar el libro pero la cosa es que no hace mucho vi un video de css en desarrollo del web donde te explicaba que los h1,p etc iban juntos y los id y los class por igual. no se si sea cierto esto.

¿que tanto afectaría el orden en los css?

Basate en lo que diga la documentacion oficial

En cuanto al HTML5 me parece que tu codigo esta bien estructurado si acaso le vendria bien un titulo al section pero no es necesario

El CSS en lo personal nunca me fijo en que este ordenado
h1,h2{text-align:center;}

creo que deberias quitar esa propiedad ya que en body la declaras

Todo bien saludos

CesarHC · #7 (**permalink**) 26/07/2013, 16:35

Cita:

Iniciado por pzin

Pues yo veo el orden mal.

Yo lo pondría así:

Código CSS:

Ver original/* Reset global */
* {
  margin: 0px;
  padding: 0px;
}
 
/* Para navegadores viejunos */
header, section, footer,  nav, article {
  display: block;
}
 
/* Lo demás */
body {
  text-align: center;
}
 
#cabecera {
  background-color: #000000;
}
 
h1, h2 {
  font: bold 20px;
  color: #FFFFCC;
  font-family verdana, sans-serif;
  text-align:center; 
}

El orden afecta en que la última regla es la que se aplica, siempre y cuando no sea más importante la especificidad o cueles algún !important por ahí.

Desde ahora seguire solo la documentacion oficial.

DoPeY-BBS · #8 (**permalink**) 26/07/2013, 17:17

Cita:

Iniciado por pzin

Pues yo veo el orden mal.

Yo lo pondría así:

Código CSS:

Ver original/* Reset global */
* {
  margin: 0px;
  padding: 0px;
}
 
/* Para navegadores viejunos */
header, section, footer,  nav, article {
  display: block;
}
 
/* Lo demás */
body {
  text-align: center;
}
 
#cabecera {
  background-color: #000000;
}
 
h1, h2 {
  font: bold 20px;
  color: #FFFFCC;
  font-family verdana, sans-serif;
  text-align:center; 
}

El orden afecta en que la última regla es la que se aplica, siempre y cuando no sea más importante la especificidad o cueles algún !important por ahí.

Explícame un poco acerca de lo ultimo que dijiste.

pzin · #9 (**permalink**) 26/07/2013, 17:35

Cita:

Iniciado por DoPeY-BBS

Explícame un poco acerca de lo ultimo que dijiste.

Pues si declaras esto así:

Código CSS:

Ver originaldiv.clase {
  color: blue;
}
 
.clase {
  color: red;
}

Se aplicará el color azul, porque tu selector es más específico. Esto podrías alterarlo indicando:

Código CSS:

Ver original.clase {
  color: red !important;
}

Para forzar la prioridad. Aunque no es recomendable hacerlo, más que nada para mantener tu código limpio. Se usa para casos donde no quede otro remedio.

Puedes leer más en colisiones de estilos y en la wiki del foro también hay algo sobre especificidad CSS.