Combinar CSS

pellagofio · #1 (**permalink**) 01/03/2004, 16:13

Supongamos que tengo definido .estilo1 donde especifico color y tamaño para una fuente y .fuente1 donde espedifico la fuente.

¿Se pueden incluir las dos definiciones CSS en un mismo class y que el objeto asuma los dos?

Gracias.

caricatos · #2 (**permalink**) 01/03/2004, 16:55

Hola pellagofio:

Que yo sepa solo se le puede dar un valor class a las etiquetas, aunque también puedes asignar varios estilos usando el id definiendo el estilo con el mismo nombre que el id, pero precedido de "#", como en las clases precede el "."

Saludos

JavierB · #3 (**permalink**) 02/03/2004, 01:45

Hola, pellagofio y caricatos.

Si se puede poner mas de un estilo, separados por espacios:

Código:

<span class="estilo1 fuente1">

En alguna parte ví como añadirle o quitarle estilos dinamicamente. Si recuerdo donde lo pondré por aquí.

Saludos,

caricatos · #4 (**permalink**) 02/03/2004, 02:53

Hola otra vez:

JavierB: gracias por la aclaración (todos los días se aprende algo nuevo

.

Hice un ejemplo sencillo de lo que dices sobre modificarlos dinámicamente:

<html>
<head>
<style>
.texto {color: blue;}
.cursivo {font-style: oblique;}
.subrayado {text-decoration: underline;}
</style>
<script>
function subrayar() {
document.getElementById("elTexto").className = document.getElementById("elTexto").className + " subrayado";
window.status = document.getElementById("elTexto").className;
}

function no_subrayar() {
document.getElementById("elTexto").className = document.getElementById("elTexto").className.split (" subrayado")[0];
window.status = document.getElementById("elTexto").className;
}
</script>
</head>

<body>
<div align=center>
<h3 id="elTexto" class="texto cursivo">
... Prueba: aplicación de 2 estilos ...
</h3>
<input type=button onclick="if (this.value == 'subrayar') {subrayar(); this.value = 'sacar subrayado'} else {no_subrayar(); this.value = 'subrayar';}"
value="subrayar" />
</div>
</body>
</html>

Saludos

JavierB · #5 (**permalink**) 02/03/2004, 04:17

Hola de nuevo.

Muy bien el ejemplo que has puesto, caricatos

No se me había ocurrido usar split(). Creo recordar que en el sitio que mencioné antes lo hacían bastante más complicado.

Saludos,

caricatos · #6 (**permalink**) 02/03/2004, 05:51

Hola otra vez:

Sin duda split es en mi opinión la forma más apropiada de obtener cadenas separadas por espacios.

El tema de la complicación, supongo que si se quisiera modificar más cosas se complicaría un poco más...

Voy a ver si hago algo similar pero modificando más cosas...

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<style>
.azul {color: blue;}
.cursivo {font-style: oblique;}
.subrayado {text-decoration: underline;}
</style>
<script>
String.prototype.trim = function() {
var texto = this;
while(texto.indexOf(" ") != -1) texto = texto.split(" ").join(" ");
if (texto.charAt(0) == " ") {texto = texto.substring(1, texto.length);}
//window.status = texto;
return texto;
}

function alternar(id, clase) {
var elemento = document.getElementById(id);
clases = elemento.className;
if (clases.indexOf(clase) == -1) {elemento.className = (clases + " " + clase).trim();}
else {
elemento.className = clases.split(clase).join(" ").trim();}
}
</script>
</head>

<body>
<div align=center>
<h3 id="elTexto" class="azul cursivo">
... Prueba: aplicación de 2 estilos ...
</h3>
<form>
<fieldset style="display: inline"><legend>clases cambiantes</legend>
azul: <input type="checkbox" checked onclick="alternar('elTexto', 'azul')" />
cursiva: <input type="checkbox" checked onclick="alternar('elTexto', 'cursivo')" />
subrayado: <input type="checkbox" onclick="alternar('elTexto', 'subrayado')" />
</fieldset>
</form>
</div>
</body>
</html>

Este código alterna los estilos con checkboxes.

Saludos

JavierB · #7 (**permalink**) 03/03/2004, 11:18

Hola, caricatos.

Cuando dije que lo hacían más complicado, no me refería a que tuviera que hacer más cosas, sino a que tú habías conseguido lo mismo de forma más sencilla lo cual, me parece a mí, tiene su mérito. Pero, bueno, ya que te has puesto...

El código que pusiste en tu último mensaje no me funciona. Se queda el navegador bloqueado, creo que es por la función trim() Realmente no es necesario eliminar los espacios de más, he probado a poner bastantes espacion entre dos clases y no da problemas.

De paso, y sobre la trim(), te dejo un código de, si no recuerdo mal, Webstudio que elimina espacios:

Código PHP:

  String.prototype.trim = function () {

    return this.replace(/(^s*)|(s*$)/g,""); 

}

Saludos,

caricatos · #8 (**permalink**) 04/03/2004, 16:47

Hola otra vez:

Nuevamente gracias. No se me había ocurrido el uso de expresiones regulares (no acabo de comprenderlas), pero ya puestos...

El trim que propones (

por Webstudio) es bueno porque quita los espacios por delante y por detrás, pero los dobles espacios por dentro se pueden sacar con:

String.prototype.trim = function () {
return this.replace(/(^\s*)|(\s*$)/g,"").replace(/\s+/g, " ");
}

Tan solo anidando otro replace con una expresión regular bastante parecida.

Saludos

P.D: Sin quererlo se ha convertido en un post javascript...