-
Notifications
You must be signed in to change notification settings - Fork 0
/
article-css-tutorial-3.html
203 lines (185 loc) · 9.83 KB
/
article-css-tutorial-3.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Carles Hervera Website</title>
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500|Roboto+Condensed:300,400,700|Roboto:300,400,400i,500" rel="stylesheet" />
<link rel="stylesheet" href="./node_modules/normalize.css/normalize.css" />
<link rel="stylesheet" href="./assets/css/main.css" />
<link rel="stylesheet" href="./node_modules/highlight.js/styles/monokai-sublime.css" />
</head>
<body>
<article id="article">
<section id="header">
<h1 class="h1">Tutorial CSS - Sobre-escritura de propiedades en CSS</h1>
</section>
<section id="subheader">
<span>Serie de tutoriales con lo necesario para dominar CSS.<br />En la tercera publicación se verán las maneras de modificar propiedades definidas previamente.</span>
</section>
<section id="header-img" style="background-image: url(assets/img/articles/tutorial-css-3.jpg); background-position-y: center;"></section>
<div id="central">
<section id="content">
<h2 class="h2">Sobre-escritura de propiedades en CSS</h2>
<p>
En CSS cuando varios selectores <strong>idénticos</strong> e igual de <strong>específicos</strong> modifican la misma propiedad siempre prevalecerá el último definido.<br />Esto
característica sirve para, por ejemplo, poder modificar las hojas de estilo de terceros, por ejemplo, <a href="https://getbootstrap.com/" target="_blank" title="Bootstrap">Bootstrap</a>,
<a href="https://necolas.github.io/normalize.css" target="_blank" title="Normalize.css">Normalize</a> o cualquier librería CSS que podamos importar a nuestro proyecto. También es una
característica que en conjunto con las <strong>MediaQueries</strong> nos permiten hacer los layouts responsivos o adaptables.
</p>
<h2 class="h2">Especificidad de selectores</h2>
<p>
Cuando <strong>distintos</strong> selectores aplican a un mismo elemento, el navegador necesita saber, de alguna forma, que propiedad aplicar.<br />
Por ejemplo, utilizando los siguientes selectoress:
<pre><code class="css">/*A -*/ ul li a.product{color: red; background: pink;}
/*B -*/ #element .product{color:green; border: 1px solid #333;}
/*C -*/ .sales .product{color: blue; background: yellow;}</code></pre><br/>
Y el siguiente código HTML:
<pre><code class="xml"><div id="element">
<ul class="sales">
<li>
<a class="product">Product 1</a>
</li>
</ul>
</div></code></pre><br/>
<p>
Todos los selectores encajan enlace <strong> <a></a> </strong> y todos los selectores modifican la propiedad <i>color</i>, por lo tanto, para saber cuál va a aplicar, se calcula el <strong>peso específico</strong> de cada uno y el que sea mayor es el que se aplica.
<br/><br/>
Para calcular el peso específico, usa la siguiente formula:
<br/>
<br/>
<span class="quote quote--tweeteable">Peso específico CSS = (número de ids * 100) + (número de classes o pseudo clases) * 10 + (número de tags o pseudo elementos)</span>
Parece complicado, pero es muy sencillo:
<div class="table__responsive">
<table class="table">
<tr class="table__row">
<th class="table__col table__col--head">Selector</th>
<th class="table__col table__col--head">Número ids</th>
<th class="table__col table__col--head">Classes o pseudo classes</th>
<th class="table__col table__col--head">Tags o pseudo elementos</th>
<th class="table__col table__col--head">Total</th>
</tr>
<tr class="table__row">
<td class="table__col">A</td>
<td class="table__col">0</td>
<td class="table__col">1</td>
<td class="table__col">3</td>
<td class="table__col">0*100 + 1 *10 + 3 = 13</td>
</tr>
<tr class="table__row">
<td class="table__col">B</td>
<td class="table__col">1</td>
<td class="table__col">1</td>
<td class="table__col">0</td>
<td class="table__col">1*100 + 1 *10 + 0 = 110</td>
</tr>
<tr class="table__row">
<td class="table__col">C</td>
<td class="table__col">0</td>
<td class="table__col">2</td>
<td class="table__col">0</td>
<td class="table__col">0*100 + 2 *10 + 0 = 20</td>
</tr>
</table>
</div>
<br/>
De esta forma, cuando una propiedad esté definida en varios selectores que apliquen a un mismo elemento, se mirará cual tiene más peso específico para decidir cuál usar.
<br/>
Por lo que al final el elemento quedará con los siguientes estilos:
<pre><code class="css">color:green; border: 1px solid #333; background: yellow;</code></pre>
</p>
<div class="fotoby">
<span>Fotografía de portada de:</span>
<a
style='background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px'
href="https://unsplash.com/@siamak?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge"
target="_blank"
rel="noopener noreferrer"
title="Download free do whatever you want high-resolution photos from siamak djamei"
><span style="display:inline-block;padding:2px 3px"
><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32">
<title>unsplash-logo</title>
<path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span
><span style="display:inline-block;padding:2px 3px">siamak djamei</span></a
>
</div>
</section>
<section id="footer" class="dark">
<div class="tags-list featured type2">
<span>Etiquetas:</span><br />
<a href="#">Usabilidad</a>
</div>
</section>
</div>
<section id="comments">
TODO: comments
</section>
</article>
<script src="assets/js/main.js"></script>
<script>
var decode_entities = (function() {
// Remove HTML Entities
var element = document.createElement('div');
function decode_HTML_entities(str) {
if (str && typeof str === 'string') {
// Escape HTML before decoding for HTML Entities
str = escape(str)
.replace(/%26/g, '&')
.replace(/%23/g, '#')
.replace(/%3B/g, ';');
element.innerHTML = str;
if (element.innerText) {
str = element.innerText;
element.innerText = '';
} else {
// Firefox support
str = element.textContent;
element.textContent = '';
}
}
return unescape(str);
}
return decode_HTML_entities;
})();
const pres = document.querySelectorAll('pre');
pres.forEach(element => {
const clipBoardButton = document.createElement('a');
clipBoardButton.text = 'Copy';
clipBoardButton.dataset.code = element.querySelector('code').innerHTML;
clipBoardButton.addEventListener('click', function() {
const textToCopy = decode_entities(this.dataset.code);
var textArea = document.createElement('textarea');
textArea.value = textToCopy;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('Copy');
textArea.remove();
this.classList.add('copied');
});
const clipBoardContainer = document.createElement('div');
clipBoardContainer.classList.add('copy-clipboard');
clipBoardContainer.appendChild(clipBoardButton);
element.insertBefore(clipBoardContainer, element.firstChild);
});
</script>
<script>
hljs.initHighlightingOnLoad();
</script>
<script>
const tweeteableQuotes = document.querySelectorAll('.quote--tweeteable');
tweeteableQuotes.forEach(element => {
let tweeteableButton = document.createElement('button');
let tweeteableContent = element.innerHTML;
tweeteableButton.innerHTML = 'tweetealo!';
tweeteableButton.classList.add("tweeteable__button");
tweeteableButton.addEventListener('click', function(){
let tweetedLink = document.location.href;
tweeteableContent += ' - ' + tweetedLink;
window.open("https://twitter.com/intent/tweet?url=" + tweetedLink + "&text=" + tweeteableContent + "&via=chervera&", "twitterwindow", "height=450, width=550, toolbar=0, location=0, menubar=0, directories=0, scrollbars=0");
});
element.appendChild(tweeteableButton);
});
</script>
</body>
</html>