Estilos a Nivel de Línea
Para un elemento 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 rojas, 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 si, 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="rojoplata">Esto es el párrafo. Es un bloque y por ello
se indica el tipo de <SPAN CLASS="otroestilo">estilo</SPAN>
junto a <SPAN CLASS="otroestilo">su etiqueta.</SPAN> Todo el
párrafo tendrá el color rojo y fondo plata pues así lo manda
"class". Así sea.</p>
VER RESULTADO
Fijaos en una cosilla. El párrafo tiene color de texto rojo 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 quisierais, 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.
|
Introdución