Foros del Web » Creando para Internet » CSS »

Utilizar un estilo en la primera palabra de una etiqueta

Estas en el tema de Utilizar un estilo en la primera palabra de una etiqueta en el foro de CSS en Foros del Web. Pues eso ya se que existen los elementos [list=1][*].first-letter[*].first-line[/list=1] Pero ¿no hay algun elemento o pseudo-elemento tipo .first-word o algo asi? Ya se que no ...
  #1 (permalink)  
Antiguo 16/03/2003, 07:28
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
Pregunta Utilizar un estilo en la primera palabra de una etiqueta

Pues eso ya se que existen los elementos [list=1][*].first-letter[*].first-line[/list=1]
Pero ¿no hay algun elemento o pseudo-elemento tipo .first-word o algo asi?

Ya se que no existe pero por si hay alguna forma de que (con CSS) pueda dar propiedades a la primera palabra de cada elemento de la misma forma que se puede hacer con la primera letra.
El efecto en cuestion seria este:
  • Palabra1- descripcion
  • Palabra2- Descripcion
  • Palabra3- descripcion
  • Palabrax- descripcion
Mientras que el elemento first letter consiigue solo esto
Código:
<style>
LI:first-letter { color:red; }
</style>
  • Palabra1- descripcion
  • Palabra2- Descripcion
  • Palabra3- descripcion
  • Palabrax- descripcion

Última edición por Durgeoble; 31/03/2003 a las 12:03
  #2 (permalink)  
Antiguo 16/03/2003, 07:54
Avatar de Kunael  
Fecha de Ingreso: noviembre-2002
Ubicación: Barcelona
Mensajes: 164
Antigüedad: 15 años, 1 mes
Puntos: 0
Hola compañero:

He estado repasando CSS1 y CSS2 desde la documentación oficial que da el 3WC y, efectivamente, no existe un elemento tipo "first-word".

Quién sabe lo que deparará CSS3.......

Salu2.
__________________
Comparte tu conocimiento
  #3 (permalink)  
Antiguo 19/03/2003, 11:30
Avatar de Alejandro_Pensa  
Fecha de Ingreso: enero-2002
Ubicación: Córdoba Capital
Mensajes: 76
Antigüedad: 15 años, 10 meses
Puntos: 0
Perdonen la ignorancia de esta humilde participante ...

Pero ...

Me podrian informar como se utiliza el first-letter y el firs-line ?

Se me ocurren una muy buenas cosas para hacer con esto ...
  #4 (permalink)  
Antiguo 19/03/2003, 12:46
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, Alejandro.

Si pones entre <head> y </head> esto:

<style>
p first-letter {color:red; font-size:20px}
</style>

Las primeras letras de todos los párrafos te saldrán de color rojo y de mayor tamaño.

En cambio, si quieres que solo te salga en algún párrafo en particular, esto es lo que tienes que poner

<style>
.prueba:first-letter {color:red; font-size:20px}
</style>

Y el párrafo sería: <p class="prueba">Texto</p>

Lo mismo pasaría con first-line

Saludos,
  #5 (permalink)  
Antiguo 30/03/2003, 06:29
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
Exactamente, igual que con la primera letra pero con la primera palabla.

Exactamente eso es lo que quiero, que el efecto "first-letter" se aplique a la primera palabra, en concreto son definiciones, por lo que la primera palabra es importante que se distinga de la definicion ya que es la palabra a definir, y es mucho mas comodo juntarlo todo en una linea que no en cada definicion.
¿como se hara? ¡No lo se!
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #6 (permalink)  
Antiguo 30/03/2003, 14:05
Avatar de Kunael  
Fecha de Ingreso: noviembre-2002
Ubicación: Barcelona
Mensajes: 164
Antigüedad: 15 años, 1 mes
Puntos: 0
Durgeoble:

Todos los que hemos respondido a tu duda te entendemos perfectamente. Está claro lo que deseas hacer.

Lo que pasa es que NO SE PUEDE.

Puedes hacerlo con la primera letra, pero no con toda la primera palabra de una frase.

Salu2.
__________________
Comparte tu conocimiento
  #7 (permalink)  
Antiguo 31/03/2003, 05:23
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 Durgeoble:

Coincido en que no se puede, pero te voy a mostrar un apaño con javascript (aunque no es el foro adecuado)
Código PHP:
<html>
<
head>
<
script language="Javascript">
<!--
function 
reemplazar(texto)    {
    var 
temp texto.split(" ");
    
temp[0] = temp[0].big().big();
    
salida temp.join(" ");
    
document.getElementById("ejemplo").innerHTML salida
    
return salida;
}
// -->
</script>
</head>
<body >

<form name="reemplazos">
<input type=text name=entrada >
<input type=text name=salida >
<input type=button name=actuar value="acción"
    onclick="salida.value = reemplazar(entrada.value)">
</form>
ejemplo:<div id=ejemplo></div>
</body>
</html> 
Aunque solo sirve cuando la primera palabra tiene detrás un espacio en blanco (la mayoría de los casos)


Saludos
  #8 (permalink)  
Antiguo 31/03/2003, 12:10
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:

Algunas variaciones del ejemplo anterior...

cambiar la siguiente línea:
temp[0] = temp[0].big().big();

... para poner la palabra en rojo (aplicable a cualquier color)
temp[0] = temp[0].fontcolor("red");

... para poner la palabra en un tamaño determinado:
temp[0] = temp[0].fontsize(30);

... para poner la palabra en cursiva-negrita:
temp[0] = temp[0].bold();
temp[0] = temp[0].italics();

... y para otros casos, basta con poner una etiqueta font delante(podría ser otra etiqueta), con las características / estilos deseados y cerrar la etiqueta después...

temp[0] = "<font style='background-color:blue; font-weight:900' >" + temp[0] + "</font>";

Saludos
  #9 (permalink)  
Antiguo 31/03/2003, 13:24
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771


¡Genial caricatos!

No conocía esta forma de dar propiedades a las variables. Me lo anoto.

Saludos,
  #10 (permalink)  
Antiguo 31/03/2003, 16:10
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


Gracias... y saludos
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 11:24.