css - tipo - tamaño de letra html
CSS para aumentar el tamaño de la primera palabra (10)
Este me tiene un poco perplejo. Quiero hacer la primera palabra de todos los párrafos en mi div #content en 14pt en lugar del predeterminado para los párrafos (12pt). ¿Hay alguna manera de hacer esto en CSS directo o dejo envolver la primera palabra en un lapso para lograr esto?
Aquí hay un poco de JavaScript y jQuery que armé para envolver la primera palabra de cada párrafo con una etiqueta <span> .
$(function() {
$(''#content p'').each(function() {
var text = this.innerHTML;
var firstSpaceIndex = text.indexOf(" ");
if (firstSpaceIndex > 0) {
var substrBefore = text.substring(0,firstSpaceIndex);
var substrAfter = text.substring(firstSpaceIndex, text.length)
var newText = ''<span class="firstWord">'' + substrBefore + ''</span>'' + substrAfter;
this.innerHTML = newText;
} else {
this.innerHTML = ''<span class="firstWord">'' + text + ''</span>'';
}
});
});
A continuación, puede usar CSS para crear un estilo para .firstWord .
No es perfecto, ya que no tiene en cuenta todos los tipos de espacios en blanco; sin embargo, estoy seguro de que podría lograr lo que busca con algunos ajustes.
Tenga en cuenta que este código solo se ejecutará después de cargar la página, por lo que puede tomar una fracción de segundo para ver el efecto.
Inserte la etiqueta de Span en su texto de párrafo. Por ejemplo: <p><span>Hello</span>My Name Is Dot</p y luego escriba la primera letra.
Lamentablemente, incluso con los gustos de CSS 3 todavía no tenemos los gustos de :first-word :last-word etc. utilizando CSS puro. Afortunadamente hay casi un JavaScript hoy en día para todo lo que me lleva a recomendarlo. Usando nthEverything y jQuery puedes expandirte desde los nthEverything tradicionales.
Actualmente los Pseudos válidos son:
-
:first-child -
:first-of-type -
:only-child -
:last-child -
:last-of-type -
:only-of-type -
:nth-child -
:nth-of-type -
:nth-last-child -
:nth-last-of-type
Y usando nth Everything, podemos expandir esto a:
-
::first-letter -
::first-line -
::first-word -
::last-letter -
::last-line -
::last-word -
::nth-letter -
::nth-line -
::nth-word -
::nth-last-letter -
::nth-last-line -
::nth-last-word
Lo mismo, con jQuery:
$(''#links a'').each(function(){
var me = $(this);
me.html( me.text().replace(/(^/w+)/,''<strong>$1</strong>'') );
});
o
$(''#links a'').each(function(){
var me = $(this)
, t = me.text().split('' '');
me.html( ''<strong>''+t.shift()+''</strong> ''+t.join('' '') );
});
(A través de ''Wizzud'' en la lista de correo jQuery )
Lo que estás buscando es un pseudo-elemento que no existe. Hay: primera letra y: primera línea, pero no: primera palabra.
Por supuesto, puede hacer esto con JavaScript. Aquí hay un código que encontré que hace esto: http://www.dynamicsitesolutions.com/javascript/first-word-selector/
No hay un método simple de CSS para esto. Es posible que tenga que ir con JavaScript + Regex para abrir un lapso.
Idealmente, habría un pseudo-elemento para la primera palabra, pero no tienes suerte ya que eso no parece funcionar. Tenemos: primera letra y: primera línea.
Es posible que pueda usar una combinación de: after o: before para acceder sin usar un tramo.
Solución Pure CSS:
Use la: pseudo-clase de primera línea.
display:block;
Width:40-100px; /* just enough for one word, depends on font size */
Overflow:visible; /* so longer words don''t get clipped.*/
float:left; /* so it will flow with the paragraph. */
position:relative; /* for typeset adjustments. */
No lo probé. Bastante seguro que funcionará bien para ti aunque. He aplicado reglas de bloque a pseudo-clases antes. Es posible que tenga un ancho fijo para cada primera palabra, así que text-align: center; y darle un buen fondo o algo para tratar con el espacio negativo.
Espero que eso te funcione. :)
-Motekye
Tengo que estar en desacuerdo con Dale ... El elemento fuerte es en realidad el elemento incorrecto para usar, lo que implica algo sobre el significado, el uso o el énfasis del contenido, mientras que simplemente tiene la intención de proporcionar estilo al elemento.
Idealmente, usted podría lograr esto con una pseudo-clase y su hoja de estilo, pero como eso no es posible, debe hacer que su marcado sea semánticamente correcto y use <span class="first-word"> .
Tienes que envolver la palabra en un lapso para lograr esto.
Usa el elemento strong , ese es su propósito:
<div id="content">
<p><strong>First Word</strong> rest of paragraph.</p>
</div>
Luego, cree un estilo para él en su hoja de estilos.
#content p strong
{
font-size: 14pt;
}