Синтаксис css

У цій статті хочеться торкнутися теми, як створити стиль, як виглядає код і як він працює, тобто синтаксис CSS. Синтаксис наступний: спочатку йде селектор, потім в фігурних дужках вказуються властивості і через двокрапку їх значення.

Давайте розглянемо ці правила на прикладі:

h1 { 
 color: red- 
 margin-left:200px- 
 font-size:20pt- 
}

В даному прикладі селектором є "h1", Властивостями є"color","margin-left"І"font-size", А їх значеннями відповідно є"red","200px"І"20pt". Що це все означає? А це означає наступне, що елемент всередині тега стане червоним, з відступом зліва в 200 пікселів і розміром в 20 пунктів.

Існує величезна кількість властивостей і їх значень, зрозуміло, приводити їх все - це безглуздо. Самий розумний варіант подивитися їх в довіднику, а тут же необхідно розуміти наступне, що селектор теж кілька. Ось їх список:

1) контекстні селектори.

Відео: CSS3 для початківців. # 2 Синтаксис CSS

2) селектор ID.

3) селектор CLASS.

4) селектори параметрів.

5) Стандартний селектор.

Відео: 2. [Уроки по CSS3] Синтаксис CSS

Ми з Вами розглянули тільки один стандартний селектор, коли в його якості виступає звичайний HTML-тег (В прикладі вище, цим тегом був).

Перші чотири типи селектора CSS обговоримо в іншій статті в основи CSS. А п`ятий тип давайте розберемо ще раз.

Відео: CSS3 - 007 - Синтаксис CSS

Перше, що необхідно зробити - це написати HTML-тег (будь-який з HTML-стандарту). Потім в фігурних дужках вказати його властивості і через двокрапку значення. Упевнений, що тут все зрозуміло.

І, наостанок, хочеться відразу розібрати тему псевдоелементів. Псевдоелементи потрібні для настройки властивостей певного стану елемента. Наприклад, стан "наведення мишки"На посилання,"клацання мишки"По посиланню і тому подібні речі. Або, наприклад, перший рядок тексту. І ще багато чого ще. Знову ж повний набір псевдоелементів можна подивитися в довіднику. Я ж покажу, як їх використовувати:

Відео: Як створити сайт. CSS - Синтаксис і принцип роботи

a:visited { 
 color: red- 
} 
a: link { 
 color: blue- 
}

В даному випадку, ми задано наступне стиль: відвідані посилання (стан "посилання вже була натиснута") Червоного кольору, а не відвідані посилання (стан"посилання ще не була натиснута") Будуть синього кольору. Як бачите, псевдоелементи задаються через двокрапку. Тобто пишеться тег, у якого можуть бути псевдоелементи, далі ставиться двокрапка і пишеться назва псевдоелемента. Потім, як завжди, вказуються властивості та їх значення. І якщо у даних елементів буде відповідне псевдоелементу стан, то стилі будуть до нього застосовані.

Сподіваюся, що я познайомив Вас з основами синтаксису CSS. Якщо Ви це освоїли, то можна рухатися далі в освоєнні процесу самостійного створення сайту. До речі, щодо довідника. Ось даю можливість скачати довідник CSS в chm форматі. Там є повний набір властивостей всіх елементів і їх можливих значень: Завантажити довідник по CSS в chm.

Поділися в соціальних мережах:

Схожі