. Але якщо ми опустимо лапки, то як значення буде використовуватися "navmenu", а "bigdesctop" браузер намагатиметься інтерпретувати як окремий атрибут.

Якщо ж виникають труднощі, наскільки правильною є створювана розмітка html, її можна перевірити за допомогою валідатора за адресою https://validator.w3.org :

Ми можемо вставити в текстове поле код веб-сторінки, і після натискання на кнопку "Check" унизу валідатор або відобразить нам помилки червоним кольором, або зеленим кольором повідомить, що помилок немає і код пройшов валідацію.

У першому розділі ви дізналися, що дизайн сайту створюється з допомогою CSS. Для кращого розуміння, що і для чого потрібно використовувати, розглянемо один наочний приклад. Уявіть собі, що HTML – це чорно-білий структурований каркас будинку без прикрас, а CSS – це те, за допомогою чого створюємо унікальний образ.

Як бачите, біля будинку справа з'явилися кольори, матеріали та додаткові прикраси. На веб-сторінці відбувається те саме: за допомогою правил CSS на ній з'являються кольори, відступи, змінюється стиль шрифтів і розміри елементів, створюється цілий, завершений стиль.

Проста таблиця стилів

Давайте поглянемо, як виглядає найпростіша таблиця стилів і з яких елементів вона складається. Це приклад CSS-стилю для всіх тегів

Які є на веб-сторінці:

Як тепер виглядатиме текст

У браузері і що означає кожен рядок? Все дуже просто: шрифт матиме напівжирне зображення і колір #1E824C (шістнадцятковий код кольору) і відображатиметься у розмірі 1em (відносна одиниця, що дорівнює розміру шрифту, який заданий за замовчуванням у браузері).

Вищеописаний стиль, як і будь-який інший, включає набір елементів, у яких є власні назви. Запам'ятайте їх, щоб під час читання наступних розділів ви розуміли, про що йдеться.

Вказуючи його, ми говоримо браузеру, до чого саме хочемо застосувати стиль. У нашому випадку селектором є p. Блок оголошень Так називається весь вміст, який знаходиться між фігурними дужками () після селектора. Стилева властивість Це команда, за допомогою якої вказується бажаний варіант форматування (наприклад, ви хочете змінити зображення шрифту font-weight , колір color, розмір шрифту font-size тощо). Після імені властивості необхідно ставити двокрапку. Надалі ви познайомитеся з великою кількістю властивостей CSS. Значення властивості Після двокрапки записується саме значення властивості, яке ви визначаєте самостійно, створюючи таким чином власний стиль. Залежно від якості необхідно вказувати потрібне йому значення.

Наприклад, зображення шрифту задається ключовими словами bold , bolder і т. д., колір - шістнадцятковим значенням, RGB(A), HSL(A) або ключовими словами red , orange , white і т. д., розмір шрифту - одиницями виміру CSS (відсотками % , пікселями px, пунктами pt, заввишки шрифтом) або константами small, medium, large і т. д. Після вказівки значення властивості ставиться крапка з комою.

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

P (font-weight:bold;color:#1E824C;font-size:1em;)

Він також працює, але чи легко в ньому розібратися? Особливо коли код CSS досить довгий. Звичайно, не завадило б поділити його хоча б пробілами. Існує кілька правил гарного тону, і якщо ви одразу вивчите їх, то в майбутньому скажете собі «дякую».

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

P ( font-weight: bold; color: #1E824C; font-size: 1em; )

А така форма запису дуже громіздка, хоч і працює:

P (font-weight: bold;) p (color: #1E824C;) p (font-size: 1em;)

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

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

Коментарі в CSS записуються між символами /* та */ . Вони не відображаються на веб-сторінці в браузері і відображаються виключно в коді. Розробники також часто використовують коментарі, щоб приховати тимчасово непотрібну ділянку коду CSS. Виглядають коментарі таким чином:

/* Стиль для основного тексту */ p ( font-weight: bold; color: #1E824C; font-size: 1em; )

Внутрішні та зовнішні таблиці стилів

Коли ви створили таблицю стилів, ви можете вибрати, як прикріпити її до веб-сторінки. Існує два варіанти таблиць – внутрішні, які додаються прямо на сторінку, та зовнішні, що знаходяться в окремому файлі з розширенням.css та підключаються до сторінки за допомогою посилання.

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

Зовнішні таблиці стилів набагато більш поширені. Вам потрібно лише підключити таблицю до всіх необхідних веб-сторінок, використовуючи тег c атрибутом rel (визначає відношення між сторінкою і файлом, що підключається) і значенням stylesheet , яке означає, що в файлі міститься таблиця стилів. Атрибут href – це шлях (URL) до файлу.css:

Редагуючи лише один файл, ви можете змінювати стиль для всього сайту відразу, незалежно від того, скільки сторінок на ньому. Це дуже зручно, особливо для великих ресурсів.

Урок: створюємо таблицю стилів

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

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

Поки що вам не потрібно занадто сильно вникати в те, що означає той чи інший шматок коду. Зараз вам потрібно зрозуміти сам принцип роботи. Приступимо.

Підключення CSS до HTML

Для початку відкрийте на комп'ютері будь-який текстовий редактор (підійде блокнот) і створіть порожній файл з ім'ям style, зберігши його з розширенням .css (має бути файл style.css). Збережіть файл у папці, де знаходиться завантажений HTML-документ.

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

Коротко про те, що ви щойно зробили. Вставивши цей код у HTML-документ, ви:

• вказали посилання на шрифт під назвою Roboto Condensed, який буде взято з сервера Google (докладніше про шрифти Google ми розповімо пізніше);
• підключили свою зовнішню таблицю стилів style.css (поки що порожню).

Пишемо стиль CSS

Збережіть зміни в HTML-документі та перейдіть у вами створений порожній файл.css. Давайте додамо стиль для сторінки:

Html ( padding-top: 5px; background-image: url(background.jpg); )

Збережіть зміни. Вітаємо, ви написали перше правило – воно стосується тега . Перша властивість – padding-top – додасть відступ зверху між вікном браузера та вмістом веб-сторінки у розмірі 5 пікселів. За допомогою другої властивості, background-image, ви підключили зображення для фону всієї сторінки, вказавши шлях до графічного файлу (перебуває в тій же папці, що і HTML-документ).

Оновіть веб-сторінку в браузері. Якщо все зроблено правильно, ви побачите, що на сторінці з'явився фон, а між верхньою частиноювікна і текст трохи збільшився відступ.

Body ( width: 75%; padding: 40px; margin: 15px auto; background-color: #EBEBEB; border-radius: 30px; )

Збережіть зміни у файлі. Зараз ви:

• задали область для вмісту тега , Що дорівнює 75% від ширини вікна браузера;
• забезпечили відступ 40 пікселів від усіх сторін області вмісту;
• розташували область по центру сторінки, а також зробили відступ зверху та знизу 15 пікселів;
• задали колір фону #EBEBEB для області вмісту;
• закруглили кути прямокутної області, вказавши радіус заокруглення 30 пікселів.

Знову оновіть HTML-документ. При цьому переконайтеся, що кеш вимкнено або перезавантажте сторінку з оновленням всіх пов'язаних з нею файлів, використовуючи спеціальну комбінацію клавіш (наприклад, для Chrome це Ctrl+F5).

Ви побачите, що по центру сторінки додалася прямокутна область із закругленими кутами. Це і є результатом ваших дій у файлі CSS. Ви також можете спробувати зменшити вікно браузера і помилуватися, як ширина прямокутної області підлаштовується під його розмір. Це відбувається тому, що ширина width задана у відсотках.

Змінюємо шрифт за допомогою CSS

Настав час прикрасити наш текст. Додайте до таблиці стилів цей код і збережіть зміни:

H1 ( color: #E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; ) h2 ( color: #E87E04; font-size: 1.7em; margin-left : 20px; font-family: "Roboto Condensed", sans-serif; ) p ( color: #22313F; ", sans-serif; )

Написавши це, ви задали кольори шрифтів для тегів h1, h2, p, вказали їх розміри, додали відступи margin від лівого краю в 20 пікселів і додатково для

Зробили відступ зверху в 20 пікселів і встановили інтерліньяж line-height (міжрядковий інтервал тексту) на 50% більше від стандартного. До того ж, ви підключили до всіх трьох тегів шрифт Roboto Condensed (ось для чого спочатку необхідно було вказати посилання на нього в HTML-файлі).

Обновіть сторінку в браузері та помилуйтеся результатом роботи. У цьому уроці ми спробуємо ще одну річ. Допишіть у CSS цей код:

Emphasis ( font-weight: bold; )

Збережіть та оновіть сторінку в браузері. Ви побачите, що в останньому абзаці шрифт у деякій частині тексту став жирним. Щоб зрозуміти, що сталося, перейдіть у вікно текстового редактора, де на початку ви відкрили HTML-файл. Погляньте на останній абзац: частина пропозиції загорнута в теґ з класом emphasis. Таким чином, ви написали стиль для окремого рядка тексту в абзаці. Докладніше про класи ми розповімо у наступному розділі.

Зрештою у вас має вийти ось така сторінка:

Як тренування спробуйте змінити розмір тексту для

(припустимо, 1.1em), а також збільшити відступ між

І лівим краєм області вмісту ще 10 пікселів.

Висновки

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

Будь-який стиль CSS складається з кількох елементів: селектора, стильової властивості та значення цієї властивості.

Усі властивості та їх значення записуються у блоці оголошень між двома фігурними дужками () після вказівки селектора.

Потрібно уважно стежити за знаками: дві фігурні дужки (що відкриває на початку блоку оголошень та закриває наприкінці). Без цих дужок CSS працюватиме некоректно.

Потрібно обов'язково ставити двокрапку після властивості та точку з комою після значення.

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

Синтаксис мови HTML

Рис. 1.6. Відображення простої HTML-сторінки у веб-браузері

Основні правила HTML

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

Елементи можуть включати текст і поделементи (наприклад, елемент html містить поделементи head і body у наведеному вище прикладі). Елементи мають бути правильно вкладені один в одного.

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

Правильно цей фрагмент повинен мати такий вигляд:

Це напівжирний та похилий текст

У XHTML, якщо елемент не включає текст і поделементи (порожній елемент), все одно повинен мати теги, що відкривається і закривається. Наприклад, елемент br не має змісту та викликає розрив рядка (продовження тексту починається з нового рядка). Однак відповідно до правил він повинен записуватися наступним чином:

або скорочено
. Так само повинен записуватися і елемент

---

- Виведення горизонтальної лінії.

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

Багато атрибутів HTML є спільними для всіх елементів, але деякі є специфічними для даного елемента або елементів. Усі вони мають форму:

имя_атрибута="значення"

Наприклад: