Lenguaje HTML/Estilos CSS
Las Hojas de Estilo en Cascada (Cascade Style Sheet) son una serie de instrucciones que nos permiten dar formato aprovechando las limitaciones que nos presenta el HTML y sus etiquetas de formato al momento de dar formato a una página.
Posibles métodos de utilización
editarLos estilos CSS pueden utilizarse de tres maneras:
Insertado en una etiqueta
editarDe esta manera quedaría <etiqueta style="">;
En una etiqueta <style>
editarEn la sección <head> de la página se puede incluir una etiqueta <style> que integre todas las reglas de estilo de la página.
La sección quedaría:
<head>
- <style>
- Reglas de estilo
- </style>
</head>
En un fichero externo
editarMediante la etiqueta <link> se puede incluir un fichero externo que incluya todas las reglas. Esta etiqueta permite incluir los siguientes atributos:
- HREF (obligatorio): indica la URL del fichero.
- REL: identifica el tipo de relación del enlace con la página.
- TYPE: especifica el tipo MIME.
- TITLE: especifica el título de la hoja de estilo. En caso de no existir, el enlace pasa a ser persistente
- MEDIA: indica el soporte al que va dirigida la hoja de estilo. Se pueden indicar varios medios separándolos por comas.
Algunos ejemplos:
- <LINK REL="StyleSheet" HREF="style.css" TYPE="text/css" MEDIA="screen" />
- <LINK REL="StyleSheet" HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print" />
- <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print" />
- <LINK REL="StyleSheet" HREF="aural.css" TYPE="text/css" MEDIA="aural" />
Unidades de la longitud de los CSS
editarLas medidas colocadas en nuestras hojas de estilos indican una unidad de la longitud. Se conocen dos tipos de unidades: relativa y absoluta.
Una unidad relativa especifica una longitud en lo referente a otra característica de la longitud. Las unidades relativas escalan mejor a partir de un dispositivo de salida a otro, por ejemplo de un monitor a una impresora.
Una unidad absoluta especifica pulgadas o centímetros. Las unidades absolutas de la longitud son útiles cuando las características físicas del dispositivo de salida se saben.
| Unidades relativas de la longitud | |
|---|---|
| em | La altura de la fuente del elemento. |
| ex | La altura de la letra “x”. |
| px | Pixeles. |
| % | Porcentaje. |
| Unidades absolutas de la longitud | |
| in | Pulgadas (1 pulgada = 2,54 centímetros). |
| cm | Centímetros. |
| mm | Milímettros. |
| pt | Puntos (1 punto = 1/72 pulgada). |
| pc | Picas (1 pica = 12 puntos). |
Tabla de colores
editarLos colores se pueden especificar en páginas HTML de dos maneras una especificando el nombre del color y otra usando una numeración para denotar un valor de color del sistema RGB. Un valor del color del RGB consiste en tres números hexadecimales de dos dígitos que especifican la intensidad del color correspondiente.
Por ejemplo, el valor #FF0000 del color se hace rojo porque el número rojo se fija a su valor más alto, FF (o 255 en forma decimal).
| aliceblue (#F0F8FF) |
antiquewhite (#FAEBD7) |
aqua (#00FFFF) |
aquamarine (#7FFFD4) |
| azul (#F0FFFF) |
amarillento (#F5F5DC) |
bisque (#FFE4C4) |
negro (#000000) |
| blanchedalmond (#FFEBCD) |
azul (#0000FF) |
blueviolet (#8A2BE2) |
marrón (#A52A2A) |
| burlywood (#DEB887) |
cadetblue (#5F9EA0) |
chartreuse (#7FFF00) |
chocolate (#D2691E) |
| coral (#FF7F50) |
cornflowerblue (#6495ED) |
cornsilk (#FFF8DC) |
carmesí (#DC143C) |
| ciánico (#00FFFF) |
azul marino (#00008B) |
darkcyan (#008B8B) |
darkgoldenrod (#B8860B) |
| gris oscuro (#A9A9A9) |
verde oscuro (#006400) |
darkkhaki (#BDB76B) |
darkmagenta (#8B008B) |
| darkolivegreen (#556B2F) |
anaranjado oscuro (#FF8C00) |
darkorchid (#9932CC) |
rojo oscuro (#8B0000) |
| darksalmon (#E9967A) |
darkseagreen (#8FBC8B) |
darkslateblue (#483D8B) |
darkslategray (#2F4F4F) |
| darkturquoise (#00CED1) |
darkviolet (#9400D3) |
de color rosa oscuro (#FF1493) |
deepskyblue (#00BFFF) |
| dimgray (#696969) |
dodgerblue (#1E90FF) |
firebrick (#B22222) |
floralwhite (#FFFAF0) |
| forestgreen (#228B22) |
fuchsia (#FF00FF) |
gainsboro (#DCDCDC) |
ghostwhite (#F8F8FF) |
| oro (#FFD700) |
vara de oro (#DAA520) |
gris (#808080) |
verde (#008000) |
| greenyellow (#ADFF2F) |
ligamaza (#F0FFF0) |
hotpink (#FF69B4) |
indianred (#CD5C5C) |
| añil (#4B0082) |
marfil (#FFFFF0) |
de color caqui (#F0E68C) |
lavanda (#E6E6FA) |
| lavenderblush (#FFF0F5) |
lawngreen (#7CFC00) |
lemonchiffon (#FFFACD) |
azul claro (#ADD8E6) |
| lightcoral (#F08080) |
lightcyan (#E0FFFF) |
lightgoldenrodyellow (#FAFAD2) |
verde claro (#90EE90) |
| gris claro (#D3D3D3) |
rosa claro (#FFB6C1) |
lightsalmon (#FFA07A) |
lightseagreen (#20B2AA) |
| lightskyblue (#87CEFA) |
lightslategray (#778899) |
lightsteelblue (#B0C4DE) |
amarillo claro (#FFFFE0) |
| cal (#00FF00) |
limegreen (#32CD32) |
lino (#FAF0E6) |
magenta (#FF00FF) |
| marrón (#800000) |
mediumaquamarine (#66CDAA) |
mediumblue (#0000CD) |
mediumorchid (#BA55D3) |
| mediumpurple (#9370DB) |
mediumseagreen (#3CB371) |
mediumslateblue (#7B68EE) |
mediumspringgreen (#00FA9A) |
| mediumturquoise (#48D1CC) |
mediumvioletred (#C71585) |
midnightblue (#191970) |
mintcream (#F5FFFA) |
| mistyrose (#FFE4E1) |
moccasin (#FFE4B5) |
navajowhite (#FFDEAD) |
marina de guerra (#000080) |
| oldlace (#FDF5E6) |
aceituna (#808000) |
olivedrab (#6B8E23) |
anaranjado (#FFA500) |
| naranja-rojo (#FF4500) |
orquídea (#DA70D6) |
palegoldenrod (#EEE8AA) |
palegreen (#98FB98) |
| paleturquoise (#AFEEEE) |
palevioletred (#DB7093) |
papayawhip (#FFEFD5) |
peachpuff (#FFDAB9) |
| Perú (#CD853F) |
color de rosa (#FFC0CB) |
ciruelo (#DDA0DD) |
powderblue (#B0E0E6) |
| púrpura (#800080) |
rojo (#FF0000) |
rosybrown (#BC8F8F) |
royalblue (#4169E1) |
| saddlebrown (#8B4513) |
salmones (#FA8072) |
sandybrown (#F4A460) |
verdemar (#2E8B57) |
| seashell (#FFF5EE) |
sienna (#A0522D) |
plata (#C0C0C0) |
skyblue (#87CEEB) |
| slateblue (#6A5ACD) |
slategray (#708090) |
nieve (#FFFAFA) |
springgreen (#00FF7F) |
| steelblue (#4682B4) |
tan (#D2B48C) |
teal (#008080) |
thistle (#D8BFD8) |
| tomate (#FF6347) |
turquesa (#40E0D0) |
violeta (#EE82EE) |
trigo (#F5DEB3) |
| blanco (#FFFFFF) |
whitesmoke (#F5F5F5) |
amarillo (#FFFF00) |
de color verde amarillo (#9ACD32) |
Atributos
editarSon la cualidades que podemos afectar en un objeto; en las cascadas de estilos tenemos la posibilidad de dar atributos tan sencillos como la especificación de una familia de fuente o el mismo tamaño en si para un objeto hasta atributos y filtros más complejos como transformaciones de texto, decoraciones, sombras, brillo, desenfoque entre otros.