Вступ в CSS. Синтаксис. Селектори
Привіт, в цій статті ми розберемо наступні питання:
Синтаксис CSS:
CSS стилі складаються із списку правил. Кожне правило має один або багато селекторів.
Синтаксис такий: спочатку пишеться селектор, потім в фігурних дужках вказуються всі його властивості і через двокрапку їх значення.
Приклад:
p { margin-top: 10px; font-size: 15px; color: green; }
В цьому прикладі селектором є "p". "padding", "font-size", "color" - властивості, а "10px", "15px", "green" - їхні значення.
Це означає, що все що знаходиться в тегах "p" стане зеленого кольору, розміром шрифту в 15 пікселів і верхнім відступом в 10 пікселів.
Існує декілька типів селекторів:
Також є псевдоелементи, які потрібні для налаштування властивостей певного стану елементу.
Наприклад наведеного курсора мишки на посилання:
a:hover { color: blue; font-size: 1.3em; }
Тут ми встановили параметри наведеного посилання: блакитний колір, і розмір шрифту 1.3em.
Селектори CSS:
Селектор ID:
Синтаксис:
ім`я_тегу#ID_елементу { властивість1: значення1;
властивість2: значення2;
властивість3: значення3;
}
Або:
#ID_елементу {
властивість1: значення1;
}
Приклад:
HTML:
<div id="block">
</div>
CSS:
height: 100px; width: 100px; background-color: green;
#block {
}
Зазвичай селектор ID використовують для масивних блоків, від яких залежить верстка і т.д!
Селектор CLASS:
Синтаксис:
ім`я_тегу.CLASS_елементу { властивість1: значення1; властивість2: значення2; властивість3: значення3; }
Або:
.CLASS_елементу { властивість1: значення1; }
Приклад:
HTML:
<div class="block"></div>
CSS:
.block { height: 100px; width: 100px; background-color: green; }
Контекстні селектори:
Цей вид селекторів потрібний для того, щоб стиль застосовувався при умові, що даний елемент лежить в середині іншого тегу.
Синтаксис:
тег1 тег2 { властивість1: значення1; властивість2: значення2; властивість3: значення3; }
Приклад:
HTML:
<div> <p>Text....</p> </div>
CSS:
div p { color: green; font-size: 2em; }
В цьому випадку ми застосували стиль до тегу "p", що лежить в тезі "div".
Тобто, якщо написати просто:
<p>Text.....</p>
То стиль застосований НЕ БУДЕ.
Селектори параметрів:
Синтаксис:
ім`я_тегу[ім`я_атрибуту
="значення_атрибуту"] {
властивість1: значення1;
властивість2: значення2;
}
Приклад:
HTML:
<input type="text">
CSS:
input[type="text"] { border: 2px dashed black; outline: none; padding: 5px; }
Стандартний селектор:
Стандартний селектор - це звичайний тег.
Як задати CSS стиль:
Варіанти:
- Inline-стиль.
- Вбудований стиль.
- Імпортований стиль.
- Стиль імпортований Із файлу.
1. Стиль задається в самому тезі:
<p style = "font-size: 150%; float: right;">Текст....</p>
2. Стиль вбудовується на саму сторінку в тезі "<style>":
<style> div { margin-top: 100px; margin-left: 200px; } </style>
3. Цей спосіб дозволяє імпортувати стилі:
<style> @import url("style.css"); </style>
4. Це найпопулярніший і найзручніший спосіб підключення CSS файлу:
В тезі "<head>" вставляємо:
<link rel="stylesheet" type="text/css" href="style.css">
Дякую за увагу.
Тільки авторизовані користувачі можуть додавати коментарі.