-
Notifications
You must be signed in to change notification settings - Fork 0
/
css-herencia.html
266 lines (234 loc) · 11.1 KB
/
css-herencia.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>HTML responsive design docs</title>
<!-- The edge of the website should follow the edge of the device -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- style -->
<link rel="stylesheet" href="estilo/style.css">
<!-- scripts -->
<script src="script/script.js"></script>
<!-- reusable header -->
<script src="content/header.js" type="text/javascript" defer></script>
<!-- reusable table of contents -->
<script src="content/table-of-contents.js" type="text/javascript" defer></script>
</head>
<body>
<reusable-header>
<!-- Code is inside content/header.js -->
</reusable-header>
<!-- Table Of Contents -->
<div id="table-of-contents" class="TOC"></div>
<!-- Layaout for the theory -->
<div id="canvas">
<!-- Left arrow -->
<div class="to-left-page" id="left-arrow">
</div>
<!-- Theory Block -->
<div id="theory">
<h1>Herencia</h1>
<p>Un elemento puede tener asignados a la vez varios estilos. Estos pueden contener propiedades idénticas que entren en conflicto. Establecer cuál de ellas tiene prioridad se consigue mediante las reglas de herencia de CSS. Estas marcan el estilo a mostrar en función del método con el que fue aplicado. De menor a mayor prioridad los métodos son:</p>
<ol>
<a href="#selector-root"><li>Selector <code>root</code></li></a>
<a href="#html-tag"><li>Estilo aplicado sobre una etiqueta HTML</li></a>
<a href="html-class"><li>Clase</li></a>
<a href="#html-id"><li>ID</li></a>
<a href="#html-inline"><li><i>Inline styles</i></li></a>
<a href="#css-important"><li>Añadir el atributo <code>!important</code></li></a>
</ol>
<h2 id="selector-root">Selector <code>root</code>
<a href="#selector-root" class="anchor-link">
<img src="img/link.svg" alt="">
</a>
</h2>
<p id="description-code1">El selector <code>:root</code> es una pseudo clase que hace referencia al elemento raíz del documento, en la mayoría de los casos <code><html></code>. Constituye el elemento principal del que dependen los demás estilos. En el siguiente ejemplo todo el documento tendría un color de letra negro.</p>
<figure class="code" style="margin-bottom: 45px"> <!-- Same margin than result box -->
<figcaption id="caption-code1">Selector root</figcaption>
<pre aria-labelledby="caption-code1" aria-describedby="description-code1"><code contenteditable="true" tabindex="0" spellcheck="false">:root {
<b>color</b>: <u>black</u>;
}</code></pre>
</figure>
<p id="description-code1">El siguiente elemento raíz después de <code><html></code> es el <code>body</code>. Si no se especifica el elemento raíz, la siguiente línea de código haría que todos los elementos de la web tengan un color de texto verde y el tipo de letra monospace.</p>
<figure class="code" style="margin-bottom: 45px"> <!-- Same margin than result box -->
<figcaption id="caption-code2">2nd selector root</figcaption>
<pre aria-labelledby="caption-code2" aria-describedby="description-code2"><code contenteditable="true" tabindex="0" spellcheck="false">body {
<b>color</b>: <u>green</u>;
<b>font-family</b>: <u>monospace</u>;
}</code></pre>
</figure>
<h2 id="html-tag">Estilo aplicado sobre una etiqueta HTML
<a href="#html-tag" class="anchor-link">
<img src="img/link.svg" alt="">
</a>
</h2>
<p id="description-code3">Los elementos de marcado que contiene el lenguaje HTML pueden modificarse en su conjunto aplicando un estilo a la etiqueta que los define:</p>
<figure class="code" style="margin-bottom: 45px"> <!-- Same margin than result box -->
<figcaption id="caption-code3">Crear un estilo propio para un elemento de HTML</figcaption>
<pre aria-labelledby="caption-code3" aria-describedby="description-code3"><code contenteditable="true" tabindex="0" spellcheck="false">h2 {
<b>color</b>: <u>orange</u>;
}</code></pre>
</figure>
<p>Una vez aplicado todos los encabezados <code>h2</code> tendrán el color naranja. Este estilo sustituirá a la propiedad <code>color</code> <a href="#caption-code1">incluida dentro del elemento raíz <code>root</code></a>.</p>
<h2 id="html-class">Clase
<a href="#html-class" class="anchor-link">
<img src="img/link.svg" alt="">
</a>
</h2>
<p id="description-code4">El método cuyos estilos se priorizan por encima de los asociados al elemento <code>root</code> y a las etiquetas HTML es <b class="highlight1">aplicar un estilo definiendo una clase.</b> Al crear una clase que contenga la propiedad <code>color: pink</code> y aplicarla a un elemento <code>h2</code>, se sustituye el color de este último por el rosa. Se deja de tener en cuenta el color aplicado anteriormente.</p>
<figure class="code" style="margin-bottom: 45px"> <!-- Same margin than result box -->
<figcaption id="caption-code4">Crear una clase</figcaption>
<pre aria-labelledby="caption-code4" aria-describedby="description-code4"><code contenteditable="true" tabindex="0" spellcheck="false">h2 {
<b>color</b>: <u>orange</u>;
}
.pink-text {
<b>color</b>: <u>pink</u>;
}
<b><html></b>
<b><h2 class</b>=<u>"pink-text"</u><b>></b>Colored header<b></h2></b>
<b></html></b></code></pre>
</figure>
<p id="description-code5">Si existen varias clases con la misma propiedad aplicadas a un objeto, la preferencia la tiene aquella que ha sido definida en último lugar. El motivo, los navegadores leen los archivos (incluidas las hojas de estilos) de arriba a abajo. En el siguiente ejemplo, el encabezado se pintaría de color azul.</p>
<figure class="code" style="margin-bottom: 45px"> <!-- Same margin than result box -->
<figcaption id="caption-code5">Crear una clase</figcaption>
<pre aria-labelledby="caption-code5" aria-describedby="description-code5"><code contenteditable="true" tabindex="0" spellcheck="false">h2 {
<b>color</b>: <u>orange</u>;
}
.pink-text {
<b>color</b>: <u>pink</u>;
}
.blue-text {
<b>color</b>: <u>blue</u>;
}
<b><html></b>
<b><h2 class</b>=<u>"pink-text blue-text"</u><b>></b>Colored header<b></h2></b>
<b></html></b></code></pre>
</figure>
<h2 id="html-id">ID
<a href="#html-id" class="anchor-link">
<img src="img/link.svg" alt="">
</a>
</h2>
<p id="description-code6">Todos los elementos anteriores se sobrescriben por las propiedades que contienen los estilos asociados a un ID. En el siguiente ejemplo el texto del encabezado sería de color verde.</p>
<figure class="code" style="margin-bottom: 45px"> <!-- Same margin than result box -->
<figcaption id="caption-code6">Estilo mediante ID</figcaption>
<pre aria-labelledby="caption-code6" aria-describedby="description-code6"><code contenteditable="true" tabindex="0" spellcheck="false">h2 {
<b>color</b>: <u>orange</u>;
}
.pink-text {
<b>color</b>: <u>pink</u>;
}
.blue-text {
<b>color</b>: <u>blue</u>;
}
#header-green {
<b>color</b>: <u>green</u>;
}
<b><html></b>
<b><h2 class</b>=<u>"pink-text blue-text"</u><b> id</b>=<u>"header-green"</u><b>></b>Colored header<b></h2></b>
<b></html></b></code></pre>
</figure>
<h2 id="html-inline">Estilo dentro del propio elemento
<a href="#html-inline" class="anchor-link">
<img src="img/link.svg" alt="">
</a>
</h2>
<p id="description-code7">La propiedad definida dentro de la opción <code>style</code> en la propia etiqueta HTML <b class="highlight1">tendrá preferencia sobre el resto.</b> En el siguiente ejemplo el encabezado se mostrará de color amarillo.</p>
<figure class="code" style="margin-bottom: 45px"> <!-- Same margin than result box -->
<figcaption id="caption-code7">Inline style</figcaption>
<pre aria-labelledby="caption-code7" aria-describedby="description-code7"><code contenteditable="true" tabindex="0" spellcheck="false">h2 {
<b>color</b>: <u>orange</u>;
}
.pink-text {
<b>color</b>: <u>pink</u>;
}
.blue-text {
<b>color</b>: <u>blue</u>;
}
#header-green {
<b>color</b>: <u>green</u>;
}
<b><html></b>
<b><h2 style</b>=<u>"color:yellow;"</u>
<b>class</b>=<u>"pink-text blue-text"</u><b>
id</b>=<u>"header-green"</u><b>></b>Colored header<b></h2></b>
<b></html></b></code></pre>
</figure>
<h2 id="css-important">Añadir el atributo <code>!important</code>
<a href="#css-important" class="anchor-link">
<img src="img/link.svg" alt="">
</a>
</h2>
<p id="description-code8">La propiedad seguida de la etiqueta <code>!important</code> tendrá preferencia sobre cualquier otra. En el ejemplo siguiente el texto será de color naranja.</p>
<figure class="code" style="margin-bottom: 45px"> <!-- Same margin than result box -->
<figcaption id="caption-code7">Inline style</figcaption>
<pre aria-labelledby="caption-code7" aria-describedby="description-code7"><code contenteditable="true" tabindex="0" spellcheck="false">h2 {
<b>color</b>: <u>orange !important</u>;
}
.pink-text {
<b>color</b>: <u>pink</u>;
}
.blue-text {
<b>color</b>: <u>blue</u>;
}
#header-green {
<b>color</b>: <u>green</u>;
}
<b><html></b>
<b><h2 style</b>=<u>"color:yellow;"</u>
<b>class</b>=<u>"pink-text blue-text"</u><b>
id</b>=<u>"header-green"</u><b>></b>Colored header<b></h2></b>
<b></html></b></code></pre>
</figure>
</div><!-- #theory -->
<!-- Right arrow -->
<div class="to-right-page" id="right-arrow">
</div>
<!-- Two more arrows to display in small screens at the end of the theory -->
<div id="arrows-responsive" class="jc-sa">
</div>
</div><!-- #canvas -->
<!-- Transform pre elements into code chunks -->
<script>
(function()
{
//filter IE8 and earlier which don't support the generated content
if(typeof(window.getComputedStyle) == 'undefined')
{
return;
}
//get the collection of class "code-chunk" elements
var pre = document.getElementsByTagName('pre');
//now iterate through the collection
for(var len = pre.length, i = 0; i < len; i ++)
{
//get the CODE or SAMP element inside it,
//or just in case there isn't one, continue to the next PRE
var code = pre[i].getElementsByTagName('code').item(0);
if(!code)
{
code = pre[i].getElementsByTagName('samp').item(0);
if(!code)
{
continue;
}
}
//create a containing DIV column (but don't append it yet)
//including aria-hidden so that ATs don't read the numbers
var column = document.createElement('div');
column.setAttribute('aria-hidden', 'true');
//split the code by line-breaks to count the number of lines
//then for each line, add an empty span inside the column
for(var n = 0; n < code.innerHTML.split(/[\n\r]/g).length; n ++)
{
column.appendChild(document.createElement('span'));
}
//now append the populated column before the code element
pre[i].insertBefore(column, code);
//finally add an identifying class to the PRE to trigger the extra CSS
pre[i].className = 'line-numbers';
}
})();
</script>
</body>
</html>