033.3 Урок 1

Сертифікат:

Основи веброзробки

Версія:

1.0

Розділ:

033 Дизайн контенту за допомогою CSS

Тема:

033.3 CSS-стилі

Урок:

1 з 1

Вступ

CSS надає сотні властивостей, які можна використовувати для зміни зовнішнього вигляду елементів HTML. Більшість з них вдається запам’ятати лише досвідченим дизайнерам. Тим не менш, загальною є практика знати основні властивості, які можуть бути застосовані до будь-якого елемента, а також деякі специфічні для елементу властивості. У цій главі розглядаються деякі популярні властивості, які ви, швидше за все, будете використовувати.

Загальні властивості та значення CSS

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

Кольори

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

Значення кольору в CSS можна записати як ключове слово кольору (тобто ім’я кольору) або як числове значення, що містить перелік кожного компонента кольору. Усі поширені назви кольорів, такі як black, white, red, purple, green, yellow, і blue, приймаються як ключові слова. Повний список ключових слів кольору, які будуть сприйняті CSS, доступний на https://www.w3.org/wiki/CSS/Properties/color/keywords [вебсторінці W3C]. Але щоб краще контролювати колір, можна використовувати числове значення.

Ключові слова кольору

Спочатку ми спробуємо використовувати ключові слова кольору, оскільки це простіше. Властивість color змінює колір тексту у відповідному елементі. Отже, щоб виділити весь текст на сторінці фіолетовим кольором, ви можете написати таке правило CSS:

* {
  color: purple;
}

Числові значення кольору

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

Кожний компонент кольору є восьмирозрядним двійковим числом від 0 до 255. Усі три компоненти повинні бути вказані в суміші кольорів, і їх порядок завжди червоний, зелений, синій. Тому, щоб змінити колір всього тексту на сторінці на червоний за допомогою нотації RGB, використовуйте rgb(255,0,0):

* {
  color: rgb(255,0,0);
}

Компонента, встановлена в 0, означає, що відповідний основний колір не використовується в суміші кольорів. Замість чисел також можна використовувати відсотки:

* {
  color: rgb(100%,0%,0%);
}

RGB-нотацію рідко можна побачити, якщо ви використовуєте графічний застосунок для створення макетів або просто для вибору кольорів. Кольори у вигляді шістнадцяткових значень частіше можна бачити в CSS. Компоненти кольору в шістнадцятковому форматі також коливаються від 0 до 255, але записуються більш стисло, починаючи з хеш-символу # і використовуючи фіксовану двозначну довжину для всіх компонентів. Мінімальне значення 0 - це 00, а максимальне значення 255 - це FF, тому червоний колір - це #FF0000.

Tip	Якщо цифри в кожному компоненті шістнадцяткового кольору повторюються, другу цифру можна пропустити. Колір `червоний`, наприклад, можна записати однією цифрою для кожного компонента: `#F00`.

У наведеному нижче списку показано RGB та шістнадцяткові позначення для деяких основних кольорів:

Ключове слово кольору RGB-нотація Шістнадцяткове значення

black

rgb(0,0,0)

#000000

white

rgb(255,255,255)

#FFFFFF

red

rgb(255,0,0)

#FF0000

purple

rgb(128,0,128)

#800080

green

rgb(0,128,0)

#008000

yellow

rgb(255,255,0

#FFFF00

blue

rgb(0,0,255)

#0000FF

Ключові слова кольору та літери в шістнадцяткових значеннях кольору не чутливі до регістру.

Прозорість кольору

Крім непрозорих кольорів, можна заповнити елементи сторінки напівпрозорими кольорами. Прозорість кольору можна встановити за допомогою четвертого компонента значення кольору. На відміну від інших компонентів кольору, де значення є цілими числами в діапазоні від 0 до 255, непрозорість вибирається в діапазоні від 0 до 1.

Найнижче значення, 0, призводить до повністю прозорого кольору, який не відрізнити від будь-якого іншого повністю прозорого кольору. Найвище значення, 1, призводить до повністю непрозорого кольору, який збігається з оригінальним кольором без прозорості взагалі.

Коли ви використовуєте RGB-нотацію, зазначте кольори з компонентом непрозорості через префікс rgba замість rgb. Таким чином, щоб зробити червоний колір напівпрозорим, використовуйте rgba(255,0,0,0.5). Символ a означає альфа-канал, термін, який зазвичай використовується для визначення компонента непрозорості на жаргоні цифрової графіки.

Прозорість також можна встановити в шістнадцятковому вигляді. Тут, як і для інших компонентів кольору, прозорість коливається від 00 до FF. Тому, щоб зробити колір «червоний» напівпрозорим за допомогою шістнадцяткового запису, використовуйте #FF000080.

Фон

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

Однак фон елементів HTML не обмежується кольорами. За допомогою властивості background-image можна використовувати зображення як фон. Прийняті формати зображень – це всі звичайні формати, прийняті браузером, наприклад JPEG та PNG.

Шлях до зображення слід вказати за допомогою url(). Якщо зображення, яке ви хочете використати, знаходиться в тій самій папці, що й файл HTML, достатньо використовувати лише його ім’я файлу:

body {
  background-image: url("background.jpg");
}

У цьому прикладі файл зображення background.jpg буде використовуватися як фонове зображення для всього тіла сторінки. За замовчуванням, якщо його розмір не охоплює всю сторінку, фонове зображення повторюється, починаючи з верхнього лівого кута області, що відповідає селектору правила. Цю поведінку можна змінити за допомогою властивості background-repeat. Якщо ви хочете, щоб фонове зображення було розміщено в області елемента без повторення, використовуйте значення no-repeat:

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

Ви також можете зробити зображення повторюваним лише в горизонтальному напрямку (background-repeat: repeat-x) або лише у вертикальному напрямку (background-repeat: repeat-y).

Figure 1. Розміщення фону за допомогою властивості background-repeat.

Tip	Дві або більше властивостей CSS можна об’єднати в одну властивість, яка називається скороченою властивістю фона. Властивості `background-image` та `background-repeat`, наприклад, можна об’єднати в одну властивість фону, використовуючи `background: no-repeat url("background.jpg")`.

Фонове зображення також можна розмістити в певній позиції в області елемента за допомогою властивості background-position. П’ять основних положень – це top, bottom, left, right and center, але положення зображення зверху-зліва також можна налаштувати у відсотках:

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: 30% 10%;
}

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

Межі

Зміна межі елемента також є звичайним настроюванням макета, яке виконується за допомогою CSS. Межа відноситься до лінії, що утворює прямокутник навколо елемента, і має три основні властивості: color, style і width.

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

Межі можна обвести іншим стилем, ніж суцільна лінія. Ви можете, наприклад, використовувати переривчасту лінію для межі з властивістю border-style: dashed. Інші можливі значення стилю:

dotted: Послідовність круглих точок
double: Подвійна суцільна лінія
groove: Лінія, яка виглядає як вирізана
ridge: Лінія, яка виглядає як випукла
inset: Елемент, який виглядає як вбудований
outset: Елемент, який виглядає як рельєфний

Властивість border-width встановлює товщину межі. Його значенням може бути ключове слово (thin, medium або thick) або конкретне числове значення. Якщо ви віддаєте перевагу використанню числового значення, вам також потрібно буде вказати його відповідну одиницю вимірювання. Це описано далі.

Значення одиниць вимірювання

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

Абсолютні одиниці

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

in (дюйм): 1 дюйм еквівалентний 2.54 см або 96 px.
cm (сантиметр): 1 см еквівалентний 96 px / 2.54.
mm (міліметр): 1 мм еквівалентний 1 см / 10.
px (піксель): 1 px еквівалентний 1 / 96 дюйма.
pt (пунктt): 1pt еквівалентний 1 / 72 дюйма.

Майте на увазі, що співвідношення пікселів до дюймів може відрізнятися. На екранах з високою роздільною здатністю, де пікселі упаковані більш щільно, дюйм буде відповідати більше ніж 96 пікселям.

Відносні одиниці вимірювання

Відносні одиниці вимірювання змінюються залежно від інших вимірювань або розмірів вікна перегляду. Область перегляду – це область документа, яка наразі відображається у його вікні. У повноекранному режимі вікно перегляду відповідає екрану пристрою. Зазвичай використовуються такі відносні одиниці:

%: Відсоток – відносно батьківського елемента.
em: Розмір шрифту, використаного в елементі.
rem: Розмір шрифту, використаного в кореневому елементі.
vw: 1% ширини вікна перегляду.
vh: 1% висоти вікна перегляду.

Перевага використання відносних одиниць полягає в тому, що ви можете створювати макети, які можна регулювати, змінюючи лише кілька ключових розмірів. Наприклад, ви можете використовувати одиницю pt для встановлення розміру шрифту в елементі body і одиницю rem для шрифтів в інших елементах. Після того, як ви зміните розмір шрифту для основного тексту, усі інші розміри шрифту будуть відповідно змінені. Крім того, використання vw і vh для встановлення розмірів розділів сторінки дозволяє налаштувати їх для екранів різних розмірів.

Шрифти та властивості тексту

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

Властивість font-family встановлює назву шрифту, який буде використовуватися. Немає гарантії, що вибраний шрифт буде доступний у системі, де буде переглядатися сторінка, тому ця властивість може не впливати на документ. Хоча можна змусити браузер завантажити та використовувати вказаний файл шрифтів, більшість вебдизайнерів використовують загальне сімейство шрифтів у своїх документах.

Три найпоширеніші загальні сімейства шрифтів – це serif, sans-serif та monospace. Serif – це сімейство шрифтів за замовчуванням у більшості браузерів. Якщо ви віддаєте перевагу використанню sans-serif для всієї сторінки, додайте наступне правило до своєї таблиці стилів:

* {
  font-family: sans-serif;
}

За бажанням, ви можете спочатку встановити назву конкретного шрифту сімейства, а потім загальну назву сімейства:

* {
  font-family: "DejaVu Sans", sans-serif;
}

Якщо пристрій, який відтворює сторінку, має це конкретне сімейство шрифтів, браузер використовуватиме його. Якщо ні, він використовуватиме свій шрифт за замовчуванням, що відповідає загальній назві сім’ї ш рифтів. Браузери здійснюють пошук шрифтів у тому порядку, у якому вони вказані у властивості.

Кожен, хто користувався програмою для обробки текстів, ознайомлений з трьома іншими налаштуваннями шрифту: розміром, вагою та стилем. Ці три коригування мають аналогічні властивості CSS: font-size, font-weight та font-style.

Властивість font-size приймає такі ключові слова розміру, як xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large. Ці ключові слова відносяться до розміру шрифту за замовчуванням, який використовується браузером. Ключові слова larger і smaller змінюють розмір шрифту відносно розміру шрифту батьківського елемента. Ви також можете виразити розмір шрифту за допомогою числових значень, включаючи одиниці вимірювання після значення, або у відсотках.

Якщо ви хочете змінити не розмір шрифту, а відстань між рядками, скористайтеся властивістю line-height. line-height яке дорівнює 1, зробіть висоту рядка рівною розміру шрифту елемента, що може зробити розташування рядків тексту занадто близькими один до одного. Тому для текстів краще підходить значення, більше за 1. Як і властивість font-size, інші одиниці вимірювання можуть використовуватися разом із числовим значенням.

font-weight встановлює товщину шрифту за допомогою знайомих ключових слів normal або bold. Ключові слова lighter і bolder змінюють вагу шрифту елемента відносно ваги шрифту його батьківського елемента.

Властивість font-style можна встановити як italic, щоб вибрати версію курсиву для поточного сімейства шрифтів. Значення 'oblique' вибирає похилий варіант шрифту. Ці два варіанти майже ідентичні, але курсивна версія шрифту зазвичай трохи вужча, ніж похилий варіант. Якщо не існує ні курсивної, ні похилої версії шрифту, він буде штучно нахилений браузером.

Існують інші властивості, які змінюють спосіб відтворення тексту в документі. Ви можете, наприклад, додати підкреслення до деяких частин тексту, які хочете виділити. Спочатку використовуйте тег <span>, щоб розмежувати текст:

<p>CSS is the <span class="under">proper mechanism</span> to style HTML documents.</p>

Потім ви можете використовувати селектор .under, щоб змінити властивість text-decoration:

.under {
  text-decoration: underline;
}

За замовчуванням усі елементи a (покликання) підкреслені. Якщо ви хочете це підкреслення, використовуйте значення none для text-decoration усіх елементів a:

a {
  text-decoration: none;
}

Під час перегляду вмісту деякі автори люблять викреслювати неправильні або застарілі частини тексту, щоб читач знав, що текст оновлено, і що було вилучено. Для цього скористайтеся значенням line-through властивості text-decoration:

.disregard {
  text-decoration: line-through;
}

Знову ж таки, тег <span> можна використовувати для застосування стилю:

<p>Netscape Navigator <span class="disregard">is</span> was one of the most popular Web browsers.</p>

Інші види оформлення можуть бути специфічними для певного елемента. Кола в маркованих списках можна налаштувати за допомогою властивості list-style-type. Щоб змінити їх на квадрати, наприклад, використовуйте list-style-type: square. Щоб просто видалити їх, установіть значення list-style-type в none.

Вправи до посібника

Як можна додати напівпрозорість до синього кольору (RGB-нотація rgb(0,0,255)), щоб використовувати його у CSS-властивості color?
Який колір відповідає шістнадцятковому значенню #000?
Враховуючи, що Times New Roman є шрифтом serif і що він буде доступний не на всіх пристроях, як можна записати правило CSS, щоб запитувати Times New Roman, водночас установлюючи загальне сімейство шрифтів serif як запасний варіант?
Як можна використовувати ключове слово відносного розміру, щоб зменшити розмір шрифту елемента <p class="disclaimer"> порівняно з його батьківським елементом?

Дослідницькі вправи

Властивість background є скороченням для встановлення більше ніж однієї властивості background-* одночасно. Перепишіть наступне правило CSS як одну скорочену властивість background.
```
body {
  background-image: url("background.jpg");
  background-repeat: repeat-x;
}
```
Напишіть CSS-правило для елемента <div id="header"></div>, яке змінює лише ширину нижньої межі на 4px.
Запишіть властивість font-size, яка подвоює розмір шрифту, що використовується в кореневому елементі сторінки.
Подвійний інтервал – це поширена функція форматування тексту в текстових процесорах. Як можна встановити подібний формат за допомогою CSS?

Підсумки

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

Фундаментальні властивості CSS, які стосуються кольорів, фону та шрифтів.
Абсолютні та відносні одиниці вимірювання CSS може використовувати для встановлення розмірів і відстаней, наприклад px, em, rem, vw, vh тощо.

Відповіді до вправ посібника

Як можна додати напівпрозорість до синього кольору (RGB-нотація rgb(0,0,255)), щоб використовувати його у CSS-властивості color?

Використовуйте префікс rgba і додайте 0.5 як четверте значення: rgba(0,0,0,0.5).
Який колір відповідає шістнадцятковому значенню #000?

Колір black (чорний). Шістнадцяткове значення #000 є скороченням від #000000.
Враховуючи, що Times New Roman є шрифтом serif і що він буде доступний не на всіх пристроях, як можна записати правило CSS, щоб запитувати Times New Roman, водночас установлюючи загальне сімейство шрифтів serif як запасний варіант?
```
* {
  font-family: "Times New Roman", serif;
}
```
Як можна використовувати ключове слово відносного розміру, щоб зменшити розмір шрифту елемента <p class="disclaimer"> порівняно з його батьківським елементом?

Використовуємо ключове слово smaller:
```
p.disclaimer {
  font-size: smaller;
}
```

Відповіді до дослідницьких вправ

Властивість background є скороченням для встановлення більше ніж однієї властивості background-* одночасно. Перепишіть наступне правило CSS як одну скорочену властивість background.
```
body {
  background-image: url("background.jpg");
  background-repeat: repeat-x;
}
```
```
body {
  background: repeat-x url("background.jpg");
}
```
Напишіть CSS-правило для елемента <div id="header"></div>, яке змінює лише ширину нижньої межі на 4px.
```
#header {
  border-bottom-width: 4px;
}
```
Запишіть властивість font-size, яка подвоює розмір шрифту, що використовується в кореневому елементі сторінки.

Одиниця rem відповідає розміру шрифту, який використовується в кореневому елементі, тому властивість має бути font-size: 2rem.
Подвійний інтервал – це поширена функція форматування тексту в текстових процесорах. Як можна встановити подібний формат за допомогою CSS?

Встановити для властивості line-height значення 2em, оскільки одиниця em відповідає розміру шрифту поточного елемента.