Diferencia entre revisiones de «Lenguaje HTML/Estilos CSS»
Contenido eliminado Contenido añadido
m Bot controlado: actualizada sintaxis de tabla; cambios triviales |
|||
Línea 6:
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 ==
Los estilos CSS pueden utilizarse de tres maneras:
=== Insertado en una etiqueta ===
De esta manera quedaría <etiqueta style="">;
=== En una etiqueta <style> ===
En 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.
Línea 21:
:</style>
</head>
=== En un fichero externo ===
Mediante 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 [[w:URL|URL]] del fichero.
* REL: identifica el tipo de relación del enlace con la página.
* TYPE: especifica el tipo [[w:MIME|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 ==
Las medidas colocadas en nuestras hojas de estilos indican una unidad de la longitud. Se conocen dos tipos de unidades: relativa y absoluta.
Línea 69:
|}
== Tabla de colores ==
Línea 79:
{| bgColor="GRAY" border="1" cellPadding="0" cellSpacing="2"
|-
| align="center" style="BACKGROUND: aliceblue" | aliceblue<br />(#F0F8FF)
| align="center" style="BACKGROUND: antiquewhite" | antiquewhite<br />(#FAEBD7)
| align="center" style="BACKGROUND: aqua" | aqua<br />(#00FFFF)
| align="center" style="BACKGROUND: aquamarine" | aquamarine<br />(#7FFFD4)
|-
| align="center" style="BACKGROUND: azure" | azul<br />(#F0FFFF)
| align="center" style="BACKGROUND: beige" | amarillento<br />(#F5F5DC)
| align="center" style="BACKGROUND: bisque" | bisque<br />(#FFE4C4)
| align="center" style="BACKGROUND: black" | <font color="#ffffff">negro<br />(#000000)</font>
|-
| align="center" style="BACKGROUND: blanchedalmond" | blanchedalmond<br />(#FFEBCD)
| align="center" style="BACKGROUND: #0000ff" | azul<br />(#0000FF)
| align="center" style="BACKGROUND: #8a2be2" | blueviolet<br />(#8A2BE2)
| align="center" style="BACKGROUND: brown" | marrón<br />(#A52A2A)
|-
| align="center" style="BACKGROUND: burlywood" | burlywood<br />(#DEB887)
| align="center" style="BACKGROUND: cadetblue" | cadetblue<br />(#5F9EA0)
| align="center" style="BACKGROUND: chartreuse" | chartreuse<br />(#7FFF00)
| align="center" style="BACKGROUND: chocolate" | chocolate<br />(#D2691E)
|-
| align="center" style="BACKGROUND: coral" | coral<br />(#FF7F50)
| align="center" style="BACKGROUND: #6495ed" | cornflowerblue<br />(#6495ED)
| align="center" style="BACKGROUND: cornsilk" | cornsilk<br />(#FFF8DC)
| align="center" style="BACKGROUND: crimson" | carmesí<br />(#DC143C)
|-
| align="center" style="BACKGROUND: cyan" | ciánico<br />(#00FFFF)
| align="center" style="BACKGROUND: darkblue" | azul marino<br />(#00008B)
| align="center" style="BACKGROUND: darkcyan" | darkcyan<br />(#008B8B)
| align="center" style="BACKGROUND: darkgoldenrod" | darkgoldenrod<br />(#B8860B)
|-
| align="center" style="BACKGROUND: darkgray" | gris oscuro<br />(#A9A9A9)
| align="center" style="BACKGROUND: darkgreen" | verde oscuro<br />(#006400)
| align="center" style="BACKGROUND: darkkhaki" | darkkhaki<br />(#BDB76B)
| align="center" style="BACKGROUND: darkmagenta" | darkmagenta<br />(#8B008B)
|-
| align="center" style="BACKGROUND: darkolivegreen" | darkolivegreen<br />(#556B2F)
| align="center" style="BACKGROUND: darkorange" | anaranjado oscuro<br />(#FF8C00)
| align="center" style="BACKGROUND: darkorchid" | darkorchid<br />(#9932CC)
| align="center" style="BACKGROUND: darkred" | rojo oscuro<br />(#8B0000)
|-
| align="center" style="BACKGROUND: darksalmon" | darksalmon<br />(#E9967A)
| align="center" style="BACKGROUND: darkseagreen" | darkseagreen<br />(#8FBC8B)
| align="center" style="BACKGROUND: darkslateblue" | darkslateblue<br />(#483D8B)
| align="center" style="BACKGROUND: darkslategray" | darkslategray<br />(#2F4F4F)
|-
| align="center" style="BACKGROUND: darkturquoise" | darkturquoise<br />(#00CED1)
| align="center" style="BACKGROUND: darkviolet" | darkviolet<br />(#9400D3)
| align="center" style="BACKGROUND: deeppink" | de color rosa oscuro<br />(#FF1493)
| align="center" style="BACKGROUND: deepskyblue" | deepskyblue<br />(#00BFFF)
|-
| align="center" style="BACKGROUND: dimgray" | dimgray<br />(#696969)
| align="center" style="BACKGROUND: dodgerblue" | dodgerblue<br />(#1E90FF)
| align="center" style="BACKGROUND: firebrick" | firebrick<br />(#B22222)
| align="center" style="BACKGROUND: floralwhite" | floralwhite<br />(#FFFAF0)
|-
| align="center" style="BACKGROUND: forestgreen" | forestgreen<br />(#228B22)
| align="center" style="BACKGROUND: #ff00ff" | fuchsia<br />(#FF00FF)
| align="center" style="BACKGROUND: gainsboro" | gainsboro<br />(#DCDCDC)
| align="center" style="BACKGROUND: ghostwhite" | ghostwhite<br />(#F8F8FF)
|-
| align="center" style="BACKGROUND: gold" | oro<br />(#FFD700)
| align="center" style="BACKGROUND: goldenrod" | vara de oro<br />(#DAA520)
| align="center" style="BACKGROUND: gray" | gris<br />(#808080)
| align="center" style="BACKGROUND: green" | verde<br />(#008000)
|-
| align="center" style="BACKGROUND: greenyellow" | greenyellow<br />(#ADFF2F)
| align="center" style="BACKGROUND: honeydew" | ligamaza<br />(#F0FFF0)
| align="center" style="BACKGROUND: hotpink" | hotpink<br />(#FF69B4)
| align="center" style="BACKGROUND: indianred" | indianred<br />(#CD5C5C)
|-
| align="center" style="BACKGROUND: indigo" | añil<br />(#4B0082)
| align="center" style="BACKGROUND: ivory" | marfil<br />(#FFFFF0)
| align="center" style="BACKGROUND: khaki" | de color caqui<br />(#F0E68C)
| align="center" style="BACKGROUND: lavender" | lavanda<br />(#E6E6FA)
|-
| align="center" style="BACKGROUND: lavenderblush" | lavenderblush<br />(#FFF0F5)
| align="center" style="BACKGROUND: lawngreen" | lawngreen<br />(#7CFC00)
| align="center" style="BACKGROUND: lemonchiffon" | lemonchiffon<br />(#FFFACD)
| align="center" style="BACKGROUND: lightblue" | azul claro<br />(#ADD8E6)
|-
| align="center" style="BACKGROUND: lightcoral" | lightcoral<br />(#F08080)
| align="center" style="BACKGROUND: lightcyan" | lightcyan<br />(#E0FFFF)
| align="center" style="BACKGROUND: lightgoldenrodyellow" | lightgoldenrodyellow<br />(#FAFAD2)
| align="center" style="BACKGROUND: lightgreen" | verde claro<br />(#90EE90)
|-
| align="center" style="BACKGROUND: lightgrey" | gris claro<br />(#D3D3D3)
| align="center" style="BACKGROUND: lightpink" | rosa claro<br />(#FFB6C1)
| align="center" style="BACKGROUND: lightsalmon" | lightsalmon<br />(#FFA07A)
| align="center" style="BACKGROUND: lightseagreen" | lightseagreen<br />(#20B2AA)
|-
| align="center" style="BACKGROUND: lightskyblue" | lightskyblue<br />(#87CEFA)
| align="center" style="BACKGROUND: lightslategray" | lightslategray<br />(#778899)
| align="center" style="BACKGROUND: lightsteelblue" | lightsteelblue<br />(#B0C4DE)
| align="center" style="BACKGROUND: lightyellow" | amarillo claro<br />(#FFFFE0)
|-
| align="center" style="BACKGROUND: lime" | cal<br />(#00FF00)
| align="center" style="BACKGROUND: limegreen" | limegreen<br />(#32CD32)
| align="center" style="BACKGROUND: linen" | lino<br />(#FAF0E6)
| align="center" style="BACKGROUND: magenta" | magenta<br />(#FF00FF)
|-
| align="center" style="BACKGROUND: maroon" | marrón<br />(#800000)
| align="center" style="BACKGROUND: mediumaquamarine" | mediumaquamarine<br />(#66CDAA)
| align="center" style="BACKGROUND: mediumblue" | mediumblue<br />(#0000CD)
| align="center" style="BACKGROUND: mediumorchid" | mediumorchid<br />(#BA55D3)
|-
| align="center" style="BACKGROUND: mediumpurple" | mediumpurple<br />(#9370DB)
| align="center" style="BACKGROUND: mediumseagreen" | mediumseagreen<br />(#3CB371)
| align="center" style="BACKGROUND: mediumslateblue" | mediumslateblue<br />(#7B68EE)
| align="center" style="BACKGROUND: mediumspringgreen" | mediumspringgreen<br />(#00FA9A)
|-
| align="center" style="BACKGROUND: mediumturquoise" | mediumturquoise<br />(#48D1CC)
| align="center" style="BACKGROUND: mediumvioletred" | mediumvioletred<br />(#C71585)
| align="center" style="BACKGROUND: midnightblue" | midnightblue<br />(#191970)
| align="center" style="BACKGROUND: mintcream" | mintcream<br />(#F5FFFA)
|-
| align="center" style="BACKGROUND: mistyrose" | mistyrose<br />(#FFE4E1)
| align="center" style="BACKGROUND: moccasin" | moccasin<br />(#FFE4B5)
| align="center" style="BACKGROUND: navajowhite" | navajowhite<br />(#FFDEAD)
| align="center" style="BACKGROUND: navy" | marina de guerra<br />(#000080)
|-
| align="center" style="BACKGROUND: oldlace" | oldlace<br />(#FDF5E6)
| align="center" style="BACKGROUND: olive" | aceituna<br />(#808000)
| align="center" style="BACKGROUND: olivedrab" | olivedrab<br />(#6B8E23)
| align="center" style="BACKGROUND: orange" | anaranjado<br />(#FFA500)
|-
| align="center" style="BACKGROUND: orangered" | naranja-rojo<br />(#FF4500)
| align="center" style="BACKGROUND: orchid" | orquídea<br />(#DA70D6)
| align="center" style="BACKGROUND: palegoldenrod" | palegoldenrod<br />(#EEE8AA)
| align="center" style="BACKGROUND: palegreen" | palegreen<br />(#98FB98)
|-
| align="center" style="BACKGROUND: paleturquoise" | paleturquoise<br />(#AFEEEE)
| align="center" style="BACKGROUND: palevioletred" | palevioletred<br />(#DB7093)
| align="center" style="BACKGROUND: papayawhip" | papayawhip<br />(#FFEFD5)
| align="center" style="BACKGROUND: peachpuff" | peachpuff<br />(#FFDAB9)
|-
| align="center" style="BACKGROUND: peru" | Perú<br />(#CD853F)
| align="center" style="BACKGROUND: pink" | color de rosa<br />(#FFC0CB)
| align="center" style="BACKGROUND: plum" | ciruelo<br />(#DDA0DD)
| align="center" style="BACKGROUND: powderblue" | powderblue<br />(#B0E0E6)
|-
| align="center" style="BACKGROUND: purple" | púrpura<br />(#800080)
| align="center" style="BACKGROUND: red" | rojo<br />(#FF0000)
| align="center" style="BACKGROUND: rosybrown" | rosybrown<br />(#BC8F8F)
| align="center" style="BACKGROUND: royalblue" | royalblue<br />(#4169E1)
|-
| align="center" style="BACKGROUND: saddlebrown" | saddlebrown<br />(#8B4513)
| align="center" style="BACKGROUND: salmon" | salmones<br />(#FA8072)
| align="center" style="BACKGROUND: sandybrown" | sandybrown<br />(#F4A460)
| align="center" style="BACKGROUND: seagreen" | verdemar<br />(#2E8B57)
|-
| align="center" style="BACKGROUND: seashell" | seashell<br />(#FFF5EE)
| align="center" style="BACKGROUND: sienna" | sienna<br />(#A0522D)
| align="center" style="BACKGROUND: silver" | plata<br />(#C0C0C0)
| align="center" style="BACKGROUND: skyblue" | skyblue<br />(#87CEEB)
|-
| align="center" style="BACKGROUND: slateblue" | slateblue<br />(#6A5ACD)
| align="center" style="BACKGROUND: slategray" | slategray<br />(#708090)
| align="center" style="BACKGROUND: snow" | nieve<br />(#FFFAFA)
| align="center" style="BACKGROUND: springgreen" | springgreen<br />(#00FF7F)
|-
| align="center" style="BACKGROUND: steelblue" | steelblue<br />(#4682B4)
| align="center" style="BACKGROUND: tan" | tan<br />(#D2B48C)
| align="center" style="BACKGROUND: teal" | teal<br />(#008080)
| align="center" style="BACKGROUND: thistle" | thistle<br />(#D8BFD8)
|-
| align="center" style="BACKGROUND: tomato" | tomate<br />(#FF6347)
| align="center" style="BACKGROUND: turquoise" | turquesa<br />(#40E0D0)
| align="center" style="BACKGROUND: violet" | violeta<br />(#EE82EE)
| align="center" style="BACKGROUND: wheat" | trigo<br />(#F5DEB3)
|-
| align="center" style="BACKGROUND: white" | blanco<br />(#FFFFFF)
| align="center" style="BACKGROUND: whitesmoke" | whitesmoke<br />(#F5F5F5)
| align="center" style="BACKGROUND: yellow" | amarillo<br />(#FFFF00)
| align="center" style="BACKGROUND: yellowgreen" | de color verde amarillo<br />(#9ACD32)
|}
== Atributos ==
Son 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.
| |||