Лабораторне заняття 8. Використання CSS

Мета роботи: ознайомитися з мовою стилю CSS та її застосуванням для оформлення веб-сторінок.

Теоретичні відомості

CSS (Cascading Style Sheets – каскадні таблиці стилів) – це спеціалізована мова стилю веб-сторінок, що використовується для опису їх зовнішнього вигляду. Самі ж сторінки написані мовами розмітки даних.

CSS використовується для визначення кольорів, шрифтів, верстки та інші аспектів вигляду сторінки. Одна з головних переваг – можливість розділити вміст сторінки (контент, наповнення, зазвичай HTML) від вигляду документу (що описується в CSS).

 

Приєднання CSS до сторінки

Правила CSS можуть розташовуватися як в самому веб-документі, зовнішній вигляд якого вони описують, так і в зовнішніх файлах, що мають формат CSS. Стилі CSS можуть бути підключені або прописані в описуваному ними веб-документі чотирма способами:

  • в атрибутах окремого елементу:

<p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">

...

</p>

  • в елементі <style> в розділі <head>:

<head>

      ...

      <style>

         body {

            color: red;

         }

      </style>

</head>

  • окремий файл стилів, підключений до документу інструкцією @import в елементі <style>:

<head>

      ...

      <style media="all">

         @import url(style.css);

      </style>

</head>

  • окремий файл стилів, підключений до документу за допомогою елемента <link>:

<head>

...

<link rel="stylesheet" type="text/css" href="style.css">

</head>

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

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

Третій варіант використовується у тому випадку, якщо частина стилів  підходить для кількох документів, тому є можливість їх додати до вже прописаних на сторінці, як окремий файл.

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

 

Види селекторів

Кожне правило CSS з файлу має дві основні частини – селектор та блок оголошень.

Селектор, розташований в лівій частині правила до знаку «{» визначає, на які частини документу поширюється правило.

Блок оголошень розташовується в правій частині правила. Він поміщається в фігурні дужки, і, в свою чергу, складається з одного або більше оголошень, розділених знаком «;». Кожне оголошення є поєднанням властивості CSS і значення, розділених знаком «:». Селектори можуть групуватися в одному рядку через кому. В такому випадку властивість застосовується до кожного з них:

селектор, селектор {

  властивість: значення;

  властивість: значення;

  властивість: значення;

}

Види селекторів:

  • Універсальний селектор – застосовується до всіх елементів у документі:

* {

   margin: 0;

   padding: 0;

}

  • Селектор тегів – застосовується до перерахованих елементів по їх назві:

p {

   font-family: arial, helvetica, sans-serif;

}

  • Селектор класів – застосовується до елементів по назві їх класу, заданого атрибутом class (<p class="note">…</p>):

.note {

   color: red;

}

  • Селектор ідентифікаторів – застосовується до елементів по назві їх ідентифікатора, заданого атрибутом id (<div id="paragraph1">…</div>). На відміну від класів, ідентифікатор присвоюється лише одному елементу в документі:

#paragraph1 {

    margin: 0;

}

  • Селектор атрибутів – застосовується лише до елементів з певним (вказаним) значенням атрибутів:

a[href="http://www.somesite.com"] {

   font-weight: bold;

}

  • Селектор псевдокласів – застосовується для спеціального стану елементів (наприклад, a:active – визначає активне посилання):

a:active {

   color: blue;

}

  • Селектори псевдоелементів – застосовуються до окремих частин елементів (наприклад, p::first-letter – перша літера абзацу):

p::first-letter {

   font-size: 32px;

}

Комбінатори – використовуються для об’єднання селекторів:

  • Комбінатор групування (,) – стилі застосовуються до всіх перерахованих селекторів: p, h2, .text, #text2 {}
  • Комбінатор нащадків (пробіл) – стилі застосовуються до всіх вказаних нащадків обраного селектора. Наприклад, всі елементи <span>, що знаходяться всередині елементу <div>: div span {}
  • Комбінатор дочірніх селекторів (>) – стилі застосовуються до всіх дочірніх селекторів вказаного селектора. Наприклад, всі елементи <li> (Елемент 1, Елемент 3), що входять безпосередньо до елементу <ul>, однак не застосовуватиметься до елементів <li> (Елемент 2), що входять до дочірніх елементів <ul>: ul > li {}

<ul>

<li>Елемент 1</li>

<ul>

<li>Елемент 2</li>

</ul>

<li>Елемент 3</li>

</ul>


Пріоритети селекторів

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

Найнижчий пріоритет має універсальний селектор. Більш важливішими є стилі, що застосовуються до нащадків та дочірніх елементів. Наступний по важливості пріоритет отримують селектори елементів, далі – селектори класів/псевдокласів/атрибутів, далі – селектори ідентифікаторів. Більш важливими є стилі, прописані в аргументі style (inline-стилі) елементів HTML-документу.

Найвищий пріоритет надає конструктор !important, який додається до пари властивість-значення: 

color: #345645 !important;

Також більш вищий пріоритет мають стилі, описані в розділі <style> поточного документу, ніж стилі, описані в документі, що підключається до сторінки.

Основні властивості CSS та їх можливі значення наведено нижче.

 

Внутрішні та зовнішні відступи

margin – визначає відступ по вертикалі і/або горизонталі (зовнішній відступ) від зовнішніх меж поточного елементу до внутрішніх меж батьківського елементу або до зовнішньої межі елементу, розташованого поруч (рис. 2.1).

 

Рисунок 2.1 – Зовнішній відступ елементу

Властивість може приймати від одного до чотирьох значень:

margin: зверху справа знизу зліва;

margin: зверху справа_та_зліва знизу;

margin: зверху_і_знизу справа_та_зліва;

margin: всі_4_поля;

Можливі значення:

  • auto – для вертикальних відступів рівне 0. Для блоків (div) з фіксованою шириною задає зміщення по правому, лівому краю, або по центру (праве і ліве поле auto): margin: 5px auto 10px;
  • величина полів, вказана в пікселях: margin: 5px 10px;
  • величина полів, вказана у відсотках: margin: 5%;
  • inherit – отримує величину батьківського елемента: margin: inherit;

Кожне з чотирьох значень можна задавати окремо, використовуючи відповідні властивості: margin-top (верхній відступ), margin-right (правий відступ), margin-bottom (нижній відступ), margin-left (лівий відступ).

padding – встановлює відступ (внутрішній відступ) між внутрішньою межею елементу та його вмістом (рис. 2.2). Варто зауважити, що додавання внутрішніх полів буде впливати на загальний розмір елемента.

 

Рисунок 2.2 – Внутрішній відступ елементу

Запис властивостей та можливі значення аналогічні властивості margin (крім значення auto). Також є можливість задавати всі відступи як окремі властивості: padding-top, padding-right, padding-bottom, padding-left.

 

Позиціонування

position – вказує тип позиціонування елементу на веб-сторінці. Позиціонування визначає відносно чого, при зміщенні, буде позиціонуватися елемент: відносно вікна браузера, інших елементів або поточного місця розташування на веб-сторінці.

Можливі значення:

  • static – елемент відображається на тому місці, де він розміщений в коді HTML. Застосування властивостей зміщення не впливають на його позицію.
  • absolute – абсолютне позиціонування. Всі елементи, розміщенні в коді після нього, зміщуються на його місце. При прокрутці сторінки елемент прокручується разом з вмістом.
  • fixed – фіксована позиція елементу. Всі елементи, розміщенні в коді після нього, зміщуються на його місце. При прокрутці сторінки елемент залишається на місці, не прокручується разом з вмістом.
  • relative – елемент з відносним позиціонуванням. Якщо вказано зміщення – на місці елементу залишається порожнє місце.
  • inherit – значення наслідується від батьківського елементу.

Група властивостей зміщення top, left, right та bottom задають відступи до елементу від верхнього, лівого, правого та нижнього краю. Зазвичай використовуються разом з властивістю position. Можливі значення: величина  в пікселях, величина у відсотках, inherit.

display – вказує тип елементу. Від типу елементу залежить те, як він буде відображатися на веб-сторінці. Можливі значення:

  • none – елемент не відображається на екрані, місце під нього не резервується.
  • block – елемент сприймається браузером як блочний (займає всю доступну ширину).
  • inline – елемент сприймається браузером як рядковий (ширина елементу визначається вмістом).
  • inline-block – елемент відображається як рядковий, однак приймає деякі властивості блочних елементів (margin, padding).
  • inherit - значення наслідується від батьківського елементу.

float – дозволяє зробити елемент плаваючим, зміщуючи його до лівого або правого краю батьківського елементу, в залежності від того, яке значення встановлено. Якщо для плаваючого елементу явно не встановлена ширина (width), то він стискається по ширині до розмірів вмісту. Властивість float працює тільки з блочними елементами.

Можливі значення: left (вирівнювання по лівому краю), right (вирівнювання по правому краю), none (елемент не являється плаваючим), inherit.

clear – вказує з якого боку поточного елементу не допускаються плаваючі елементи. Можливі значення: left (плаваючі елементи заборонені зліва), right (плаваючі елементи заборонені справа), both (плаваючі елементи заборонені з обох сторін), none (плаваючі елементи дозволені), inherit.

visibility – дозволяє приховати елементи, але при цьому залишити порожній простір на його місці, рівний розміру прихованого елемента. Можливі значення: visible (елемент видимий), hidden (елемент прихований), collapse (приховує рядок або стовпець таблиці, не змінюючи загального вигляду), inherit.

 

Розміри

width – встановлює ширину області вмісту елемента. Можливі значення: auto (область вмісту буде розтягнуто на всю доступну величину), величина в пікселях, величина у відсотках, inherit.

min-width – встановлює мінімальну ширину області для вмісту елемента.

max-width – встановлює максимальну допустиму ширину області для вмісту елемента.

height – встановлює висоту області вмісту елемента.

min-height – встановлює мінімальну висоту області для вмісту елемента.

max-height – встановлює максимальну допустиму висоту області для вмісту елемента.

overflow – дозволяє визначити, що буде відбуватися, якщо вміст елемента перевищить його розміри. За замовчуванням, весь контент буде видимим, навіть якщо він в кілька разів перевищить розміри елемента. Можливі значення: visible (вміст, що виходить за межі елементу буде відображатися), hidden (вміст, що виходить за межі елементу буде обрізатися), scroll (вміст, що виходить за межі буде обрізатися, але його можна переглянути за допомогою полос прокрутки), auto (якщо вміст буде виходити за межі елементу, полоси прокрутки з’являться автоматично), inherit.

 

Рамка

border – дозволяє одночасно встановити ширину, стиль та колір для рамки блоку. Границі блоку – звичайна лінія/рамка, яка оточує блок з усіх сторін. Варто враховувати, що при додаванні рамки вона буде впливати на загальний розмір блоку.

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

border: border-width border-style border-color;

Можливі значення:

  • border-width – вказує ширину рамки в пікселях: border: 1px;
  • border-style – вказує стиль рамки, який визначається одним із ключових слів: solid, dotted, dashed, double, groove, ridge, inset, outset, hidden і none (рис. 2.3). Значення hidden та none є взаємозамінними, вони вказують, що рамка відсутня.

 

Рисунок 2.3 – Можливі значення стилів рамки

  • border-color – задає колір для рамки одним із таких способів: ім'я кольору, його шістнадцяткове значення: 

border: 1px #334433;

Кожне із значень може бути використано як окрема властивість: border-width, border-style, border-color.

Також можна налаштувати окремо кожну зі сторін рамки: border-top, border-right, border-left, border-bottom.

border-radius – дозволяє зробити скруглену рамку або округляти кути елементу. При використанні властивості, замість відтворення звичайних прямих кутів елемента, буде використовуватися скруглена рамка з заокругленими кутами згідно дуги кола з заданим радіусом (рис. 2.4).

 

Рисунок 2.4 – Скруглення кутів рамки

Властивість border-radius може містити від одного до чотирьох значень, що розділяються між собою пробілами. Від кількості значень залежить те, як будуть встановлені радіуси заокруглення кутів. Якщо вказується більше одного значення, скруглення кутів встановлюється починаючи з верхнього лівого кута:

border-radius: 5px 10px 15px 20px;

(верхній лівий, верхній правий, нижній правий, нижній правий)

border-radius: 10px 20px 15px;

(верхній лівий, верхній правий та нижній лівий, нижній правий)

border-radius: 15px 5px;

(верхній лівий і нижній правий, верхній правий і нижній лівий)

border-radius: 13px;

(однаковий радіус для всіх чотирьох кутів)

 

Фон

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

Можливі значення:

  • колір, заданий різними методами: ім’я кольору (red, green, black і т.п.), шістнадцяткове значення (#233342), за допомогою RGB (rgb(205, 51, 255)) або RGBA (rgba(205, 51, 255, 0.5), останній параметр задає прозорість).
  • transparent – прозорий фон.
  • inherit.

background-image – встановлює одне або кілька фонових зображень для елемента. Фонове зображення буде нижнім шаром в елементі, тобто весь контент та рамка будуть відображатися поверх зображення.

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

Якщо для елементу вказується кілька фонових зображень, то порядок їх додавання має значення. Перше додане зображення буде відображатися перед всіма іншими, останнє – за всіма іншими фоновими зображеннями, наприклад:

background-image: url('1.jpg'), url('2.jpg');

background-repeat – визначає, як фонове зображення буде повторюватися на екрані: по вертикалі, по горизонталі або відразу в обох напрямках. Також можна скасувати повторення фонового зображення, тобто воно буде виведено всього один раз.

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

Можливі значення: repeat (повторюється в обох напрямках), repeat-x (повторюється по горизонталі), repeat-y (повторюється по вертикалі), no-repeat (не повторюється), inherit.

background-attachment – встановлює, чи буде фонове зображення прокручуватися разом з вмістом елементу. Можливі значення: scroll (фонове зображення прокручується з вмістом), fixed (фонове зображення зафіксоване), local (зображення фіксоване, але прокручується за наявності полос прокрутки).

background-size – вказує розмір для фонового зображення.

Можливі значення: auto (розмір за замовчуванням), висота та ширина в пікселях, масштабування у відсотках, cover (масштабування на всю ширину або висоту елемента, щоб повністю його заповнити), contain (масштабування до максимального розміру, який поміщається в елемент).

background – забезпечує короткий метод встановлення значень відразу декількох властивостей для роботи з фоном.

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

background: #323232 repeat-x fixed url(‘img.jpg’);

 

Текст та шрифти

color – встановлює колір переднього плану елемента. До переднього плану елемента відноситься текст та елементи декорування тексту.

Можливі значення: колір (ім’я, шістнадцяткове значення, RGB), transparent (прозорий), inherit.

text-decoration – дозволяє додати до тексту такі елементи декору як підкреслення, перекреслення (закреслений текст) і т.д.

Можливі значення: none (текст без оформлення), underline (нижнє підкреслення), overline (горизонтальна лінія над текстом), line-through (перекреслення тексту), inherit.

text-align – вказує, яким чином буде вирівнюватися рядковий вміст (текст, зображення) по горизонталі, всередині батьківського елементу контейнера (блок, комірка таблиці, поле введення форми).

Можливі значення: left, right, center, justify, inherit.

vertical-align – керує вертикальним вирівнюванням малих елементів і вмісту елементів таблиці.

Якщо властивість застосовується до рядкового елементу, то вона впливає на вирівнювання самого рядкового елементу, а не його вмісту.

Якщо vertical-align застосовується до комірки таблиці, то вона впливає на вирівнювання всього вмісту, розташованого в комірці таблиці, а не на комірку.

Можливі значення: top, bottom, middle, inherit.

direction – задає напрямок написання тексту: rtl для мов з написання тексту справа наліво (наприклад іврит або арабська мова) і ltr для інших мов.

letter-spacing – дозволяє збільшувати або зменшувати відстань між літерами в тексті.

Можливі значення: normal (стандартна відстань), відстань (відстань в пікселях, допускаються від’ємні значення), inherit.

word-spacing – дозволяє перевизначати ширину пробілів між словами, використовувану браузерами за замовчуванням. Можливі значення: normal, ширина, inherit.

line-height – встановлює висоту всього рядка тексту, тому різниця між розміром шрифту (font-size) і висотою рядка (line-height) відповідає міжрядковому інтервалу (рис. 2.5). Збільшення значення властивості line-height призводить до збільшення відстані між рядками тексту.


Рисунок 2.5 – Міжрядковий інтервал

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

Можливі значення: normal (стандартний інтервал), число (значення, яке буде помножене на поточний розмір шрифту), висота (значення в пікселях), відсоток (висота у відсотках від поточного розміру), inherit.

text-transform – контролює використання малих і великих літер в тексті. Дозволяє весь текст зробити великими або малими літерами. За допомогою властивості text-transform можна зробити так, щоб кожне слово в тексті починалося з великої літери.

Можливі значення: none (текст без змін), capitalize (перша літера кожного слова – велика), uppercase (всі літери великі), lowercase (всі літери малі), inherit.

text-indent – задає абзацний відступ (порожній горизонтальний простір перед початком першого рядка тексту в елементі). Інтервал буде задаватися від початку лівого краю блочного батьківського елемента. Величина задається в пікселях або у відсотках.

font-family – дозволяє вказати шрифт тексту, який буде використаний всередині елементу. Існує два способи вказати шрифт для використання:

  • family-name (ім'я шрифту) – назва певного шрифту з сімейства шрифтів, наприклад: times, courier, arial і т.д. Якщо назва шрифту містить пробіли, вона має бути заключена в одиночні або подвійні лапки, наприклад: "Times New Roman".
  • generic-family (сімейство шрифтів) – набір шрифтів, що володіють загальними характеристиками. Наступні сімейства шрифтів доступні в будь-якій операційній системі: serif, sans-serif, cursive, fantasy, monospace.

Опис стандартних сімейств шрифтів:

  • serif – шрифти із засічками;
  • sans-serif – шрифти без засічок;
  • cursive – представляють собою шрифти з великою кількістю плавних красивих елементів оформлення і всіляких завитків – це спроба повторити на комп'ютері рукописний текст;
  • fantasy – художні та декоративні шрифти;
  • monospace – моноширинні шрифти, всі символи яких мають однакову фіксовану ширину.

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

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

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

Приклад використання:

font-family: Verdana, "Courier New", sans-serif;

font-size – дозволяє збільшувати або зменшувати розмір тексту. Встановлення розміру тексту, в свою чергу, може змінити розміри інших елементів.

Можливі значення: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, розмір в пікселях, розмір у відсотках, inherit.

В CSS можна задати курсивний шрифт, використовуючи властивість font-style зі значенням italic. Однак не у всіх шрифтах передбачений курсив, і замість нього можна побачити лише похилі символи, але візуально це буде виглядати як курсив. Також можете використовувати властивість font-style, задавши для неї значення oblique.

Значення normal призначене для задання шрифту стандартного вигляду.

font-weight – дозволяє вказати, наскільки жирним буде виглядати текст.

Можливі значення:

  • normal – стандартне написання символів;
  • bolder – жирне накреслення символів;
  • 100, 200, 300, 400, 500, 600, 700, 800, 900 – визначає товщину шрифта (від 0 до 500 – стандартний шрифт, від 600 до 900 - жирний).

font – універсальна властивість, яка дозволяє одночасно задати відразу кілька параметрів шрифту, описаних вище:

font: italic 600 14px Georgia, serif;

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

Для підключення шрифту потрібно створити правило @font-face і, за допомогою властивості font-family, визначити для нього ім'я. Потім вказується розташування шрифту, шлях може бути як відносним так і абсолютним:

@font-face {

  font-family: myFont;

  src: url("Fun_Light.ttf"),

       url("Fun_Light.eot");

}

 

Списки та таблиці

list-style-type – вказує вид маркера для елементів списку. Вонf дозволяє змінювати або приховувати маркери HTML списку.

Можливі значення: none (без маркера), circle (круг), disc (диск), square (квадрат), decimal (десяткове число), decimal-leading-zero (десяткове число, що починається з 0 – 01, 02, 03…), lower-latin (маленькі латинські літери), lower-roman (маленькі римські цифри), upper-latin (великі латинські літери), upper-roman (великі римські цифри), inherit.

list-style-position – визначає розташування маркера щодо елемента списку. Маркер може бути розташований або всередині елемента списку разом з вмістом (inside) або за межами елемента списку (outside, використовується за умовчанням).

list-style-image – замінює стандартний маркер елемента списку на зображення. Приклад:

list-style-image: url('smiley.gif');

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

border-spacing – дозволяє збільшувати або зменшувати відстань між комірками таблиці і загальної рамкою таблиці.

За замовчуванням браузери зазвичай залишають невеликий порожній простір (2px) між суміжними елементами таблиці. Значення цієї властивості задається в пікселях. Можна вказати два значення, якщо потрібно окремо налаштувати горизонтальну та вертикальну відстань.

border-collapse – визначає модель відображається рамки для таблиці.

За замовчуванням властивість встановлено в значення separate – коли суміжні елементи таблиці мають свої власні різні рамки.

Якщо модель рамки, задана за замовчуванням, не підходить, то можна скористатися значенням collapse – це призведе до об'єднання рамок між комірками і таблицею, тобто буде тільки одна загальна рамка без простору між комірками.

Остання зміна: Thursday 28 May 2020 22:54 PM