Definir el estilo de una etiqueta
Podemos
definir un estilo dentro de una etiqueta de modo que sólo afecte a ésta
mediante el atributo style.
Este atributo es válido para todas las etiquetas de Html
y su formato es el siguiente:
|
<etiqueta style="propiedad: valor;">Texto</etiqueta>
|
Veamos
un ejemplo:
|
Código
|
Resultado
|
|
<p style="color: red;">Texto Rojo</p>
|
Texto Rojo
|
Como puedes observar la estructura es muy sencilla:
dentro del atributo style
escribimos la propiedad (color), dos puntos,
el valor (red)
y un punto y coma. Si quisiéramos podríamos añadir tantas propiedades como
deseemos, todas ellas separadas por un punto y coma.
Nota: Esta es la forma correcta de
aplicar colores, fuentes y tamaños al texto de nuestras páginas en Html 4 y no utilizar la etiqueta <font> que vimos anteriormente.
A
continuación tienes una pequeña tabla con propiedades de la fuente y la
alineación del párrafo.
|
Propiedad
|
Valor
|
Resultado
|
|
font-style
|
Normal
|
Normal
|
|
Italic
|
Itálica
|
|
font−weight
|
Normal
|
Normal
|
|
Bold
|
Negrita
|
|
Número de 100 a 900
|
Grueso
900
|
|
font−family
|
serif
|
Familia serif
|
|
sans-serif
|
Familia sans-serif
|
|
cursive
|
Familia cursive
|
|
monospace
|
Familia
monospace
|
|
fantasy
|
Familia fantasy
|
|
Nombre de la fuente, p.e. wingdings
|
Wingdings
|
|
font-size
|
Tamaño en píxeles (px), puntos tipográficos (pt),
centímetros (cm), milímetros (mm),
pulgadas (in), etc., p.e. 30px
|
30 píxeles
|
|
Color
|
Nombre del color en
inglés, p.e. red
|
Texto Rojo
|
|
Color en hexadecimal RGB, p.e. #AA00AA
|
Texto violeta
|
|
background−color
|
Nombre del color de
fondo en inglés, p.e. red
|
fondo Rojo
|
|
Color de fondo en hexadecimal RGB, p.e. #AA00AA
|
Fondo violeta
|
|
text−align
|
left,
alinear a la izquierda
|
Texto a la izquierda
|
|
right,
alinear a la derecha
|
Texto a la derecha
|
|
center,
alinear al centro
|
Texto centrado
|
|
justify,
alinear a la derecha
|
Texto justificado a izquierda y derecha
|
|
Nota:
Esta es una propiedad sólo para etiquetas de párrafo como <p>, <h1> o <blockquote>,
y por tanto no funcionará con etiquetas de frases como <b>, <em>,
etc.
|
Estas propiedades puedes aplicarlas a todas las
etiquetas que ya conoces que, de una manera u otra, dan formato a un texto de
tu página. Así podemos cambiar las propiedades de <p>, <body>, <h1>,
<blockquote>,
<b>, etc.
A menudo querrás dar formato a un párrafo o a un
texto, pero no con una etiqueta en particular sino con una más genérica. Para
ello existen dos etiquetas sobre las que podemos aplicar estos estilos. Estas
etiquetas son <div> para dar formato a un párrafo
y <span>
para dar formato a un texto.
Por
ejemplo:
<span style="color: red;">Texto rojo</span>
|
