Ayuda con efecto de texto en CSS
5 seguidores
Aprendiendo a programar en CSS me voy topando con más interrogantes cada vez que intento hacer algo nuevo, pero vaya que es interesante y divertido! :D
Ahora necesito hacer algo en particular, quiero que las lineas del bloque de texto de mi sitio, tengan una fondo. Así como en el ejemplo... pero que además, sobresalga 2 o 3 px desde el borde de cada linea, para que no quede tan ajustado a la altura de la tipografía.
Algo asi como en el ejemplo siguiente.

Cómo hago esto con CSS(2)?
pantalaimon
ha quedado perfecto! Probé con todas pero la que más se ajusta fue la opción que me diste Trazo.
Gracias a todos!
trazo
Colocar un span dentro de un párrafo que albergue todo el texto contenido en el mismo no me parece muy lógico ya que estoy utilizando dos etiquetas pudiéndo utilizar únicamente una.
Creo que lo más correcto es primero plantearse si esa etiqueta será un párrafo teniendo en cuenta la semántica de ese texto y su función dentro de los contenidos de la página. Lo planteo porque el ejemplo que pones (No todo lo que brilla es oro) no me parece a priori semánticamente un párrafo. Habría que ver el contexto pero yo me inclinaría más, en ese caso, por un encabezado o incluso podría ser una cita.
Como hablas de "las lineas del bloque de texto de mi sitio" interpreto que será un párrafo.
Los párrafos son elementos en bloque así que, para conseguir el efecto que buscas, debemos hacer que el navegador los cargue como elementos en linea modificando la propiedad display. Los elementos en línea, por defecto, se autoajustan tanto en anchura como en altura a su contenido así que, para agrandar el área que ocupa le añadimos un padding.
En el siguiente ejemplo asigno una clase a los párrafos que quiero que tengan este efecto por si hubiera en la página otros p que quiero que no tengan ese formato aplicado. SI fuesen todos los de la página web, simplemente citaría a p en el selector css (todos los p de la página).
HTML:
<p class="resaltado">Lorem ipsum dolor sit amet, consectetur adisciplit elit...</p>
CSS:
p.resaltado {
color: white ;
background-color: black ;
display: inline ;
padding: 4px
}
vektorama
Sip, lo que tienes que hacer es tratar el <p></p> como un elemento de bloque y
ya le puedes meter todas las propiedades que quieras... ^^
ehelguero
La solución que te da Ferdev es la mas correcta y la que deberias usar, pero si quieres utilizar el span podrias hacerlo desde CSS poniendo:
.p span { background-color:#000000; }
Esto te afectaria a todos los span que esten dentro de un div con la clase p
ferdev
Buenas!
Con este html:
<p class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
Y con este css:
p.lorem {
background-color: #000000;
padding: 5px;
}
Deberías conseguir lo que quieres hacer :) Saludos!
pantalaimon
Encontré esto:
<div class="p" id="que_cont">
<span style="background-color:#000000">HOLA, lo que hacemos lo hacemos por diversión </span>
</div>
Donde class ="p" - contiene tipografía, tamaño color, etc..
Pero usé el SPAN para darle un background solo al texto... queda bién, pero hay que hacerlo por cada texto que ponga? ... no hay manera de hacerlo en el archivo CSS para que TODOS los textos tengan este estilo?