Estilos CSS a Nivel de Línea

El caso más claro es cuando dentro de un párrafo (un bloque) queremos que solo unos pocos de sus elementos se muestren con un estilo determinado.

Imaginaos el caso de antes. Si quiero que el párrafo sea como entonces, pero que algunas palabras aparezcan en negrita, un poco más grandes y verdes en lugar de azules, primero tendremos que definir ese estilo en la Hoja de Estilo (estilo.css) o bien en la cabecera con <style>. En cualquier caso, la definición podría ser:

.otroestilo { font-weight:bold ; font-size:22px ; color:green ; }

que habrá que incluir junto con la anterior definición para ver el ejemplo.

En la página, dentro del párrafo de antes, escogemos las palabras que queremos mostrar con el nuevo estilo y las encerramos entre las palabras mágicas <span class="otroestilo"> y </span>. Podemos hacerlo en todas las palabras que queramos. Eso sí, si lo aplicamos a dos palabras seguidas, es mejor encerrarlas ambas juntas que por separado, ya sabéis, para ahorrar, je je. Veamos un ejemplo. Para no alargarlo mucho solo lo aplico a dos o tres palabras, vale? El código HTML a incluir en la página sería:

<p class="azulplata">Esto es el párrafo. Es un bloque y por ello
se indica el tipo de <span class="otroestilo">estilo</span>
junto a <spanclass="otroestilo">su etiqueta.</span> Todo el
párrafo tendrá el color azul y fondo plata pues así lo manda
"class". Así sea.</p>

VER RESULTADO

Fijaos en una cosilla. El párrafo tiene color de texto azul y en cambio las palabras escogidas son verdes. Esto nos demuestra que si en un estilo en línea se definen propiedades que ya hay definidas en el elemento de bloque, predominan siempre las de línea. El resto de las propiedades definidas para el bloque se mantienen (se heredan) también en el elemento de línea. Si no quisiárais por ejemplo que las palabras a las que hemos aplicado el estilo "otroestilo" tengan fondo gris, tendíamos que definir en ese estilo el fondo que queremos.

Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net