Personalización de las cajas redondeadas

[xurxinho]

He cogido el código de una caja de bordes de aquí, y funciona de maravilla. Parte de su css es ( creo que es de Milkoro)

Código:

.caja {margin: 20px auto;
background-color: #43758C;
width: 200px;
position: relative;
}
.punto {font-weight: bold;
color: #43758C;  --------------->sólo quiero modificar esto.
position: absolute;
font-size: 60px;
background-color: transparent;
line-height: 18px;
}
.bottom, .top {height: 10px;
background-color: #43758C;
position: absolute;
left: 10px;
right: 10px;
width: 90%;
}

Si necisitáis más código lo pongo pero creo que no hace falta, sólo puse la parte donde aparece.

Para cargarlo pongo

Código:

<div class="caja caja_top"> 
			  <div class="punto lt">&bull;</div>
			  <div class="top"></div>
			  <div class="punto rt">&bull;</div>
			  <div class="punto lb">&bull;</div>
			  <div class="bottom"></div>
			  <div class="punto rb">&bull;</div>
			  <div class="texto blanco negrita">ACCESO</div>
</div>

Pero si quiero cambiar el color me veo obligado a poner

Código:

<div class="caja caja_menu_horizontal" style="background-color:#CBD6EC"> 
	<div class="punto lt" style="color:#CBD6EC">&bull;</div>
	<div class="top" style="background-color:#CBD6EC"></div>
	<div class="punto rt" style="color:#CBD6EC">&bull;</div>
    <div class="punto lb" style="color:#CBD6EC">&bull;</div>
	<div class="bottom" style="background-color:#CBD6EC"></div>
	<div class="punto rb" style="color:#CBD6EC">&bull;</div>
	<div class="contenido_menu_horizontal"> 
	  <div class="texto"> 
	  		contenido
	  </div>
 	</div>
</div>

Y eso porque no tengo la posibilidad de poner una tercera clase en la llamada, es decir, algo como:
<div class="punto lt colorCBD6EC">&bull;</div>

en vez de

<div class="punto lt" style="color:#CBD6EC">&bull;</div>

Si quiero evitar la llamada style pero no deseo declarar una nueva clase, por ejemplo, la clase "punto", ya que sólo quiero modificar una propiedad, la de color, ¿¿¿cómo puedo hacer????

[Calizman]

Saludos!!

No se si entiendo bien... pero te pregunto: ¿Porque no simplemente cambias color: #43758C; por color:#CBD6EC; ?

El primero lo saque de tu CSS en .punto y el segundo lo saque de el style=""

[xurxinho]

Eso es lo que hago por ahora, es decir yo tengo una clase

.punto{
...;
background-color: #ca0000;

}
.lt{
color: #ca0000;
}

.colorCBD6EC{
#CBD6EC;
}

Yo si quiero sacar la caja por defecto me va a salir con el color #ca0000 en todos los divs que haya, si quiero sacar otro color modifico cada div poniendo

<div class="punto lt" style="color:#CBD6EC">&bull;</div> añadiendo la propiedad style para quitar #ca0000 por defecto y poner #CBD6EC.

Lo que pregunto es si hay alguna manera de evitar la propiedad style es estos casos sin tener que replicar otras clases para poner la caja en otro color algo como:

<div class="punto lt colorCBD6EC">&bull;</div>


Si no es así pregunto, ¿es mejor utilizar la propiedad style o reduplicar con otras clases?. Lo pregunto por eso de ser estricto con el estandar.

[Calizman]

Mira, lamentablemente no entiendo mucho lo que quieres hacer, pero creo que si lo unico que quieres es cambiar un poco de texto, podrias usar el span, que (segun lo que se) es como una estiqueta a la que le puedes atribuir lo que quieras, ejemplo:

<div id="contenedor">
<p class="loquesea">bla bla bla bla bla<span>bla bla ba</span> bla bla bla</p>
</div>

El CSS seria asi:

#contenedor p {
color: red;
}

#contenedor p span {
color green;
}

Es eso lo que quieres? sino, talvez podrias explicarte un poquito mejor...