css para todo

logamweb · #1 (**permalink**) 25/10/2005, 13:50

hola , kisiera hacer esta pregunta lo mas simple posible y espero las respuestas tengan este mismo formato "simples"

no se mucho sobre css , pero me sirve por ahora para ponercuarsores , colores alas tablas o alos links colores cuando le pongan el puntero o cuando los precionen etc etc , de seguro de eso ustedes saven mucho pero mucho mas asi que les pido ayuda en una duda ..... no se si sea posible derealizar ...

como seria un css a una pagina htm la cual me permita ponerle diferentes colores a las tablas y al fondo de la page , asi cuando kiera podria cambiar los colores sin necesidad de modificar page por page ....

no se si me abre dado a entender pues no se mucho de css , pero espero si me podrian ayudar y tambien un ejemplito me seria de maravilla

Cita:

<p>Pagina de ejemplo css</p>
<table border="1" width="100%">
<tr>
<td width="50%">
<table border="1" width="100%">
<tr>
<td width="100%">color negro</td>
</tr>
<tr>
<td width="100%">color blanco
<p> </td>
</tr>
</table>
</td>
<td width="50%">celda color azul</td>
</tr>
</table>

adios y anticipadamente muchas gracias a todos los mienbros que se dignen a ayudarme .......

iconogt · #2 (**permalink**) 25/10/2005, 14:40

Primero que nada aquí hay unos links para que aprendas un poco más sobre las CSS.

Bien, ahora paso a darte una pequeña explicación, que es lo que tu pides en tu post.

Lo que tu has hecho hasta ahora (imagino) es crear estilos globales, es decir, formateas un selector como 'P','em','b','span', etc, etc... entonces pues en el caso de las tablas , si formateamos los selectores de esta forma:

Código:

table { propiedad:valor }
td {propiedad:valor }

de esta manera todas las celdas que creemos tendran el mismo aspécto no?, bien, pues para dar distinto formato X selector en especial que querramos, se utilizan las clases o ID de la siguiente forma:

Código:

.otrocolordecelda {
background-color: #000000;color: #FFFFFF;
}
 
.otraceldadistinta {
background-color: #dddddd;color: #040404;
}
 
#tabladistinta {
background-color: #f5f5f5;
border: 1px solid navy;
}

Entonces, una vez creados los estilos se aplican tan simple como esto:

Código:

<table id="tabladistinta">
<td class="otrocolordecelda"></td>
<td class="otraceldadistinta"></td>

Espero haberte podido ayudar en algo

si necesitas otra explicación me avisas

Slds,

RoQ · #3 (**permalink**) 25/10/2005, 15:47

http://www.ignside.net/man/css/

iconogt · #4 (**permalink**) 25/10/2005, 15:56

Cita:

Iniciado por RoQ

http://www.ignside.net/man/css/

Oye que buena está esa página

la voy a checar con más tiempo

Slds, y gracias

logamweb · #5 (**permalink**) 25/10/2005, 18:19

que si me podiste ayudar ?

claro que me has ayudado hombre y mucho , pero creo yo no entiendo cuando plaicar id y cuando class bueno al menos algo ocmprendi pero y ya que tas de buenas podrias lanzarte un ejemplo ahunque sea un zip pa verlo por aca del otro lado del cristal

gracias

iconogt · #6 (**permalink**) 25/10/2005, 19:18

Ok, entonces aquí va una pequeña explicación de lo que son las clases y los avanzados ID.

Lo que está en color normal son declaraciones globales y los que estén en color azul son clases, y, los que están en color rojo son ID's.

Para empezar hechemosle un vistazo a estas declaraciones de CSS:

Código:

<style type="text/css">
<!--
body{ 
background-color: #FFFFEE;     /*declaración o estilo #1*/

background-attachment: fixed;
}

h1.titulo {
background-color: #f5f5f5;
border-bottom: 1px solid #000000;  /*tengo muy mal gusto con los colores*/
color: Navy;
}
p { font: 12px/16px Tahoma;color: red }

#caja_texto {
height: 52px;
border: 2px dotted #040404;
}

p.articulo {
font: 10px/14px Verdana;color: #000000;
}-->
</style>

Código:

<html>
<body>
<h1 class="titulo">Encabezado o título de la página</h1><hr />
<p>este texto está formateado directamente desde el selector "<p>"
<hr />
<div id="caja_texto">ahora esta capa obedece las declaraciones del "id"</div>
<hr />
<p class="articulo">ahora este texto obedece a la clase "artículo"</p>
</body>
</html>

Oye es simple

las clases van antecedidas por un punto (.) y los id van antecedidos por un signo (#) y para aplicarlos se usan como te lo muestro en el ejemplo.

Man, más tarde te explico mejor porque estoy en clases. bye, espero te haya servido de algo.

Haz unas pruebas con el código que te puse de ejemplo y verás los resultados.