Foros del Web » Creando para Internet » CSS »

Combinar CSS

Estas en el tema de Combinar CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/03/2004, 16:13
 
Fecha de Ingreso: noviembre-2003
Mensajes: 383
Antigüedad: 14 años
Puntos: 2
Combinar CSS

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.
  #2 (permalink)  
Antiguo 01/03/2004, 16:55
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
  #3 (permalink)  
Antiguo 02/03/2004, 01:45
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
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,

Última edición por JavierB; 02/03/2004 a las 01:47
  #4 (permalink)  
Antiguo 02/03/2004, 02:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
  #5 (permalink)  
Antiguo 02/03/2004, 04:17
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
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,
  #6 (permalink)  
Antiguo 02/03/2004, 05:51
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
  #7 (permalink)  
Antiguo 03/03/2004, 11:18
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
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,
  #8 (permalink)  
Antiguo 04/03/2004, 16:47
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
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...

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:48.