Синтаксис CSS
У першому розділі ви дізналися, що дизайн сайту створюється за допомогою CSS. Для кращого розуміння, що і для чого потрібно використовувати, розглянемо один наочний приклад. Уявіть, що HTML – це чорно-білий структурований каркас будинку без прикрас, а CSS – це те, за допомогою чого ми створюємо унікальний образ.
Як бачите, біля будинку справа з'явилися кольори, матеріали та додаткові прикраси. На веб-сторінці відбувається те саме: за допомогою правил CSS на ній з'являються кольори, відступи, змінюється стиль шрифтів і розміри елементів, створюється цілий, завершений стиль.
Проста таблиця стилів
Давайте ж поглянемо, як виглядає найпростіша таблиця стилів і з яких елементів вона складається. Це приклад CSS-стилю для всіх тегів
, які є на веб-сторінці:
Як тепер виглядатиме текст
у браузері і що означає кожен рядок? Все дуже просто: шрифт матиме напівжирне зображення та колір #1E824C (шістнадцятковий код кольору) і відображатиметься у розмірі 1em (відносна одиниця, що дорівнює розміру шрифту, який заданий за замовчуванням у браузері).
Синтаксис CSS
Вищеописаний стиль, як і будь-який інший, включає набір елементів, у яких є власні назви. Запам'ятайте їх, щоб під час читання наступних розділів ви розуміли, про що йдеться.
Наприклад, зображення шрифту задається ключовими словами bold , bolder і т. д., колір - шістнадцятковим значенням, RGB(A), HSL(A) або ключовими словами red , orange , white і т. д., розмір шрифту - одиницями виміру CSS (відсотками %, пікселями px, пунктами pt, висотою шрифту em) абоконстантами small, medium, large і т. д. Після вказівки значення властивості ставиться крапка з комою.
Він теж працює, але чи легко в ньому розібратися? Особливо, коли код CSS досить довгий. Звичайно, не завадило б поділити його хоча б пробілами. Існує кілька правил гарного тону, і якщо ви одразу вивчите їх, то в майбутньому скажете собі «дякую».
Дуже часто при описі стилю використовується компактна форма запису, коли всі властивості для одного селектора вказані в одному блоці:
А така форма запису дуже громіздка, хоч і працює:
Щоб було легше орієнтуватися в коді, рекомендується записувати кожну властивість на новому рядку та використовувати табуляцію або прогалини при перерахуванні властивостей. Іноді між двокрапкою та значенням властивості ставиться пробіл, але тут ви можете вирішувати, як вам зручніше.
Внутрішні та зовнішні таблиці стилів
Коли ви створили таблицю стилів, ви можете вибрати, як прикріпити її до веб-сторінки. Існує два варіанти таблиць – внутрішні, які додаються прямо на сторінку, та зовнішні, які знаходяться в окремому файлі з розширенням .css та підключаються до сторінки за допомогою посилання.
Внутрішні таблиці стилів записуються в HTML-документі між тегами. Потрібно додавати таблицю стилів до кожної веб-сторінки. Якщо на сайті є велика кількість сторінок, яким необхідний однаковий дизайн, то додавання, а також редагування стилів стає невдячною роботою – процес займе дуже багато часу. Тому внутрішні таблиці стилів вважаються незручними.
Зовнішні таблиці стилів набагато поширеніші. Вам потрібно лише підключити таблицю до всіх необхідних веб-сторінок, використовуючи тег з атрибутом rel (визначає ставленняміж сторінкою і файлом, що підключається) і значенням stylesheet , яке означає, що в файлі міститься таблиця стилів. Атрибут href – це шлях (URL) до файлу .css :
Редагуючи лише один файл, ви можете змінювати стиль для всього сайту відразу, незалежно від того, скільки сторінок на ньому. Це дуже зручно, особливо для великих ресурсів.
Урок: створюємо таблицю стилів
Оскільки зовнішні таблиці стилів найбільш зручні та широко використовуються при розробці дизайну, ми будемо вчитися створювати саме їх. Архів файлів для цього уроку ви можете завантажити на цій сторінці.
У папці ви знайдете HTML-документ з прикладом простої сторінки та зображення (використовуватиметься в уроці). Відкрийте HTML-документ у браузері. Ви побачите, що сторінка виглядає цілком звичайно. Щоб надати їй більш привабливого вигляду, давайте напишемо для неї стиль.
Поки що вам не потрібно надто сильно вникати в те, що означає той чи інший шматок коду. Зараз вам потрібно зрозуміти сам принцип роботи. Приступимо.
Підключення CSS до HTML
Стисло про те, що ви щойно зробили. Вставивши цей код у HTML-документ, ви:
- вказали посилання на шрифт під назвою Roboto Condensed, який буде взято з сервера Google (докладніше про шрифти Google ми розповімо пізніше);
- підключили свою зовнішню таблицю стилів style.css (поки що пусту).
Пишемо стиль CSS
Збережіть зміни в HTML-документі та перейдіть до вами створеного порожнього файлу .css . Давайте додамо стиль для сторінки:
Збережіть зміни. Вітаємо, ви написали перше правило - воно стосується тега. Перша властивість – padding-top – додасть відступ зверху між вікном браузера та вмістом веб-сторінки у розмірі 5 пікселів. ЗЗа допомогою другої властивості, background-image , ви підключили зображення для фону всієї сторінки, вказавши шлях до графічного файлу (перебуває в тій же папці, що і HTML-документ).
Оновіть відкриту веб-сторінку у браузері. Якщо все зроблено правильно, ви побачите, що на сторінці з'явився фон, а між верхньою частиною вікна та текстом трохи збільшився відступ.
Продовжимо далі. Тепер нам необхідно змінити вміст тега. Для цього внесіть у таблицю стилів наступний код:
Збережіть зміни у файлі. Зараз ви:
- задали область для вмісту тега, що дорівнює 75% від ширини вікна браузера;
- забезпечили відступ 40 пікселів від усіх сторін області вмісту;
- розташували область по центру сторінки, а також зробили відступ зверху та знизу в 15 пікселів;
- задали колір фону #EBEBEB для області вмісту;
- заокруглили кути прямокутної області, вказавши радіус заокруглення 30 пікселів.
Знову оновіть HTML-документ. При цьому переконайтеся, що кеш вимкнено або перезавантажте сторінку з оновленням всіх пов'язаних з нею файлів, використовуючи спеціальну комбінацію клавіш (наприклад, для Chrome цеCtrl+F5 ).
Ви побачите, що по центру сторінки додалася прямокутна область із округленими кутами. Це і є результатом ваших дій у файлі CSS. Ви також можете спробувати зменшити вікно браузера і помилуватися, як ширина прямокутної області підлаштовується під його розмір. Це відбувається тому, що ширина width задана у відсотках.
Змінюємо шрифт за допомогою CSS
Час прикрасити наш текст. Додайте до таблиці стилів цей код та збережіть зміни:
Написавши це, ви задали кольори шрифтів для тегів h1 , h2 , p , вказали їх розміри, додали відступи margin відлівого краю в 20 пікселів та додатково для
зробили відступ зверху 20 пікселів і встановили інтерліньяж line-height (міжрядковий інтервал тексту) на 50% більше стандартного. До того ж, ви підключили до всіх трьох тегів шрифт Roboto Condensed (ось для чого спочатку необхідно було вказати посилання на нього в HTML-файлі).
Оновіть сторінку в браузері та помилуйтеся результатом роботи. У цьому уроці ми спробуємо ще одну річ. Допишіть у CSS цей код:
Зрештою у вас має вийти ось така сторінка:
В якості тренування спробуйте змінити розмір тексту для
(припустимо, 1.1em), а також збільшити відступ між
та лівим краєм області вмісту ще на 10 пікселів.
У цьому розділі було розглянуто синтаксис CSS, і навіть спосіб створення елементарної таблиці стилів. Ви дізналися, як підключити CSS до HTML-сторінки, а також навчилися створювати прості стилі. Виділимо головні речі, які необхідно запам'ятати з цього розділу:
Будь-який стиль CSS складається з кількох елементів: селектора, стильової властивості та значення цієї властивості.
Потрібно обов'язково ставити двокрапку після властивості та точку з комою після значення.
Для зручності та кращого сприйняття коду CSS записуйте кожну властивість у новому рядку, а також не скупіться на пробіли та табуляцію.
Коментарі CSS записуються між символами /* */ і можуть служити для анотацій, пояснень, а також використовуватися як інструмент тимчасового відключення непотрібних ділянок коду.
Зовнішні таблиці стилів, на відміну внутрішніх, вважаються зручнішими. Вони дають змогу швидко змінювати стиль для всього сайту шляхом редагування одного файлу.
CSS – це легко, цікаво та захоплююче!
У першійчастини третього розділу на вас чекає знайомство з основними селекторами CSS.