¿css en Linea o Separado?

luxito · #1 (**permalink**) 10/07/2010, 15:40

Buen dia.

estoy aprendiendo css y me tope con una duda.
es mejor usar css en la misma linea de los tag? o es mejor separarlo?
me refiero a esto

Código:

<div style="color:red;"></div>

Código:

div {color:red;}

Cual es la mejor forma? o en que momento me convendría usar uno en ves de otro?
__________________________________________________ __________

Una ultima pregunta..
es posible hacer que un DIV en particular, no haga caso a las propiedades de su contenedor? no se si me explico bien.. algo asi.

Código:

<style>
td {vertical-align:bottom;}
</style>

<table><tr>
<td>
<div class="1"></div>
<div class="2"></div>
</td>
</tr></table>

ahí ven que la fila de una tabla esta con un vertical-align:bottom; que afectara a los divs, es posible hacer que esta propiedad,no afecte a uno de ellos?

Gracias de antemano.

Carlangueitor · #2 (**permalink**) 10/07/2010, 15:52

Imagina que tienes una página con 10 documentos, todos con el mismo estilo, y un día quieres modificar el diseño de la página, si tienes el estilo Inline tendrás que modificar todos esos documentos, pero si lo tienes en un archivo externo solamente ese va a hacer el que tengas que modificar. También es mejor tener tu código HTML lo más limpio posible.

Y lo otro es sencillo, CSS toma los últimos valores agregados, así que si sobreescribes un valor anterior te tomara el último.

Saludos

luxito · #3 (**permalink**) 10/07/2010, 16:07

Gracias por la respuesta Carlangueitor.
Lo primero me quedo claro.
lo segundo si no mucho U.U

me podrías? ayudar con uno ejemplo? como el que puse?
por ejemplo aquí

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titulo</title>
<style type="text/css">
td {
vertical-align:bottom;
height: 300px;}
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <div class"uno">Mi texto uno</div>
    <div class="dos">Mi texto dos</div>
    </td>
  </tr>
</table>
</body>
</html>

como aria para que el vertical-align de la celda, no afecte al <div class="uno"> ¿?

gracias nuevamente.

Carlangueitor · #4 (**permalink**) 10/07/2010, 16:12

Así:

Código CSS:

Ver original.uno {
vertical-align: baseline;
}

Lo que estás haciendo es sobrescribiendo el valor herdado.

Saludos

luxito · #5 (**permalink**) 10/07/2010, 16:20

Ambos divs continúan con el efecto del vertical del td =/

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titulo</title>
<style type="text/css">
td {
vertical-align:top;
height: 300px;}
.uno {
vertical-align:baseline;}
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <div class="uno">Mi texto uno</div>
    <div class="dos">Mi texto dos</div>
    </td>
  </tr>
</table>
</body>
</html>

Lo que trato de hacer es que el DIV dos se mantenga abajo(por el vertical aling de la celda) y que el DIV uno continué en su linea(osea el top)

quizá no sea posible hacer esto cuando se usa tabla?

luxito · #6 (**permalink**) 11/07/2010, 14:30

Pueda que no sea posible que esta propiedad de la celda, solo afecte a un div?
mi intención era esa, pero bueno, usare unicamente divs.

muchas gracias.

XxflezhaxX · #7 (**permalink**) 11/07/2010, 17:49

<div class="1">text</div>
<br />
<div class="2">text2</div>

has un salto entre cada div y asi quedara abajo de el otro y ya usando margin o float o padding en CSS podras alinearlos como gustes.

__________________________________________________ _______________
Ups!! edito...

dices que noquieres que esten en vertical, por lo que mejor nada de saltos, o sea no uses el <br>
para que queden horizontales lo que puedes hacer es:

escribir el codigo html corrido.
ejemplo:

<DIV ID="UNO">nombre:</DIV><DIV ID="DOS"><input type="text" name="nombre" id="Pnombre"></DIV>

y asi te apareceran alineados horizontalmente y podras modificar uno sin afectar al otro

luxito · #8 (**permalink**) 11/07/2010, 19:41

A ver si con esta imagen se entiende mejor.

esa es una tabla, donde el DIV dos, esta en la parte de abajo(por la propiedad vertica-align de la celda) y el DIV uno quisiera que se mantenga arriba en su linea(como si no le afectara la propiedad vertical de la celda)

esta celda sera dinámica, variara su alto, y uso el vertical align, por que quisiera que ese div, siempre se mantenga abajo.

Mi pregunta es que, si es posible hacer desde el css, que el DIV uno no haga caso a la propiedad vertical que tiene la celda.

A mi me parece que en este caso, no es posible hacer eso, por la que creo que mi única solución seria usar unicamente divs, para alinearlos.