Utilizar un estilo en la primera palabra de una etiqueta

Durgeoble · #1 (**permalink**) 16/03/2003, 07:28

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

Kunael · #2 (**permalink**) 16/03/2003, 07:54

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.

Alejandro_Pensa · #3 (**permalink**) 19/03/2003, 11:30

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 ...

JavierB · #4 (**permalink**) 19/03/2003, 12:46

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,

Durgeoble · #5 (**permalink**) 30/03/2003, 06:29

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!

Kunael · #6 (**permalink**) 30/03/2003, 14:05

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.

caricatos · #7 (**permalink**) 31/03/2003, 05:23

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

caricatos · #8 (**permalink**) 31/03/2003, 12:10

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

JavierB · #9 (**permalink**) 31/03/2003, 13:24

¡Genial caricatos!

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

Saludos,

caricatos · #10 (**permalink**) 31/03/2003, 16:10

Gracias... y saludos