Noções básicas de CSS
Este artigo explica os conceitos básicos de CSS.
Você pode aprender sobre seletores CSS, combinadores e especificidade.
YouTube Video
HTML/CSS para Pré-visualização
css-base.css
1body {
2 font-family: Arial, sans-serif;
3 line-height: 1.6;
4 margin: 20px 20px 600px 20px;
5 background-color: #f4f4f9;
6 color: #333;
7}
8
9header h1 {
10 font-size: 24px;
11 color: #333;
12 text-align: center;
13 margin-bottom: 20px;
14}
15
16h2, h3 {
17 color: #555;
18}
19
20h2 {
21 font-size: 20px;
22 border-bottom: 2px solid #ccc;
23 padding-bottom: 5px;
24}
25
26h3 {
27 font-size: 18px;
28 margin-top: 20px;
29 padding-left: 10px;
30 border-left: 2px solid #ccc;
31}
32
33h4 {
34 margin: 0;
35 margin-left: 10px;
36 font-size: 14px;
37}
38
39article section p {
40 margin-left: 40px;
41}
42
43p, pre {
44 margin: 10px 0;
45 padding: 0;
46}
47
48ul, ol, dl, menu {
49 margin: 0;
50}
51
52pre {
53 background-color: #f0f0f0;
54 border-left: 4px solid #ccc;
55 padding: 10px;
56 overflow-x: auto;
57}
58
59.sample-view {
60 border: 1px solid #eee;
61 border-left: 4px solid #eee;
62 padding: 10px;
63 overflow-x: auto;
64}
65
66p.sample, .sample {
67 background-color: #e7f4e9;
68 padding: 10px;
69 border-left: 4px solid #7bbd82;
70 color: #333;
71}
72
73p.sample-error, .sample-error {
74 background-color: #f4e7e7;
75 padding: 10px;
76 border-left: 4px solid lightcoral;
77 color: #333;
78}
79
80.example {
81 background-color: #e0f0ff;
82 padding: 10px;
83 border-left: 4px solid #4a90e2;
84 color: #333;
85}
86
87p.sample-warn, .sample-warn {
88 background-color: #f4f1e7;
89 padding: 10px;
90 border-left: 4px solid #bda97b;
91 color: #333;
92}
93
94code {
95 background-color: #f4f4f4;
96 padding: 2px 4px;
97 border-radius: 4px;
98 font-family: monospace;
99}
100
101span {
102 font-weight: bold;
103}
104
105article {
106 background-color: white;
107 padding: 20px;
108 margin-bottom: 10px;
109 border-radius: 8px;
110 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114 margin-bottom: 20px;
115}
116
117section div {
118 width: 400px;
119 height: 50px;
120 margin: 20px auto;
121 color: white;
122 display: flex;
123 align-items: center;
124 justify-content: center;
125 font-size: 1.2rem;
126 background-color: lightgray;
127 border: 1px solid #ccc;
128}
129
130header h4 {
131 text-align: right;
132 color: #666;
133 font-size: 0.8em;
134 text-decoration: none;
135}
136
137header + pre {
138 margin: 0;
139 margin-top: -20px;
140 padding-top: 14px;
141 font-size: 0.9em;
142}
143
144header + .sample-view {
145 margin: 0;
146 margin-top: -16px;
147}
148
149.sample-view p {
150 margin: 0;
151 padding: 0;
152}css-basics.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Basics</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-basics.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Basics</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Selectors</h2></header>
19 <article>
20 <h3>Universal Selector : *</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24* {
25 font-family:'Courier New', Courier, monospace;
26}
27</pre>
28 </section>
29 </article>
30 <article>
31 <h3>Element Selector</h3>
32 <section>
33 <header><h4>CSS</h4></header>
34<pre class="sample">
35strong {
36 color: red;
37}
38</pre>
39 <header><h4>HTML</h4></header>
40 <pre>This is <strong>sample</strong> text.</pre>
41 <header><h4>HTML+CSS</h4></header>
42 <section class="sample-view">
43 This is <strong>sample</strong> text.
44 </section>
45 </section>
46 </article>
47 <article>
48 <h3>ID Selector : #</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52#example1 {
53 color: steelblue;
54}
55</pre>
56 <header><h4>HTML</h4></header>
57 <pre><span id="example1">This is sample text.</span></pre>
58 <header><h4>HTML+CSS</h4></header>
59 <section class="sample-view">
60 <span id="example1">This is sample text.</span>
61 </section>
62 </section>
63 </article>
64 <article>
65 <h3>Class Selector : .</h3>
66 <section>
67 <header><h4>CSS</h4></header>
68<pre class="sample">
69.example1 {
70 background-color: yellow;
71 font-weight: bold;
72}
73</pre>
74 <header><h4>HTML</h4></header>
75 <pre><span class="example1">This is sample text.</span></pre>
76 <header><h4>HTML+CSS</h4></header>
77 <section class="sample-view">
78 <section>
79 <span class="example1">This is sample text.</span>
80 </section>
81 </section>
82 </article>
83 <article>
84 <h3>Attribute Selector : [property=value]</h3>
85 <section>
86 <header><h4>CSS</h4></header>
87<pre class="sample">
88a[href="index.html"] {
89 font-weight: bold;
90}
91</pre>
92 <header><h4>HTML</h4></header>
93<pre>
94<a href="index.html">Home</a><br>
95<a href="about.html">About</a>
96</pre>
97 <header><h4>HTML+CSS</h4></header>
98 <section class="sample-view">
99 <a href="index.html">Home</a><br>
100 <a href="about.html">About</a>
101 </section>
102 </section>
103 </article>
104 <article>
105 <h3>Descendant Combinator</h3>
106 <section>
107 <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110 text-decoration: underline;
111}
112</pre>
113 <header><h4>HTML</h4></header>
114 <pre><span>This is <strong>sample</strong> text.</span></pre>
115 <header><h4>HTML+CSS</h4></header>
116 <section class="sample-view">
117 <span>This is <strong>sample</strong> text.</span>
118 </section>
119 </section>
120 </article>
121 <article>
122 <h3>Child Combinator : ></h3>
123 <section>
124 <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127 color: blue;
128}
129</pre>
130 <header><h4>HTML</h4></header>
131<pre>
132This is <em>sample</em> text.<br>
133<span>This is <em>another</em> text.</span><br>
134<span>This text is not <s><em>blue</em></s> in color.</span>
135</pre>
136 <header><h4>HTML+CSS</h4></header>
137 <section class="sample-view">
138 This is <em>sample</em> text.<br>
139 <span>This is <em>another</em> text.</span><br>
140 <span>This text is not <s><em>blue</em></s> in color.</span>
141 </section>
142 </section>
143 </article>
144 <article>
145 <h3> Next Sibling combinator : +</h3>
146 <section>
147 <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150 color: green;
151}
152</pre>
153 <header><h4>HTML</h4></header>
154<pre>
155<span>
156 This is <b>first text</b>.<br>
157 This is <b>second text</b>.<br>
158 <i>This</i> is <b>third text</b>.<br>
159</span>
160</pre>
161 <header><h4>HTML+CSS</h4></header>
162 <section class="sample-view">
163 <span>
164 This is <b>first text</b>.<br>
165 This is <b>second text</b>.<br>
166 <i>This</i> is <b>third text</b>.<br>
167 </span>
168 </section>
169 </section>
170 </article>
171 <article>
172 <h3>Subsequent Sibling Combinator : ~</h3>
173 <section>
174 <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177 color: steelblue;
178}
179</pre>
180 <header><h4>HTML</h4></header>
181<pre>
182<span>
183 This is <b>first text</b>.<br>
184 This is <b>second text</b>.<br>
185 <i>This</i> is <b>third text</b>.<br>
186</span>
187</pre>
188 <header><h4>HTML+CSS</h4></header>
189 <section class="sample-view">
190 <span>
191 This is <b>first text</b>.<br>
192 This is <b>second text</b>.<br>
193 <i>This</i> is <b>third text</b>.<br>
194 </span>
195 </section>
196 </section>
197 </article>
198 <article>
199 <h3>Pseudo Class ":" </h3>
200 <section>
201 <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204 background-color: lightskyblue;
205}
206</pre>
207 <header><h4>HTML</h4></header>
208<pre>
209 <a href="#">Click here</a><br>
210</pre>
211 <header><h4>HTML+CSS</h4></header>
212 <section class="sample-view">
213 <a href="#">Click here</a><br>
214 </section>
215 </section>
216 </article>
217 <article>
218 <h3>Pseudo Element "::" </h3>
219 <section>
220 <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223 content: " ** ";
224 color: red;
225 font-weight: bold;
226}
227</pre>
228 <header><h4>HTML</h4></header>
229<pre>
230 <u>Sample Text</u>
231</pre>
232 <header><h4>HTML+CSS</h4></header>
233 <section class="sample-view">
234 <u>Sample Text</u>
235 </section>
236 </section>
237 </article>
238 </main>
239
240 <main>
241 <header><h2>Inheritance & Priority of CSS</h2></header>
242 <article>
243 <h3>CSS Specificity Rule</h3>
244 <section>
245 <header><h4>CSS Specificity</h4></header>
246 <section class="example">
247 <ol>
248 <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249 <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251 <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252 <li><b>Universal Selector</b>: <code>*</code></li>
253 </ol>
254 </section>
255
256 <header><h4>How Specificity is Calculated</h4></header>
257 <section class="example">
258 <ol>
259 <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260 <li><b>ID Selectors</b>: Worth 100 points each.</li>
261 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262 <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263 </ol>
264 </section>
265 </section>
266 </article>
267 <article>
268 <h3>Example of CSS Specificity Rule</h3>
269 <section>
270 <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274 color: blue;
275}
276
277/* Class Selector */
278.header {
279 color: red;
280}
281
282/* Element Selector */
283h1 {
284 color: green;
285}
286</pre>
287 <header><h4>HTML</h4></header>
288 <pre><h1 id="header" class="header">Example of CSS Specificity Rule</h1></pre>
289 <header><h4>HTML+CSS</h4></header>
290 <section class="sample-view">
291 <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292 </section>
293 </section>
294 </article>
295 <article>
296 <h3>Using <code>!important</code> in CSS</h3>
297 <section>
298 <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301 color: blue;
302}
303
304.important-header {
305 color: red !important;
306}
307</pre>
308 <header><h4>HTML</h4></header>
309 <pre><h1 id="important-header" class="important-header">Example of <code>!important</code></h1></pre>
310 <header><h4>HTML+CSS</h4></header>
311 <section class="sample-view">
312 <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313 </section>
314 </section>
315 </article>
316 <article>
317 <h3>CSS Inheritance</h3>
318 <section>
319 <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322 color: gray;
323}
324
325p {
326 color: black;
327}
328</pre>
329 <header><h4>HTML</h4></header>
330<pre>
331<footer>
332 <p>This paragraph's text will be black.</p>
333 <span>This text will be gray.</span>
334</footer>
335</pre>
336 <header><h4>HTML+CSS</h4></header>
337 <section class="sample-view">
338 <footer>
339 <p>This paragraph's text will be black.</p>
340 <span>This text will be gray.</span>
341 </footer>
342 </section>
343 </section>
344 </article>
345 <article>
346 <h3>Cascading Styles</h3>
347 <section>
348 <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351 color: red;
352}
353
354.text {
355 color: blue;
356}
357</pre>
358 <header><h4>HTML</h4></header>
359 <pre><p class="text">This text will be blue.</p></pre>
360 <header><h4>HTML+CSS</h4></header>
361 <section class="sample-view">
362 <p class="text">This text will be blue.</p>
363 </section>
364 </section>
365 </article>
366
367</body>
368</html>Sintaxe Básica
1selector {
2 property: value;
3}A estrutura básica do CSS consiste em seletor, propriedade e valor. Cada par de propriedades e valores é seguido por um ponto-e-vírgula.
seletorespecifica a qual elemento HTML o estilo se aplica. Neste exemplo, os estilos são aplicados a todos os elementos<header>.propriedadeespecifica a propriedade de estilo a ser alterada, como cor ou tamanho da fonte.Paddingecolorsão as propriedades neste exemplo.valoré o valor atribuído à propriedade. Por exemplo, para cor, pode serwhiteou#9cf, e para o tamanho da margem, pode ser20px.
Seletores
Seletores CSS são padrões para selecionar elementos HTML. Usando seletores, você pode aplicar estilos a elementos específicos ou grupos de elementos.
Seletor Universal
1/* Universal Selector : "*" */
2* {
3 font-family:'Courier New', Courier, monospace;
4}*é um seletor universal que se aplica a todos os elementos.- Neste exemplo, a fonte de todos os elementos é alterada.
Seletor de Elemento
1/* Element Selector */
2strong {
3 color: red;
4}- Um seletor de elemento é um seletor que se aplica a tags HTML específicas ao escrever o nome da tag HTML.
- Neste exemplo, a cor do texto do elemento
<strong>é alterada para vermelho.
Seletor de ID
1/* ID Selector : "#" */
2#example1 {
3 color: steelblue;
4}#é um seletor de ID usado para selecionar elementos por ID.- IDs são únicos, então só pode haver um elemento com o mesmo ID em uma única página.
Seletor de Classe
1/* Class Selector : "." */
2.example1 {
3 background-color: yellow;
4 font-weight: bold;
5}.é um seletor de classe usado para selecionar elementos por classe.- Adicione um atributo de classe aos elementos HTML para aplicar estilos aos elementos que pertencem a essa classe.
Seletor de Atributo
1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3 font-weight: bold;
4}[href="index.html"]é um seletor de atributo que seleciona elementos com um atributo específico.- Neste exemplo, o texto do elemento
<a>com um valor de atributohrefdeindex.htmlé definido como negrito.
Combinador
Combinadores são usados para combinar vários seletores para selecionar elementos que possuem relacionamentos específicos. Enquanto um seletor seleciona elementos individualmente, um combinador desempenha o papel de definir os relacionamentos estruturais entre elementos.
Combinador de Descendentes
1/* Descendant Combinator : " " */
2span strong {
3 text-decoration: underline;
4}- Um combinador de descendente aplica estilos a todos os elementos especificados dentro de um elemento específico.
- Neste exemplo, um sublinhado é aplicado aos elementos
<strong>dentro de elementos<span>.
Combinador de Filho
1/* Child Combinator : ">" */
2span > em {
3 color: blue;
4}- O sinal
>entrespaneemé usado como um combinador de filhos. Neste exemplo, os estilos são aplicados apenas aos elementos<em>que são filhos diretos dos elementos<span>. No exemplo da terceira linha, como há uma tag<s>entre as tags<span>e<em>, o estilo não é aplicado.
Combinador de Irmão Adjacente
1/* Next Sibling combinator */
2br + b {
3 color: green;
4}- O combinador de irmão adjacente usando o sinal
+aplica estilos a um elemento irmão que aparece imediatamente após um determinado elemento. - Neste exemplo, a cor do texto se torna verde somente se uma tag
<b>aparecer imediatamente após uma tag<br>.
Combinador de Irmão Geral
1/* Subsequent Sibling Combinator */
2br ~ b {
3 color: steelblue;
4}- O combinador de irmão geral usando o sinal
~seleciona todos os elementos irmãos que aparecem após um determinado elemento. - Neste exemplo, a cor do texto de todas as tags
<b>que aparecem após uma tag<br>será um tom de azul.
Pseudo-classes
1/* Pseudo Class : ":" */
2a:hover {
3 background-color: lightskyblue;
4}:é usado para selecionar pseudo-classes.- Detalhes sobre pseudo-classes serão explicados em outro artigo.
Pseudo-elementos
1/* Pseudo Element : "::" */
2u::before {
3 content: " ** ";
4 color: red;
5 font-weight: bold;
6}::é usado para selecionar pseudo-elementos.- Detalhes sobre pseudo-elementos também serão explicados em outro artigo.
Especificidade CSS
A precedência no CSS é crucial para entender como o CSS funciona e prevenir aplicações inesperadas de estilo. A prioridade do CSS determina qual regra é a mais poderosa quando várias regras CSS são aplicadas ao mesmo elemento. A prioridade do CSS é determinada principalmente pelos seguintes fatores.
- Estilos inline: Estilos escritos diretamente no HTML
- Seletores de ID ：
#id - Classes, Seletores de Atributo, Pseudo-classes ：
.class,[attribute=value],:hover, etc - Seletores de Elemento ：
div,h1,p, etc - Seletor Universal ：
*
Quanto mais acima na lista, maior a prioridade, e quanto mais abaixo, menor a prioridade.
Como Calcular a Especificidade
A prioridade do CSS é calculada quantificando o 'peso' de cada seletor. O peso de cada seletor é representado da seguinte forma.
- Estilos inline: Os estilos inline são os mais poderosos e sempre têm prioridade.
- Seletores de ID: Um seletor de ID corresponde a '100 pontos'.
- Classes, seletores de atributo, pseudo-classes: Estes correspondem a '10 pontos'.
- Seletores de elemento, pseudo-elementos: Estes correspondem a '1 ponto'.
A regra com a maior pontuação é aplicada.
Exemplo:
1/* ID Selector */
2#header {
3 color: blue;
4}
5
6/* Class Selector */
7.header {
8 color: red;
9}
10
11/* Element Selector */
12h1 {
13 color: green;
14}1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>Aqui, a tag <h1> possui três estilos diferentes aplicados:
- Seletor de elemento
h1(1 ponto) - Seletor de classe
.header(10 pontos) - Seletor de ID
#header(100 pontos)
Neste caso, como o seletor de ID tem a maior prioridade, color: blue é aplicado.
Substituindo prioridade com !important
Use !important se você deseja forçar um estilo e ignorar as prioridades usuais. !important tem a influência mais forte sobre todas as regras, sobrepondo-se a tudo o mais.
Exemplo:
1#important-header {
2 color: blue;
3}
4
5.important-header {
6 color: red !important;
7}1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>- Aqui,
color: red !important;é especificado, entãocolor: redtem precedência.
Herança e Prioridade
O CSS tem a capacidade de herdar estilos de elementos pai para elementos filho. Por exemplo, propriedades como color e font-family são herdadas por padrão. No entanto, se um elemento filho específico for estilizado diretamente, o estilo aplicado diretamente tem precedência sobre os estilos herdados.
Exemplo:
1footer {
2 color: gray;
3}
4
5p {
6 color: black;
7}1<footer>
2 <p>This paragraph's text will be black.</p>
3 <span>This text will be gray.</span>
4</footer>- Aqui,
color: gray;é aplicado à tagfooter, mas comocolor: black;é explicitamente especificado para o elementop, o texto do elementopé exibido em preto. Enquanto isso, o elementospanherda a propriedadecolordofootere aparece em cinza.
Cascata CSS e Prioridade
Como o nome 'Cascading Style Sheets (CSS)' sugere, os estilos 'cascateiam'. Isso significa que se houver várias folhas de estilo ou regras, a última regra definida tem precedência. Se as prioridades forem as mesmas, o estilo escrito mais tarde é aplicado.
Exemplo:
1.text {
2 color: red;
3}
4
5.text {
6 color: blue;
7}1<p class="text">This text will be blue.</p>- Aqui,
color: blue;é definido depois, então o texto é exibido em azul.
Resumo
A precedência do CSS é determinada usando algoritmos como a especificidade, mas aqui consideramos apenas as partes básicas.
As regras básicas são as seguintes:
- Estilos inline sempre têm a maior prioridade.
- Seletores de ID são poderosos e têm precedência sobre classes e tags.
- Seletores de classe e pseudo-classes têm um nível moderado de precedência.
- Seletores de tag e pseudo-elementos têm o nível mais baixo de precedência.
- !important sobrepõe a precedência normal e aplica o estilo à força.
Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.