Що таке каскадні таблиці стилів (CSS) і для чого вони потрібні
Одним словом каскадні таблиці стилів або CSS вдають із себе документ з певним кодом. У цьому документі прописані спеціальні правила, завдяки яким формується зовнішній вигляд вашого сайту. Щоб зрозуміти всю корисність CSS я приведу невеликий приклад.
Припустимо, ви створюєте сайт на чистому HTML. Ви вручну прописуєте все теги, формуєте зовнішній вигляд і дизайн свого сайту. Згодом кількість матеріалів збільшується і раптом раптово ви захотіли трохи змінити дизайн. Наприклад, зробити на всіх сторінках свого сайту колір тексту не чорним, а сірим. Якщо ви будете використовувати простий HTML, то вам доведеться вручну змінювати код для кожної сторінки окремо, що займе чимало часу. Всього цього можна уникнути, просто підключивши таблицю стилів. У ній можна створювати і змінювати будь-які правила, що миттєво відіб'ється на вашому сайті. В результаті зміна кольору на всьому сайті займе всього кілька хвилин незалежно від кількості сторінок на ньому.
Наведений вище приклад демонструє все малу частину можливостей каскадних таблиць стилів. Але для того щоб скористатися будь-малої їх частиною, необхідно мати хоча б мінімальні знання CSS. Далі в цій статті я маю намір розповісти вам про основні правила, способи створення і редагування правил в каскадних таблицях стилів. Завдяки цим знанням вам не важко буде внести коригування в дизайн свого сайту. Отже, переходимо до справи.
Що таке правила (класи) CSS і як їх створювати
Для того щоб ви зрозуміли що таке класи CSS і яку вони відіграють роль я знову вдамся до прикладів. Розберемо одну з найпопулярніших проблем, які турбують початківців вебмайстрів - створення копірайту. Наш копірайт буде виглядати приблизно так:
і буде посиланням. Якщо ми просто додамо в footer код копірайту, то він буде мати звичайний вигляд. Найчастіше це загальний для всього сайту шрифт, колір посилань як активних, так і при наведенні і багато інших параметрів. Для того щоб цього уникнути нам буде потрібно створити в каскадної таблиці стилів (CSS) нове правило (клас) і зв'язати його з нашим копірайтом. Це все робиться дуже просто. Для створення нового класу CSS відкриває таблицю стилів нашого сайту (зазвичай це файл style.css який знаходиться в корені сайту або використовуваної вами теми оформлення) і в кінці додаємо такі рядки:
Новий клас CSS складається з точки і назви, яке йде відразу після неї. Отже, ми створили порожній клас CSS. Тепер нам потрібно створити для нього правила, які будуть визначати зовнішній вигляд створеного стилю. Вони прописуються в фігурних дужках «<>». Після кожного правила ставиться крапка з комою «;»
Наприклад, ми хочемо, щоб шрифт копірайту був чорним, розмір 12 пікселів, сімейство Tahoma і він вирівнювався по центру. Для цього нам потрібно додати в клас CSS наступне:
Оскільки наш копірайт буде містити посилання, то додамо ще один клас для посилань і зробимо їх темно сірими:
І клас CSS для посилань при наведенні зробимо теж темно сірого кольору:
Після цього нам залишається лише додати в footer код копірайту і застосувати до нього створений нами клас
Тепер створений нами копірайт стане чорного кольору, а при наведенні ставатиме темно сірим, майже чорним.
Сподіваюся, цей приклад допоміг вам зрозуміти функції CSS стилів, а також допоміг навчитися створювати свої і редагувати вже наявні. Але на цьому робота з каскадними таблицями стилів не закінчується. Давайте розглянемо, як підключити таблицю стилів до нашого сайту.
Робиться це дуже просто. Для цього відкриваємо на редагування сторінки нашого сайту і додаємо вгорі між тегами
рядок:Так як сайти на простому HTML вже майже не використовуються, то для того щоб підключити таблицю стилів відразу до всього сайту вам буде необхідно відкрити файл header.php (шапка сайту) і додати код в нього.
Типи правил каскадних таблиць стилів.
У CSS можна створювати як свої правила, так і змінювати їх для вже існуючих тегів. Давайте розглянемо перший тип правил. Для прикладу візьмемо тег абзаців. За замовчуванням у нього вже є свої правила, які визначають його зовнішній вигляд. Для того щоб їх змінити нам потрібно зробити наступне. Відкриваємо таблицю стилів і створюємо правила для всіх абзаців.
Так як правило створюється для конкретного тега, то необхідно просто прописати його ім'я без точки і різних дужок. Після цього відкриваємо фігурні дужки, де і будуть прописуватися конкретні правила CSS, які будуть визначати зовнішній вигляд абзаців. Для прикладу, зробимо текст всіх абзаців світло сірим, розмір шрифту 12 пікселів, а гарнітуру шрифту зробимо Verdana. Для цього пропишемо наступне:
Як бачите, спочатку пишеться властивість, а потім його значення. На відміну від простого HTML тут замість знака «=» ми прописуємо «:», після чого ставимо крапку з комою. Це означає що опис даної властивості завершено.
Це був перший тип правил. Тепер перейдемо до другого. Наприклад, ми хочемо зробити так, щоб один абзац виділявся серед інших. Наприклад, зробити його синього кольору. Для цього нам необхідно виконати наступне. Відкриваємо таблицю стилів і створюємо нове правило.
Для того щоб застосувати його на практиці нам буде необхідно відкрити код документа з текстом який ми хочемо змінити і додати всередину тега
створене нами правило CSS.
Тепер давайте розглянемо третій тип правил, які можна застосовувати до будь-якого тегу. Для їх створення необхідно зробити наступне:
Як бачите, перед точкою немає ніяких значень. Це означає, що дане правило CSS можна застосувати до будь-якого тегу. Для цього вам необхідно просто прописати його в потрібному місці. Наприклад, для заголовка H2.
Тепер заголовок прийме той вид, який ви самі йому додасте, використовуючи каскадні таблиці стилів.
Наступний момент, про який варто поговорити, це надання одного і того ж стилю декільком тегами. Для цього замість того щоб дублювати стиль, можна просто через кому перерахувати всі теги. Це допоможе уникнути зайвого коду. На практиці це буде виглядати так:
У наведеному вище прикладі ми застосовуємо одне правило для абзаців і заголовків другого і третього рівня. Крім того CSS також дозволяє створювати вкладені правила. Для прикладу ми хочемо, щоб всі слова, виділені жирним шрифтом в межах абзацу мали червоний колір. Це робиться дуже просто. Для цього створюємо нове правило CSS і додаємо потрібні нам теги.
Тепер все слова, які виділені тегами strong і знаходяться в межах абзаців, змінять свій колір на червоний. Таким способом можна змінити зовнішній вигляд тексту виділеного не тільки жирним, а й іншими тегами, наприклад тегами em які відповідають за відображення курсивом.
І на завершення давайте розглянемо правила для станів посилань. В HTML посилання створюються в такий спосіб:
У фігурних дужках прописуються відповідні властивості для кожного правила CSS.
На цьому все. Удачі вам і до швидких зустрічей на сторінках блогу dmitriydenisov.com
Помітили помилку? Виділіть її та натисніть Ctrl + Enter
Версія для друку