ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ ΡΠ°Π·Π΄Π΅Π»Ρ:
Cascading & inheritanceΠΡΠΎ ΠΏΡΡΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° CSS Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
. Π Π½Π΅ΠΌ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ±ΠΎΡΠΎΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»ΠΈ ΠΈ ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΡ.
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΊ ΡΠ΅Π³Π°ΠΌ Π² ΡΠ°Π±Π»ΠΎΠ½Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΈ ΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΡΠ°Π±Π»ΠΎΠ½Π΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ: Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ
Π Π°Π½Π΅Π΅ ΠΌΡ ΡΠΆΠ΅ Π²ΡΡΡΠ΅ΡΠ°Π»ΠΈΡΡ Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌΠΈ. ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΡΡΠΎΠΊΡ Π² ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ Π²ΠΈΠ΄Π°:
strong {
color: red;
}
Π ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΠΈ CSS ΡΡΠ° ΡΡΡΠΎΠΊΠ° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ CSS. ΠΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΡΠΎ strong
, ΡΡΠΎ ΠΈ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ CSS. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ, ΠΊ ΠΊΠ°ΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ DOM ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ.
Π§Π°ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠΈΠ³ΡΡΠ½ΡΡ ΡΠΊΠΎΠ±ΠΎΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ.
ΠΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ color
- ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Π° red
- Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
Π’ΠΎΡΠΊΠ° Ρ Π·Π°ΠΏΡΡΠΎΠΉ ΠΏΠΎΡΠ»Π΅ ΠΏΠ°ΡΡ "ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅" ΠΎΡΠ΄Π΅Π»ΡΠ΅Ρ Π΅Ρ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ ΠΏΠ°Ρ "ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅" Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΈ.
ΠΡΠΎΡ ΡΡΠ΅Π±Π½ΠΈΠΊ ΡΡΡΠ»Π°Π΅ΡΡΡ Π½Π° ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΡΠΈΠΏΠ° strong
ΠΊΠ°ΠΊ Π½Π° ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΡΠ΅Π³Π°. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS ΡΡΡΠ»Π°Π΅ΡΡΡ Π½Π° Π½Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π½Π° ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΡΠΈΠΏΠ°.
ΠΠ° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΡΠ΅Π±Π½ΠΈΠΊΠ° ΠΎΠ±ΡΡΡΠ½ΡΡΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ CSS.
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΈΠΌΠ΅Π½Π°ΠΌ ΡΠ΅Π³ΠΎΠ², Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ². ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²Π°ΡΠΈΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ Π±ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ·Π±ΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ.
ΠΠ²Π° Π°ΡΡΠΈΠ±ΡΡΠ° ΠΈΠΌΠ΅ΡΡ ΠΎΡΠΎΠ±ΡΠΉ ΡΡΠ°ΡΡΡ Π² CSS. ΠΡΠΎ class
ΠΈ id
.
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΊΠ»Π°ΡΡΠΎΠ²
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ class
Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΡΡΠΎΠ±Ρ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½Π½ΠΎΠΌΡ ΠΊΠ»Π°ΡΡΡ. ΠΡΠ±ΠΎΡ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ° ΡΠ΅Π»ΠΈΠΊΠΎΠΌ Π·Π° Π²Π°ΠΌΠΈ. ΠΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ°.
Π Π²Π°ΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΡΠΊΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ° Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΅Π³ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°.
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ID
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ id Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΡΡΠΎΠ±Ρ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²Π°Ρ, ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠΌΡ Π²Ρ Π²ΡΠ±Π΅ΡΠ΅ΡΠ΅ Π΄Π»Ρ ID. ΠΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠΌΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅.
Π ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Π²Π²Π΅Π΄ΠΈΡΠ΅ Π·Π½Π°ΠΊ ΡΠ΅ΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π΅Π³ΠΎ Π² ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ΅.
class
ΠΈ id
:
<p class="key" id="principal">
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ° id, principal
, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, Π½ΠΎ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠ³ΠΈ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΈΠΌΡ class ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ key
.
ΠΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄Π΅Π»Π°Π΅Ρ Π²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ(class) ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌkey
Π·Π΅Π»ΡΠ½ΡΠΌΠΈ. (ΠΠ½ΠΈ Π΄Π°ΠΆΠ΅ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ <p>
.)
.key {
color: green;
}
ΠΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ (id) ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ principal
ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΌ:
#principal {
font-weight: bolder;
}
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΡΡΠΈΠ±ΡΡΠΎΠ²
ΠΡ Π½Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ Π΄Π²ΡΠΌΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΌΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ, class
ΠΈ id
. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΠ΅ ΡΠΊΠΎΠ±ΠΊΠΈ. ΠΠ½ΡΡΡΠΈ ΡΠΊΠΎΠ±ΠΎΠΊ Π²Ρ Π·Π°Π΄Π°ΡΡΠ΅ ΠΈΠΌΡ Π°ΡΡΠΈΠ±ΡΡΠ°, ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΊ ΡΠ΅Π³ΠΈΡΡΡΡ Π΅ΡΠ»ΠΈ Π΄ΠΎΠΏΠΈΡΠ°ΡΡ " i" ΠΏΠΎΡΠ»Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π½ΠΎ ΠΏΠΎΠΊΠ° Π½Π΅ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ. ΠΡΠΈΠΌΠ΅ΡΡ:
[disabled]
- ΠΡΠ±ΠΈΡΠ°Π΅Ρ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ "disabled".
[type='button']
- ΠΡΠ±ΠΈΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΠΈΠΏΠΎΠΌ "button".
[class~=key]
- ΠΡΠ±ΠΈΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠ»Π°ΡΡΠ°(class) "key" (Π½ΠΎ Π½Π΅ ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ "keyed", "monkey", "buckeye"). ΠΠΎ ΡΡΡΠΈ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ
.key
. [lang|=es]
- ΠΡΠ±ΠΈΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠ΅ ΠΊΠ°ΠΊ Spanish. ΠΡΠΎ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ "es" ΠΈ "es-MX" Π½ΠΎ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ "eu-ES" (ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ·ΡΠΊΠΎΠΌ Basque).
- [title*="example" i]
- ΠΡΠ±ΠΈΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΠΎΡΡΠ°Π² ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΎΠ΄ΠΈΡ "example", ΠΈΠ³Π½ΠΎΡΠΈΡΡΡ ΡΠ΅Π³ΠΈΡΡΡ. Π Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ»Π°Π³ "i", ΡΡΠΎΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
a[href^="https://"]
- ΠΡΠ±ΠΈΡΠ°Π΅Ρ Π²ΡΠ΅ Π·Π°ΡΠΈΡΡΠ½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ.
img[src$=".png"]
- ΠΠΎΡΠ²Π΅Π½Π½ΠΎ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ PNG; Π»ΡΠ±ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ PNG Π½ΠΎ, ΡΠ΅ΠΉ Π°Π΄ΡΠ΅Ρ URL Π½Π΅ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ".png" (ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π² ΡΡΡΠΎΠΊΠ΅ Π·Π°ΠΏΡΠΎΡΠ°) Π½Π΅ Π±ΡΠ΄ΡΡ Π²ΡΠ±ΡΠ°Π½Ρ.
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ°
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΠΊΠ»Π°ΡΡΠ° CSS - ΡΡΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠ΅ Π² ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°Π΄Π°Π΅Ρ ΠΎΡΠΎΠ±ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ : hover
ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡ ΡΡΠΈΠ»Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ.
ΠΡΠ΅Π²Π΄ΠΎ-ΠΊΠ»Π°ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π΄Π΅ΡΠ΅Π²Π° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², Π½ΠΎ ΠΈ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΡΠ°ΠΊΡΠΎΡΠ°ΠΌ, ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ ΠΈΡΡΠΎΡΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΎΡΠ° (:visited
, Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°), ΡΡΠ°ΡΡΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ (Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠΈ :checked
Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
ΡΠΎΡΠΌΡ) ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ (Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠΈ :hover
ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ·Π½Π°ΡΡ, Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π»ΠΈ ΠΌΡΡΡ Π½Π°Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΠ»ΠΈ Π½Π΅Ρ). Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ², ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ CSS3 Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠ°Π±ΠΎΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ².
selector:pseudo-class {
property: value;
}
Π‘ΠΏΠΈΡΠΎΠΊ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ²
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ: Π‘ΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΡ
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ°Π²ΠΈΠ» ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈ ΡΠΎΠΌΡ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π·Π°Π΄Π°Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ, ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ, ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅. ΠΡΠ»ΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΡΠΎΠ³Π΄Π° CSS Π΄Π°Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ ID Π±ΠΎΠ»Π΅Π΅ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅Π½, ΡΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΊΠ»Π°ΡΡΠ°, ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° ΠΈΠ»ΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, Π±ΠΎΠ»Π΅Π΅ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅Π½, ΡΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΡΠ΅Π³ΠΎΠ² ΠΈΠ»ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅Π»Π΅ΠΊΡΠΎΡ .key
Π²ΡΠ±ΠΈΡΠ°Π΅Ρ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Ρ ΠΊΠ»ΡΡΠΎΠΌ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ° key
. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ p.key
ΠΎΡΠ±ΠΈΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ <p>
ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° key
.
ΠΡΠ»ΠΈ ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠΈΠ²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΠΈ ΠΎΠ½ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½Ρ, ΡΠΎΠ³Π΄Π° CSS Π΄Π°Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·ΠΆΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΡΡΡΠΈΠΌΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌΠΈ, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ ΡΡΠΎ, ΡΠ΄Π΅Π»Π°Π² ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠ°Π²ΠΈΠ» Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π»ΠΎ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ. ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠ°Π²ΠΈΠ» Π±Π»ΠΈΠΆΠ΅ ΠΊ ΠΊΠΎΠ½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π»ΠΎ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ: Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΉ
CSS ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π²ΡΠ±ΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ , ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌΠΈ.
Π‘Π΅Π»Π΅ΠΊΡΠΎΡ | ΠΡΠ±ΡΠ°Π½ΠΎ |
A E |
ΠΡΠ±ΠΎΠΉ E ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· A ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΠΎ Π΅ΡΡΡ: Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ, ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ, Ρ.Π΄.) |
A > E |
ΠΡΠ±ΠΎΠΉ E ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠΎ ΡΠ²Π»Π΅ΡΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ (Ρ.Π΅. ΠΏΡΡΠΌΠΎΠΉ ΠΏΠΎΡΠΎΠΌΠΎΠΊ) A ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
E:first-child |
ΠΡΠ±ΠΎΠΉ E ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
B + E |
ΠΡΠ±ΠΎΠΉ E ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ "Π±ΡΠ°ΡΠΎΠΌ" B ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΠΎ Π΅ΡΡΡ: ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ΅Π±Π΅Π½ΠΎΠΊ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ) |
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ Π΄Π»Ρ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΉ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΠΊ ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΌΠ²ΠΎΠ» *
(Π·Π²Π΅Π·Π΄ΠΎΡΠΊΠ°), ΡΡΠΎ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅Ρ "Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ".
Π’Π°Π±Π»ΠΈΡΠ° HTML ΠΈΠΌΠ΅Π΅Ρ Π°ΡΡΡΠΈΠ±ΡΡ id
, Π½ΠΎ ΡΡΡΠΎΠΊΠΈ ΠΈ ΡΡΠ΅ΠΉΠΊΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ²:
<table id="data-table-1">
...
<tr>
<td>Prefix</td>
<td>0001</td>
<td>default</td>
</tr>
...
ΠΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° Π΄Π΅Π»Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ ΡΡΠ΅ΠΉΠΊΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΠΎΠΉ, Π° "Π±ΡΠ°Ρ" ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΡΠ΅ΠΉΠΊΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π·Π°ΡΠ΅ΡΠΊΠ½ΡΡΠΎΠΉ (Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 2-Ρ ΡΡΠ΅ΠΉΠΊΠ°) . ΠΠ½ΠΈ Π²Π»ΠΈΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΎΠ΄Π½Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅::
#data-table-1 td:first-child {text-decoration: underline;}
#data-table-1 td:first-child + td {text-decoration: line-through;}
Π Π΅Π·ΡΠ»ΡΠ°Ρ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠΈ:
|
ΠΠ±ΡΡΠ½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ, Π΅ΡΠ»ΠΈ Π²Ρ Π΄Π΅Π»Π°Π΅ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌ, Π²Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΠ΅ Π΅Π³ΠΎ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ.
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ, Π²Ρ ΠΈΠ·Π±Π΅Π³Π°Π΅ΡΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ°Ρ
class
ΠΈΠ»ΠΈ id
Π½Π° ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅ ΡΠ΅Π³ΠΎΠ² Π² Π²Π°ΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ, CSS Π²ΡΠΏΠΎΠ»Π½ΠΈΡ ΡΡΡ ΡΠ°Π±ΠΎΡΡ.
Π Π±ΠΎΠ»ΡΡΠΈΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡΡ , Π³Π΄Π΅ ΡΠΊΠΎΡΠΎΡΡΡ Π²Π°ΠΆΠ½Π°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ, ΠΈΠ·Π±Π΅Π³Π°Ρ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΏΡΠ°Π²ΠΈΠ», ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΎ ΡΠ°Π±Π»ΠΈΡΠ°Ρ , ΡΠΌΠΎΡΡΠΈΡΠ΅ Tables Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΡΡΠ»ΠΎΠΊ CSS.
ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅: ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² class ΠΈ ID
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ HTML-ΡΠ°ΠΉΠ» ΠΈ ΠΏΡΠΎΠ΄ΡΠ±Π»ΠΈΡΡΠΉΡΠ΅ Π°Π±Π·Π°Ρ, ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π² Π΅Π³ΠΎ ΠΈ Π²ΡΡΠ°Π²ΠΈΠ² Π² Π½Π΅Π³ΠΎ.
- ΠΠ°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΡΠΈΠ±ΡΡΡ id ΠΈ class Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΊΠΎΠΏΠΈΡ, Π° Π°ΡΡΡΠΈΠ±ΡΡ id Π²ΠΎ Π²ΡΠΎΡΡΡ ΠΊΠΎΠΏΠΈΡ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΈ Π²ΡΡΠ°Π²ΡΡΠ΅ Π²Π΅ΡΡ ΡΠ°ΠΉΠ» ΡΠ½ΠΎΠ²Π°:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p id="first"> <strong class="carrot">C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets </p> <p id="second"> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html>
- Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΠ» CSS. ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ Π²ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π°:
strong { color: red; } .carrot { color: orange; } .spinach { color: green; } #first { font-style: italic; }
- Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
Cascading Style Sheets Cascading Style Sheets ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΡΡΡΠΎΠΈΡΡ ΡΡΡΠΎΠΊΠΈ Π² Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»Π΅ CSS, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°.
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΊΠ»Π°ΡΡΠΎΠ²
.carrot
ΠΈ.spinach
ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ Π½Π°Π΄ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ ΡΠ΅Π³Π°strong
.Π‘Π΅Π»Π΅ΠΊΡΠΎΡ ID
#first
ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ Π½Π°Π΄ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌΠΈ ΠΊΠ»Π°ΡΡ ΠΈ ΡΠ΅Π³.
- ΠΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉ HTML-ΡΠ°ΠΉΠ», Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π² ΡΠ²ΠΎΠΉ CSS-ΡΠ°ΠΉΠ» ΠΎΠ΄Π½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ Π²ΡΠ΅ Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ Π±ΡΠΊΠ²Ρ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ²Π΅ΡΠ°, ΡΡΠΎ ΠΈ ΡΠ΅ΠΉΡΠ°Ρ, Π½ΠΎ Π΄Π΅Π»Π°Π΅Ρ Π²Π΅ΡΡ ΡΠ΅ΠΊΡΡ Π²ΠΎ Π²ΡΠΎΡΠΎΠΌ Π°Π±Π·Π°ΡΠ΅ ΡΠΈΠ½ΠΈΠΌ:
Cascading Style Sheets Cascading Style Sheets - Π’Π΅ΠΏΠ΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ (Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ Π½ΠΈΡΠ΅Π³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ), ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ Π°Π±Π·Π°Ρ ΡΠΈΠ½ΠΈΠΌ:
Cascading Style Sheets Cascading Style Sheets
- Add a rule with an ID selector of
#second
and a declarationcolor: blue;
, as shown below:
A more specific selector,#second { color: blue; }
p#second
also works. - Change the selector of the new rule to be a tag selector using
p
:p { color: blue; }
ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅: ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ°
- Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ HTML-ΡΠ°ΠΉΠ» ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> </body> </html>
- Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΠ» CSS. ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ Π²ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π°:
a.homepage:link, a.homepage:visited { padding: 1px 10px 1px 10px; color: #fff; background: #555; border-radius: 3px; border: 1px outset rgba(50,50,50,.5); font-family: georgia, serif; font-size: 14px; font-style: italic; text-decoration: none; } a.homepage:hover, a.homepage:focus, a.homepage:active { background-color: #666; }
- Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ (Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠ»ΠΊΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡ):
ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ Π½Π°ΡΠ΅ΠΉ ΠΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°
ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅: ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΉ ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ²
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ², ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ Π½Π° ΡΠ²ΡΠ·ΡΡ ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ°Ρ , Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ Π°Π»Π³ΠΎΡΠΈΡΠΌΡ. ΠΡΠΎ ΠΎΠ±ΡΡΠ½Π°Ρ ΡΠ΅Ρ Π½ΠΈΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠ°Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΈΡΡΠΎ-CSS Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ( ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ CSS, Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ JavaScript). Π‘ΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ Π²ΠΈΠ΄Π°:
div.menu-bar ul ul {
display: none;
}
div.menu-bar li:hover > ul {
display: block;
}
Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊ ΡΡΡΡΠΊΡΡΡΠ΅ HTML, Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠΈ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ:
<div class="menu-bar">
<ul>
<li>
<a href="example.html">Menu</a>
<ul>
<li>
<a href="example.html">Link</a>
</li>
<li>
<a class="menu-nav" href="example.html">Submenu</a>
<ul>
<li>
<a class="menu-nav" href="example.html">Submenu</a>
<ul>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π½Π°Ρ ΠΏΠΎΠ»Π½ΡΠΉ ΠΡΠΈΠΌΠ΅Ρ CSS-ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠΉ ΡΠ΅ΠΏΠ»ΠΈΠΊΠΈ.
Π§ΡΠΎ Π΄Π°Π»ΡΡΠ΅?
ΠΠ°ΡΠ° ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΈ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ. Π‘Π»Π΅Π΄ΡΡΡΠ°Ρ ΡΠ΅ΠΊΡΠΈΡ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΠΏΡΡΠΈ CSS Π»Π΅Π³ΠΊΠΎΠ³ΠΎ ΡΡΠ΅Π½ΠΈΡ. ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ°Π·Π΄Π΅Π»Ρ:
Readable CSS