Web Maestro
 
  Web-maestro
  Home
  Comentarios
  Reportar Error
  HTML Basico
  1.-Una pagina basica
  2.-Dando forma al texto
  3.-Enlaces con otras páginas
  4.-Imagenes
  5.-Caracteres especiales
  HTML Intermedio
  6.- Los estándares del HTML
  7.-Fondos
  8.-Alineación de las imágenes
  9.-Formato de las imágenes
  10.-Tablas
  11.-Formularios
  12.-GIFs animados
  13.-Mapas
  14.-Frames
  15.-Sonidos
  16.-Texto en movimiento
  17.-Publicación y promoción de una página
  18.-Contadores de visitas
  19.-Componer con estilo
  Temas avansados
  20.-Applets de Java
  21.-Trucos diversos
  22.-Canales de chat en páginas Web
  23.-Hojas de estilo en cascada.
  24.-Hojas de estilo en cascada.
  25.-Hojas de estilo en cascada.
  En preparacion
  26.-HTML dinámico
Subir | Imprimir | Agregar a favoritos
24.-Hojas de estilo en cascada.

24. Hojas de estilo en cascada.
Atributos

A continuación se muestra en una tabla el resumen de los atributos que se pueden incuir en las hojas de estilo. Pulsando el enlace con el nombre del atributo nos lleva a la sección donde se comenta con más detalle.

 

Atributo Descripción Valores Ejemplo
font-size Establece el tamaño de texto. puntos (pt)
pulgadas (in)
centímetros (cm)
pixels (px)
{font-size: 12pt}
font-family Establece la fuente. nombre de la fuente
nombre de la familia de la fuente
{font-family: courier}
font-weight Establece el espesor de la fuente. extra-light
light
demi-light
medium
demi-bold
bold
extra-bold
{font-weight: bold}
font-style Convierte el texto a cursiva. normal
italic
{font-style: italic}
line-height Establece la distancia entre líneas. puntos (pt)
pulgadas (in)
centímetros (cm)
pixels (px)
porcentaje (%)
{line-height: 24pt}
color Establece el color del texto. nombre del color
valores RGB
{color: blue}
text-decoration Subraya o remarca el texto. none
underline
italic
line-through
{text-decoration: underline}
margin-left Establece el márgen izquierdo de la página. puntos (pt)
pulgadas (in)
centímetros (cm)
pixels (px)
{margin-left: 1in}
margin-right Establece el márgen derecho de la página. puntos (pt)
pulgadas (in)
centímetros (cm)
pixels (px)
{margin-right: 1in}
margin-top Establece el márgen superior de la página. puntos (pt)
pulgadas (in)
centímetross (cm)
pixels (px)*
{margin-top: -20px}
text-align Establece la justificación del texto. left
center
right
{text-align: right}
text-indent Establece la indentación del texto. puntos (pt)
pulgadas (in)
centímetros (cm)
pixels (px)
{text-indent: 0.5in}
background Establece la imagen o el color del fondo. URL,
nombre del color
valor RGB
{background: #33CC00}


 

 

Explicación de los atributos


font-size

El atributo font-size establece el tamaño del texto en puntos (pt), pulgadas (in), centímetros (cm), o pixels (px). Ejemplos:

 

{font-size: 12pt}
{font-size: 1in}
{font-size: 5cm}
{font-size: 24px}

font-family

el atributo font-family establece la fuente del texto. Se puede especificar una única fuente, como por ejemplo:

{font-family: Arial}

u otras fuentes alternativas, separadas por una coma, como por ejemplo:

{font-family: Arial, Helvetica}

En el ejemplo anterior, nos aseguramos que los sistemas que no soporten la fuente Arial, uticen la fuente Helvetica. Es muy aconsejable especificar, como útimo recurso, un nombre genérico de familia de fuentes. Ejemplo:

{font-family: Arial, Helvetica, sans-serif}

Estos nombres genéricos de familia de fuentes (serif, sans-serif, cursive, fantasy, o monospace) tienen la ventaja de que son representados como las fuentes que tenga instaladas el usuario.

Si se hace referencia a una fuente cuyo nombre consiste en varias palabras (separadas por espacios en blanco), hay que englobarla entre comillas. Ejemplo:

{font-family: "Courier New"}

 


font-weight

El atributo font-weight establece el espesor de la fuente:

{font-weight: medium}
{font-weight: bold}

Los valores aceptados (extra-light, light, demi-light, medium, demi-bold, bold, y extra-bold) dependen en las fuentes que tenga instaladas el usuario. (Por ejemplo, el sistema del usuario puede que sólo permita medium y bold para una determinada fuente).

 


font-style

El atributo font-style establece la fuente como cursiva:

{font-style: italic}

En el borrador de la W3C se contemplan además otros posibles estilos (minúsculas, oblicuas, etc.)

 


line-height

Este atributo establece la separación entre líneas, que se puede expresar en puntos (pt), pulgadas (in), cent�metros (cm), pixels (px) o porcentaje (%). Ejemplo:

{line-height: 20pt}
También se puede expresar como un porcentaje del valor por defecto:
{line-height: 150%}
En el Explorer 3.0, el espaciado se añade antes de las líneas, no después de ellas. Además este atributo se comporta de forma impredecible con texto que usa diferentes tamaños de texto en la misma línea.

 


color

Este atributo establece el color del texto de acuerdo con su valor hexadecimal (véase el Cap. 7), o usando los nombres de colores:

{color: #33CC00}
{color: red}
Los nombres de los colores son los siguientes:

 

black silver gray white
maroon red purple fuchsia
green lime olive yellow
navy blue teal aqua

 


text-decoration

Este atributo permite remarcar el texto. Los valores soportados son underline (subrayado), line-through (tachado), none (ninguno) e italic (cursiva). Ejemplos:

{text-decoration: underline}
{text-decoration: line-through}

 


margin-left, margin-right, y margin-top

Estos atributos establecen los márgenes (izquierdo, derecho y superior respectivamente) en el ámbito de una etiqueta. Se pueden especificar los márgenes en puntos, pulgadas (inches), centímetros o pixels. Por ejemplo:

BODY {margin-left: 0.5in;
           margin-right: 0.5in;
           margin-top: 1in}
Se pueden usar valores negativos. Entonces, en vez de contraerse el magen, se extenderá en la dirección opuesta.

 


text-align

Este atributo permite justificar los elementos HTML a la izquierda, al centro o a la derecha. Ejemplos:

{text-align: left}
{text-align: center}
{text-align: right}

 


text-indent

Además de establecer los márgenes, se puede provocar una indentación del texto (es decir, que la primera palabra del párrafo se desplace una cantidad deseada). Se puede expresar en puntos, pulgadas, centímetros o pixels. Por ejemplo:

 

P {text-indent: 0.5cm}
hace que los párrafos que se crean con la etiqueta <P>, empiecen con su primera línea indentada 0.5 centímetros.

Se pueden usar valores negativos, que sacan el texto hacia los márgenes.

 


background

Se utiliza este atributo para destacar secciones de una página, estableciendo un color de fondo o una imagen de fondo.

Para establecer un color de fondo, se especifica su valor hexadecimal (véase el Cap. 7), o un nombre de color (ver el atributo color visto anteriormente). Ejemplos:

{background: red}
{background: #6633FF}
También se puede colocar una imagen de fondo en el ámbito de la etiqueta. Es decir, se puede poner, por ejemplo, una imagen de fondo en un párrafo determinado.

Para colocar una imagen, se especifica el URL entre paréntesis (no entre comillas, como es lo habitual). Por ejemplo:

{background: URL(http://www.wmaestro.com/webmaestro/docs/nubes.jpg)}

En este caso se ha puesto el URL absoluto, es decir, la referencia completa en el servidor. Pero es más conveniente hacerlo de forma relativa, es decir con respecto al documento HTML. Si el fichero de imagen y el documento HTML están en el mismo directorio, no hay que poner ningún URL, sino el nombre del fichero de imagen directamente. En el ejemplo anterior sería:

{background: URL(nubes.jpg)}

Vamos a ver una aplicación práctica: poner esta imagen de fondo a un párrafo, utilizando el método de incluir el estilo en la etiqueta <P>:

<P STYLE="background: URL(nubes.jpg)"> Este párrafo tiene un fondo con imágenes, al igual que con el HTML convencional se consigue para toda una página, pero en este caso está limitado al ámbito de esta etiqueta.

<P> En cambio, este otro párrafo no tiene imagen de fondo, porque no se le ha incluido este atributo.

Este es el resultado:

 

Este p�rrafo tiene un fondo con im�genes, al igual que con el HTML convencional se consigue para toda una p�gina, pero en este caso est� limitado al �mbito de esta etiqueta.

En cambio, este otro p�rrafo no tiene imagen de fondo, porque no se le ha incluido este atributo.

Servicio  
  Esta pagina web les enseñara a aprender codigos HTML, esta pagina es para los que estan aprendiendo a usar los codigos.  
Han entrado 20504 visitantes en Web-maestro
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis