Css классы ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹: Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΈ классы | htmlbook.ru

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ | CSS | WebReference

Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ опрСдСляСт ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ имя элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для измСнСния Π΅Π³ΠΎ стиля ΠΈ обращСния ΠΊ Π½Π΅ΠΌΡƒ Ρ‡Π΅Ρ€Π΅Π· скрипты.

Бинтаксис

#<Имя ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°> { ОписаниС ΠΏΡ€Π°Π²ΠΈΠ» стиля }

ΠŸΡ€ΠΈ описании ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° Π²Π½Π°Ρ‡Π°Π»Π΅ указываСтся символ Ρ€Π΅ΡˆΡ‘Ρ‚ΠΊΠΈ (#), Π·Π°Ρ‚Π΅ΠΌ ΠΈΠ΄Ρ‘Ρ‚ имя ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°. Оно Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с латинского символа ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π² сСбС символ дСфиса (-) ΠΈ подчСркивания (_). ИспользованиС русских Π±ΡƒΠΊΠ² Π² ΠΈΠΌΠ΅Π½Π°Ρ… ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° нСдопустимо. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ классов ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹, ΠΈΠ½Ρ‹ΠΌΠΈ словами, Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒΡΡ Π² ΠΊΠΎΠ΄Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·.

ΠžΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ΠΊ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ происходит с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° id, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ выступаСт имя ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° (id=»header»). Π‘ΠΈΠΌΠ²ΠΎΠ» Ρ€Π΅ΡˆΡ‘Ρ‚ΠΊΠΈ ΠΏΡ€ΠΈ этом ΡƒΠΆΠ΅ Π½Π΅ указываСтся.

Бинтаксис
ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠŸΡ€ΠΈΠΌΠ΅Ρ€
<Ρ‚ΠΈΠΏ>Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΈΠΏ значСния.<Ρ€Π°Π·ΠΌΠ΅Ρ€>
AΒ &&Β BЗначСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ порядкС.<Ρ€Π°Π·ΠΌΠ΅Ρ€> && <Ρ†Π²Π΅Ρ‚>
A | BΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π½Π°Π΄ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ· ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… (A ΠΈΠ»ΠΈ B).normal | small-caps
A || BКаТдоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ»ΠΈ совмСстно с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠΌ порядкС.width || count
[ ]Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠ΅Ρ‚ значСния.[ crop || cross ]
*ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ноль ΠΈΠ»ΠΈ большС Ρ€Π°Π·.[,<врСмя>]*
+ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ большС Ρ€Π°Π·.<число>+
?Π£ΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Ρ‚ΠΈΠΏ, слово ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΠ° Π½Π΅ являСтся ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.inset?
{A, B}ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ A, Π½ΠΎ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ B Ρ€Π°Π·. <радиус>{1,4}
#ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ большС Ρ€Π°Π· Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ.<врСмя>#

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹</title> <style> #help { position: absolute; /* ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ */ left: 160px; /* ПолоТСниС элСмСнта ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края */ top: 50px; /* ПолоТСниС ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края */ width: 225px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° */ padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ background: #f0f0f0; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ } </style> </head> <body> <div> Π­Ρ‚ΠΎΡ‚ элСмСнт ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² случаС, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ΡΡŒ Π² осознании Ρ‚ΠΎΠ³ΠΎ Ρ„Π°ΠΊΡ‚Π°, Ρ‡Ρ‚ΠΎ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, ΠΊΡ‚ΠΎ ΠΈ ΠΊΠ°ΠΊ Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ. ИмСнно Π² этот ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΌΡ‹ ΠΈ подсказываСм, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ смоТСт. </div> </body> </html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис.Β 1.

Рис. 1. Π’ΠΈΠ΄ тСкста, ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½ΠΎΠ³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Internet Explorer Π΄ΠΎ вСрсии 7 ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ, Ссли ΠΎΠ½ΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ с сСлСкторами элСмСнтов ΠΈΠ»ΠΈ классами.

БпСцификация

БпСцификацияБтатус
CSS Selectors Level 3РСкомСндация
CSS 2.1РСкомСндация
CSS 1РСкомСндация
БпСцификация

КаТдая спСцификация ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ нСсколько стадий одобрСния.

  • Recommendation (РСкомСндация) β€” спСцификация ΠΎΠ΄ΠΎΠ±Ρ€Π΅Π½Π° W3C ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π° ΠΊΠ°ΠΊ стандарт.
  • Candidate Recommendation (ВозмоТная рСкомСндация) β€” Π³Ρ€ΡƒΠΏΠΏΠ°, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰Π°Ρ Π·Π° стандарт, ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€Π΅Π½Π°, ΠΊΠ°ΠΊ ΠΎΠ½ соотвСтствуСт своим цСлям, Π½ΠΎ трСбуСтся ΠΏΠΎΠΌΠΎΡ‰ΡŒ сообщСства Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΏΠΎ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ стандарта.
  • Proposed Recommendation (ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΠ°Ρ рСкомСндация) β€” Π½Π° этом этапС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ прСдставлСн Π½Π° рассмотрСниС ΠšΠΎΠ½ΡΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ совСта W3C для ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ утвСрТдСния.
  • Working Draft (Π Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚) β€” Π±ΠΎΠ»Π΅Π΅ зрСлая вСрсия Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊΠ° послС обсуТдСния ΠΈ внСсСния ΠΏΠΎΠΏΡ€Π°Π²ΠΎΠΊ для рассмотрСния сообщСством.
  • Editor’s draft (РСдакторский Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊ) β€” чСрновая вСрсия стандарта послС внСсСния ΠΏΡ€Π°Π²ΠΎΠΊ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  • Draft (Π§Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊ спСцификации) β€” пСрвая чСрновая вСрсия стандарта.

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

3.571213.511
1141
Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

Π’ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ обозначСния.

  • β€” элСмСнт ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ поддСрТиваСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ;
  • β€” элСмСнт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Π½Π΅ воспринимаСтся ΠΈ игнорируСтся;
  • β€” ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ появлСниС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ошибок, Π»ΠΈΠ±ΠΎ элСмСнт поддСрТиваСтся с ΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ.

Число ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Ρ€Π΅Π°, начиная с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ элСмСнт поддСрТиваСтся.

ЛСкция 10. ИспользованиС css, классы, ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹, сСлСкторы, ΠΏΡ€Π°Π²ΠΈΠ»Π° Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ Ρ‚ΠΎΠ½Π° ОглавлСниС

ЛСкция 10. ИспользованиС CSS, классы, ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹, сСлСкторы, ΠΏΡ€Π°Π²ΠΈΠ»Π° Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ Ρ‚ΠΎΠ½Π° 1

ОглавлСниС 1

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Ρ‚Π΅Π³ΠΎΠ² 1

ΠšΠ»Π°ΡΡΡ‹ 2

Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ 5

ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ 8

ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚Π½Ρ‹Π΅ сСлСкторы 9

БосСдниС сСлСкторы 11

Π”ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ сСлСкторы 14

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² 17

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ сСлСктор Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° 18

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ 19

Атрибут начинаСтся с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ значСния 19

Атрибут оканчиваСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ 20

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ встрСчаСтся Π² любом мСстС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° 21

Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ сСлСктор 22

ΠŸΡ€Π°Π²ΠΈΠ»Π° создания стиля 23

ΠŸΠΈΡˆΠΈΡ‚Π΅ всС ΠΏΡ€Π°Π²ΠΈΠ»Π° для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сСлСктора Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС 23

Π˜ΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π² ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅ 23

НачинайтС с сСлСкторов Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ уровня 24

Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ сСлСкторы с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ ΠΈ значСниями 24

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΈ классы 24

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠΉΡ‚Π΅ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ стилСвыС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ 25

Π’ качСствС сСлСктора ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ любой Ρ‚Π΅Π³ HTML, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€Π°Π²ΠΈΠ»Π° форматирования, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ: Ρ†Π²Π΅Ρ‚, Ρ„ΠΎΠ½, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Ρ‚. Π΄. ΠŸΡ€Π°Π²ΠΈΠ»Π° Π·Π°Π΄Π°ΡŽΡ‚ΡΡ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ Π²ΠΈΠ΄Π΅.

Π’Π΅Π³ { свойство1: Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅; свойство2: Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅; … }

Π’Π½Π°Ρ‡Π°Π»Π΅ указываСтся имя Ρ‚Π΅Π³Π°, ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ, Π·Π°Π³Π»Π°Π²Π½Ρ‹ΠΌΠΈ ΠΈΠ»ΠΈ строчными символами Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ значСния. Π’Π½ΡƒΡ‚Ρ€ΠΈ Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобок ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ свойство CSS, Π° послС двоСточия — Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Набор ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² раздСляСтся ΠΌΠ΅ΠΆΠ΄Ρƒ собой Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ с запятой ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ Π² ΠΎΠ΄Π½Ρƒ строку, Ρ‚Π°ΠΊ ΠΈ Π² нСсколько (ΠΏΡ€ΠΈΠΌΠ΅Ρ€Β 5.1).

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 5.1. ИзмСнСниС стиля Ρ‚Π΅Π³Π° ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π°

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

<title>Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Ρ‚Π΅Π³ΠΎΠ²</title>

<style type=»text/css»>

P {

text-align: justify; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ */

color: green /* Π—Π΅Π»Π΅Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ тСкста */

}

</style>

</head>

<body>

<p>Π‘ΠΎΠ»Π΅Π΅ эффСктивным способом Π»ΠΎΠ²Π»ΠΈ льва Π² пустынС

являСтся ΠΌΠ΅Ρ‚ΠΎΠ΄ Π·ΠΎΠ»ΠΎΡ‚ΠΎΠ³ΠΎ сСчСния. ΠŸΡ€ΠΈ Π΅Π³ΠΎ использовании пустыня дСлится

Π½Π° Π΄Π²Π΅ Π½Π΅Ρ€Π°Π²Π½Ρ‹Π΅ части, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… подчиняСтся ΠΏΡ€Π°Π²ΠΈΠ»Ρƒ Π·ΠΎΠ»ΠΎΡ‚ΠΎΠ³ΠΎ

сСчСния.</p>

</body>

</html>

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ измСняСтся Ρ†Π²Π΅Ρ‚ тСкста ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π°. Π‘Ρ‚ΠΈΠ»ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ тСксту, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ располагаСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° <P>.

ΠšΠ»Π°ΡΡΡ‹

ΠšΠ»Π°ΡΡΡ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚, ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ для ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта Π²Π΅Π±-страницы ΠΈΠ»ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ стили для ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π°. ΠŸΡ€ΠΈ использовании совмСстно с Ρ‚Π΅Π³Π°ΠΌΠΈ синтаксис для классов Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ.

Π’Π΅Π³.Имя класса { свойство1: Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅; свойство2: Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅; … }

Π’Π½ΡƒΡ‚Ρ€ΠΈ стилСвой Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π²Π½Π°Ρ‡Π°Π»Π΅ ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΉ Ρ‚Π΅Π³, Π° Π·Π°Ρ‚Π΅ΠΌ, Ρ‡Π΅Ρ€Π΅Π· Ρ‚ΠΎΡ‡ΠΊΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ имя класса. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π² ΠΊΠΎΠ΄Π΅ HTML, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π³ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ стилСм, ΠΊ Ρ‚Π΅Π³Ρƒ добавляСтся ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ (ΠΏΡ€ΠΈΠΌΠ΅Ρ€Β 6.1).

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 6. 1. ИспользованиС классов c Ρ‚Π΅Π³Π°ΠΌΠΈ

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

<title>ΠšΠ»Π°ΡΡΡ‹</title>

<style type=»text/css»>

P { /* ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„ */

text-align: justify; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ */

}

P.cite { /* ΠŸΠ°Ρ€Π°Π³Ρ€Π°Ρ„ с классом cite */

text-align: justify; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ */

color: navy; /* Π‘ΠΈΠ½ΠΈΠΉ Ρ†Π²Π΅Ρ‚ тСкста */

font-style: italic; /* ΠšΡƒΡ€ΡΠΈΠ²Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */

}

</style>

</head>

<body>

<p>ΠŸΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π° Π²Ρ‹Ρ‡ΠΈΡΠ»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΅ΡΡ‚ΡŒ

Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€ΡƒΠΊΠΈ с ΠΏΡ€Π΅Π΄ΠΏΠ»Π΅Ρ‡ΡŒΡΠΌΠΈ ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Π»ΠΈ прямой ΡƒΠ³ΠΎΠ», Π³Π»Π°Π·Π°

ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π° расстояниС 30-40 см ΠΎΡ‚ Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ повСрхности ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°.

ΠΠ°Π±ΠΈΡ€Π°Ρ‚ΡŒ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅ слСдуСт ΠΏΠΎΠ΄ΡƒΡˆΠ΅Ρ‡ΠΊΠ°ΠΌΠΈ ΠΏΠ°Π»ΡŒΡ†Π΅Π² ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΌΠΈ

отрывистыми ΡƒΠ΄Π°Ρ€Π°ΠΌΠΈ.</p>

<p class=»cite»>ΠŸΡ€Π΅Π΄Π΅Π»ΡŒΠ½ΠΎ

допустимая Π΄Π»ΠΈΠ½Π° Π½ΠΎΠ³Ρ‚Π΅ΠΉ для ΠΆΠ΅Π½Ρ‰ΠΈΠ½ составляСт 12-15 ΠΌΠΌ, для ΠΌΡƒΠΆΡ‡ΠΈΠ½ 3-5

ΠΌΠΌ. ΠŸΡ€ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ Π΄Π»ΠΈΠ½Ρ‹ Π½ΠΎΠ³Ρ‚Π΅ΠΉ Π·Π° Π½ΠΎΡ€ΠΌΡ‹ Ρ€Π΅Π³Π»Π°ΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ Π“ΠžΠ‘Π’ΠΎΠΌ, Π²ΠΎ

ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠΈ риска ΠΏΠΎΡ†Π°Ρ€Π°ΠΏΠ°Ρ‚ΡŒ ΠΏΠΎΠ²Π΅Ρ€Ρ…Π½ΠΎΡΡ‚ΡŒ дорогостоящСй Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ, ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€

допускаСтся ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π²Π΅Ρ€Ρ…ΠΎΠ½ΠΊΠ°Ρ….</p>

</body>

</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис.Β 6.1.

Рис. 6.1. Π’ΠΈΠ΄ тСкста, ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½ΠΎΠ³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π°Π±Π·Π°Ρ† Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ с тСкстом Ρ‡Π΅Ρ€Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°, Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ класс citeΒ β€” написан курсивом синСго Ρ†Π²Π΅Ρ‚Π°.

ИмСна классов Π²Ρ‹Π±ΠΈΡ€Π°ΡŽΡ‚ΡΡ ΠΏΠΎ ТСланию, Π³Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ понятны ΠΈ соотвСтствовали ΠΈΡ… использованию, ΠΏΡ€ΠΈ этом имя Π΄ΠΎΠ»ΠΆΠ½ΠΎ всСгда Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с символа. МоТно, Ρ‚Π°ΠΊΠΆΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ классы ΠΈ Π±Π΅Π· указания Ρ‚Π΅Π³Π°. Бинтаксис Π² этом случаС Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ.

.Имя класса { свойство1: Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅; свойство2: Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅; … }

ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΉ записи, класс ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ Ρ‚Π΅Π³Ρƒ (ΠΏΡ€ΠΈΠΌΠ΅Ρ€Β 6.2).

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 6.2. ИспользованиС классов

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

<title>ΠšΠ»Π°ΡΡΡ‹</title>

<style type=»text/css»>

.cite {

color: navy; /* Π‘ΠΈΠ½ΠΈΠΉ Ρ†Π²Π΅Ρ‚ тСкста */

font-style: italic; /* ΠšΡƒΡ€ΡΠΈΠ²Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */

}

</style>

</head>

<body>

<p>Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·Π°Π±ΠΎΡ‚ΠΈΡ‚ΡŒΡΡ ΠΎ своСм Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ мСстС.

ΠžΡΠ²Π΅Ρ‰Π΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ ΠΎΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ источник

свСта находился сбоку ΠΈΠ»ΠΈ сзади ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Π°. Π’ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠΈ мСдицинских

ослоТнСний

<b class=»cite»>стул рСкомСндуСтся Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ с мягким сидСниСм</b>.</p>

</body>

</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ примСнСния сСлСктора с ΠΈΠΌΠ΅Π½Π΅ΠΌ cite ΠΊ Ρ‚Π΅Π³Ρƒ <B> ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис.Β 6.2.

Рис. 6.2. Π’ΠΈΠ΄ Ρ‚Π΅Π³Π° <B>, ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½ΠΎΠ³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй

ΠšΠ»Π°ΡΡΡ‹ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ Ρ€Π°Π·Π½Ρ‹ΠΌ Ρ‚Π΅Π³Π°ΠΌ Π²Π΅Π±-страницы: ячСйкам Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ссылкам, ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π°ΠΌ ΠΈ Π΄Ρ€. Для измСнСния ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… слов ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π±ΡƒΠΊΠ², Π° Ρ‚Π°ΠΊΠΆΠ΅ Π±Π»ΠΎΠΊΠΎΠ², содСрТащих Π² сСбС Ρ€Π°Π·Π½Ρ‹Π΅ элСмСнты, ΡƒΠΏΠΎΡ‚Ρ€Π΅Π±Π»ΡΡŽΡ‚ΡΡ Ρ‚Π΅Π³ΠΈ <SPAN> ΠΈ <DIV>. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅Β 6.3 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ стиля ΠΏΠ΅Ρ€Π²ΠΎΠΉ Π±ΡƒΠΊΠ²Ρ‹ прСдлоТСния ΠΏΡƒΡ‚Π΅ΠΌ использования класса совмСстно с Ρ‚Π΅Π³ΠΎΠΌ <SPAN>.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 6.3. ИспользованиС классов

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

<title>ΠšΠ»Π°ΡΡΡ‹</title>

<style type=»text/css»>

.inicial {

color: red; /* ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ тСкста */

font-size: 200%; /* Π Π°Π·ΠΌΠ΅Ρ€ тСкста */

}

</style>

</head>

<body>

<p><span class=»inicial»>Н</span>Π°Π±ΠΈΡ€Π°Ρ‚ΡŒ

Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅ слСдуСт ΠΏΠΎΠ΄ΡƒΡˆΠ΅Ρ‡ΠΊΠ°ΠΌΠΈ ΠΏΠ°Π»ΡŒΡ†Π΅Π² ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΌΠΈ отрывистыми

ΡƒΠ΄Π°Ρ€Π°ΠΌΠΈ.</p>

</body>

</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. Β 6.3.

Рис. 6.3. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ использования классов

Класс ΠΏΡ€ΠΎΡ‚ΠΈΠ² ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° β€” javatpoint

ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ β†’ ← прСдыдущая

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Π² CSS ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‡Π°ΡΡ‚ΡŒΡŽ Π½Π°Π±ΠΎΡ€Π° ΠΏΡ€Π°Π²ΠΈΠ» CSS ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для Π²Ρ‹Π±ΠΎΡ€Π° содСрТимого, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ. И ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, ΠΈ класс ΡΠ²Π»ΡΡŽΡ‚ΡΡ сСлСкторами элСмСнтов CSS ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ элСмСнта Π½Π° основС присвоСнного Π΅ΠΌΡƒ ΠΈΠΌΠ΅Π½ΠΈ. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² ΠΈ классов CSS ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌΠΈ сСлСкторами Π² CSS.

ΠŸΡ€ΠΈ использовании сСлСкторов ΠΈΠ½ΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ ΠΈ классом. Оба ΠΎΠ½ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ стилях ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ; ΠΎΠ½ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΡ… ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ ΡΡ‚ΠΈΠ»ΡŽ. Π₯отя ΠΎΠ±Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для Π²Ρ‹Π±ΠΎΡ€Π° элСмСнта, ΠΎΠ½ΠΈ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°.

Π Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ ΠΈ классом ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π° Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅.

Класс Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€
ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ класс ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ элСмСнтам, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ ΠΌΠΎΠ³ Π±Ρ‹Ρ‚ΡŒ нСсколько Ρ€Π°Π· Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницС. Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΡƒΠ½ΠΈΠΊΠ°Π»Π΅Π½ Π½Π° страницС, ΠΈ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ элСмСнту.
Класс присваиваСтся элСмСнту, ΠΈ Π΅Π³ΠΎ имя начинаСтся с «.» с ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ класса. Имя ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° начинаСтся с символа Β«#Β», Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ слСдуСт ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ имя ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°.
К элСмСнту ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ нСсколько сСлСкторов классов. К элСмСнту ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ сСлСктор ID.
Бинтаксис:
.class{
// объявлСния CSS
}
Бинтаксис:
#id{
// объявлСния CSS
}

Π”Π°Π²Π°ΠΉΡ‚Π΅ обсудим id ΠΈ класс ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ²

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ id ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π²Ρ‹Π±ΠΎΡ€Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° id элСмСнта HTML для Π²Ρ‹Π±ΠΎΡ€Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ элСмСнта. Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ всСгда ΡƒΠ½ΠΈΠΊΠ°Π»Π΅Π½ Π½Π° страницС, поэтому ΠΎΠ½ выбираСтся для Π²Ρ‹Π±ΠΎΡ€Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта.

ЗаписываСтся символом Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ (#), Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ слСдуСт ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ элСмСнта.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ сСлСктора id ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ Π½ΠΈΠΆΠ΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ элСмСнт с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ «para».

<Π³ΠΎΠ»ΠΎΠ²Π°> <ΡΡ‚ΠΈΠ»ΡŒ> #ΠΏΠ°Ρ€Π° { Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ; Ρ†Π²Π΅Ρ‚ синий; Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 25px; Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: Ρ€ΠΎΠ·ΠΎΠ²Ρ‹ΠΉ; } <Ρ‚Π΅Π»ΠΎ>

Π”ΠΎΠ±Ρ€ΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Javatpoint.com

Π­Ρ‚ΠΎΡ‚ Π°Π±Π·Π°Ρ† Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚.

Π­Ρ‚ΠΎΡ‚ Π°Π±Π·Π°Ρ† Π½Π΅ измСнится.

ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ сСйчас

Π’Ρ‹Ρ…ΠΎΠ΄

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ класса

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ класса ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π²Ρ‹Π±ΠΎΡ€Π° элСмСнтов HTML с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ класса. ΠŸΠΈΡˆΠ΅Ρ‚ΡΡ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ. (символ Ρ‚ΠΎΡ‡ΠΊΠΈ) , Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ слСдуСт имя класса.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Имя класса Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с Ρ†ΠΈΡ„Ρ€Ρ‹.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ сСлСктора класса ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ Π½ΠΈΠΆΠ΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ элСмСнты с классом «ΠΏΡ€ΠΈΠΌΠ΅Ρ€» .

<Π³ΠΎΠ»ΠΎΠ²Π°> <ΡΡ‚ΠΈΠ»ΡŒ> . ΠΏΡ€ΠΈΠΌΠ΅Ρ€ { Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ; Ρ†Π²Π΅Ρ‚ синий; Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 25px; } <Ρ‚Π΅Π»ΠΎ>

Π­Ρ‚ΠΎΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ синСго Ρ†Π²Π΅Ρ‚Π° ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Π­Ρ‚ΠΎΡ‚ Π°Π±Π·Π°Ρ† Π²Ρ‹Π΄Π΅Π»Π΅Π½ синим Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ сСйчас

Π’Ρ‹Ρ…ΠΎΠ΄

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ класса CSS для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ элСмСнта

ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ элСмСнт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСлСктора класса, нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, примСняСтся Π»ΠΈ ΠΎΠ½ ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтам.

Если Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ элСмСнт HTML, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ имя элСмСнта с сСлСктором класса.

Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ понятно ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

<Π³ΠΎΠ»ΠΎΠ²Π°> <ΡΡ‚ΠΈΠ»ΡŒ> ΠΏ.ΠΏΡ€ΠΈΠΌΠ΅Ρ€ { Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ; Ρ†Π²Π΅Ρ‚ синий; Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 25px; } <Ρ‚Π΅Π»ΠΎ>

Π­Ρ‚ΠΎΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½.

Π­Ρ‚ΠΎΡ‚ Π°Π±Π·Π°Ρ† Π²Ρ‹Π΄Π΅Π»Π΅Π½ синим Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ сСйчас

Π’Ρ‹Ρ…ΠΎΠ΄

Π•ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ примСняСм нСсколько классов ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ элСмСнту. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° Ρ‚ΠΎ ΠΆΠ΅ самоС.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π΄Π²Π° класса ( ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈ ΠΏΡƒΠ½ΠΊΡ‚ ) для элСмСнта Π°Π±Π·Π°Ρ†Π° ΠΈ стилизуСм Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠ±Π° класса.

<Π³ΠΎΠ»ΠΎΠ²Π°> <ΡΡ‚ΠΈΠ»ΡŒ> .ΠΏΡ€ΠΈΠΌΠ΅Ρ€ { Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ; красный Ρ†Π²Π΅Ρ‚; Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 1 см; } .ΠΏΠ°Ρ€Π°{ сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²: Lucida Calligraphy; Ρ‚Π΅Π½ΡŒ тСкста: 5px 8px 9пиксСл ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ; } <Ρ‚Π΅Π»ΠΎ>

Π­Ρ‚ΠΎΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Ρ‹Π΄Π΅Π»Π΅Π½ красным Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Π­Ρ‚ΠΎΡ‚ Π°Π±Π·Π°Ρ† Π²Ρ‹Π΄Π΅Π»Π΅Π½ красным Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ с использованиСм сСмСйства ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² «Lucida Calligraphy» ΠΈ text-shadow.

ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ сСйчас

Π’Ρ‹Ρ…ΠΎΠ΄


Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ Ρ‚Π΅ΠΌΠ°ΠŸΠΎΠ»ΠΎΡΠ° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ CSS

← прСдыдущая ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ β†’

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ классов ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² HTML/CSS: всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ

Назад Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ классов ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² HTML/CSS: всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ

Π’ этом Π²Π²ΠΎΠ΄Π½ΠΎΠΌ руководствС ΠΏΠΎ сСлСкторам классов ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² HTML/CSS ΠΌΡ‹ углубимся Π² нСсколько творчСских ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², Π΄Π°ΡŽΡ‰ΠΈΡ… Ρ†Π΅Π½Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ возмоТностях этих сСлСкторов, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ возмоТности. способности ΠΊ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ.

ВзаимодСйствиС HTML ΠΈ CSS

CSS Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΊΠ°ΠΊ «каскадная Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй» ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ вмСстС с HTML (языком гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ) Π² качСствС ΠΌΠΎΡ‰Π½ΠΎΠ³ΠΎ инструмСнта для создания Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. HTML ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΈ класс Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ любоС количСство стилСй для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ вашСй Π²Π΅Π±-срСды.

ID ΠΈ класс: Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ

Π₯отя Ρƒ Π½ΠΈΡ… ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΎΠ½ΠΈ Π½Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ ΠΈ Π½Π΅ всСгда слуТат ΠΎΠ΄Π½ΠΎΠΉ ΠΈ Ρ‚ΠΎΠΉ ΠΆΠ΅ Ρ†Π΅Π»ΠΈ.

ID ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹
  • ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ID.
  • К ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ количСство стилСй.
  • На ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ элСмСнт с этим ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ.
  • Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Β«#Β» Π² CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² качСствС ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° для HTML «ссылки ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°Β» (гипСрссылки). Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ мСста Π² Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π½Π° Ρ‚ΠΎΠΉ ΠΆΠ΅ Π²Π΅Π±-страницС, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использовано для создания Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½ΠΎΠ³ΠΎ оглавлСния.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Π² области CSS HTML:

#top {
Β  Β  background-color: #ccc;
Β  Β  padding: 20px
}
ΠšΠ»Π°ΡΡΡ‹ Π½Π΅ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹
  • Один ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ класс ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… элСмСнтов.
  • ИмСна классов вводятся с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ рСгистра.
  • ΠšΠ»Π°ΡΡΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ «.» ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ Π² CSS, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рисункС Π½ΠΈΠΆΠ΅.
  • К ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ классу ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ количСство стилСй.
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСсколько классов для ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ элСмСнта.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ класса, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Π² области CSS HTML:

.introduction {
Β  color: red;
Β  Β  вСс ΡˆΡ€ΠΈΡ„Ρ‚Π°: ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΉ;
Β  Β  ΡˆΡ€ΠΈΡ„Ρ‚: 20px Arial, Helvetica, Π±Π΅Π· засСчСк;
}

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ совСт β„– 1. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π²Π΅Π±-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ отобраТаСтся вся Π²Π΅Π±-страница HTML, содСрТащая сСлСкторы ID ΠΈ Class.

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ 1: ΠžΠ±Ρ€Π°Π·Π΅Ρ† Π²Π΅Π±-страницы с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌΠΈ HTML ΠΈ CSS

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ прСдставляСт собой Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Π²Π΅Π±-Π²Ρ‹Π²ΠΎΠ΄:

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ 2: ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ Π²Ρ‹Π²ΠΎΠ΄Π° HTML/CSS

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ совСт β„– 2: ИспользованиС сСлСктора ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² для Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ссылки для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ эффСктивноС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ сСлСктора ID для создания оглавлСния с гипСрссылками. ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ β€” это Π½Π΅ статичСская срСда, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹Π΅ страницы. ИспользованиС возмоТности гипСрссылки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Jump Links ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ использованиС Π²Π΅Π±-ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ.

НиТС ΠΏΠΎΠΊΠ°Π·Π°Π½Π° фактичСская HTML-страница с ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.


< html >
< head >
< style >
/* Π‘Ρ‚ΠΈΠ»ΡŒ элСмСнта с id "myHeader" */
#myHeader {
Β  background- Ρ†Π²Π΅Ρ‚: Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ;
Β  Ρ†Π²Π΅Ρ‚: Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ;
Β  отступ: 30 пиксСлСй;
Β  text-align: center;
}

#locator {
Β  background-color: yellow;
Β  Ρ†Π²Π΅Ρ‚: Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ;
Β  отступ: 10 пиксСлСй;
Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ;
}

ΡΡ‚ΠΈΠ»ΡŒ >
Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° >
< корпус >

< a href="#gi">ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ графичСский Π΄ΠΈΠ·Π°ΠΉΠ½ >

< Ρ€ >Ehendis el molupta tendign ihicaes tibus. Occus di consecatem laciendit ero oditate consedi gniste porporit, quiam ut eatas et inus sit adipient ut qui dunt alique prae. Facerrupta ad quatia aut et autatur, num quam qui quidusa mustotaqui dis qui ressi quaersperor magnimporat perchillam, eniam. p >


< a name="gi">
< h2 >ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ этому мСсту Π½Π° страницС ΠΏΠΎ ссылкС Β«ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ графичСский Π΄ΠΈΠ·Π°ΠΉΠ½Β» Π²Π²Π΅Ρ€Ρ…Ρƒ . H2 >

Body >
HTML >

. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ прСдоставляСт ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΊΠΎΠ΄Π΅, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠΉ Π²Ρ‹ΡˆΠ΅. На этой ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ взаимосвязь Π΄Π²ΡƒΡ… Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ссылку ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°.

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ 3: ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° для гипСрссылки оглавлСния

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ совСт β„–3: ИспользованиС сСлСктора класса Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… элСмСнтах

Π’ этом Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ имя класса Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… мСстах Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π½Π° вашСй Π²Π΅Π±-страницС. ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π²Ρ‹ присвоили стилСй этому ΠΈΠΌΠ΅Π½ΠΈ класса, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Ρ‚Π°ΠΊ часто, ΠΊΠ°ΠΊ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

Π‘ΠΎΠ²Π΅Ρ‚: Имя Class ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹ΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятноС ΠΈ Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎΠ΅ соглашСниС ΠΎΠ± ΠΈΠΌΠ΅Π½Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС. Π­Ρ‚ΠΎ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, становится ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ваш ΠΊΠΎΠ΄ Π² Ρ…ΠΎΡ€ΠΎΡˆΠΎ структурированном Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅.

ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Class ΠΈ ID : имя Class ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ нСсколькими элСмСнтами HTML, Π° имя ID Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΈΠΌ элСмСнтом HTML Π½Π° страницС.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ HTML-страницы с использованиСм ΠΈΠΌΠ΅Π½ΠΈ класса GreekCity . Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈΠ· этого, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ.


< html >
< head >
< style >
/* Π‘Ρ‚ΠΈΠ»ΡŒ элСмСнта с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ "myHeader" */
#myHeader {
Β  background-color: lightblue;
Β  Ρ†Π²Π΅Ρ‚: Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ;
Β  отступ: 30 пиксСлСй;
Β  text-align: center;
}

/* Π‘Ρ‚ΠΈΠ»ΡŒ для всСх элСмСнтов с ΠΈΠΌΠ΅Π½Π΅ΠΌ класса "GreekCity" */
. GreekCity {
Β  background-color: #9815B0;
Β  Ρ†Π²Π΅Ρ‚: Π±Π΅Π»Ρ‹ΠΉ;
Β  отступ: 10 пиксСлСй;
}
ΡΡ‚ΠΈΠ»ΡŒ >
Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° >
< корпус >


< h2 >ГрСчСскиС Π³ΠΎΡ€ΠΎΠ΄Π° h2 >


< h3 >Афины h3 >
< p >Π“ΠΎΡ€ΠΎΠ΄ Π½ΠΎΠΌΠ΅Ρ€ 1. p >

< h3 >Π‘Π°Π»ΠΎΠ½ΠΈΠΊΠΈ h3 >
< 900 40 p >Π“ΠΎΡ€ΠΎΠ΄ β„–2. p >

< h3 >Миконос h3 >
< p >Π“ΠΎΡ€ΠΎΠ΄ β„–3. p >

корпус >
html >

90 022

На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ рисункС ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ области, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ обсуТдали. Π² этом Ρ€Π°Π·Π΄Π΅Π»Π΅:

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ прСдставляСт собой Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Π²Π΅Π±-Π²Ρ‹Π²ΠΎΠ΄:

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ 4.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *