Podstawy CSS
Ten artykuł wyjaśnia podstawy CSS.
Możesz dowiedzieć się o selektorach CSS, kombinatorach i specyficzności.
YouTube Video
HTML/CSS do podglądu
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>Podstawowa składnia
1selector {
2 property: value;
3}Podstawowa struktura CSS składa się z selektora, właściwości i wartości. Każda para właściwości i wartości jest zakończona średnikiem.
Selektorokreśla, do którego elementu HTML ma zostać zastosowany styl. W tym przykładzie style są stosowane do wszystkich elementów<header>.Właściwośćokreśla właściwość stylu, którą należy zmienić, np. kolor lub rozmiar czcionki.Paddingicolorsą właściwościami w tym przykładzie.Wartośćto wartość przypisana do właściwości. Na przykład dla koloru może być towhitelub#9cf, a dla rozmiaru marginesu może to być20px.
Selektory
Selektory CSS to wzorce służące do wybierania elementów HTML. Korzystając z selektorów, możesz stosować style do konkretnych elementów lub grup elementów.
Uniwersalny selektor
1/* Universal Selector : "*" */
2* {
3 font-family:'Courier New', Courier, monospace;
4}*jest uniwersalnym selektorem, który ma zastosowanie do wszystkich elementów.- W tym przykładzie zmieniono czcionkę dla wszystkich elementów.
Selektor elementów
1/* Element Selector */
2strong {
3 color: red;
4}- Selektor elementów to selektor, który stosuje się do określonych tagów HTML poprzez zapisanie nazwy tagu HTML.
- W tym przykładzie kolor tekstu elementu
<strong>został zmieniony na czerwony.
Selektor ID
1/* ID Selector : "#" */
2#example1 {
3 color: steelblue;
4}#to selektor ID używany do wybierania elementów na podstawie ich ID.- Identyfikatory (ID) są unikalne, więc na jednej stronie może być tylko jeden element z takim samym ID.
Selektor klasy
1/* Class Selector : "." */
2.example1 {
3 background-color: yellow;
4 font-weight: bold;
5}.to selektor klasy używany do wybierania elementów na podstawie ich klasy.- Dodaj atrybut klasy do elementów HTML, aby zastosować style do elementów należących do tej klasy.
Selektor atrybutu
1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3 font-weight: bold;
4}[href="index.html"]to selektor atrybutu, który wybiera elementy o określonym atrybucie.- W tym przykładzie tekst elementu
<a>z wartością atrybutuhrefrównąindex.htmljest ustawiony na pogrubiony.
Kombinator
Kombinatory są używane do łączenia wielu selektorów w celu wybrania elementów o określonych relacjach. Podczas gdy selektor wybiera pojedyncze elementy, kombinator definiuje relacje strukturalne między elementami.
Kombinator potomków
1/* Descendant Combinator : " " */
2span strong {
3 text-decoration: underline;
4}- Kombinator potomków stosuje style do wszystkich określonych elementów znajdujących się w danym elemencie.
- W tym przykładzie podkreślenie jest stosowane do elementów
<strong>znajdujących się w elementach<span>.
Kombinator bezpośrednich dzieci
1/* Child Combinator : ">" */
2span > em {
3 color: blue;
4}- Znak
>międzyspanaemjest używany jako kombinator bezpośrednich dzieci. W tym przykładzie style są stosowane tylko do elementów<em>, które są bezpośrednimi dziećmi elementów<span>. W przykładzie z trzeciej linii, ponieważ między tagami<span>i<em>znajduje się tag<s>, styl nie jest stosowany.
Kombinator sąsiadujących elementów w rodzeństwie
1/* Next Sibling combinator */
2br + b {
3 color: green;
4}- Sąsiedni kombinator rodzeństwa używający znaku
+stosuje style do elementu rodzeństwa, który pojawia się bezpośrednio po określonym elemencie. - W tym przykładzie kolor tekstu staje się zielony tylko wtedy, gdy znacznik
<b>pojawia się bezpośrednio po znaczniku<br>.
Ogólny kombinator rodzeństwa
1/* Subsequent Sibling Combinator */
2br ~ b {
3 color: steelblue;
4}- Ogólny kombinator rodzeństwa używający znaku
~wybiera wszystkie elementy rodzeństwa, które pojawiają się po określonym elemencie. - W tym przykładzie kolor tekstu wszystkich znaczników
<b>, które pojawiają się po znaczniku<br>, będzie w odcieniu niebieskiego.
Pseudoklasy
1/* Pseudo Class : ":" */
2a:hover {
3 background-color: lightskyblue;
4}:służy do wybierania pseudoklas.- Szczegóły dotyczące pseudoklas zostaną wyjaśnione w innym artykule.
Pseudo-elementy
1/* Pseudo Element : "::" */
2u::before {
3 content: " ** ";
4 color: red;
5 font-weight: bold;
6}- Do wybierania pseudoelementów używa się
::. - Szczegóły dotyczące pseudoelementów zostaną również wyjaśnione w innym artykule.
Specyfika CSS
Priorytet w CSS jest kluczowy dla zrozumienia działania CSS i zapobiegania nieoczekiwanym zastosowaniom stylów. Priorytet CSS określa, która reguła jest najsilniejsza, gdy do tego samego elementu stosowanych jest wiele reguł CSS. Priorytet CSS jest głównie określany przez następujące czynniki.
- Style wbudowane: Style zapisane bezpośrednio w kodzie HTML
- Selektory ID ：
#id - Klasy, selektory atrybutów, pseudoklasy ：
.class,[attribute=value],:hover, etc - Selektory elementów ：
div,h1,p, etc - Uniwersalny selektor ：
*
Im wyżej na liście, tym wyższy priorytet, a im niżej, tym niższy priorytet.
Jak obliczyć specyficzność
Priorytet CSS jest obliczany poprzez określenie 'wagi' każdego selektora. Waga każdego selektora jest reprezentowana w następujący sposób.
- Styl inline: Style inline są najsilniejsze i zawsze mają najwyższy priorytet.
- Selektory ID: Jeden selektor ID odpowiada 100 punktom.
- Klasy, selektory atrybutów, pseudoklasy: Te odpowiadają 10 punktom.
- Selektory elementów, pseudoelementy: Te odpowiadają 1 punktowi.
Zastosowana zostaje reguła z najwyższym wynikiem.
Przykład:
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>Tutaj do elementu <h1> zastosowano trzy różne style:
- Selektor elementu
h1(1 punkt) - Selektor klasy
.header(10 punktów) - Selektor ID
#header(100 punktów)
W tym przypadku, ponieważ selektor ID ma najwyższy priorytet, zastosowano color: blue.
Nadpisywanie priorytetu za pomocą !important
Użyj !important, jeśli chcesz wymusić styl i zignorować standardowe priorytety. !important ma największy wpływ na wszystkie reguły, nadpisując wszystko inne.
Przykład:
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>- Tutaj określono
color: red !important;, więccolor: redma priorytet.
Dziedziczenie i priorytet
CSS ma możliwość dziedziczenia stylów z elementów rodzica na elementy potomne. Na przykład, właściwości takie jak color i font-family są domyślnie dziedziczone. Jednak jeśli konkretny element potomny jest bezpośrednio stylizowany, styl bezpośrednio zastosowany ma pierwszeństwo przed stylami dziedziczonymi.
Przykład:
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>- Tutaj
color: gray;jest zastosowane dla tagufooter, ale ponieważ dla elementupjawnie określonocolor: black;, tekst elementupjest wyświetlany na czarno. Tymczasem elementspandziedziczy właściwośćcolorzfooteri wyświetlany jest na szaro.
Kaskadowość i priorytet CSS
Jak wskazuje nazwa 'Kaskadowe Arkusze Stylów (CSS)', style kaskadują. Oznacza to, że jeśli istnieje wiele arkuszy stylów lub reguł, ostatnia zdefiniowana reguła ma pierwszeństwo. Jeśli priorytety są takie same, stosuje się styl zapisany później.
Przykład:
1.text {
2 color: red;
3}
4
5.text {
6 color: blue;
7}1<p class="text">This text will be blue.</p>- Tutaj
color: blue;jest zdefiniowany później, więc tekst wyświetlany jest na niebiesko.
Podsumowanie
Priorytet CSS jest określany za pomocą algorytmów takich jak specyficzność, ale tutaj wzięliśmy pod uwagę tylko podstawowe elementy.
Podstawowe zasady są następujące:
- Style wewnętrzne (inline) zawsze mają najwyższy priorytet.
- Selektory ID są silne i mają pierwszeństwo przed klasami i znacznikami.
- Selektory klas i pseudoklas mają umiarkowany poziom priorytetu.
- Selektory znaczników i pseudoelementów mają najniższy poziom priorytetu.
- !important nadpisuje zwykły priorytet i wymusza zastosowanie stylu.
Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.