html - texto - tamaño de letra en css
CSS: la primera letra no funciona (3)
Esto se debe a que :first-letter solo funciona en bloques / elementos de bloque en línea. SPAN es un elemento en línea.
Tomado de http://reference.sitepoint.com/css/pseudoelement-firstletter :
El pseudo-elemento de la primera letra se usa principalmente para crear efectos tipográficos comunes, como las mayúsculas. Este pseudo-elemento representa el primer carácter de la primera línea de texto formateada en un elemento de nivel de bloque, un bloque en línea, un título de tabla, una celda de tabla o un elemento de lista.
Estoy tratando de aplicar estilos CSS a algunos fragmentos HTML que se generaron a partir de un documento de Microsoft Word. El código HTML generado por Word es bastante atroz e incluye muchos estilos en línea. Es algo parecido a esto:
<html>
<head></head>
<body>
<center>
<p class=MsoNormal><b style=''mso-bidi-font-weight:normal''><span
style=''font-size:12.0pt;line-height:115%;font-family:"Times New Roman"''>Title text goes here<o:p></o:p></span></b></p>
<p class=MsoNormal style=''margin-left:18.0pt;line-height:150%''><span
style=''font-size:12.0pt;line-height:150%;font-family:"Times New Roman"''>Content text goes here.<o:p></o:p></span></p>
</body>
</html>
... y muy simplemente, me gustaría diseñar la primera letra de la sección del título. Solo necesita ser más grande y en una fuente diferente. Para hacer esto, intento usar el selector de la :first-letter , con algo así como:
p b span:first-letter {
font-size: 500px !important;
}
Pero no parece estar funcionando. Aquí hay un violín que demuestra esto:
¿Alguna idea de qué es lo incorrecto / cómo obtener la primera letra de la sección del título con el estilo correcto? Puedo hacer pequeños cambios en el marcado (como agregar un div envoltorio alrededor de las cosas), aunque no sin cierta dificultad.
Puede obtener el comportamiento deseado configurando la propiedad de visualización del intervalo en bloque en línea:
.heading span {
display: inline-block;
}
.heading span:first-letter {
color: red;
}
<div class="heading">
<span>An</span>
<span>Interesting</span>
<span>Heading</span>
</div>
:first-letter no funciona en elementos en línea , como un span . :first-letter funciona en elementos de bloque como un párrafo, título de tabla, celda de tabla, elemento de lista o aquellos con su propiedad de display establecida inline-block en inline-block .
Por lo tanto, es mejor aplicar :first-letter a una p lugar de un span .
p:first-letter {font-size: 500px;}
o si desea un selector de :first-letter en un span , escríbalo así:
p b span:first-letter {font-size: 500px !important;}
span {display:block}
MDN proporciona la razón de este comportamiento no obvio:
El pseudo-elemento CSS de la primera letra selecciona la primera letra de la primera línea de un bloque, si no está precedido por ningún otro contenido (como imágenes o tablas en línea) en su línea.
...
Una primera línea solo tiene significado en un cuadro de contenedor de bloques, por lo tanto, el pseudo-elemento
::first-lettersolo tiene un efecto sobre los elementos con un valor dedisplaydeblock,blockinline-block,table-cell,list-itemotable-captionEn todos los demás casos,::first-letterno tiene ningún efecto.
Ejemplos
Referencias
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter