ЮРІЙ ЧЕРНІЄВСЬКИЙ

ПЕРСОНАЛЬНИЙ САЙТ

CSS синтаксис - селектори

CSS3 LOGO
CSS3 LOGO

На попередніх уроках ми з Вами визначились, що HTML елементи ми можемо порівнювати з будівельними блоками, а набір правил CSS ми можемо порівняти з оздобленням цих будівельних блоків.

Набір правил складається з певних частин і пишеться строго у відповідності до CSS синтаксису.

CSS синтаксис
CSS синтаксис

Нічого складного у самому синтаксисі CSS немає, головне зрозуміти його структуру і правила написання.

Першим ми пишемо селектор, який вказує на HTML елемент, який ми бажаємо оздобити (стилізувати).

Набір правил складається із самого селектора і блоку оголошень (декларацій), який береться у фігурні дужки. Кожна декларація закінчується знаком “;” крапка з комою. Цей знак розділяє між собою декларації в блоці оголошень.

Сам блок оголошень (декларацій) має містити одне оголошення(декларацію), або кілька, відокремлених між собою крапкою з комою.

Давайте в подальшому називати оголошення деклараціями, щоб оптимізувати нашу публікацію.

Кожна декларація теж має свою власну структуру і складається із властивості і її значення, розділеними двокрапкою “:”.

CSS коментарі.

Для пояснення коду можуть бути використані коментарі. Коментарі ігноруються браузерами, але при перегляді коду програміст завжди зможе побачити пізніше відповідні пояснення і пригадати призначення певних селекторів пізніше, навіть після доволі тривалої перерви в роботі з кодом.

Коментар в CSS починається з /* і закінчується */ .

Коментарі можуть записуватися в один рядок, і можуть записуватися у кілька рядків.

/* Так записується однорядковий коментар */

/* Так

записується

багаторядковий

коментар*/

В залежності від категорії CSS селектора, сам селектор може писатися по різному.

На прикладі простих селекторів можна подивитися чим відрізняється синтаксис написання самого селектора.

Кожному HTML елементу відповідає аналогічний селектор, який так і називається - селектор елементу.

p{} /*CSS селектор елементу*/

Кожному HTML елементу може бути призначений клас, який називається - селектор класу.

.paragraf{} /*CSS селектор class (класу)*/

Селектор id (ідентифікатора) використовує атрибут id елемента HTML для вибору конкретного елемента.

Ідентифікатор елемента унікальний у межах сторінки, тому селектор ідентифікаторів використовується для вибору одного унікального HTML елемента!

Щоб вибрати елемент із певним ідентифікатором, напишіть хеш-символ (#), а потім ідентифікатор елемента.

#paragr{} /*CSS селектор id (ідентифікатора)*/

Універсальний селектор (*) стосується всіх елементів на HTML сторінці.

Правило CSS, записане за зразком нижче, впливатиме на кожен елемент HTML на сторінці: 

*{} /*Універсальний CSS селектор */

Селектор групування

Якщо для кількох елементів потрібно застосувати однакові визначення стилю, то можна використати селектор групування, який вибирає всі елементи HTML з однаковими визначеннями стилю, або іншими словами можна сказати, що він застосовує до певної групи ондакові декларації. Групування селекторів використовується для мінімізації коду.

Для групування селекторів всі селектори пишуться в один рядок, при цьому кожен окремий селектор розділяється комою.

h1, h2, p {} /*CSS селектори групування*/

У прикладі, наведеному нижче до всіх <p> елементів з класом = "paragraf" будуть застосовані декларації: 

Клас може впливати лише на окремі елементи HTML.

p .paragraf {} /*Клас повинен стосуватися лише певного елемента*/

У самому HTML документі до одного елемента можуть застосовуватися відразу кілька класів:

<p class="paragraf center large">Цей параграф посилається на три класи.</p>

УВАГА!

Ім’я класу не може починатися з цифри.

Обговорення на форумі