Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ css класс: ΠšΠ»Π°ΡΡΡ‹ Π² CSS – ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΏΡƒΡ‚Π΅Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²

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

ΠšΠ»Π°ΡΡΡ‹ Π² CSS – ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΏΡƒΡ‚Π΅Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²

Π’ сСгодняшнСй ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим  классы Π² CSS ΠΈ ΠΈΡ… взаимосвязь с языком гипСртСкста. HTML β€” Ρ‚Π΅Π³ΠΈ ΠΈ CSS связаны Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ. Π­Ρ‚Π° взаимосвязь позволяСт ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ выглядит Ρ‚Π΅Π³ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ Π²Π΅Π΄Π΅Ρ‚ сСбя ΠΏΡ€ΠΈ использовании Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй:

tag {
  /*
 Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ измСнСния.
*/
name:value;
}

Но Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ трСбуСтся большС контроля, Ρ‡Π΅ΠΌ просто Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ экзСмпляр Ρ‚Π΅Π³Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ. Если Π±Ρ‹ всС ячСйки HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±Ρ‹Π»ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ Π² ΠΎΠ΄Π½ΠΎΠΌ стилС, это выглядСло Π±Ρ‹ Π½Π΅ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½ΠΎ. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ CSS прСдоставляСт Π½Π°ΠΌ Π΄Π²Π° Ρ€Π°Π·Π½Ρ‹Ρ… опрСдСлСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ β€” CSS классы ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹.

Когда Ρƒ вас Π½Π° страницС Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅, Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS классы. Для этого Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π΄Π²Π° шага:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° внСшний Π²ΠΈΠ΄ HTML-страницы, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ сначала Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ элСмСнты с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ class=Β»class-nameΒ». Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 1
</div>
<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 2
</div>
<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 3
</div>

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я Ρ…ΠΎΡ‡Ρƒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, я Π·Π°Ρ…ΠΎΡ‡Ρƒ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΠ»ΠΈ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Π½ΠΈΡ… изобраТСния Π² качСствС HTML β€” ссылки для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ страницы. ΠŸΡ€ΠΈ этом всС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² нашСм CSS:

div.box{
 height:200px;
 width:200px;
 text-align:center;
 font-size:14px;
 color:#090;
 background-color:#ddd;
 margin-right:10px;
}

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° с CSS классом, Π° Π½Π΅ просто ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ tagname{ }, ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ tagname.classname{ }. Π’ΠΎΡ‡ΠΊΠ° ΠΌΠ΅ΠΆΠ΄Ρƒ tagname ΠΈ classname являСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ опрСдСляСт ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΊΠ°ΠΊ CSS класс. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ Π½Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ². Если ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π΅Π» Π² ΠΏΡ€Π°Π²ΠΈΠ»Π΅, Ρ‚ΠΎ ΠΎΠ½ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ.

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ использовалось свойство margin-right:10px. Π­Ρ‚Π° строка Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ трСмя ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ сохраняСтся пространство Π² 10 пиксСлСй. Бвойство float со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ left обСспСчиваСт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π»ΠΈΡΡŒ слСва.

Π’Π°ΠΊΠΎΠ΅ сочСтаниС Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ этого:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ ваш CSS класс изобраТСния box примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, помСститС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт <div> послС Β«ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 3Β»:

<div>
ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 4
</div>

ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ страницу. Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡ€Π°Π²ΠΈΠ», установлСнных Π² div.box {} Π½Π΅ примСняСтся. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ класса.

Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ этот Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования классов CSS Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠΉ, Ρ‡Π΅ΠΌ простоС tagname{ }. На страницС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ элСмСнтов <div>, Π½ΠΎ стили Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Ρ‚Π΅ΠΌ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°Π΄Π°Π½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° class!

Π’ соврСмСнном Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ для элСмСнта ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ класс CSS β€” Ρ€Π΅Π΄ΠΊΠΎΡΡ‚ΡŒ. Π”Π°Π²Π°ΠΉΡ‚Π΅ возьмСм наши Ρ‚Ρ€ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π° ΠΈ посмотрим, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, Ссли Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ….

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² CSS нСсколько классов, Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ класс Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π». Как здСсь:

<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 1
</div>
<div>
ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 2
</div>
<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 3
</div>

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ стили CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ каскадный порядок, Π²Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ свои классы ΠΏΠΎ ΡƒΡ€ΠΎΠ²Π½ΡŽ ваТности. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ класс class=Β»boxΒ» примСнялся ΠΏΠ΅Ρ€Π΅Π΄ class=Β»redΒ». Π˜Π½Π°Ρ‡Π΅ class=Β»redΒ» Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π΄ΠΎ class=Β»boxΒ». НадСюсь, это понятно!

ИзмСним наш код CSS:

div.box{
 height:200px;
 width:200px;
 text-align:center;
 font-size:14px;
 color:#090;
 background-color:#dddddd;
 margin-right:10px;
}
div.red{
 background-color:#ffcccc;
}
div.green{
 background-color:#ccffcc;
}
div.blue{
 background-color:#ccccff;
}

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² Π΅ΡΡ‚ΡŒ CSS класс .box, ΠΊ Π½ΠΈΠΌ всСм ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ свойства, прописанныС Π² div.box. Но ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ <div> примСняСтся Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ класс (red, green, ΠΈΠ»ΠΈ blue). ΠšΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ div.box опрСдСляСт background-color:#cccccc; Β«Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅Β» классы ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ послС Π½Π΅Π³ΠΎ. НапримСр, Π² box red свойство background-color, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π² div.red, пСрСзаписываСт Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎΠ΅ свойство Π² div.box. Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ подразумСваСтся ΠΏΠΎΠ΄ каскадом: Π² CSS Π»ΠΎΠ³ΠΈΠΊΠ΅ опрСдСляСтся свСрху Π²Π½ΠΈΠ·. А ΠΏΡ€ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ классов HTML β€” слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ.

ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, для ΠΊΠ°ΠΊΠΈΡ… элСмСнтов Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS классы ΠΏΡ€ΠΈ вСрсткС ΠΌΠ°ΠΊΠ΅Ρ‚Π° страницы. Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ мысли для подсказки:

  • Π›ΡŽΠ±Ρ‹Π΅ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ захочСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ²Π°Ρ€Π°, придСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°: Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ img.thumbnail{ width:200px;height:200px; };
  • Π‘Ρ‚ΠΈΠ»ΠΈ ссылок для ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ стилСй ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ссылок. НапримСр, a.button {};
  • НуТно ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ссылки Π² вашСй Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. НапримСр, a.nav:hover{ } a.nav: Hover {}.

Π­Ρ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ использованиС классов позволяСт элСмСнту страницы Π΄Π°Ρ‚ΡŒ имя, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ CSS. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эти Β«ΠΈΠΌΠ΅Π½Π°Β» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ряд ΠΏΡ€Π°Π²ΠΈΠ» для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… экзСмпляров элСмСнта Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ опрСдСлСния ΠΊΠΎΠ΄Π° CSS.

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

Если Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ вопросы, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈΡ… Π² коммСнтариях!

Данная публикация являСтся ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«Using CSS Classes – A Handy GuideΒ» , подготовлСнная Ρ€Π΅Π΄Π°ΠΊΡ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

ΠšΠ»Π°ΡΡΡ‹ Π² CSS – ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΏΡƒΡ‚Π΅Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²

Π’ сСгодняшнСй ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим  классы Π² CSS ΠΈ ΠΈΡ… взаимосвязь с языком гипСртСкста. HTML β€” Ρ‚Π΅Π³ΠΈ ΠΈ CSS связаны Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ. Π­Ρ‚Π° взаимосвязь позволяСт ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ выглядит Ρ‚Π΅Π³ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ Π²Π΅Π΄Π΅Ρ‚ сСбя ΠΏΡ€ΠΈ использовании Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй:

tag {
  /*
 Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ измСнСния.
*/
name:value;
}

Но Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ трСбуСтся большС контроля, Ρ‡Π΅ΠΌ просто Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ экзСмпляр Ρ‚Π΅Π³Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ. Если Π±Ρ‹ всС ячСйки HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±Ρ‹Π»ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ Π² ΠΎΠ΄Π½ΠΎΠΌ стилС, это выглядСло Π±Ρ‹ Π½Π΅ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½ΠΎ. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ CSS прСдоставляСт Π½Π°ΠΌ Π΄Π²Π° Ρ€Π°Π·Π½Ρ‹Ρ… опрСдСлСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ β€” CSS классы ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹.

Когда Ρƒ вас Π½Π° страницС Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅, Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS классы. Для этого Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π΄Π²Π° шага:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° внСшний Π²ΠΈΠ΄ HTML-страницы, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ сначала Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ элСмСнты с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ class=Β»class-nameΒ». Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 1
</div>
<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 2
</div>
<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 3
</div>

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я Ρ…ΠΎΡ‡Ρƒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, я Π·Π°Ρ…ΠΎΡ‡Ρƒ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΠ»ΠΈ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Π½ΠΈΡ… изобраТСния Π² качСствС HTML β€” ссылки для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ страницы. ΠŸΡ€ΠΈ этом всС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² нашСм CSS:

div.box{
 height:200px;
 width:200px;
 text-align:center;
 font-size:14px;
 color:#090;
 background-color:#ddd;
 margin-right:10px;
}

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° с CSS классом, Π° Π½Π΅ просто ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ tagname{ }, ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ tagname.classname{ }. Π’ΠΎΡ‡ΠΊΠ° ΠΌΠ΅ΠΆΠ΄Ρƒ tagname ΠΈ classname являСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ опрСдСляСт ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΊΠ°ΠΊ CSS класс. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ Π½Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ². Если ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π΅Π» Π² ΠΏΡ€Π°Π²ΠΈΠ»Π΅, Ρ‚ΠΎ ΠΎΠ½ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ.

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ использовалось свойство margin-right:10px. Π­Ρ‚Π° строка Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ трСмя ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ сохраняСтся пространство Π² 10 пиксСлСй. Бвойство float со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ left обСспСчиваСт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π»ΠΈΡΡŒ слСва.

Π’Π°ΠΊΠΎΠ΅ сочСтаниС Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ этого:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ ваш CSS класс изобраТСния box примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, помСститС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт <div> послС Β«ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 3Β»:

<div>
ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 4
</div>

ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ страницу. Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡ€Π°Π²ΠΈΠ», установлСнных Π² div.box {} Π½Π΅ примСняСтся. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ класса.

Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ этот Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования классов CSS Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠΉ, Ρ‡Π΅ΠΌ простоС tagname{ }. На страницС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ элСмСнтов <div>, Π½ΠΎ стили Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Ρ‚Π΅ΠΌ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°Π΄Π°Π½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° class!

Π’ соврСмСнном Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ для элСмСнта ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ класс CSS β€” Ρ€Π΅Π΄ΠΊΠΎΡΡ‚ΡŒ. Π”Π°Π²Π°ΠΉΡ‚Π΅ возьмСм наши Ρ‚Ρ€ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π° ΠΈ посмотрим, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, Ссли Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ….

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² CSS нСсколько классов, Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ класс Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π». Как здСсь:

<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 1
</div>
<div>
ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 2
</div>
<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 3
</div>

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ стили CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ каскадный порядок, Π²Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ свои классы ΠΏΠΎ ΡƒΡ€ΠΎΠ²Π½ΡŽ ваТности. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ класс class=Β»boxΒ» примСнялся ΠΏΠ΅Ρ€Π΅Π΄ class=Β»redΒ». Π˜Π½Π°Ρ‡Π΅ class=Β»redΒ» Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π΄ΠΎ class=Β»boxΒ». НадСюсь, это понятно!

ИзмСним наш код CSS:

div.box{
 height:200px;
 width:200px;
 text-align:center;
 font-size:14px;
 color:#090;
 background-color:#dddddd;
 margin-right:10px;
}
div.red{
 background-color:#ffcccc;
}
div.green{
 background-color:#ccffcc;
}
div.blue{
 background-color:#ccccff;
}

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² Π΅ΡΡ‚ΡŒ CSS класс .box, ΠΊ Π½ΠΈΠΌ всСм ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ свойства, прописанныС Π² div.box. Но ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ <div> примСняСтся Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ класс (red, green, ΠΈΠ»ΠΈ blue). ΠšΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ div.box опрСдСляСт background-color:#cccccc; Β«Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅Β» классы ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ послС Π½Π΅Π³ΠΎ. НапримСр, Π² box red свойство background-color, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π² div.red, пСрСзаписываСт Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎΠ΅ свойство Π² div.box. Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ подразумСваСтся ΠΏΠΎΠ΄ каскадом: Π² CSS Π»ΠΎΠ³ΠΈΠΊΠ΅ опрСдСляСтся свСрху Π²Π½ΠΈΠ·. А ΠΏΡ€ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ классов HTML β€” слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ.

ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, для ΠΊΠ°ΠΊΠΈΡ… элСмСнтов Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS классы ΠΏΡ€ΠΈ вСрсткС ΠΌΠ°ΠΊΠ΅Ρ‚Π° страницы. Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ мысли для подсказки:

  • Π›ΡŽΠ±Ρ‹Π΅ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ захочСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ²Π°Ρ€Π°, придСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°: Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ img.thumbnail{ width:200px;height:200px; };
  • Π‘Ρ‚ΠΈΠ»ΠΈ ссылок для ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ стилСй ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ссылок. НапримСр, a.button {};
  • НуТно ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ссылки Π² вашСй Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. НапримСр, a.nav:hover{ } a.nav: Hover {}.

Π­Ρ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ использованиС классов позволяСт элСмСнту страницы Π΄Π°Ρ‚ΡŒ имя, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ CSS. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эти Β«ΠΈΠΌΠ΅Π½Π°Β» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ряд ΠΏΡ€Π°Π²ΠΈΠ» для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… экзСмпляров элСмСнта Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ опрСдСлСния ΠΊΠΎΠ΄Π° CSS.

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

Если Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ вопросы, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈΡ… Π² коммСнтариях!

Данная публикация являСтся ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«Using CSS Classes – A Handy GuideΒ» , подготовлСнная Ρ€Π΅Π΄Π°ΠΊΡ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

ΠšΠ»Π°ΡΡΡ‹ Π² CSS – ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΏΡƒΡ‚Π΅Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²

Π’ сСгодняшнСй ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим  классы Π² CSS ΠΈ ΠΈΡ… взаимосвязь с языком гипСртСкста. HTML β€” Ρ‚Π΅Π³ΠΈ ΠΈ CSS связаны Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ. Π­Ρ‚Π° взаимосвязь позволяСт ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ выглядит Ρ‚Π΅Π³ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ Π²Π΅Π΄Π΅Ρ‚ сСбя ΠΏΡ€ΠΈ использовании Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй:

tag {
  /*
 Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ измСнСния.
*/
name:value;
}

Но Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ трСбуСтся большС контроля, Ρ‡Π΅ΠΌ просто Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ экзСмпляр Ρ‚Π΅Π³Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ. Если Π±Ρ‹ всС ячСйки HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±Ρ‹Π»ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ Π² ΠΎΠ΄Π½ΠΎΠΌ стилС, это выглядСло Π±Ρ‹ Π½Π΅ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½ΠΎ. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ CSS прСдоставляСт Π½Π°ΠΌ Π΄Π²Π° Ρ€Π°Π·Π½Ρ‹Ρ… опрСдСлСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ β€” CSS классы ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹.

Когда Ρƒ вас Π½Π° страницС Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅, Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS классы. Для этого Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π΄Π²Π° шага:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° внСшний Π²ΠΈΠ΄ HTML-страницы, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ сначала Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ элСмСнты с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ class=Β»class-nameΒ». Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 1
</div>
<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 2
</div>
<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 3
</div>

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я Ρ…ΠΎΡ‡Ρƒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, я Π·Π°Ρ…ΠΎΡ‡Ρƒ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΠ»ΠΈ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Π½ΠΈΡ… изобраТСния Π² качСствС HTML β€” ссылки для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ страницы. ΠŸΡ€ΠΈ этом всС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² нашСм CSS:

div.box{
 height:200px;
 width:200px;
 text-align:center;
 font-size:14px;
 color:#090;
 background-color:#ddd;
 margin-right:10px;
}

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° с CSS классом, Π° Π½Π΅ просто ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ tagname{ }, ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ tagname.classname{ }. Π’ΠΎΡ‡ΠΊΠ° ΠΌΠ΅ΠΆΠ΄Ρƒ tagname ΠΈ classname являСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ опрСдСляСт ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΊΠ°ΠΊ CSS класс. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ Π½Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ². Если ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π΅Π» Π² ΠΏΡ€Π°Π²ΠΈΠ»Π΅, Ρ‚ΠΎ ΠΎΠ½ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ.

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ использовалось свойство margin-right:10px. Π­Ρ‚Π° строка Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ трСмя ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ сохраняСтся пространство Π² 10 пиксСлСй. Бвойство float со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ left обСспСчиваСт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π»ΠΈΡΡŒ слСва.

Π’Π°ΠΊΠΎΠ΅ сочСтаниС Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ этого:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ ваш CSS класс изобраТСния box примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, помСститС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт <div> послС Β«ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 3Β»:

<div>
ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 4
</div>

ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ страницу. Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡ€Π°Π²ΠΈΠ», установлСнных Π² div.box {} Π½Π΅ примСняСтся. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ класса.

Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ этот Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования классов CSS Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠΉ, Ρ‡Π΅ΠΌ простоС tagname{ }. На страницС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ элСмСнтов <div>, Π½ΠΎ стили Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Ρ‚Π΅ΠΌ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°Π΄Π°Π½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° class!

Π’ соврСмСнном Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ для элСмСнта ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ класс CSS β€” Ρ€Π΅Π΄ΠΊΠΎΡΡ‚ΡŒ. Π”Π°Π²Π°ΠΉΡ‚Π΅ возьмСм наши Ρ‚Ρ€ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π° ΠΈ посмотрим, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, Ссли Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ….

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² CSS нСсколько классов, Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ класс Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π». Как здСсь:

<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 1
</div>
<div>
ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 2
</div>
<div>
 ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ 3
</div>

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ стили CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ каскадный порядок, Π²Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ свои классы ΠΏΠΎ ΡƒΡ€ΠΎΠ²Π½ΡŽ ваТности. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ класс class=Β»boxΒ» примСнялся ΠΏΠ΅Ρ€Π΅Π΄ class=Β»redΒ». Π˜Π½Π°Ρ‡Π΅ class=Β»redΒ» Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π΄ΠΎ class=Β»boxΒ». НадСюсь, это понятно!

ИзмСним наш код CSS:

div.box{
 height:200px;
 width:200px;
 text-align:center;
 font-size:14px;
 color:#090;
 background-color:#dddddd;
 margin-right:10px;
}
div.red{
 background-color:#ffcccc;
}
div.green{
 background-color:#ccffcc;
}
div.blue{
 background-color:#ccccff;
}

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² Π΅ΡΡ‚ΡŒ CSS класс .box, ΠΊ Π½ΠΈΠΌ всСм ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ свойства, прописанныС Π² div.box. Но ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ <div> примСняСтся Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ класс (red, green, ΠΈΠ»ΠΈ blue). ΠšΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ div.box опрСдСляСт background-color:#cccccc; Β«Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅Β» классы ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ послС Π½Π΅Π³ΠΎ. НапримСр, Π² box red свойство background-color, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π² div.red, пСрСзаписываСт Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎΠ΅ свойство Π² div.box. Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ подразумСваСтся ΠΏΠΎΠ΄ каскадом: Π² CSS Π»ΠΎΠ³ΠΈΠΊΠ΅ опрСдСляСтся свСрху Π²Π½ΠΈΠ·. А ΠΏΡ€ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ классов HTML β€” слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ.

ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, для ΠΊΠ°ΠΊΠΈΡ… элСмСнтов Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS классы ΠΏΡ€ΠΈ вСрсткС ΠΌΠ°ΠΊΠ΅Ρ‚Π° страницы. Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ мысли для подсказки:

  • Π›ΡŽΠ±Ρ‹Π΅ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ захочСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ²Π°Ρ€Π°, придСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°: Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ img.thumbnail{ width:200px;height:200px; };
  • Π‘Ρ‚ΠΈΠ»ΠΈ ссылок для ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ стилСй ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ссылок. НапримСр, a.button {};
  • НуТно ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ссылки Π² вашСй Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. НапримСр, a.nav:hover{ } a.nav: Hover {}.

Π­Ρ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ использованиС классов позволяСт элСмСнту страницы Π΄Π°Ρ‚ΡŒ имя, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ CSS. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эти Β«ΠΈΠΌΠ΅Π½Π°Β» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ряд ΠΏΡ€Π°Π²ΠΈΠ» для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… экзСмпляров элСмСнта Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ опрСдСлСния ΠΊΠΎΠ΄Π° CSS.

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

Если Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ вопросы, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈΡ… Π² коммСнтариях!

Данная публикация являСтся ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«Using CSS Classes – A Handy GuideΒ» , подготовлСнная Ρ€Π΅Π΄Π°ΠΊΡ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

ΠšΠ»Π°ΡΡΡ‹ | htmlbook.ru

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

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>ΠšΠ»Π°ΡΡΡ‹</title>
  <style>
   P { /* ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Π°Π±Π·Π°Ρ† */ 
    text-align: justify; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ */
   } 
   P.cite { /* Абзац с классом cite */
    color: navy; /* Π¦Π²Π΅Ρ‚ тСкста */
    margin-left: 20px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */
    border-left: 1px solid navy; /* Π“Ρ€Π°Π½ΠΈΡ†Π° слСва ΠΎΡ‚ тСкста */
    padding-left: 15px; /* РасстояниС ΠΎΡ‚ Π»ΠΈΠ½ΠΈΠΈ Π΄ΠΎ тСкста */
   } 
  </style>
 </head> 
 <body>
  <p>Для искусствСнного освСщСния помСщСния ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π»ΡŽΠΌΠΈΠ½Π΅ΡΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ Π»Π°ΠΌΠΏΡ‹. 
     Они ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ высокой свСтовой ΠΎΡ‚Π΄Π°Ρ‡Π΅ΠΉ, ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ сроком слуТбы, 
     ΠΌΠ°Π»ΠΎΠΉ ΡΡ€ΠΊΠΎΡΡ‚ΡŒΡŽ свСтящСйся повСрхности, Π±Π»ΠΈΠ·ΠΊΠΈΠΌ ΠΊ СстСствСнному ΡΠΏΠ΅ΠΊΡ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΌ 
     составом ΠΈΠ·Π»ΡƒΡ‡Π°Π΅ΠΌΠΎΠ³ΠΎ свСта, Ρ‡Ρ‚ΠΎ обСспСчиваСт Ρ…ΠΎΡ€ΠΎΡˆΡƒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Ρƒ.</p>
  <p>Для ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ засвСтки экрана дисплСя свСтовыми ΠΏΠΎΡ‚ΠΎΠΊΠ°ΠΌΠΈ 
     ΠΎΠΊΠΎΠ½Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΅ΠΌΡ‹ снабТСны ΡΠ²Π΅Ρ‚ΠΎΡ€Π°ΡΡΠ΅ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌΠΈ ΡˆΡ‚ΠΎΡ€Π°ΠΌΠΈ.</p>
 </body>
</html>

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

Рис. 8.1. Π’ΠΈΠ΄ тСкста, ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½ΠΎΠ³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСвых классов

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π°Π±Π·Π°Ρ† Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ с тСкстом Ρ‡Ρ‘Ρ€Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° (этот Ρ†Π²Π΅Ρ‚ задаётся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ), Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ класс с ΠΈΠΌΠ΅Π½Π΅ΠΌ citeΒ β€” отобраТаСтся синим Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ с Π»ΠΈΠ½ΠΈΠ΅ΠΉ слСва.

МоТно, Ρ‚Π°ΠΊΠΆΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ классы ΠΈ Π±Π΅Π· указания Ρ‚Π΅Π³Π°. Бинтаксис Π² этом случаС Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ.

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>ΠšΠ»Π°ΡΡΡ‹</title>
  <style>
   .gost {
    color: green; /* Π¦Π²Π΅Ρ‚ тСкста */
    font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */
   }
   .term {
    border-bottom: 1px dashed red; /* ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ тСкстом */
   }
  </style>
 </head> 
 <body>
   <p>Богласно <span>Π“ΠžΠ‘Π’ 12.1.003-83 Π‘Π‘Π‘Π’ &quot;Π¨ΡƒΠΌ. ΠžΠ±Ρ‰ΠΈΠ΅ 
      трСбования бСзопасности&quot;</span>, ΡˆΡƒΠΌΠΎΠ²ΠΎΠΉ характСристикой Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… 
      мСст ΠΏΡ€ΠΈ постоянном ΡˆΡƒΠΌΠ΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΡƒΡ€ΠΎΠ²Π½ΠΈ Π·Π²ΡƒΠΊΠΎΠ²Ρ‹Ρ… Π΄Π°Π²Π»Π΅Π½ΠΈΠΉ Π² Π΄Π΅Ρ†ΠΈΠ±Π΅Π»Π°Ρ… 
      Π² ΠΎΠΊΡ‚Π°Π²Π½Ρ‹Ρ… полосах. Π‘ΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΡ… ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ называСтся 
      <b>ΠΏΡ€Π΅Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ спСктром</b>, Π½ΠΎΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ числСнно Ρ€Π°Π²Π΅Π½ 
      ΡƒΡ€ΠΎΠ²Π½ΡŽ Π·Π²ΡƒΠΊΠΎΠ²ΠΎΠ³ΠΎ давлСния Π² ΠΎΠΊΡ‚Π°Π²Π½ΠΎΠΉ полосС со срСднСгСомСтричСской 
      частотой 1000&nbsp;Π“Ρ†.
   </p>
 </body>
</html>

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

Рис. 8.2. Π’ΠΈΠ΄ Ρ‚Π΅Π³ΠΎΠ², ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½Ρ‹Ρ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ классов

ΠšΠ»Π°ΡΡΡ‹ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ Ρ€Π°Π·Π½Ρ‹ΠΌ элСмСнтам Π²Π΅Π±-страницы: ячСйкам Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ссылкам, Π°Π±Π·Π°Ρ†Π°ΠΌ ΠΈ Π΄Ρ€. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅Β 8.3 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° строк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ для создания Β«Π·Π΅Π±Ρ€Ρ‹Β».

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Камни</title>
  <style>
   table.jewel {
    width: 100%; /* Π¨ΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ */
    border: 1px solid #666; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ */
   }
   th {
    background: #009383; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
    color: #fff; /* Π¦Π²Π΅Ρ‚ тСкста */
    text-align: left; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ */
   }
   tr.odd {
    background: #ebd3d7; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>НазваниС</th><th>Π¦Π²Π΅Ρ‚</th><th>Π’Π²Π΅Ρ€Π΄ΠΎΡΡ‚ΡŒ ΠΏΠΎ ΠœΠΎΠΎΡΡƒ</th>
   </tr>
   <tr>
    <td>Алмаз</td><td>Π‘Π΅Π»Ρ‹ΠΉ</td><td>10</td>
   </tr>
   <tr>
    <td>Π ΡƒΠ±ΠΈΠ½</td><td>ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ</td><td>9</td>
   </tr>
   <tr>
    <td>АмСтист</td><td>Π“ΠΎΠ»ΡƒΠ±ΠΎΠΉ</td><td>7</td>
   </tr>
   <tr>
    <td>Π˜Π·ΡƒΠΌΡ€ΡƒΠ΄</td><td>Π—Π΅Π»Π΅Π½Ρ‹ΠΉ</td><td>8</td>
   </tr>
   <tr>
    <td>Π‘Π°ΠΏΡ„ΠΈΡ€</td><td>Π“ΠΎΠ»ΡƒΠ±ΠΎΠΉ</td><td>9</td>
   </tr>
  </table>
 </body>
</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис.Β 8.3. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ класс с ΠΈΠΌΠ΅Π½Π΅ΠΌ odd ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для измСнСния Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° строки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π—Π° счёт Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ этот класс добавляСтся Π½Π΅ ΠΊΠΎ всСм Ρ‚Π΅Π³Π°ΠΌ <tr> ΠΈ получаСтся Ρ‡Π΅Ρ€Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ².

Рис. 8.3. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ примСнСния классов

ΠžΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ΅ использованиС Ρ€Π°Π·Π½Ρ‹Ρ… классов

К Π»ΡŽΠ±ΠΎΠΌΡƒ Ρ‚Π΅Π³Ρƒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько классов, пСрСчисляя ΠΈΡ… Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ class Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π». Π’ этом случаС ΠΊ элСмСнту примСняСтся ΡΡ‚ΠΈΠ»ΡŒ, описанный Π² ΠΏΡ€Π°Π²ΠΈΠ»Π°Ρ… для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ класса. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… классов ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ стилСвыС свойства, Π½ΠΎ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ значСниями, Ρ‚ΠΎ бСрётся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρƒ класса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ описан Π² ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅.

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅Β 8.4 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ использованиС Ρ€Π°Π·Π½Ρ‹Ρ… классов для создания ΠΎΠ±Π»Π°ΠΊΠ° Ρ‚Π΅Π³ΠΎΠ².

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 8.4. Π‘ΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΠ΅ Ρ€Π°Π·Π½Ρ‹Ρ… классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Облако Ρ‚Π΅Π³ΠΎΠ²</title>
  <style type="text/css">
   .level1 { font-size: 1em; }
   .level2 { font-size: 1.2em; }
   .level3 { font-size: 1.4em; }
   .level4 { font-size: 1.6em; }
   .level5 { font-size: 1.8em; }
   .level6 { font-size: 2em; }
   A.tag { 
    color: #468be1; /* Π¦Π²Π΅Ρ‚ ссылок */ 
   }
  </style>
 </head> 
 <body>
  <div> 
   <a href="/term/2">Paint.NET</a> 
   <a href="/term/69">Photoshop</a> 
   <a href="/term/3">Ρ†Π²Π΅Ρ‚</a> 
   <a href="/term/95">Ρ„ΠΎΠ½</a> 
   <a href="/term/11">ΠΏΠ°Π»ΠΈΡ‚Ρ€Π°</a> 
   <a href="/term/43">слои</a> 
   <a href="/term/97">свСт</a> 
   <a href="/term/44">ΠΏΠ°Π½Π΅Π»ΠΈ</a> 
   <a href="/term/16">линия</a> 
   <a href="/term/33">ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ</a> 
   <a href="/term/14">пиксСл</a> 
   <a href="/term/27">Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚</a> 
  </div>
 </body>
</html>

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

Рис. 8.4. Облако Ρ‚Π΅Π³ΠΎΠ²

Π’ стилях Ρ‚Π°ΠΊΠΆΠ΅ допускаСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ запись Π²ΠΈΠ΄Π° .layer1.layer2, Π³Π΄Π΅ layer1 ΠΈ layer2 ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой ΠΈΠΌΠ΅Π½Π° классов. Π‘Ρ‚ΠΈΠ»ΡŒ примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для элСмСнтов, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π·Π°Π΄Π°Π½Ρ‹ классы layer1 ΠΈ layer2.

Вопросы для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ

1. КакоС имя класса написано ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ?

  1. 2layer1
  2. 1layer
  3. Π―ndex
  4. pink-floyd
  5. 28_days_later

2. Какой Ρ†Π²Π΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Ρƒ слова Β«ΠΏΠΎΡ‚ΠΎΠΊΠ°Β» Π² ΠΊΠΎΠ΄Π΅?

<p>ΠšΠΎΡΡ„Ρ„ΠΈΡ†ΠΈΠ΅Π½Ρ‚ использования ΠΈΠ·Π»ΡƒΡ‡Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ²Π΅Ρ‚ΠΈΠ»ΡŒΠ½ΠΈΠΊΠ°ΠΌΠΈ <span>ΠΏΠΎΡ‚ΠΎΠΊΠ°</span>, Π½Π° расчСтной плоскости.</p>

ΠŸΡ€ΠΈ использовании ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ стиля?

BODY { color: red; }
P { color: green; }
.c1 {color: blue; }
.c2 { color: yellow; }
.c3 { color: orange; }
.c2.c3 { color: black; }

  1. Π—Π΅Π»Ρ‘Π½Ρ‹ΠΉ.
  2. Π‘ΠΈΠ½ΠΈΠΉ.
  3. Π–Ρ‘Π»Ρ‚Ρ‹ΠΉ.
  4. ΠžΡ€Π°Π½ΠΆΠ΅Π²Ρ‹ΠΉ.
  5. Π§Ρ‘Ρ€Π½Ρ‹ΠΉ.

3. Как Π·Π°Π΄Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ Ρƒ Ρ‚Π΅Π³Π° <div>DOOM</div>?

  1. div[iddqd] { color: red; }
  2. div.iddqd { color: red; }
  3. iddqd.div { color: red; }
  4. div#iddqd { color: red; }
  5. div=iddqd { color: red; }

4. КакоС имя класса слСдуСт Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ Ρ‚Π΅Π³Ρƒ <P>, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст Π±Ρ‹Π» ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΠΈ красного Ρ†Π²Π΅Ρ‚Π°, Ссли имССтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ?

Β s1 { color: red; font-weight: bold; }
.s2 { color: red; }
.s3 { background-color: red; font-weight: bold; }
.s4 { font-weight: bold; }
.s5 { font: red bold; }

  1. s1
  2. s2
  3. s3
  4. s2 s4
  5. s5

ΠžΡ‚Π²Π΅Ρ‚Ρ‹

1. pink-floyd

2. Π§Ρ‘Ρ€Π½Ρ‹ΠΉ.

3. div.iddqd { color: red; }

4. s2 s4

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс css Π½Π° wordpress?



Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс Π½Π° wordpress ΠΊ ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΌ изобраТСниям, Π½ΠΎ Π½Π΅ знаю, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. Π― ΡƒΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ» style.css , Π½ΠΎ ΠΎΠ½ всС Π΅Ρ‰Π΅ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Hueman Theme ΠΈ ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ этому ΠΎΠ±Ρ€Π°Π·Ρ†Ρƒ .

Как я ΠΌΠΎΠ³ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ?

style.css Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ > Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€>style.css

.circular-image img {
               width: 300px;
               height: 300px;
               -webkit-border-radius: 150px;
               -moz-border-radius: 150px;
               -ms-border-radius: 150px;
               -o-border-radius: 150px;
               border-radius: 150px;
}

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ

<div><img src="http://ideiadinamica.com/wp-content/uploads/2018/09/10372571_10200376805178580_8449416293546333562_n-150x150.jpg" alt="" /></div>
css wordpress
ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ FernandoPaiva Β  Β  14 сСнтября 2018 Π² 15:29

4 ΠΎΡ‚Π²Π΅Ρ‚Π°


  • Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ CSS ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ классу div — WordPress

    Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ WordPress с ΠΈΠΌΠ΅Π½Π΅ΠΌ KALLYAS, ΠΈ Ρƒ мСня Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ CSS Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ класс. Π­Ρ‚Π° Ρ‚Π΅ΠΌΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ нСсколько ΡˆΠΎΡ€Ρ‚ΠΊΠΎΠ΄ΠΎΠ². Π˜Ρ‚Π°ΠΊ, допустим, я Ρ…ΠΎΡ‡Ρƒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ с CSS Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΡΠ΅Ρ€ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС, Π½Π΅ влияя Π½Π° ΡΠ΅Ρ€ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π° любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ страницС . ΠΊΡ€ΠΎΠΌΠ΅…

  • Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ автоматичСский класс Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для wordpress post

    Π― Ρ…ΠΎΡ‡Ρƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ с Bootstrap 3. Однако ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ автоматичСски Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ класс CSS .img-responsive ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ изобраТСния Π±Ρ‹Π»ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌΠΈ. ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚Π΅ ΠΌΠ½Π΅, Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Ρ„Π°ΠΉΠ» WordPress functions.php ΠΈΠ»ΠΈ любой…



5

Wp-admin > внСшний Π²ΠΈΠ΄ > настройка Π·Π°Ρ‚Π΅ΠΌ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ «additional css» Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ свой ΠΊΠΎΠ΄

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ trainmania100 Β  Β  14 сСнтября 2018 Π² 15:32



2

Π― Π±Ρ‹ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΠ» ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΎΡ‡Π΅Ρ€Π½ΡŽΡŽ Ρ‚Π΅ΠΌΡƒ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Ρ„Π°ΠΉΠ»Ρ‹ вашСй Ρ‚Π΅ΠΌΡ‹(ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ пСрСзаписаны, Ссли Π°Π²Ρ‚ΠΎΡ€ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ Ρ‚Π΅ΠΌΡƒ).

По сути, Π²Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ с Ρ‚Π΅ΠΌ ΠΆΠ΅ ΠΈΠΌΠ΅Π½Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΈ ΠΏΠ°ΠΏΠΊΠ° вашСй Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Ρ‚Π΅ΠΌΡ‹, с -child Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΈΠΌΠ΅Π½ΠΈ ΠΏΠ°ΠΏΠΊΠΈ(ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΅Ρ‰Π΅, Π½ΠΎ это просто сохраняСт чистоту).

ΠžΡ‚Ρ‚ΡƒΠ΄Π° Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ style.css Π² Π΄ΠΎΡ‡Π΅Ρ€Π½ΡŽΡŽ ΠΏΠ°ΠΏΠΊΡƒ со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌ Π²Π²Π΅Ρ€Ρ…Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ WordPress Π·Π½Π°Π», Ρ‡Ρ‚ΠΎ это дочСрняя Ρ‚Π΅ΠΌΠ°:

/*
 Theme Name:   Hueman Child
 Description:  Hueman Child Theme
 Template:     hueman
 Version:      1.0.0
*/

Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ строка Template: соотвСтствуСт ΠΈΠΌΠ΅Π½ΠΈ шаблона Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Ρ‚Π΅ΠΌΡ‹(Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ это, ΠΎΡ‚ΠΊΡ€Ρ‹Π² style.css ). Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Ρ‚Π΅ΠΌΡ‹, Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠ΅ стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Π² этот Ρ„Π°ΠΉΠ» style.css . ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ style.css Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅ΠΉ Ρ‚Π΅ΠΌΡ‹ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ послСдним, ΠΎΠ½ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ ΡΡ‚ΠΈΠ»ΡŒ Ρ‚Π΅ΠΌΡ‹ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ(ΠΏΡ€ΠΈ условии, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ !important , ΠΈ Π² этом случаС Π²Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ придСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ !important ).

Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ваша дочСрняя Ρ‚Π΅ΠΌΠ° Π±ΡƒΠ΄Π΅Ρ‚ настроСна, просто Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π΅Π΅ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΠ°Π½Π΅Π»ΠΈ администратора.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ APAD1 Β  Β  14 сСнтября 2018 Π² 16:34



-3

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎ я ΠΈ сдСлал Π΄Π°Π²Π½Ρ‹ΠΌ-Π΄Π°Π²Π½ΠΎ. НадСюсь, это ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ для вас:

УстановитС ΠΏΠ»Π°Π³ΠΈΠ½ WP Image Borders. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² настройки >> Π“Ρ€Π°Π½ΠΈΡ†Ρ‹ изобраТСния WP, Π° Π·Π°Ρ‚Π΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ класс CSS (Ссли ΠΎΠ½ Ρƒ вас Π΅ΡΡ‚ΡŒ) ΠΈΠ»ΠΈ

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ страницу, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ «Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅» ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Ρ€Π°Π·Π΄Π΅Π» «Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹» ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ свой класс css Π² класс Image CSS

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ parth patel Β  Β  14 сСнтября 2018 Π² 15:46


  • WordPress ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ CSS класс для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° страницы

    Π― Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² WordPress, ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ мСня Π΅ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΌΠΎΠ΅ΠΉ собствСнной ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Ρ‚Π΅ΠΌΠΎΠΉ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Twitter Bootstrap Π² качСствС Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° для своСй Ρ‚Π΅ΠΌΡ‹, сущСствуСт класс CSS text-right , ΠΈ этот класс я Ρ…ΠΎΡ‡Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° своСй страницы Π² WordPress. Но я…

  • Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ класс css Π² Π³Π°Π»Π΅Ρ€Π΅ΡŽ WordPress

    Π― Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ класс css Π² Ρ€ΠΎΠ΄Π½ΡƒΡŽ Π³Π°Π»Π΅Ρ€Π΅ΡŽ WordPress. НапримСр, этот Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ HTML: <div id=gallery-2 class=gallery galleryid-1715 gallery-columns-4 gallery-size-thumbnail> Π― Π±Ρ‹ Ρ…ΠΎΡ‚Π΅Π» просто Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ класс iwmp . Как Π»ΡƒΡ‡ΡˆΠ΅ всСго это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ? Π―…



-3

WordPress Ρ‚Π΅ΠΌΡ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π±Π»ΠΎΠΊΠΈΡ€ΡƒΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стили. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, блокируСтся Π»ΠΈ ваш ΡΡ‚ΠΈΠ»ΡŒ, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнтС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ инспСктор ΠΈ Π½Π°ΠΉΡ‚ΠΈ стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ вашим классом. Когда Π²Ρ‹ ΠΈΡ… Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ «!Π²Π°ΠΆΠ½ΠΎ» ΠΊ своим стилям, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ.

стили классов Π±Π»ΠΎΠΊΠΈΡ€ΡƒΡŽΡ‚ΡΡ стилями элСмСнтов

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ Π²Ρ‹ заставляСтС стили:

.circular-image img {
           width: 300px !important;
           height: 300px; !important }

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Brenda Alicia Β  Β  14 сСнтября 2018 Π² 16:25


ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ вопросы:


ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ мою ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ страницу html (js ΠΈ css) Π½Π° страницу wordpress

Π£ мСня Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ страница html(js ΠΈ css), Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π°Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π² ΠΌΠΎΠ΅ΠΌ локальном Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Но я Ρ…ΠΎΡ‡Ρƒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ этот Ρ„Π°ΠΉΠ» html Π½Π° страницу wordpress. Π― попытался Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ вСсь…


Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс Π½Π° страницу списка ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ² записСй Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³Π° WordPress

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкС Π½Π° страницС списка ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ² записСй WordPress, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс Π½Π° основС значСния ΠΌΠ΅Ρ‚Π°-поля для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ записи Π½Π° бэкэндС: НапримСр: Ρƒ…


Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Javascript, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ класс css Π² WordPress

Π― Ρ…ΠΎΡ‡Ρƒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΈΠΆΠ΅ javascript Π½Π° домашнюю страницу wordpress, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ класс css. Π― Ρ…ΠΎΡ‡Ρƒ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ эффСкты Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Π² слайдСрС. Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ»…


Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ CSS ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ классу div — WordPress

Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ WordPress с ΠΈΠΌΠ΅Π½Π΅ΠΌ KALLYAS, ΠΈ Ρƒ мСня Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ CSS Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ класс. Π­Ρ‚Π° Ρ‚Π΅ΠΌΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ нСсколько ΡˆΠΎΡ€Ρ‚ΠΊΠΎΠ΄ΠΎΠ². Π˜Ρ‚Π°ΠΊ, допустим, я Ρ…ΠΎΡ‡Ρƒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ с CSS…


Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ автоматичСский класс Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для wordpress post

Π― Ρ…ΠΎΡ‡Ρƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ с Bootstrap 3. Однако ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ автоматичСски Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ класс CSS .img-responsive ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ изобраТСния Π±Ρ‹Π»ΠΈ…


WordPress ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ CSS класс для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° страницы

Π― Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² WordPress, ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ мСня Π΅ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΌΠΎΠ΅ΠΉ собствСнной ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Ρ‚Π΅ΠΌΠΎΠΉ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Twitter Bootstrap Π² качСствС Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° для своСй Ρ‚Π΅ΠΌΡ‹, сущСствуСт…


Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ класс css Π² Π³Π°Π»Π΅Ρ€Π΅ΡŽ WordPress

Π― Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ класс css Π² Ρ€ΠΎΠ΄Π½ΡƒΡŽ Π³Π°Π»Π΅Ρ€Π΅ΡŽ WordPress. НапримСр, этот Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ HTML: <div id=gallery-2 class=gallery galleryid-1715 gallery-columns-4…


WordPress: ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс CSS Π² ссылки мСню, сгСнСрированныС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ

<?php wp_nav_menu(array(‘menu’ => ‘mainnav’, ‘menu_class’ => ‘nav-bar-content current’, ‘menu_id’ => ‘navigation’, ‘container’ => false, ‘ theme_location’ => ‘primary-menu’,…


Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ JS & CSS Π½Π° страницу wordpress

Π£ мСня Π΅ΡΡ‚ΡŒ нСбольшой ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Ρ„Π°ΠΉΠ»Ρ‹ js ΠΈ CSS. Мой сайт-это сайт wordpress, ΠΈ я Ρ…ΠΎΡ‡Ρƒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ· своих страниц. Π― Ρ…ΠΎΡ‡Ρƒ Π·Π½Π°Ρ‚ΡŒ, Π³Π΄Π΅ я Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ JS, Π° ΠΊΠΎΠ΄…


Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ класс ΠΊ функциям Π² wordpress

Π£ мСня Π΅ΡΡ‚ΡŒ сайт wordpress Π½Π° localhost, ΠΈ я Ρ…ΠΎΡ‡Ρƒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ. Π― использовал Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ wordpress для Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ самого, Π½ΠΎ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ΅Π½ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ я сдСлал. Ѐункция, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я…

ИзмСнСниС оформлСния элСмСнтов сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… стилСй Π² WordPress

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ часто Π½Π° Ρ„ΠΎΡ€ΡƒΠΌΠ°Ρ… ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ WordPress я Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽ вопросы связанныС с настройкой внСшнСго Π²ΠΈΠ΄Π° элСмСнтов сайта: ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠΏΠ½Π΅Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ссылки Π² тСкстС Π±ΠΎΠ»Π΅Π΅ ярким Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ Ρ‚.Π΄.

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ‚Π΅ΠΌΠ°Ρ… оформлСния, особСнно Π² ΠΏΠ»Π°Ρ‚Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ…, Π΅ΡΡ‚ΡŒ мноТСство ΠΎΠΏΡ†ΠΈΠΉ ΠΈ настроСк ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… достаточно ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ элСмСнтов сайта.

Π•ΡΡ‚ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ настройки ΠΈ Π² стандартных Ρ‚Π΅ΠΌΠ°Ρ…, поставляСмых вмСстС с WordPress.

Но, Π² случаях, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎΠΉ настройки Π½Π΅Ρ‚ β€” ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ с вопросом ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ CSS.

CSS-стили ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΈΠ· сСбя Π½Π°Π±ΠΎΡ€Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ», Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Ρ… для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… элСмСнтов ΠΈΠ»ΠΈ Π½Π°Π±ΠΎΡ€ΠΎΠ² элСмСнтов сайта. Они Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΡŽΡ‚ Ρ‚ΠΎ, ΠΊΠ°ΠΊ элСмСнт отобраТаСтся Π½Π° сайтС: Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π», Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ΠΈ Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π²ΠΎΠΊΡ€ΡƒΠ³ элСмСнта, Ρ†Π²Π΅Ρ‚ тСкста Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта, Ρ†Π²Π΅Ρ‚ Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ прСдставлСниС ΠΎΠ± устройствС CSS, ΠΏΡ€ΠΈΠ΅ΠΌΠ°Ρ… Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ со списком ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€Π°Π²ΠΈΠ» ΠΌΠΎΠΆΠ½ΠΎ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° сайтах htmlbook.ru,Β webref.ru ΠΈ Ρ‚.Π΄.

Для добавлСния своСго CSS-ΠΊΠΎΠ΄Π° WordPress прСдоставляСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт β€” Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стили. Если Π’Ρ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ΡΡŒ Π½Π° ΠΏΡƒΠ±Π»ΠΈΡ‡Π½ΠΎΠΉ части сайта, Π² Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Π½Π°ΠΆΠ°Π² ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒΒ» Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ Β«Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стили». Из Π°Π΄ΠΌΠΈΠ½ ΠΏΠ°Π½Π΅Π»ΠΈ: Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ -> ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ -> Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стили.

Π”Π°Π½Π½Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» прСдставляСт ΠΈΠ· сСбя ΠΏΠΎΠ»Π΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ свои CSS-стили.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ CSS-ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ элСмСнту Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠ·Π½Π°Ρ‚ΡŒ Π΅Π³ΠΎ Ρ‚Π΅Π³ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹. Для этого Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Google Chrome.

Π©Π΅Π»ΠΊΠ½Π΅ΠΌ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰Π΅ΠΌΡƒ элСмСнту ΠΈ Π² контСкстном мСню Π²Ρ‹Π±Π΅Ρ€Π΅ΠΌ ΠΏΡƒΠ½ΠΊΡ‚ Β«ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄Β». ПослС Ρ‡Π΅Π³ΠΎ откроСтся ΠΎΠΊΠ½ΠΎ инструмСнтов с Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΎΠΉ Β«ElementsΒ».

Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Ρ†Π²Π΅Ρ‚ надписи WP TEST Π½Π° синий. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ прСдставляСт ΠΈΠ· сСбя ссылку (Ρ‚Π΅Π³ a), Π½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² class ΠΈΠ»ΠΈ id, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ CSS-ΠΏΡ€Π°Π²ΠΈΠ»Π°. Π£Ρ€ΠΎΠ²Π½Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Π΅ΡΡ‚ΡŒ элСмСнт с Ρ‚Π΅Π³ΠΎΠΌ h2 (Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ) ΠΈ классом Β«site-titleΒ», ΠΎΠ½ являСтся Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ для ссылки WP TEST. Π”ΠΎΠ±Π°Π²ΠΈΠΌ CSS-ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ для Ρ‚Π΅Π³Π° a с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ класса Β«site-titleΒ» Π² ΠΏΠΎΠ»Π΅ Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стили.

.site-title a { color: #00f; }

.site-title a {

Β Β Β Β color: #00f;

}

#00f β€” это ΠΊΠΎΠ΄ синСго Ρ†Π²Π΅Ρ‚Π°. Π‘Β ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π² CSS Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ Π½Π° Π²Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… сайтах.

CSS-ΠΊΠΎΠ΄ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ Π² ΠΏΠΎΠ»Π΅Β Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стили примСняСтся ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ, Π½ΠΎ ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«StylesΒ» нашС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΎΡΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π½Ρ‹ΠΌ (ΠΈΠ»ΠΈ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ β€” спСцифичным) CSS-ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ Ρ‚Π΅ΠΌΡ‹ (ΠΎΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ ярким Ρ†Π²Π΅Ρ‚ΠΎΠΌ).

body.has-header-image .site-title a { color: #fff; }

body.has-header-image .site-title a {

Β Β Β Β color: #fff;

}

Усилим нашС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΡƒΠΊΠ°Π·Π°Π² Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ Ρ‚Π΅Π³ΠΎΠ² ΠΈ классов.

body.has-header-image .site-title a { color: #00f; }

body.has-header-image .site-title a {

Β Β Β Β color: #00f;

}

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ измСнСния Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒΒ» Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана.

Если синий Ρ†Π²Π΅Ρ‚ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² Π½Π° синий ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΠΊ Π² CSS-ΠΏΡ€Π°Π²ΠΈΠ»Π΅ Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ экрана, Π° Π·Π°Ρ‚Π΅ΠΌ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° Π² ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π² ΠΏΠΎΠ»Π΅ Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стили.

Аналогичным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° страниц. Находим элСмСнт ΠΈ добавляСм своС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π½Π° основС ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ Π² Ρ‚Π΅ΠΌΠ΅.

body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 24px; }

body.page:not(.twentyseventeen-front-page) .entry-title {

Β Β Β Β font-size: 24px;

}

Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹ WordPress Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΏΠΎΠ΄ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ экрана устройств. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… устройствах с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Π΄ΠΈΠ°-запросов. Π”ΠΎΠ±Π°Π²ΠΈΠΌ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ².

/* Для всСх устройств */ body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 12px; } /* Для Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π° Π² ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈ Π²Ρ‹ΡˆΠ΅ */ @media (min-width: 768px) { body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 20px; } } /* Для Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π° Π² альбомной ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈ Π²Ρ‹ΡˆΠ΅ */ @media (min-width: 1024px) { body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 30px; } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

/* Для всСх устройств */

body.page:not(.twentyseventeen-front-page) .entry-title {

Β Β Β Β font-size: 12px;

}

Β 

/* Для Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π° Π² ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈ Π²Ρ‹ΡˆΠ΅ */

@media (min-width: 768px) {

Β Β Β Β body.page:not(.twentyseventeen-front-page) .entry-title {

Β Β Β Β Β Β Β Β font-size: 20px;

Β Β Β Β }

}

Β 

/* Для Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π° Π² альбомной ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈ Π²Ρ‹ΡˆΠ΅ */

@media (min-width: 1024px) {

Β Β Β Β body.page:not(.twentyseventeen-front-page) .entry-title {

Β Β Β Β Β Β Β Β font-size: 30px;

Β Β Β Β }

}

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π΅ΠΆΠΈΠΌΠ° эмуляции Π² инструмСнтах Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° (ΠΊΠ½ΠΎΠΏΠΊΠ° Toggle device toolbar). Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π³ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ сайт выглядит Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… устройствах, Π²Ρ‹Π±ΠΈΡ€Π°ΡŽ Π½ΡƒΠΆΠ½ΠΎΠ΅ ΠΈΠ· Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана.

Удобная настройка Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠΌΠ΅Π½ классов CSS

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: ΠΈΠ½ΠΎΠ³Π΄Π° я ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡΡŒ с ситуациями, ΠΊΠΎΠ³Π΄Π° ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½Ρ‹ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠΌΠ΅Π½Π° классов CSS для манипулирования стилями. Когда это происходит, я дСлю эти ситуации Π½Π° стандартныС Ρ‚ΠΈΠΏΡ‹ ΠΈ ΠΏΡ€ΠΈΡΠ²Π°ΠΈΠ²Π°ΡŽ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Ρ‚ΠΈΠΏΡƒ прСфикс ΠΈΠΌΠ΅Π½ΠΈ класса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдставляСт этот Ρ‚ΠΈΠΏ.

ΠšΠ»Π°ΡΡΡ‹ состояний

Π›ΡŽΠ±ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ½ΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ΄Π°Ρ‚ΡŒΡΡ Π² состоянии β€” ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ условии, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΊ Π½Π΅ΠΌΡƒ примСняСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ.

Если ΠΌΡ‹ возьмСм, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, main-nav, ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°ΠΌ придСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ ΠΎΠ½ ΠΈΠ»ΠΈ Π½Π΅Ρ‚. Π—Π΄Π΅ΡΡŒ Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ приходят классы состояний CSS.

<nav> </nav>

<nav> </nav>

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти классы для описания Ρ‚ΠΈΠΏΠΎΠ² сообщСний, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<div> <!— Gray Message —></div> <div><!— Green Message —></div> <div> <!— Red Message —></div> <div> <!—Yellow Message —></div>

<div> <!— GrayΒ Β Message —></div>

<div><!— Green Message —></div>

<div> <!— RedΒ Β  Message —></div>

<div> <!—Yellow Message —></div>

Или любоС Π΄Ρ€ΡƒΠ³ΠΎΠ΅ состояниС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: is-wide, is-top, is-small, is-double-size, is-scrolled, is-full-width ΠΈ Ρ‚.Π΄. Π’ этих случаях Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ классов, сколько Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

Как это выглядит Π² Ρ„Π°ΠΉΠ»Π΅ CSS / Sass:

.common-message{ /*component styles*/ &.is-approved { color:green; } &.is-error { color:red; } &.is-alert { color:yellow; } }

.common-message{

Β Β Β Β /*component styles*/

Β Β Β Β &.is-approved { color:green; }Β Β Β Β 

Β Β Β Β &.is-errorΒ Β Β Β { color:red; }Β Β Β Β 

Β Β Β Β &.is-alertΒ Β Β Β { color:yellow; }Β Β Β Β 

}

Π‘Π»ΡƒΠΆΠ΅Π±Π½Ρ‹Π΅ классы

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

Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΌΠΎΠΈΡ… слуТСбных классов Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ всСгда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΈΡ… с ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ Β«!importantΒ». Π‘Π»ΡƒΠΆΠ΅Π±Π½Ρ‹Π΅ классы β€” СдинствСнный Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования !important. Π—Π°Ρ‡Π΅ΠΌ Π½Π°ΠΌ это Π½ΡƒΠΆΠ½ΠΎ?! ВсС просто, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ эти классы, ΠΌΡ‹ всСгда Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π½Π΅ измСнялись для всСго каскада CSS. Если ΠΌΡ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ пСрСопрСдСляли Π΄Ρ€ΡƒΠ³ΠΈΠ΅ стили, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ класс ΠΈΠ· элСмСнта HTML.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ слуТСбных классов CSS:

.u-hide{ display:none!important;}

.u-hide{ display:none!important;}

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования слуТСбных классов Π² HTML:

<div class»common-message u-hide»></div>

<div class»common-message u-hide»></div>

Π― Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ΠΈΡ… часто, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ситуациях, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я описал. Π‘Π»ΡƒΠΆΠ΅Π±Π½Ρ‹Π΅ классы, Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ классы состояний, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, сколько Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

ΠšΠ»Π°ΡΡΡ‹ сущностСй ΠΈ классы страниц

Π’ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… Π΅ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ для Π½Π΅ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’ этих случаях я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΄Π²ΡƒΡ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ²:

Бущности β€” ΠΏΡ€ΠΈ использовании ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, стили ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ слСгка ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒΡΡ, я добавляю ΠΊ Π½Π΅ΠΌΡƒ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ имя класса, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ начинаСтся с прСфикса β€˜e-’ , ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅Π³ΠΎ ΡΡƒΡ‰Π½ΠΎΡΡ‚ΡŒ, Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΈΠΌΠ΅Π½ΠΈ класса ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

Π­Ρ‚ΠΎΡ‚ класс ΠΌΠΎΠΆΠ΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ стили. МоС эмпиричСскоС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Ρƒ ΡΡƒΡ‰Π½ΠΎΡΡ‚ΡŒ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Если Π΅ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ случай использования этого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, стили ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π΅ Π½Π° 100% ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹, Π»ΡƒΡ‡ΡˆΠ΅ вмСсто этого ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΡΡƒΡ‰Π½ΠΎΡΡ‚ΡŒ! ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

<section> </section>

<section> </section>

ΠšΡ€ΠΎΠΌΠ΅ этого, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ классов CSS состояний / слуТСбных классов, сколько Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

<section> </section>

<section> </section>

ИспользованиС CSS:

.e-datepicker-popup{ /*add or override styles*/ }

.e-datepicker-popup{

Β Β Β Β  /*add or override styles*/

}

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Π§Ρ‚ΠΎΠ±Ρ‹ класс сущностСй ΠΏΡ€Π΅ΠΎΠ±Π»Π°Π΄Π°Π» Π² Π±ΠΎΡ€ΡŒΠ±Π΅ каскадных стилСй, Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ всСгда Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ послС ΠΈΠΌΠ΅Π½ классов ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

.common-popup{ /*common popup styles*/ } .e-datepicker-popup{ /*add or override style of common-popup */ }

.common-popup{Β Β Β Β Β Β  /*common popup styles*/ }

.e-datepicker-popup{ /*add or override style of common-popup */ }

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ β€” ΠΊΠ°ΠΆΠ΄ΡƒΡŽ страницу Π½Π° вашСм сайтС ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ большой ΡΡƒΡ‰Π½ΠΎΡΡ‚ΡŒΡŽ. Класс страницы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² элСмСнтС body ΠΈΠ»ΠΈ Π² Π³Π»Π°Π²Π½ΠΎΠΌ элСмСнтС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ всС, ΠΈΠΌΠ΅Π½Π° этого класса Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ΡΡ с Β«p-Β». НапримСр: Β«p-homepageΒ» ΠΈΠ»ΠΈ Β«p-newsΒ» ΠΈ Ρ‚. Π΄.

<body></body>

<body></body>

Π›ΡƒΡ‡ΡˆΠ΅ ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ использования этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π°, Ссли это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ Π±Ρ‹Π²Π°ΡŽΡ‚ случаи, ΠΊΠΎΠ³Π΄Π° Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Π²Ρ‹Π±ΠΎΡ€Π° Π½Π΅Ρ‚. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования:

.p-homepage .common-popup{ /*do some styles manipulations*/ }

.p-homepage .common-popup{ /*do some styles manipulations*/ }

Π­Ρ‚ΠΎΡ‚ класс ΠΌΠΎΠΆΠ΅Ρ‚ Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠ°Ρ€Ρ‚ΠΈΠ°Π» Π½Π° страницС.

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

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ситуации, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Π½Π° классов CSS для Π²Ρ‹Π±ΠΎΡ€Π° Π²Π΅Ρ‰Π΅ΠΉ Π² JS. Но Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ классы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½ΠΎ для проСктирования ΠΈ Π²Ρ‹Π±ΠΎΡ€Π° Π΄Π°Π½Π½Ρ‹Ρ… Π² JS, ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΈΠΌΠ΅Π½Π° классов JS. Π­Ρ‚ΠΈ ΠΈΠΌΠ΅Π½Π° классов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для манипулирования Π΄Π°Π½Π½Ρ‹ΠΌΠΈ, Π° Π½Π΅ для добавлСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… стилСй!

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ классы для стилСй, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ классы Π² соотвСтствии с ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΈΠΊΠΎΠΉ, описанной Π²Ρ‹ΡˆΠ΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, слуТСбныС классы. ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

<section> </section>

<section> </section>

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π’ΠΎΡ‚ ΠΈ всС, надСюсь, Π²Π°ΠΌ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»Π°ΡΡŒ эта ΡΡ‚Π°Ρ‚ΡŒΡ, ΠΈ Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ.

Автор: Elad Shechter

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: //medium.com

РСдакция: Команда webformyself.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

PSD to HTML

ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° вСрстки сайта Π½Π° CSS Grid с нуля

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ собствСнныС классы CSS Π² WPForms

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ Π²Π°ΡˆΠΈΡ… Ρ„ΠΎΡ€ΠΌ WordPress? Π’ WPForms Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ собствСнныС классы ΠΈ стили CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши Ρ„ΠΎΡ€ΠΌΡ‹ выглядСли Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Π°ΠΌ хочСтся.

Π’ этом руководствС ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ собствСнныС классы CSS для стилизации ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… элСмСнтов Ρ„ΠΎΡ€ΠΌΡ‹, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ любой собствСнный CSS Π½Π° ваш сайт WordPress.


Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ класс CSS?

CSS-классы ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ элСмСнты Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° своСм Π²Π΅Π±-сайтС.

Π’ WPForms полям автоматичСски назначаСтся нСсколько классов CSS. НапримСр, Ссли для поля установлСно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Field Size ΠΈΠ· Large , Π΅ΠΌΡƒ Π±ΡƒΠ΄Π΅Ρ‚ присвоСн класс CSS wpforms-field-large . Однако этот класс ΠΏΠΎΠ»Π΅Π·Π΅Π½ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ CSS, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ большоС ΠΏΠΎΠ»Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ Π½Π° своСм сайтС.

Π”ΠΎΠ±Π°Π²ΠΈΠ² собствСнный класс CSS, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°Ρ€Π³Π΅Ρ‚ΠΈΠ½Π³ Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ стили ΠΊ нСскольким полям.

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ собствСнныС классы CSS Π² WPForms

Π’ WPForms Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свои собствСнныС классы CSS Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ поля Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ ΠΈΠ»ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π²ΠΎΠΊΡ€ΡƒΠ³ вашСй Ρ„ΠΎΡ€ΠΌΡ‹.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ классов CSS Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ поля Ρ„ΠΎΡ€ΠΌΡ‹

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ собствСнный класс CSS Π² ΠΏΠΎΠ»Π΅ Ρ„ΠΎΡ€ΠΌΡ‹, сначала создайтС Π½ΠΎΠ²ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ ΠΈΠ»ΠΈ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ.

На ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра конструктора Ρ„ΠΎΡ€ΠΌ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΅Π³ΠΎ ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ поля. Π—Π°Ρ‚Π΅ΠΌ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π» Advanced Options ΠΈ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π΅ с надписью CSS Classes .

ΠŸΡ€ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠΈ класса CSS всС Π±ΡƒΠΊΠ²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ строчными, ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ Π½Π΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ.Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ имя класса содСрТало Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ слова, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ дСфис (-) вмСсто ΠΏΡ€ΠΎΠ±Π΅Π»Π°. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π½Π°Π·ΠΎΠ²Π΅ΠΌ наш класс CSS wpf-blue-background .

Добавляя wpf- Π² Π½Π°Ρ‡Π°Π»ΠΎ Π½Π°ΡˆΠΈΡ… классов, ΠΌΡ‹ с мСньшСй Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ имя класса, ΡƒΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ΅ Ρ‚Π΅ΠΌΠΎΠΉ нашСго сайта. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΠΎΠ² стилСй ΠΈ повысит Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠ³ΠΎ примСнСния Π½Π°ΡˆΠΈΡ… стилСй.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ классы Π² это ΠΏΠΎΠ»Π΅, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.Для этого просто Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΡ€ΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ класса. НапримСр:

wpf-blue-background wpf-bold-font wpf-xl-margin

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ классов CSS Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ

Для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… стилСй ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°Ρ€Π³Π΅Ρ‚ΠΈΠ½Π³ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ.

НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Ρ…ΠΎΡ‚Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ для всСх Ρ„ΠΎΡ€ΠΌ подписки Π½Π° вашСм сайтС Π±Ρ‹Π»ΠΈ стилизованы Π² ΠΎΠ΄Π½ΠΎΠΌ стилС, Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π² Π»ΡŽΠ±Ρ‹Ρ… ΠΎΠ±Ρ‰ΠΈΡ… ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ… — ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ.Π›Π΅Π³ΠΊΠΈΠΉ способ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ этого — Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ класс CSS ΠΊ любой ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ, ΡΡ‚ΠΈΠ»ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ собствСнноС имя класса CSS для любого Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°, ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ конструктор Ρ„ΠΎΡ€ΠΌ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² «Настройки Β» Β»ΠžΠ±Ρ‰ΠΈΠ΅ . На этой Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π²Ρ‹ смоТСтС ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ поля для Form CSS Class ΠΈ Submit Button CSS Class .

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ класса, просто Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΈΡ… ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠΌ. Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π° классов ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ строчныС Π±ΡƒΠΊΠ²Ρ‹ ΠΈ дСфисы (-).

Как ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ стили CSS для вашСго сайта

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ собствСнный класс CSS Π² ΠΏΠΎΠ»Π΅ Ρ„ΠΎΡ€ΠΌΡ‹, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ стилСй CSS

CSS — ΠΌΠΎΡ‰Π½Ρ‹ΠΉ инструмСнт с большим количСством доступных стилСй. Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ CSS, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² нашСм РуководствС ΠΏΠΎ CSS для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ….

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ просто Π΄ΠΎΠ±Π°Π²ΠΈΠΌ синий Ρ„ΠΎΠ½ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ полю с классом wpf-blue-text .ΠŸΡ€ΠΈ написании ΠΈΠΌΠ΅Π½ΠΈ класса Π² CSS ΠΎΠ½ΠΎ всСгда Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с Ρ‚ΠΎΡ‡ΠΊΠΈ (.), НапримСр .wpf-blue-background .

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ стили ΡƒΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ вашСй Ρ„ΠΎΡ€ΠΌΠ΅, Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш CSS Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ. Для этого просто Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ div.wpforms-container-full .wpforms-form ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ своСго настраиваСмого класса.

Π’ΠΎΡ‚ наш ΠΏΡ€ΠΈΠΌΠ΅Ρ€ CSS:

 div.wpforms-container-full .wpforms-form .wpf-blue-background {
    Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # d1effd;
}
 

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ CSS Π½Π° ваш сайт WordPress

Один ΠΈΠ· быстрых ΠΈ простых способов Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ собствСнный CSS Π½Π° ваш сайт — ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ настройщик Ρ‚Π΅ΠΌ WordPress.Π­Ρ‚ΠΎ популярный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ доступСн практичСски Π²ΠΎ всСх Ρ‚Π΅ΠΌΠ°Ρ… ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, см. Руководство WPBeginner ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ собствСнный CSS Π² WordPress.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ области CSS Π² настройщикС Ρ‚Π΅ΠΌΡ‹, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ Β»ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ , Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ с надписью Additional CSS .

Π—Π°Ρ‚Π΅ΠΌ, ΠΏΠΎΠ΄ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅ΠΌ ΠΊ инструкциям, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ свой собствСнный Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ CSS.ΠŸΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ свой ΡΡ‚ΠΈΠ»ΡŒ (стили) ΠΏΠ΅Ρ€Π΅Π΄ сохранСниСм. Когда Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ .

Π’ΠΎΡ‚ ΠΈ всС! Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ собствСнныС классы CSS для стилизации ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… областСй Π²Π°ΡˆΠΈΡ… Ρ„ΠΎΡ€ΠΌ.

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ наши встроСнныС стили Ρ„ΠΎΡ€ΠΌ? ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с нашим руководством ΠΏΠΎ настройкС ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»Π΅ΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ для получСния всСх подробностСй.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ собствСнного класса CSS Π² Π±Π»ΠΎΠΊ WordPress

Π—Π½Π°Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ собствСнный класс CSS Π² Π±Π»ΠΎΠΊ WordPress, Π²Ρ‹ смоТСтС ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ стилСм этого ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°?

ΠŸΡ€ΠΎΡ†Π΅ΡΡ добавлСния класса CSS Π² Π±Π»ΠΎΠΊ WordPress прост, ΠΈ это ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ Π±Π΅Π· использования сторонних ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ².

Однако я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ стилСй ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° состоит ΠΈΠ· Π΄Π²ΡƒΡ… шагов:

  1. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ класса CSS Π² Π±Π»ΠΎΠΊ.
  2. ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ стилСй для этого ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ класса CSS.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я ΠΏΡ€ΠΎΠ²Π΅Π΄Ρƒ вас Ρ‡Π΅Ρ€Π΅Π· ΠΎΠ±Π° шага, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ стили Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ собствСнный класс CSS

Π₯отя Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ прСдоставляСт Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ стиля для Π±Π»ΠΎΠΊΠΎΠ², Π±Ρ‹Π²Π°ΡŽΡ‚ случаи, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹ΠΉΡ‚ΠΈ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ доступных ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ².

Допустим, Ρƒ вас Π΅ΡΡ‚ΡŒ Π±Π»ΠΎΠΊ Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½Π° вашСй страницС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… стилСй. ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ шагом Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ класса CSS Π² ваш Π±Π»ΠΎΠΊ:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ страницу ΠΈΠ»ΠΈ сообщСниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ.
  2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π±Π»ΠΎΠΊ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свой собствСнный класс CSS.
  3. На ΠΏΡ€Π°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΠΎΠ΄ Π²ΠΊΠ»Π°Π΄ΠΊΠΎΠΉ Block Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π» Advanced ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π΅Π³ΠΎ.
  4. Π’ Ρ€Π°Π·Π΄Π΅Π»Π΅ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ классы CSS ΠΏΠΎΠ»Π΅.
  5. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ имя вашСго ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ класса CSS. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ со ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ Π² качСствС настраиваСмого класса CSS.
  6. ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ свою страницу ΠΈΠ»ΠΈ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠΉΡ‚Π΅, ΠΊΠΎΠ³Π΄Π° Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹.
ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°: Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ класса CSS ΠΊ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ

ПослС добавлСния этого класса CSS ΠΊ Π±Π»ΠΎΠΊΡƒ Π²Ρ‹ Π½Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² своСм Π±Π»ΠΎΠΊΠ΅ ΠΏΡ€ΠΈ просмотрС фактичСской страницы.

Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ WordPress, ΠΊΠ°ΠΊΠΈΠ΅ измСнСния стиля ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ.

ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ стили CSS

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅Π΄Π°Π²Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ класс CSS. Π’ΠΎΡ‚ собствСнный CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Π±ΡƒΠ΄Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для своСго класса с особым Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ :

  .special-title {
    Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 09c;
    отступ: 1em;
    Ρ†Π²Π΅Ρ‚: #ffffff;
    Ρ‚Π΅Π½ΡŒ тСкста: 0 1px 10px # 0a3d4e;
    Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Ρ†Π΅Π½Ρ‚Ρ€;
    радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 80 пиксСлСй 20 пиксСлСй;
    Π³Ρ€Π°Π½ΠΈΡ†Π°: 2px solid # 0a3d4e;
}  

Π’Π°ΠΆΠ½ΠΎ: Никогда Π½Π΅ добавляйтС собствСнныС стили Π² ΡΡ‚ΠΈΠ»ΡŒ .css Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Ρ‚Π΅ΠΌΠ΅. Π’Ρ‹ рискуСтС ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒ всС свои ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ измСнСния послС выпуска Π½ΠΎΠ²ΠΎΠΉ вСрсии Ρ‚Π΅ΠΌΡ‹.

Если Π²Ρ‹ Ρ€Π°Π½ΡŒΡˆΠ΅ Π½Π΅ добавляли собствСнный CSS Π½Π° свой сайт, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с нашим ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌ руководством ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ собствСнный CSS Π² WordPress.

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ я ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ» послС добавлСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ CSS Π½Π° ΠΌΠΎΠΉ сайт WordPress:

Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ настраиваСмого Π±Π»ΠΎΠΊΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° с использованиСм Ρ‚Π΅ΠΌΡ‹ Prosperity .

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ CSS Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ части Π½Π΅Π΄Π°Π²Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π²Π°ΠΌΠΈ настраиваСмого CSS ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.Π’ зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π° ваша Ρ‚Π΅ΠΌΠ°, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ части вашСго ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ CSS ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ пСрСзаписаны Ρ‚Π΅ΠΌΠΎΠΉ.

ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΏΠΎΠΉΠΌΠΈΡ‚Π΅, ΠΌΡ‹ Π½Π΅ прСдоставляСм Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΠΌΠΎΡ‰ΠΈ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ с вашСй Ρ‚Π΅ΠΌΠΎΠΉ, Π² коммСнтариях Π½ΠΈΠΆΠ΅.

Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΎΠ΄Π½Ρƒ ΠΈΠ· Π½Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅ΠΌ WordPress, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ Π½Π°ΠΌ, ΠΈ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π΄Ρ‹ Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΡ‡ΡŒ.

Π’ Π΄Ρ€ΡƒΠ³ΠΈΡ… случаях, поТалуйста, ΡΠ²ΡΠΆΠΈΡ‚Π΅ΡΡŒ с Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ вашСй Ρ‚Π΅ΠΌΡ‹ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ стили Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅

Π­Ρ‚ΠΎ обратная сторона Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°.Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π½Π΅Π΄Π°Π²Π½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ, Π½Π΅ загруТаСтся Π² Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ фактичСской страницС ( интСрфСйс ) вашСго сайта.

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ классы CSS Π² Π±Π»ΠΎΠΊ Π“ΡƒΡ‚Π΅Π½Π±Π΅Ρ€Π³Π° β€’ WPShout

Π’ этом тСкстовом ΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠΌ руководствС ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ классы CSS Π² Π±Π»ΠΎΠΊ Π“ΡƒΡ‚Π΅Π½Π±Π΅Ρ€Π³Π°, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π±Π»ΠΎΠΊ Π² Π½ΠΎΠ²ΠΎΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ WordPress.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс CSS Π² Π±Π»ΠΎΠΊ Π“ΡƒΡ‚Π΅Π½Π±Π΅Ρ€Π³Π° просто, Π½ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ, Π³Π΄Π΅ ΠΈΡΠΊΠ°Ρ‚ΡŒ эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Π² Β«Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹Β» справа.Π’ Π²ΠΈΠ΄Π΅ΠΎ Π½ΠΈΠΆΠ΅ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, Π³Π΄Π΅ Π½Π°ΠΉΡ‚ΠΈ эту ΠΎΠΏΡ†ΠΈΡŽ ΠΈ ΠΊΠ°ΠΊ Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для добавлСния ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… классов CSS Π² любой Π±Π»ΠΎΠΊ WordPress.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ класс CSS: ΠšΠ»Π°ΡΡΡ‹ CSS — это нСбольшая Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ HTML, которая ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΠΈΠ·Π°Ρ†ΠΈΡŽ элСмСнта с использованиСм каскадных Ρ‚Π°Π±Π»ΠΈΡ† стилСй (CSS). Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΠΎΠ½ΠΈ выглядят ΠΊΠ°ΠΊ class = "my-css-class" Π² рассматриваСмом элСмСнтС HTML. Π—Π°Ρ‚Π΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Β«ΠΏΡ€Π°Π²ΠΈΠ»Π° CSSΒ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ заставят ΠΈΡ… Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. ΠžΠ±Ρ‰Π°Ρ ΠΏΠΎΡ‚Ρ€Π΅Π±Π½ΠΎΡΡ‚ΡŒ Π² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, ΠΊΠ°ΠΊ Π²Π½ΡƒΡ‚Ρ€ΠΈ WordPress, Ρ‚Π°ΠΊ ΠΈ Π²Π½Π΅ Π΅Π³ΠΎ, — это Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ класс CSS ΠΊ Ρ‡Π΅ΠΌΡƒ-Π»ΠΈΠ±ΠΎ Π½Π° страницС.

Π’ΠΈΠ΄Π΅ΠΎ ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ класса CSS Π² Π±Π»ΠΎΠΊ Gutenblock

Π’ΠΎΡ‚ Π²ΠΈΠ΄Π΅ΠΎ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс CSS Π² Π±Π»ΠΎΠΊ WordPress Π² Π½ΠΎΠ²ΠΎΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ Β«GutenbergΒ»:

НаписанныС шаги для добавлСния класса CSS Π² Π±Π»ΠΎΠΊ Π² WordPress Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π±Π»ΠΎΠΊΠΎΠ²

НСкоторыС ΠΈΠ· вас ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ. Понял тСбя. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ я добавляю элСмСнт HTML класса Π² Π±Π»ΠΎΠΊ Π“ΡƒΡ‚Π΅Π½Π±Π΅Ρ€Π³Π° WordPress:

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π±Π»ΠΎΠΊ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ Π±Π»ΠΎΠΊΠΎΠ² Π“ΡƒΡ‚Π΅Π½Π±ΡƒΡ€Π³Π° , ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс CSS.
  2. На ΠΏΡ€Π°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Β«Π‘Π»ΠΎΠΊΒ» (ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Β«Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌΒ»). Π’ Ρ€Π΅ΠΆΠΈΠΌΠ΅ просмотра Β«Π‘Π»ΠΎΠΊΒ» Π½Π° ΠΏΡ€Π°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° * послСдний * элСмСнт (Π²Π½ΠΈΠ·Ρƒ) Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Β«Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΒ». Если Π²Ρ‹ Ρ‰Π΅Π»ΠΊΠ½Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Ρ‡Π°ΡΡ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Β«Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅Β», Π½Π° Π½Π΅ΠΉ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ ΠΌΠ΅Ρ‚ΠΊΠ° ΠΈ ΠΏΠΎΠ»Π΅ Β«Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ классы CSSΒ». Π’ это ΠΏΠΎΠ»Π΅ Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ свои Π½ΠΎΠ²Ρ‹Π΅ классы CSS, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: class1 my-css-class-2 lastCSSClassToAdd .
  3. НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ» ΠΈΠ»ΠΈ Β«ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒΒ» своС сообщСниС (ΠΈΠ»ΠΈ страницу ΠΈ Ρ‚. Π”.). Π’ΠΎΠ³Π΄Π° Ρ‚Π°-Π΄Π°. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅. πŸ™‚

Руководство для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… ΠΏΠΎ классам CSS

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ создаСтС Π²Π΅Π±-страницу.Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π³Ρ€ΡƒΠΏΠΏΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈΠΌΠ΅Π»Π° большой красный тСкст, Π³Ρ€ΡƒΠΏΠΏΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠΌΠ΅Π»Π° срСдний Π±Π΅Π»Ρ‹ΠΉ тСкст, Π° Π³Ρ€ΡƒΠΏΠΏΠ° Π°Π±Π·Π°Ρ†Π΅Π² ΠΈΠΌΠ΅Π»Π° нСбольшой синий тСкст.

Π‘ΠΌΠ΅Π»Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€. Но благодаря классам CSS Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ это. ΠšΠ»Π°ΡΡΡ‹ CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ свойства стиля ΠΊ Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌ элСмСнтов HTML для достиТСния ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ внСшнСго Π²ΠΈΠ΄Π° Π²Π΅Π±-страницы.

Π’ этом постС ΠΌΡ‹ рассмотрим основныС Ρ‚Π΅Ρ€ΠΌΠΈΠ½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ класс CSS, сСлСктор классов ΠΈ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ CSS. ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ рассмотрим, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ класс Π² CSS ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для стилизации Π²Π°ΡˆΠΈΡ… Π²Π΅Π±-страниц.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ класс CSS?

Класс CSS — это Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для опрСдСлСния Π³Ρ€ΡƒΠΏΠΏΡ‹ элСмСнтов HTML с Ρ†Π΅Π»ΡŒΡŽ примСнСния ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ стиля ΠΈ форматирования ΠΊ этим элСмСнтам с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ классы CSS. НиТС Ρƒ нас Π΅ΡΡ‚ΡŒ простая HTML-страница с трСмя Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ ( h3 элСмСнтов) ΠΈ трСмя Π°Π±Π·Π°Ρ†Π°ΠΌΠΈ ( p элСмСнтов).

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ послСдний Π°Π±Π·Π°Ρ† стилизованы ΠΈΠ½Π°Ρ‡Π΅, Ρ‡Π΅ΠΌ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ — это ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ этим элСмСнтам присвоСн класс bright .Глядя Π½Π° CSS, ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ сСлСктор .bright , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ примСняСт свои ΠΏΡ€Π°Π²ΠΈΠ»Π° стиля ΠΊΠΎ всСм элСмСнтам с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ class = «bright» .

Π‘ΠΌ. Pen css class: ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠšΡ€ΠΈΡΡ‚ΠΈΠ½Ρ‹ ΠŸΠ΅Ρ€Ρ€ΠΈΠΊΠΎΠ½Π΅ (@hubspot) Π½Π° CodePen.

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

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ класс Π² CSS

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ класс CSS с нуля. Допустим, Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π°Π±Π·Π°Ρ† тСкста ΠΈ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ слова для большСй Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это, создав класс CSS для этих ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… слов, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°Π·Π½Π°Ρ‡ΠΈΠ² этот класс ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ словам с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² span .

НачнитС с написания элСмСнтов HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС это Π°Π±Π·Π°Ρ† тСкста:

.
  

НашС ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³ΠΎΠ²ΠΎΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС ΠΈ сСрвисная ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π²Π°ΠΌ инструмСнты, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для привлСчСния посСтитСлСй, конвСрсии ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ ΠΈΡ… ΠΊΠ°ΠΊ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ².


Π― Ρ‚Π°ΠΊΠΆΠ΅ размСстил Ρ‚Π΅Π³ΠΎΠ² Π²ΠΎΠΊΡ€ΡƒΠ³ слов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ скоро Π±ΡƒΠ΄Π΅ΠΌ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ класса CSS.

Π—Π°Ρ‚Π΅ΠΌ Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ класса ΠΊ этим Ρ‚Π΅Π³Π°ΠΌ . Для этого Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ class = «name» ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡƒ Ρ‚Π΅Π³Ρƒ Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ элСмСнта ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ name ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ класса.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ HTML выглядит Ρ‚Π°ΠΊ:

  

НашС ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³ΠΎΠ²ΠΎΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС ΠΈ сСрвисная ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π²Π°ΠΌ инструмСнты, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для привлСчСния посСтитСлСй, конвСрсии ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ ΠΈΡ… ΠΊΠ°ΠΊ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ².


Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π΄Π²Π° класса CSS ΠΊ нашим Ρ‚Π΅Π³Π°ΠΌ span : orange-text ΠΈ blue-text .

НаконСц, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½Π°Π±ΠΎΡ€Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ» для этих классов Π² CSS. ΠœΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСлСкторов классов CSS ΠΈ Π±Π»ΠΎΠΊΠΎΠ² объявлСний.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ сСлСктор классов Π² CSS?

Π’ CSS сСлСктор класса форматируСтся ΠΊΠ°ΠΊ символ Ρ‚ΠΎΡ‡ΠΊΠΈ (.), Π—Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ слСдуСт имя класса. Он Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ всС элСмСнты с этим Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ класса, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ объявлСния CSS ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΊ этим ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ элСмСнтам, Π½Π΅ затрагивая Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты Π½Π° страницС.

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создадим Π±Π»ΠΎΠΊΠΈ объявлСний для ΠΎΠ±ΠΎΠΈΡ… Π½Π°ΡˆΠΈΡ… классов CSS с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСлСкторов .orange-text ΠΈ .blue-text :

.
  
/ * объявлСниС для нашСго ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ класса CSS * /
.orange-text {
color: orange;
font-weight: ΠΆΠΈΡ€Π½Ρ‹ΠΉ;
}

/ * объявлСниС для нашСго Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ класса CSS * /
.blue-text {
color: blue;
font-weight: ΠΆΠΈΡ€Π½Ρ‹ΠΉ;
}

Когда ΠΌΡ‹ объСдиняСм наши HTML ΠΈ CSS вмСстС, ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, ΠΊΠ°ΠΊ наши классы CSS Π½Π°Ρ†Π΅Π»Π΅Π½Ρ‹ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ элСмСнты с нашим ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ стилСм:

Π‘ΠΌ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Pen css class: span ΠšΡ€ΠΈΡΡ‚ΠΈΠ½Ρ‹ ΠŸΠ΅Ρ€Ρ€ΠΈΠΊΠΎΠ½Π΅ (@hubspot) Π½Π° CodePen.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ class сам ΠΏΠΎ сСбС Π½Π΅ измСняСт содСрТимоС ΠΈΠ»ΠΈ ΡΡ‚ΠΈΠ»ΡŒ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ простоС Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° класса ΠΊ элСмСнту Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ CSS Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ внСшний Π²ΠΈΠ΄ ΠΈΠ»ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнта Π²ΠΎ внСшнСм интСрфСйсС. Π’Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ классу ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ измСнСния.

Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π° классов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ элСмСнт Π² классС. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ использовали ΠΈΠΌΠ΅Π½Π° .orange-text ΠΈ .blue-text , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ создавали Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ тСкст.Π­Ρ‚ΠΈ ΠΈΠΌΠ΅Π½Π° достаточно ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ любой, ΠΊΡ‚ΠΎ просто Ρ‡ΠΈΡ‚Π°Π» CSS, понял Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ класса.

ИмСна классов ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… слов. Если имя вашСго класса состоит ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… слов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ дСфисы вмСсто ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ². ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, принято ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π° классов Π² Π½ΠΈΠΆΠ½Π΅ΠΌ рСгистрС. НСкоторыС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈΠΌΠ΅Π½ классов Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ .bright-blue ΠΈ .fancy-text .

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ классы CSS

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ класс CSS ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ отобраТаСтся Π² основной части Ρ„Π°ΠΉΠ»Π° HTML, Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ использования.

Bootstrap CSS-классы

МногиС Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ CSS интСнсивно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ классы CSS. НапримСр, Bootstrap CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ классы для опрСдСлСния элСмСнтов страницы.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ Bootstrap ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ классы CSS. Π’ Bootstrap CSS класс CSS .btn ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ с HTML-элСмСнтом

ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

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

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