ATRIBUTOS CSS
ATRIBUTO "FONT-FAMILY"
Es uno de los principales atributos de texto para una página. Por ejemplo, queremos aplicar una fuente tipo "Verdana" a todo el documento. Pondríamos:
<STYLE>
BODY {font-family: verdana}
</STYLE>
BODY {font-family: verdana}
</STYLE>
Con este estilo estaríamos definiendo que todo el texto contenido en el Body, tiene una fuente "verdana".
Es posible establecer distintos órdenes de preferencia de modo que ante la falta de una fuente en el navegador de un usuario se aplique la siguiente fuente, las familias de fuentes deben estar separadas por comas.
<STYLE>
BODY {font-family: verdana, arial, impact, times}
</STYLE>
BODY {font-family: verdana, arial, impact, times}
</STYLE>
Una última alternativa es la de servirse de un nombre genérico de fuente. Con este término denominamos grupos de fuentes que, aún sin ser idénticas, poseen características que las unen. De esta manera, el navegador buscará la fuente disponible en el ordenador del usuario, según las indicaciones del nombre genérico:
<STYLE>
<BODY {font-family: serif}
</STYLE>
<BODY {font-family: serif}
</STYLE>
ATRIBUTOS DE MÁRGENES Y ALINEACIÓN
En estos ejemplos que proponen en estas páginas sobre atributos de textos, los han aplicados directamente sobre el body, estos atributos también pueden ser aplicados a través de una hoja de estilos incorporada.
Atributos de márgenes y alineación
Se trata de cuatro atributos que intervienen en la distancia entre la caja y los componentes internos que tiene esa caja, respecto a los cuatro márgenes: margin-left, margin-right, margin-top, margin-bottom.
<STYLE> BODY { margin-top: 15px; margin-right; 15px; margin-bottom: 15px; margin-left: 15px } </STYLE>
Estos valores se pueden definir con el atributo margin. Cuando se aplica este valor, el navegador asume como orden el primer márgen superior (margin-top), el derecho (margin-right), el inferior (margin-bottom) y el izquierdo (margin-left).
<STYLE> BODY {margin: 10px 10px 10px 10px} </STYLE>
Atributos padding-top, padding-bottom, padding-right, padding-left
Estos atributos indican la distancia entre los lados de la caja de texto y los elementos que están en su interior.
Es posible usar las medidas estándar (pulgadas, centímetros, puntos, píxel etc.) o valores porcentuales:
<STYLE> BODY {padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2cm} </STYLE>
ATRIBUTOS PARA LOS BORDES
Se trata de cuatro atributos: border-top, border-bottom, border-right, border-left; estos atributos definen el estilo y el color de cada elemento
<STYLE> BODY { border-top: green; border-left: none; border-right: blue; border-bottom: red } </STYLE>
Estos atributos generan un efecto similar a los bordes de las tablas HTML. Es posible establecer medidas en porcentajes o en píxel, además de thin, médium y thick:
<STYLE> BODY { border-top-width: 5px; border-left-width: 4pt; border-right-width: thick; border-bottom-width: 2px} </STYLE>
ATRIBUTO BORDER-COLOR
Se pueden definir los colores de los cuatro bordes a la vez, como por ejemplo:
<STYLE> BODY { border-color: red } </STYLE>
ATRIBUTO BORDER-STYLE
Este atributo define el estilo de los bordes a la vez, sin necesidad de establecer colores diversos para cada uno de los bordes.
<STYLE> BODY { border-style: groove } </STYLE>
ATRIBUTO FONT-SIZE
Este atributo establece el tamaño del texto.
Mientras el HTML estándar previo existen 7 niveles predefinidos para el tamaño del texto (de Font size=1 a font size=7), las hojas de estilo permiten un control mucho más preciso y elástico, sin limitaciones.
Puntos: Su abreviatura es pt. Cada punto representa 1/72 de pulgada más o menos. Los puntos se refieren exclusivamente al espacio vertical ocupado en pantalla, mientras que la anchura aumenta en proporción al aumento de la altura.
<STYLE> BODY {font-size: 15pt} </STYLE>
Píxel: Su abreviatura es px., se trata de puntos como los de pantalla de ordenador, que varían según la resolución del monitor configurada por el usuario.
<STYLE> BODY {font-size: 15px} </STYLE>
Pulgadas: Su abreviatura es in., clásica unidad anglosajona de medida, en web casi no se suele usar.
<STYLE> BODY {font-size: 15in} </STYLE>
Centímetros: Su abreviatura es cm., unidad de medida común a muchos países occidentales pero poco en la web.
<STYLE> BODY {font-size: 10cm } </STYLE>
Porcentaje: Su abreviatura es %., unidad de medida variable sin valores predeterminados. El valor porcentual se refiere al tamaño por defecto aplicado en el navegador.
Así, en un navegador que visualiza por defecto fuentes de 14 píxel, un valor del 200% corresponde a 28 píxel. Dicha medida puede variar de usuario a usuario, dependiendo de la resolución de navegador.
<STYLE> BODY {font-size: 200%} </STYLE>
La medición porcentual forma parte de un sistema de proporciones relativas, es decir depende de la medida actual del navegador.
Existen otros valores que pueden sustituir al de porcentaje: smaller, larger.
ATRIBUTOS FONT-STYLE
Atributo Font-style
Este atributo indica el estilo para la fuente. Es posible aplicar distintos valores:
Normal: no visualiza ningún estilo particular y toma el establecido por defecto del usuario y por el navegador.
<STYLE> BODY {font-style: normal } </STYLE>
Itálica: El típico texto en cursiva (inclinado).
<STYLE> BODY {font-style: itálic } </STYLE>
Atributo font-variant
Asigna un estilo todo en mayúsculas. Si no está disponible en el ordenador del usuario, el estilo usará las mayúsculas adaptándose a las medidas. Los valores que hay que asignar son "normal" y "small-caps"
<STYLE> BODY {font-variant: small-caps} </STYLE>
Atributo font-weight
El atributo font-weight establece el grosor de las fuentes como "BOLD". Es posible asignar a este atributo valores diferentes: bold, extra-light, demi-light, médium extra-bold, etc
<STYLE> BODY {font-weight: bold} </STYLE>
Atributo text-decoratión
Permite decorar el texto con subrayados y otros efectos. Puede tener varios valores: none, underline, itálic y line-height, etc
<STYLE> BODY {text-decoratión: none} </STYLE>
COLORES EN CSS
BACKGROUND Y COLORES DE FONDO
En código HTML, el fondo se lo aplicamos dentro del <BODY> mediante los atributos bgcolor y background para asignar al fondo una imagen .gif o .jpg.
Las especificaciones de las CSS introducen importantes novedades respecto a los colores a aplicar en las páginas web.
ATRIBUTO COLOR
El atributo color define el color del texto del documento (no se debe confundir con el color de background), tanto mediante los nombres de los colores en inglés: black, silver, gray, white, red, blue, etc) y con los códigos hexadecimales.
ATRIBUTO BACKGROUND-COLOR, BACKGROUND-IMAGEN
Este atributo de background-color determina el color de fondo, el atributo background-image, tiene una función similar al background="imagen.gif" de HTML clasico, invocando una imágen en formato .GIF o .JPG cargada en la css.
El atributo background-repeat, permite repetir la imagen de fondo tal y como sucede con la marca BODY de HTML.
Puede asumir distintos valores:
repeat, la imágen se replica en vertical y horizontal.
repeat-x, replica la imágen sólo en horizontal.
repeat-y, replica la imágen sólo en vertical
No hay comentarios:
Publicar un comentario