a) Identificación del lenguaje (s)
Definición
Las hojas de estilo cascada describen la presentación de un documento escrito en lenguaje etiquetas y marcas, es decir que le da un estilo visual.
Esta información puede estar en un mismo archivo o separado en otros, el atributo que mas se usa en esta parte en <style>
Nota. El objetivo de CCS es separar la estructura del documento para mejorar el estilo visual.
Especificación
Se refiere a la versión que usa CSS, para adquirir diseño a paginas web, del actual a las versiones se han ido actualizando y se pueden consultar en la página w3.org.
Funcionamiento
Una pagina en CSS debe llevar etiquetas, colores, tamaño de fuente e imagen entre otras cosas para darle presentación al contenido de un sitio.
Como se incluye un archivo CSS en documentos XHTML y HTML.
Los estilos se definen al ir escribiendo las etiquetas o tag's en zonas especificas del documento que se irán ejecutando según el orden que queramos que aparezcan del documento.
Sintaxis
Es la forma como vamos a escribir el formato de la instrucción a detallar por ejemplo, tenemos un texto y le aplicamos color y medida en ese orden:
||<texto>||<color>||<medida>||
<font face><color="rojo"/><size=18>
Tipos de selectores
- Selector universal
- Selector etiquetas
- Selector descendentes
Elementos utilizados en la regla CSS
Son aquellos que se encuentran dentro de la etiqueta <span> y que activan otras etiquetas en el código.
Ejemplo: <p>, <h1>
El selector de clase es una de las soluciones para aplicar estilos a un solo elemento de la página utilizando el atributo class.
Selectores de ID
Permite seleccionar un elemento de la página a través del valor de su atributo y usa el símbolo #.
Los selectores avanzados simplifican las hojas de estilos css, mientras que el selector de las hojas se usa para seleccionar un elemento mediante el símbolo < >.
Colisión de estilos
En las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a un mismo elemento HTML. El problema de estas múltiples es que se pueden dar colisiones como la del siguiente ejemplo:
p{color: red;}
p{color: blue;}
a<p>...</p>
¿De qué color se muestra el párrafo anterior? CSS tiene un mecanismo de resolución de colisiones muy complejo y que tienen en cuenta el tipo de hoja de estilo que se trate, la importancia de cada regla y lo especifico que sea el selector.
El método seguido por CSS para resolver las colisiones de estilos se muestra a continuación:
1. Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado.
2. Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de diseñador) y su prioridad (palabra clave !import).
3. Ordenar las declaraciones según lo especifico que sea el selector. Cuánto mas genérico sea un selector, menos importancia tienen sus declaraciones.
4. Si después de aplicar las normas anteriores existen dos o mas reglas con la misma prioridad, se aplica la que se indico en ultimo lugar.
¿De qué color se muestra el párrafo anterior? CSS tiene un mecanismo de resolución de colisiones muy complejo y que tienen en cuenta el tipo de hoja de estilo que se trate, la importancia de cada regla y lo especifico que sea el selector.
El método seguido por CSS para resolver las colisiones de estilos se muestra a continuación:
1. Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado.
2. Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de diseñador) y su prioridad (palabra clave !import).
3. Ordenar las declaraciones según lo especifico que sea el selector. Cuánto mas genérico sea un selector, menos importancia tienen sus declaraciones.
4. Si después de aplicar las normas anteriores existen dos o mas reglas con la misma prioridad, se aplica la que se indico en ultimo lugar.
El mecanismo simplificado que se puede aplicar es el siguiente:
1. Cuanto más especifico sea un selector, mas importancia tiene su regla asociada.
2. Al igual especificidad, se considera la ultima regla indicada.
En el siguiente ejemplo, la regla CSS que prevalece se decide por lo especifico que es cada selector:
p{ color : red;}
p#especial {color : green;}
*{ color: blue;}
<p id="especial">...</p>
Al elemento <p> se le aplican las tres declaraciones. Como su origen y su importancia es la misma, decide la especificidad del selector. El selector * es el menos especifico, ya que se refiere a "todos los elementos de la página". El selector p es poco especifico porque se refiere a "todos los párrafos de la página". Por ultimo, el selector p#especial sólo hace referencia a "el párrafo de la pagina cuyo atributo id sea igual a especial". Como el selector p#especial es el mas especifico, su declaración es la que se tiene en cuenta y por tanto el párrafo se muestra de color verde.
Unidades de medida
Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida).
CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.
Si el valor es
0, la unidad de medida es opcional. Si el valor es distinto a 0 y no se indica ninguna unidad, la medida se ignora completamente, lo que suele ser uno de los errores más habituales de los diseñadores que empiezan con CSS. Algunas propiedades permiten indicar medidas negativas, aunque habitualmente sus valores son positivos. Si el valor decimal de una medida es inferior a 1, se puede omitir el 0 de la izquierda (0.5em es equivalente a .5em).
Colores
Los colores web son aquellos colores que aparecen en una página web. Se pueden basar sobre los sistemas de color RGB o HSL. En el código CSS (y antiguamente en HTML) son especificados como valores numéricos, aunque hay algunos colores que son nombrados por nombres propios en inglés
| Nombre HTML | Código hex R G B | Valores R G B | Valores H S L | Valores H S V |
|---|---|---|---|---|
Colores rojos
| ||||
LightCoral
|
F08080
|
240 128 128
|
0° 79% 72%
|
0° 47% 94%
|
Salmon
|
FA8072
|
250 128 114
|
6° 93% 71%
|
6° 55% 98%
|
IndianRed
|
CD5C5C
|
205 92 92
|
0° 53% 58%
|
0° 55% 80%
|
Red
|
FF0000
|
255 0 0
|
0° 100% 50%
|
0° 100% 100%
|
Crimson
|
DC143C
|
220 20 60
|
348° 83% 47%
|
348° 91% 86%
|
FireBrick
|
B22222
|
178 34 34
|
0° 68% 42%
|
0° 81% 71%
|
Brown
|
A52A2A
|
165 42 42
|
0° 75% 65%
|
0° 58% 91%
|
DarkRed
|
8B0000
|
139 0 0
|
0° 100% 27%
|
0° 100% 54%
|
Maroon
|
800000
|
128 0 0
|
0° 100% 25%
|
0° 100% 50%
|
Colores rosas
| ||||
MistyRose
|
FFE4E1
|
255 228 225
|
6° 100% 94%
|
6° 12% 100%
|
Pink
|
FFC0CB
|
255 192 203
|
350° 100% 88%
|
350° 24% 100%
|
LightPink
|
FFB6C1
|
255 182 193
|
351° 100% 86%
|
351° 28% 100%
|
HotPink
|
FF69B4
|
255 105 180
|
330° 100% 71%
|
330° 58% 100%
|
RosyBrown
|
BC8F8F
|
188 143 143
|
0° 25% 65%
|
0° 24% 74%
|
PaleVioletRed
|
DB7093
|
219 112 147
|
340° 60% 65%
|
340° 49% 86%
|
DeepPink
|
FF1493
|
255 20 147
|
328° 100% 54%
|
328° 92% 100%
|
MediumVioletRed
|
C71585
|
199 21 133
|
322° 81% 43%
|
322° 90% 78%
|
Colores naranjas
| ||||
PapayaWhip
|
FFEFD5
|
255 239 213
|
37° 100% 92%
|
37° 16% 100%
|
BlanchedAlmond
|
FFEBCD
|
255 235 205
|
36° 100% 90%
|
36° 20% 100%
|
Bisque
|
FFE4C4
|
255 228 196
|
33° 100% 88%
|
33° 24% 100%
|
Moccasin
|
FFE4B5
|
255 228 181
|
38° 100% 85%
|
38° 30% 100%
|
PeachPuff
|
FFDAB9
|
255 218 185
|
28° 100% 86%
|
28° 28% 100%
|
NavajoWhite
|
FFDEAD
|
255 222 173
|
36° 100% 84%
|
36° 32% 100%
|
LightSalmon
|
FFA07A
|
255 160 122
|
17° 100% 74%
|
17° 52% 100%
|
DarkSalmon
|
E9967A
|
233 150 122
|
15° 72% 70%
|
15° 47% 92%
|
Orange
|
FFA500
|
255 165 0
|
39° 100% 50%
|
39° 100% 100%
|
DarkOrange
|
FF8C00
|
255 140 0
|
33° 100% 50%
|
33° 100% 100%
|
Coral
|
FF7F50
|
255 127 80
|
16° 100% 66%
|
16° 68% 100%
|
Tomato
|
FF6347
|
255 99 71
|
9° 100% 64%
|
9° 72% 100%
|
OrangeRed
|
FF4500
|
255 69 0
|
16° 100% 50%
|
16° 100% 100%
|
Colores marrones
| ||||
Wheat
|
F5DEB3
|
245 222 179
|
39° 77% 83%
|
39° 27% 96%
|
BurlyWood
|
DEB887
|
222 184 135
|
34° 57% 70%
|
34° 39% 87%
|
Tan
|
D2B48C
|
210 180 140
|
34° 44% 69%
|
34° 33% 83%
|
SandyBrown
|
F4A460
|
244 164 96
|
28° 87% 67%
|
28° 60% 96%
|
Goldenrod
|
DAA520
|
218 165 32
|
43° 74% 49%
|
43° 85% 85%
|
Peru
|
CD853F
|
205 133 63
|
30° 59% 53%
|
30° 69% 81%
|
DarkGoldenrod
|
B8860B
|
184 134 11
|
43° 89% 38%
|
43° 94% 72%
|
Chocolate
|
D2691E
|
210 105 30
|
25° 75% 47%
|
25° 86% 82%
|
Sienna
|
A0522D
|
160 82 45
|
19° 56% 40%
|
19° 72% 62%
|
SaddleBrown
|
8B4513
|
139 69 19
|
25° 76% 31%
|
25° 86% 55%
|
Colores amarillos
| ||||
LightYellow
|
FFFFE0
|
255 255 224
|
60° 100% 94%
|
60° 12% 100%
|
Cornsilk
|
FFF8DC
|
255 248 220
|
48° 100% 93%
|
48° 14% 100%
|
LemonChiffon
|
FFFACD
|
255 250 205
|
54° 100% 90%
|
54° 20% 100%
|
LightGoldenrodYellow
|
FAFAD2
|
250 250 210
|
60° 80% 90%
|
60° 16% 98%
|
PaleGoldenrod
|
EEE8AA
|
238 232 170
|
55° 67% 80%
|
55° 29% 93%
|
Khaki
|
F0E68C
|
240 230 140
|
54° 77% 75%
|
54° 41% 94%
|
Yellow
|
FFFF00
|
255 255 0
|
60° 100% 50%
|
60° 100% 100%
|
Gold
|
FFD700
|
255 215 0
|
51° 100% 50%
|
51° 100% 100%
|
DarkKhaki
|
BDB76B
|
189 183 107
|
56° 38% 58%
|
56° 43% 74%
|
Colores verdes amarillentos
| ||||
GreenYellow
|
ADFF2F
|
173 255 47
|
84° 100% 59%
|
84° 82% 100%
|
Chartreuse
|
7FFF00
|
127 255 0
|
90° 100% 50%
|
90° 100% 100%
|
LawnGreen
|
7CFC00
|
124 252 0
|
90° 100% 49%
|
90° 100% 98%
|
YellowGreen
|
9ACD32
|
154 205 50
|
80° 61% 50%
|
80° 76% 81%
|
OliveDrab
|
6B8E23
|
107 142 35
|
80° 60% 35%
|
80° 75% 56%
|
Olive
|
808000
|
128 128 0
|
60° 100% 25%
|
60° 100% 50%
|
DarkOliveGreen
|
556B2F
|
85 107 47
|
82° 39% 30%
|
82° 56% 42%
|
Colores verdes
| ||||
PaleGreen
|
98FB98
|
152 251 152
|
120° 93% 79%
|
120° 40% 99%
|
LightGreen
|
90EE90
|
144 238 144
|
120° 73% 75%
|
120° 39% 93%
|
MediumSpringGreen
|
00FA9A
|
0 250 154
|
157° 100% 49%
|
157° 100% 98%
|
SpringGreen
|
00FF7F
|
0 255 127
|
150° 100% 50%
|
150° 100% 100%
|
Lime
|
00FF00
|
0 255 0
|
120° 100% 50%
|
120° 100% 100%
|
DarkSeaGreen
|
8FBC8F
|
143 188 143
|
120° 25% 65%
|
120° 24% 74%
|
LimeGreen
|
32CD32
|
50 205 50
|
120° 61% 50%
|
120° 76% 81%
|
MediumSeaGreen
|
3CB371
|
60 179 113
|
147° 50% 47%
|
147° 67% 71%
|
SeaGreen
|
2E8B57
|
46 139 87
|
146° 50% 36%
|
146° 67% 54%
|
ForestGreen
|
228B22
|
34 139 34
|
120° 61% 34%
|
120° 76% 55%
|
Green
|
008000
|
0 128 0
|
120° 100% 25%
|
120° 100% 50%
|
DarkGreen
|
006400
|
0 100 0
|
120° 100% 20%
|
120° 100% 40%
|
Colores azul-verdes
| ||||
LightCyan
|
E0FFFF
|
224 255 255
|
180° 100% 94%
|
180° 12% 100%
|
PaleTurquoise
|
AFEEEE
|
175 238 238
|
180° 65% 81%
|
180° 26% 93%
|
Aquamarine
|
7FFFD4
|
127 255 212
|
160° 100% 75%
|
160° 50% 100%
|
Aqua / Cyan
|
00FFFF
|
0 255 255
|
180° 100% 50%
|
180° 100% 100%
|
Turquoise
|
40E0D0
|
64 224 208
|
174° 72% 56%
|
174° 72% 88%
|
MediumTurquoise
|
48D1CC
|
72 209 204
|
178° 60% 55%
|
178° 66% 82%
|
DarkTurquoise
|
00CED1
|
0 206 209
|
181° 100% 82%
|
181° 36% 100%
|
MediumAquamarine
|
66CDAA
|
102 205 170
|
160° 51% 60%
|
160° 51% 80%
|
LightSeaGreen
|
20B2AA
|
32 178 170
|
177° 70% 41%
|
177° 82% 70%
|
CadetBlue
|
5F9EA0
|
95 158 160
|
182° 41% 63%
|
182° 39% 78%
|
DarkCyan
|
008B8B
|
0 139 139
|
180° 100% 27%
|
180° 100% 54%
|
Teal
|
008080
|
0 128 128
|
180° 100% 25%
|
180° 100% 50%
|
Colores azules
| ||||
Lavender
|
E6E6FA
|
230 230 250
|
240° 67% 94%
|
240° 8% 98%
|
BlueWeb
|
CEE7FF
|
206 231 255
|
209° 100% 90%
|
209° 20% 100%
|
PowderBlue
|
B0E0E6
|
176 224 230
|
187° 52% 80%
|
187° 23% 90%
|
LightBlue
|
ADD8E6
|
173 216 230
|
195° 53% 79%
|
195° 25% 90%
|
LightSkyBlue
|
87CEFA
|
135 206 250
|
203° 92% 75%
|
203° 47% 98%
|
SkyBlue
|
87CEEB
|
135 206 235
|
197° 71% 73%
|
197° 42% 92%
|
LightSteelBlue
|
B0C4DE
|
176 196 222
|
214° 41% 78%
|
214° 21% 87%
|
DeepSkyBlue
|
00BFFF
|
0 191 255
|
195° 100% 50%
|
195° 100% 100%
|
CornflowerBlue
|
6495ED
|
100 149 237
|
219° 79% 66%
|
219° 58% 93%
|
DodgerBlue
|
1E90FF
|
30 144 255
|
210° 88% 100%
|
210° 0% 100%
|
SteelBlue
|
4682B4
|
70 130 180
|
207° 61% 71%
|
207° 40% 89%
|
RoyalBlue
|
4169E1
|
65 105 225
|
225° 73% 57%
|
225° 71% 88%
|
Blue
|
0000FF
|
0 0 255
|
240° 100% 100%
|
240° 0% 100%
|
MediumBlue
|
0000CD
|
0 0 205
|
240° 100% 80%
|
240° 40% 100%
|
DarkBlue
|
00008B
|
0 0 139
|
240° 100% 55%
|
240° 90% 100%
|
Navy
|
000080
|
0 0 128
|
240° 100% 50%
|
240° 100% 100%
|
MidnightBlue
|
191970
|
25 25 112
|
240° 78% 44%
|
240° 88% 78%
|
Thistle
|
D8BFD8
|
216 191 216
|
300° 24% 80%
|
300° 11% 85%
|
Plum
|
DDA0DD
|
221 160 221
|
300° 47% 75%
|
300° 27% 87%
|
Violet
|
EE82EE
|
238 130 238
|
300° 76% 72%
|
300° 46% 93%
|
Orchid
|
DA70D6
|
218 112 214
|
302° 59% 65%
|
302° 48% 86%
|
Fuchsia / Magenta
|
FF00FF
|
255 0 255
|
300° 100% 50%
|
300° 100% 100%
|
MediumPurple
|
9370DB
|
147 112 219
|
260° 60% 65%
|
260° 49% 86%
|
MediumOrchid
|
BA55D3
|
186 85 211
|
288° 59% 58%
|
288° 60% 83%
|
MediumSlateBlue
|
7B68EE
|
123 104 238
|
249° 80% 67%
|
249° 57% 93%
|
SlateBlue
|
6A5ACD
|
106 90 205
|
248° 53% 58%
|
248° 55% 80%
|
BlueViolet
|
8A2BE2
|
138 43 226
|
271° 76% 53%
|
271° 81% 89%
|
DarkViolet
|
9400D3
|
148 0 211
|
282° 100% 41%
|
282° 100% 82%
|
DarkOrchid
|
9932CC
|
153 50 204
|
280° 61% 50%
|
280° 76% 81%
|
DarkMagenta
|
8B008B
|
139 0 139
|
300° 100% 27%
|
300° 100% 54%
|
Purple
|
800080
|
128 0 128
|
300° 100% 25%
|
300° 100% 50%
|
DarkSlateBlue
|
483D8B
|
72 61 139
|
248° 39% 39%
|
248° 56% 54%
|
Indigo
|
4B0082
|
75 0 130
|
275° 100% 25%
|
275° 100% 50%
|
Colores blancos
| ||||
White
|
FFFFFF
|
255 255 255
|
—° 0% 100%
|
—° 0% 100%
|
WhiteSmoke
|
F5F5F5
|
245 245 245
|
—° 0% 96%
|
—° 0% 96%
|
Snow
|
FFFAFA
|
255 250 250
|
0° 2% 100%
|
0° 0% 100%
|
Seashell
|
FFF5EE
|
255 245 238
|
25° 100% 97%
|
25° 6% 100%
|
Linen
|
FAF0E6
|
250 240 230
|
30° 67% 94%
|
30° 8% 98%
|
AntiqueWhite
|
FAEBD7
|
250 235 215
|
34° 78% 91%
|
34° 14% 98%
|
OldLace
|
FDF5E6
|
253 245 230
|
39° 85% 95%
|
39° 9% 99%
|
FloralWhite
|
FFFAF0
|
255 250 240
|
40° 100% 97%
|
40° 6% 100%
|
Ivory
|
FFFFF0
|
255 255 240
|
60° 100% 97%
|
60° 6% 100%
|
Beige
|
F5F5DC
|
245 245 220
|
60° 56% 91%
|
60° 10% 96%
|
Honeydew
|
F0FFF0
|
240 255 240
|
120° 6% 100%
|
120° 0% 100%
|
MintCream
|
F5FFFA
|
245 255 250
|
150° 4% 100%
|
150° 0% 100%
|
Azure
|
F0FFFF
|
240 255 255
|
180° 6% 100%
|
180° 0% 100%
|
AliceBlue
|
F0F8FF
|
240 248 255
|
208° 100% 97%
|
208° 6% 100%
|
GhostWhite
|
F8F8FF
|
248 248 255
|
240° 100% 99%
|
240° 2% 100%
|
LavenderBlush
|
FFF0F5
|
255 240 245
|
340° 100% 97%
|
340° 6% 100%
|
Colores grises
| ||||
Gainsboro
|
DCDCDC
|
220 220 220
|
—° 0% 86%
|
—° 0% 86%
|
LightGrey
|
D3D3D3
|
211 211 211
|
—° 0% 83%
|
—° 0% 83%
|
Silver
|
C0C0C0
|
192 192 192
|
—° 0% 75%
|
—° 0% 75%
|
DarkGray
|
A9A9A9
|
169 169 169
|
—° 0% 66%
|
—° 0% 66%
|
LightSlateGray
|
778899
|
119 136 153
|
210° 22% 60%
|
210° 26% 69%
|
SlateGray
|
708090
|
112 128 144
|
210° 22% 56%
|
210° 29% 66%
|
Gray
|
808080
|
128 128 128
|
—° 0% 50%
|
—° 0% 50%
|
DimGray
|
696969
|
105 105 105
|
—° 0% 41%
|
—° 0% 41%
|
DarkSlateGray
|
2F4F4F
|
47 79 79
|
180° 25% 25%
|
180° 40% 31%
|
Black
|
000000
|
0 0 0
|
—° 0% 0%
|
—° 0% 0%
|
Agrupación
Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usaran, a menudo, junto con los atributos class e id.
Agrupación con <span>
El elemento <span> es lo que se podria denominar un elemento neutro que no añade nada al documento en si. Pero con CSS <span> se puede usar para añadir características visuales distintivas a partes especificas de texto en los documentos.
Un ejemplo de esto podría ser esta cita de Benjamín Franklin:
<p> El que pronto se acuesta y pronto se levanta, es hombre saludable, rico y sabio. </p>
Digamos que queremos que lo que el señor Franklin considera como las ventajas de no pasarse todo el día durmiendo, aparezca efatizado en rojo.
Para este fin, podemos marcar dichas ventajas con el elemento <span>. A cada elemento span se le añade el atributo class, que podemos definir así en nuestra hoja de estilo:
<p>El que pronto se acuesta y pronto se levanta, es hombre <span class="ventaja">saludable</span>,
<span class="ventaja">rico</span> y <span class="ventaja">sabio</span>.</p>
El código CSS necesario para producir este efecto es el siguiente:
span.benefit{
color:red;
}
Herencia
Son aquellos elementos del código que heredan el valor de la propiedad.
Comentarios
Publicar un comentario