Foros del Web » Creando para Internet » CSS »

soleis anidar estilos???

Estas en el tema de soleis anidar estilos??? en el foro de CSS en Foros del Web. Como solucionais esto con CSS: lkj laksdf lk asdlkfj llk fdsfasdf adsf adsf df dfsadf Es decir una situacion en la que teneis un parrafo ...
  #1 (permalink)  
Antiguo 14/03/2011, 14:44
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 22 años, 9 meses
Puntos: 5
soleis anidar estilos???

Como solucionais esto con CSS:

lkj laksdf lk asdlkfj llk
fdsfasdf adsf adsf df dfsadf

Es decir una situacion en la que teneis un parrafo con una primera linea de texto mas grande ademas en la segunda hay algo de texto en negrita y ademas texto cursiva.

En este caso no es conveniente aplicar un id llamado "p" a todo porque hay formatos distintos. Como lo solucionais?
  #2 (permalink)  
Antiguo 14/03/2011, 14:56
 
Fecha de Ingreso: marzo-2011
Ubicación: Veracruz
Mensajes: 92
Antigüedad: 13 años, 8 meses
Puntos: 3
Respuesta: soleis anidar estilos???

Se me ocurre algo asi:

<p id="parrafo"><div class="grande">lkj laksdf lk asdlkfj llk</div><br>fdsfasdf <div class="bold">adsf adsf</div> df dfsadf</p>

#parrafo.grande{
font-size:15px;
}

#parrafo.bold{
text-decoration:bold;
}

Solo defines las propiedades y metes en divs con ese class los que quieras que tengan tal propiedad.
  #3 (permalink)  
Antiguo 14/03/2011, 15:05
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 22 años, 9 meses
Puntos: 5
Respuesta: soleis anidar estilos???

Entonces utilizo tanto para la negrita como para la cursiva como para el tamaño grande, una clase, en lugar de un id?
  #4 (permalink)  
Antiguo 14/03/2011, 15:12
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.458
Antigüedad: 16 años, 4 meses
Puntos: 53
Respuesta: soleis anidar estilos???

puedes acomodarlo con una serie de estilos al contenido de un parrafo. Por ejm brindarle un ID o una clase a cierto elemento que este contenido dentro de un parrafo. Ejm

Código CSS:
Ver original
  1. <style type="text/css">
  2. #estilo em {
  3. font-weight: bold;
  4. font-style: normal;
  5. }
  6. #estilo strong {
  7. font-weight: normal;
  8. font-style: italic;
  9. background-color:#FFFF66;
  10. padding: 2px;
  11. }
  12. </style>
  13. #estilo span {
  14. font-variant: small-caps;
  15. }
  16. </style>

Código HTML:
Ver original
  1. <p id="estilo">Lorem ipsum dolor sit amet, <span>consectetuer adipiscing elit.</span>
  2. Ut in purus ac <em>libero nonummy vestibulum</em>. Nullam molestie, nunc id
  3. nonummy laoreet, <strong>tortor diam mollis elit</strong>, quis hendrerit
  4. libero lorem vitae nunc.</p>
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #5 (permalink)  
Antiguo 14/03/2011, 15:21
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: soleis anidar estilos???

Si sólo incluye texto dentro de un párrafo, la etiqueta más adecuada es <span> en lugar de <div>.
<span> es un elemento en línea (se comporta como el texto o las imágenes) y <div> es un elemento de bloque que provoca un salto de linea y por tanto ocupa todo el espacio disponible en la linea. Eso hace innecesario un <br/> después de un <div>.
Suponiendo que tu párrafo tiene un tipo de letra distinto al resto del documento podrías usar el siguiete HTML:
<p class="parrafo_x"><span class="grande">lkj laksdf lk asdlkfj llk</span><br/>fdsfasdf <span class="negrita">adsf adsf</span> df <span class="cursiva">dfsadf </span></p>
y un css como este:
.parrafo_x { font:...;}
.grande {font:size:large;}
.negrita { font-weight;}
.cursiva{font-style:italic;}
De este modo puedes combinar, por ejemplo, la clase negrita con cualquier otra con tan solo añadir un espacio en blanco:
<p class=parrafo2 negrita"><span class="cursiva">Texto en cursiva (y negrita)</span>Texto normal (y negrita)</p>
  #6 (permalink)  
Antiguo 14/03/2011, 20:11
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 16 años, 8 meses
Puntos: 53
Respuesta: soleis anidar estilos???

<br/> oh fuck, solo basta poner span con clases diversas, yo no sé pq se complican metiendo etiquetas deprecadas...


Edit: A sugerencia del usuario Xlogus por msn, anoto, que más semántico sería usar <strong> y darle estilos en vez de <span> no así <em> ya que podemos simularlo con el font-style: oblique.

Pd.- Poco más y leo gente usando <p> con float:left...
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.

Última edición por Dalvenjha; 14/03/2011 a las 20:21
  #7 (permalink)  
Antiguo 15/03/2011, 06:14
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 6 meses
Puntos: 839
Respuesta: soleis anidar estilos???

Cita:
Iniciado por Dalvenjha Ver Mensaje
[...] no así <em> ya que podemos simularlo con el font-style: oblique.
Sólo aclarar que <em> también tiene significado semántico, emphasis; denota énfasis pero en menor grado que <strong> (stronger emphasis)
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #8 (permalink)  
Antiguo 15/03/2011, 06:32
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 22 años, 9 meses
Puntos: 5
Respuesta: soleis anidar estilos???

vale. Muchas gracias a todos. Entonces la mejor opcion es usar la etiqueta <span> como una class y listo. ¿no?
  #9 (permalink)  
Antiguo 15/03/2011, 16:30
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: soleis anidar estilos???

El problema tanto de <em> como <strong>, que son etiquetas perfectamente válidas, es que no se pueden editar desde el css.
Mi experiencia es que compensa declarar clases para diferentes estilos de texto. Resulta más rápido y menos engorroso sustituir algunas propiedades en el css que no cambiar las etiquetas HTML de todo un sitio web.
Aunque uno piensa siempre que su página no se va a modificar, lo normal es que se realicen modificaciones en ella.
Cambiar el estilo de una página sustituyendo negritas por un color o tipo de letra diferente es muy habitual. Igual ocurre con las cursivas. En última instancia es una cuestión de estilo más que de semántica el escoger cómo se muestra un texto.
  #10 (permalink)  
Antiguo 15/03/2011, 16:54
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: soleis anidar estilos???

Cita:
Iniciado por sanxuan Ver Mensaje
El problema tanto de <em> como <strong>, que son etiquetas perfectamente válidas, es que no se pueden editar desde el css.
es mas semántico utilizar las etiquetas <em> y <strong> para resaltar los texto dentro de los párrafos, y por supuesto que se pueden editar desde el css como cualquier otro elemento

Código CSS:
Ver original
  1. em{...}
  2. strong{...}

por otro lado veo que todos introducen en un span la primera linea para darle un tamaño mas grande ?¿ se han olvidado de la pseudo clase :first-line

Código CSS:
Ver original
  1. p:first-line{font:700 18px georgia, verdana, arial; }
  #11 (permalink)  
Antiguo 15/03/2011, 17:16
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: soleis anidar estilos???

Lamento haberme expresado mal. No quiero decir que no se pueda modificar el estilo de esas etiquetas, quiero decir que no se pueden modificar las etiquetas mismas. Hoy puedo escoger resaltar un texto determinado haciendo uso de negritas y mañana sustituir ese estilo y resaltar algunos textos modificando el color o el tamaño de fuente o el tipo de letra.
Al margen de que en ese caso la etiqueta HTML ha dejado de tener el significado para el que fue creada una vez decidido el cambio, puede ser engorroso localizar en qué etiquetas y de qué forma se realizan los cambios, mientras que hacerlo en el css resulta inmediato.
  #12 (permalink)  
Antiguo 15/03/2011, 17:46
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 13 años, 8 meses
Puntos: 7
Respuesta: soleis anidar estilos???

Sin dudarlo lo mejor es utilizar las etiquetas <strong> y <em> para cosas muy generales y luego ya, si se quiere realizar algo más específico como cambiar el tipo de fuente, yo uso siempre <span>.
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com

Etiquetas: anidar, estilos
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:43.