Створення стилів і таблиць стилів. Селектори

1.

Створення стилів і таблиць стилів.
Селектори
1
Створення стилів і таблиць стилів різних видів
2
Селектори

2.

1 Створення стилів і таблиць стилів різних видів
Стиль CSS – набір правил форматування для браузера. Стиль включає селектори та
блоки оголошень.
Селектор – елемент веб-сторінки (заголовок, абзац, зображення тощо), який
безпосередньо підлягає форматуванню.
Блок оголошень – команди форматування. CSS-стилі мають власну мову, наприклад :
p{
color: red;
font-size: 1.5em;
}

3.

1 Створення стилів і таблиць стилів різних видів
Приклад опису стиля зображено на рисунку.

4.

1 Створення стилів і таблиць стилів різних видів
Властивість – слово чи декілька написаних через дефіс слів, що визначають
конкретний стиль чи стильовий ефект. Весь набір визначених CSS-стилів включається в
таблицю стилів.
Таблиці стилів бувають двох видів: внутрішні (стильова інформація представлена
безпосередньо у файлі веб-сторінки) та зовнішні (стильова інформація представлена у
зовнішньому файлі).
Кешування і таблиці стилів: браузер завантажує таблицю стилів у свій кеш; з
оновленням сторінки щойно змінені таблиці стилів можуть не примінитися, вихід –
повністю перевантажувати сторінку, Ctrl+F5 (Chrome, Internet Explorer), Ctrl+Shift+R
(Firefox), Ctrl+R (Safari, Chrome).

5.

1 Створення стилів і таблиць стилів різних видів
Приклад. Внутрішній стиль
<style>
h1 {
color: #FF7643;
font-family: Arial;
}
p{
color: red;
font-size: 1.5em;
}
</style>
</head>

6.

1 Створення стилів і таблиць стилів різних видів
Зв’язування таблиць стилів з HTML-кодом
HTML5 – <link rel="stylesheet" href="css/styles.css">
HTML 4.01 – <link rel="stylesheet" type="text/css" href="css/styles.css">
XHTML – <link rel="stylesheet" type="text/css" href="css/styles.css" />
rel="stylesheet" – вказує тип посилання
href – задає місцезнаходження зовнішнього CSS-файла на сайті.

7.

1 Створення стилів і таблиць стилів різних видів
Прикріпляння таблиць стилів з використанням CSS
CSS має вбудований спосіб прив'язки зовнішніх таблиць стилів до коду HTML –
правило @import. Його треба додати в HTML-тег <style>. Наприклад:
<style type="text/css">
@import url(css/styles.css);
</style>
Атрибут type="text/css" використовується для документів HTML 4.01 чи XHTML.
На відміну від HTML-тега <link> правило @import - мовна конструкція CSS, що має
деякі невластиві HTML якості.

8.

1 Створення стилів і таблиць стилів різних видів
Щоб виконати прив'язку до зовнішнього файлу CSS, треба використати url замість href
і вкладати шлях до CSS-файлу в круглі дужки. Лапки, в які поміщений URL, не
обов'язкові. Таким чином, url(css/styles.css) і url("css/styles.css") працюватимуть однаково.
За допомогою декількох правил @import, як і за допомогою декількох тегів <link>,
можна приєднати будь-яку кількість зовнішніх таблиць стилів :
<style type="text/css">
@import url(css/styles.css);
@import url(css/forms.css);
</style>

9.

1 Створення стилів і таблиць стилів різних видів
Після правила @import можна додавати звичайні CSS-стилі, якщо, наприклад, ви
хочете створити стиль, який треба застосувати тільки до однієї веб-сторінки,
використовуючи для форматування іншого вмісту єдиний дизайн, вже описаний в
зовнішній таблиці стилів, наприклад:
<style type="text/css">
@import url(css/styles.css);
@import url(css/forms.css);
p { color: red; }
</style>

10.

1 Створення стилів і таблиць стилів різних видів
Треба помістити усі правила @import перед CSS-стилями, як показано в прикладі.
Веб-браузери ігнорують будь-які таблиці стилів, що імпортуються після CSS-правила,
тому якщо змінити порядок показаного вище коду на зворотний і стиль p з'явиться
першим, то браузер проігнорує будь-які стилі в таблицях стилів style.css або form.css.

11.

2 Селектори
Селектори типів
Селектори типів визначають стиль всіх екземплярів конкретного HTML-елемента.
Приклад. Визначення стилю для всіх екземплярів h2.
h2 {
font-family:"Century Gothic", "Gill Sans", sans-serif;
color:#000000;
margin-bottom:0;
}
Недоліки: неможна виділити якийсь із екземплярів.

12.

2 Селектори
Селектори класів
Селектори класів використовуються для виокремлення чи виділення якихось елементів (точне
керування). Селектори класів дозволяють вказати конкретний елемент веб-сторінки незалежно від тегів.
Особливості:
• усі назви селекторів класів повинні розпочинатися з крапки. З її допомогою браузери знаходять
селекторы класів в таблиці стилів CSS;
• при іменуванні стильових класів дозволяється використання тільки букв алфавіту, чисел, дефісів,
знаків підкреслення;
• назва після крапки завжди повинна розпочинатися з символу - букви алфавіту. Наприклад, .9lives неправильне ім'я класу, а .crazy8 - правильне. Можна називати класи, наприклад, іменами .copy-right
і .banner_image, але не .-bad або _as_bad;
• імена стильових класів чутливі до регістра. Наприклад, .SIDEBAR і .sidebar розглядаються мовою
CSS по-різному, як різні класи.

13.

2 Селектори
Приклад.
.special {
color:#FF0000;
font-family:"Monotype Corsiva";
}
Для застосування класу до конкретного елемента потрібно використати атрибут class,
наприклад до абзацу:
<p class="special">

14.

2 Селектори
ID-селектор
У мові CSS ID-селектор призначений для ідентифікації унікальних частин веб-сторінок, таких
як шапка, панель навігації, основна інформаційна область вмісту і т. д. У співтоваристві веб-
розробників є тенденція до відмови від ID-селекторів в CSS. Перед назвою в ID-селекторах
ставиться #:
#banner {
background: #CC0000;
height: 300px;
width: 720px;
}
Для застосування до конкретного тега використовуються атрибут id, наприклад до div:
<div id="banner">

15.

2 Селектори
Стилізація груп тегів
Створення групових селекторів:
h1, h2, h3, h4, h5, h6 { color: #F1CD33; }
h1, p, .copyright, #banner { color: #F1CD33; }
CSS пропонує універсальний селектор * для вибірки всіх тегів веб-сторінки:
* { font-weight: bold; }
Стилізація вкладених тегів
Селектори потомки (контекстні селектори):
h1 strong {color: red;}
li a {font-family: Arial;}
А всі наступні чотири селектори матимуть однаковий ефект:
ul li a
body li a
html li a
html body ul li a

16.

2 Селектори
Селектори модулів
Селекторы нащадків часто використовуються для форматування модуля коду, тобто колекції HTML-елементів,
що виконують на сторінці конкретну функцію. Нехай маємо наступний HTML-код:
<div>
<h2>Our company is great!</h2>
<p>More information about why our company is so great</p>
<h2>Another news item</h2>
<p>Information about the other news item…</p>
<h2>…and so on…</h2>
<p>… and so on… </p>
</div>
Щоб від форматувати кожен елемен окремо, треба застосувати для контейнера <div> атрибут class – <div
class="news">, тоді матимемо:
.news h2 { color: red; }
.news p { color: blue; }

17.

2 Селектори
Також можна задати класи для кожного елемента модуля та форматувати їх
індивідуально, використовуючи селектори потомки:
Якщо необхідно, щоб клас працював лише із конкретним елементом, треба вказати
ім’я елемента перед класом:
p.intro {color: yellow;}
Клас intro можна застосовувати лише до абзаців.

18.

2 Селектори
Псевдокласи та псевдоелементи
Іноді вимагається вибрати фрагмент веб-сторінки, в якому взагалі немає тегів, але в той же час
його досить просто ідентифікувати. Це може бути перший рядок абзацу або посилання, на яке
наведений покажчик миші. CSS пропонує для цих цілей псевдокласи і псевдоелементи.
a:link означає будь-яке посилання, по якому відвідувач веб-сторінки ще не переходив, навіть
якщо на неї не наведений покажчик миші. Це звичайний стиль невідвіданих гіперпосилань.
a:visited є посиланням, по якому відвідувач веб-сторінки вже переходив. Вона зберігається в
історії браузеру. Можна розробити для цього типу стиль, відмінний від звичайного, щоб сказати
відвідувачеві, що він вже відвідував цю сторінку.
a:hover дозволяє змінювати вид посилання, на яке відвідувач навів покажчик миші. Ви можете
додати візуальні ефекти трансформації (переходів), які служать для поліпшення візуального
сприйняття, наприклад кнопки панелі навігації.

19.

2 Селектори
Крім того, можна використати псевдо клас :hover для застосування стилів до елементів вебсторінок, відмінних від посилань. Наприклад, ви можете використати його для виділення
фрагмента тексту, поміщеного в теги <p> чи <div>, яким-небудь стильовим ефектом у той момент,
коли відвідувач веб-сторінки переміщає вказівник миші над цим фрагментом. А якщо ви хочете
додати стиль до тегів, застосовуючи до них спеціальний клас highlight, створіть стиль під назвою
highlight:hover.
a:active дозволяє визначити, як виглядатиме посилання під час вибору її відвідувачем вебсторінки. Іншими словами, це стиль під час кратковременного клацання кнопкою миші.
Для стилізації фрагментів абзацу використовуються два псевдоелементи: :first-letter і :first-line.
Перший дозволяє створити буквицю, а другий – відформатувати перший рядок абзацу. В CSS3
допсевдоелементів додається ще одна двокрапка, щоб відрізняти їх від псевдо класів: ::fist-letter.

20.

2 Селектори
Додаткові псевдокласи та псевдоелементи:
:focus – приміняється під час натиснення клавіші табуляції чи клацанні кнопкою миші
на текстовому полі (input:focus {background-color: #FFFFCC;});
:before – дозволяє додати повідомлення, що передує певному елементу веб-сторінки
(p.tip:before {content: "Підказка";});
:after – дозволяє додати повідомлення після певного елемента веб-сторінки (p.tip:before
{content: "Підказка";});
::Selection – цей селектор, що з'явився в CSS3, посилається на елементи, які відвідувач
вибрав на сторінці. Наприклад, коли відвідувач клацає на тексті і проводить над ним
покажчик миші, браузер виділяє цей текст і відвідувач може потім скопіювати текст.

21.

2 Селектори
Наприклад, якщо потрібне зробити вибраний текст білим на фіолетовому фоні, цей
стиль можна додати до таблиці стилів сторінки:
::selection {
color: #FFFFFF;
background-color: #993366;
}

22.

2 Селектори
Єдиними властивостями, які можна встановлювати за допомогою даного селектору, є
color та background-color.
Цей селектор функціонує в Internet Explorer 9, Opera, Chrome і Safari, але не працює в
Internet Explorer 8 або Firefox. Але ви можете додати підтримку для Firefox шляхом
доповнення селектора так званим префіксом виробника:
::-moz-selection {
color: #FFFFFF;
background-color: #993366;
}

23.

2 Селектори
Селектори атрибутів
За допомогою селекторів атрибутів можна вибрати теги з конкретними елементами,
наприклад:
img [title]
підсвітити конкретне посилання
a[href="http://www.cosmofarmer.com"]{
color:red;
font-weight:bold;
}

24.

2 Селектори
вибрати тільки текстові поля форми
input[type="text"]
починається з (^)
a[href^="http://"]
закінчується на ($)
a[href$=".pdf"] {
background-image: url(doc_icon.png) no-repeat;
padding-left: 15px;
}
містить (*)
img[src*="headshot"]

25.

2 Селектори
Селектори дочірніх елементів
Використовується символ >. Наприклад, потрібно вибрати будь-який тег <h1>,
дочірній по відношенню до <body>:
body > h1
Також можна використовувати специфічні псевдокласи: :first-child, :last-child, :nth-
child.
:first-child – застосовується до будь-якого тегу, що є першим дочірнім тегом.
:last-child – застосовується до будь-якого тегу, що є останнім дочірнім тегом.

26.

2 Селектори
:nth-child. З його допомогою можна легко і просто стилізувати кожен другий рядок в
таблиці, кожен третій елемент в списку або надати свій стиль будь-якому поєднанню
дочірніх елементів, що чередуються. Для визначення, який з дочірніх елементів треба
вибирати, цей псевдоелемент селектора вимагає значення. Найпростішим вибором є
ключове слово - або odd (непарний), або even (парний), - що дозволяє вибрати непарні або
парні дочірні елементи, що чергуються.

27.

2 Селектори
Наприклад, якщо треба надати один фоновий колір для кожного парного рядка таблиці
і інший фоновий колір для кожного рядка з непарним номером, можна створити два
наступні стилі:
tr:nth-child(odd) { background-color: #D9F0FF; }
tr:nth-child(even) { background-color: #FFFFFF; }
Можна також вибрати, скажімо, кожен третій дочірній елемент в серії, починаючи з
другого дочірнього елементу.

28.

2 Селектори
Уявімо, наприклад, що вам треба виділити кожен третій елемент таблиці (тег <td>)
усередині рядка, починаючи з другого елементу таблиці. Для цього необхідно застосувати
наступний стиль:
tr td:nth-child(3n+2) { background-color:#900; }
Звичайне число перед n (в даному випадку 3) представляє той дочірній елемент, який буде
виділений наступним по рахунку. Отже, 3n означає кожен третій елемент, а 4n - кожен
четвертий елемент. Знак "плюс" і число (+2 в цьому прикладі), що йде за ним, показують, з
якого елементу треба починати виділення, таким чином, +2 означає, що треба розпочинати з
другого дочірнього елементу, а +5 означає, що треба розпочинати виділення з п'ятого
дочірнього елементу. Таким чином, використання псевдоелементу :nth-child(5n+4) приведе до
виділення кожного п'ятого дочірнього елементу, починаючи з четвертого дочірнього елементу.

29.

2 Селектори
Селектори типів дочірніх елементів
:first-of-type. Працює так само, як і :first-child, але застосовується до дочірнього елементу,
що має певний тег. Припустимо, наприклад, що у вас є бічна панель з класом sidebar. Для
надання стильового оформлення першому абзацу цієї бічної панелі використовується
наступний селектор:
.sidebar p:first-of-type
Зверніть увагу на p в p:first-of-type. Цей елемент означає тег, який ви збираєтеся
відформатувати.

30.

2 Селектори
:last-of-type. Працює так само, як і :last-child, але застосовується до останнього екземпляра
тега певного типу. Наприклад, якщо треба на бічній панелі div певним чином відформатувати
останній абзац, але ви не упевнені у відсутності яких-небудь інших тегів, що йдуть за абзацом
(наприклад, списку, заголовка або малюнка). Цей стиль має наступний вигляд:
.sidebar p:last-of-type

31.

2 Селектори
:nth-of-type. Працює так само, як і :nth-child(), але застосовується до дочірніх елементів,
що чергуються, мають певний тег. Цей селектор може згодитися за наявності великих абзаців
тексту з великою кількістю фотографій. Тег <img> є вбудовуваним тегом, тому у вас може бути
<p>-тег з декількома <img>-тегами усередині. І якщо вам захочеться чергувати появу
зображень то ліворуч, то справа, то це можна зробити за допомогою двох стилів:
img:nth-of-type(odd) { float: left; }
img:nth-of-type(even) { float: right; }
Для рядків таблиці, що передуються:
tr:nth-of-type(odd) { background-color: #D9F0FF; }
tr:nth-of-type(even) { background-color: #FFFFFF; }

32.

2 Селектори
Селектори суміжних елементів одного рівня
Батьківсько-дочірні відношення - не єдина форма родинних зв'язків в дереві HTML.
Іноді вимагається вибрати тег, що відноситься до групи суміжних елементів одного рівня і
що мають загального батька. Тег, який слідує одразу ж за іншим тегом, в HTML
називається суміжним елементом того ж рівня. На рисунку 1 тег <div> є суміжним по
відношенню до <h1>, а тег <p> - по отношению до <h2> і т. д.

33.

2 Селектори (Дерево HTML)

34.

2 Селектори
Використовуючи селектор суміжних елементів, можна, наприклад, надати першому
абзацу після кожного заголовка форматування, відмінне від наступних абзаців.
Припустимо, ви хочете видалити відступ, який автоматично з'являється перед тегом <p>,
щоб між заголовком і тегом не було ніякого проміжку. Чи бажаєте надати абзацу як
невеликому ввідному опису інший колір і розмір шрифту.
Селектор суміжних елементів використовує знак + для з'єднання одного элемента з
іншим. Тому, щоб вибрати усі перші абзаци, що йдуть за будь-яким <h2>, використайте
селектор h2 + p (пропуски необов'язкові, так що h2+p також прекрасно працюватиме).
Останній елемент в селекторі (в даному випадку - p) - тег, який треба відформатувати, але
тільки за умови, що він йде відразу ж за суміжним для нього тегом <h2>.

35.

2 Селектори
Селектор :not()
Селектор :not(), також відомий як псевдоклас заперечення, дозволяє вибрати що-
небудь, відмінне від іншого. Наприклад, можна застосувати клас до абзацу - <p
class="classy"> - і створити селектор класу CSS, щоб відформатувати цей абзац: .classy {
color: red;}
А що робити, якщо знадобиться вибрати усі абзаци, за винятком тих, що мають клас
classy? Саме тут і знадобиться селектор :not(). Щоб показати те, що вибирати не треба,
CSS-селектор поміщається в круглі дужки. Наприклад:
p:not(.classy) { color: blue; }
Цей стиль задає тексту синій колір в усіх абзацах, до яких не застосовувався клас
classy.

36.

2 Селектори
Селектор: not() може бути корисний при використанні селекторів атрибутів.
Припустимо, наприклад, що доменне ім'я вашого сайту mysite.com. Для вибору посилання,
яке вказує за межі вашого сайту, треба вибрати усі абсолютні посилання, що не вказують
на домен mysite.com. От як це можна зробити:
a[href^="http://"]:not([href^="http://mysite.com"])
Даний селектор вибирає всі посилання, атрибут href яких починаються з http://, крім
тих, в яких даний атрибут починається з http://mysite.com.
Те саме можна написати і коротше:
a[href^="http://"]:not([href*="mysite.com"])

37.

2 Селектори
Відносно селектора: not() діють декілька обмежень:
• з селектором :not() можна використати тільки прості селектори. Іншими словами, можна
застосовувати селекторы елементів (такі як html або p), універсальний селектор (*),
класи (наприклад .footer), ідентифікатори ID (наприклад, #banner) або псевдокласи
(:hover, :checked, :first - child і т. д.). Таким чином, усі наступні селектори можна вважати
правильними:
.footnote:not(div)
img:not(.portrait)
div:not(#banner)
li:not(:first-child)

38.

2 Селектори
не можна використовувати селектори-потомки (такі як div p a), псевдоелементи (такі
як ::first-line), групові селектори або комбінації (такі як суміжний селектор одного
рівня h2 + p).
не можна в одному рядку застосовувати декілька: not()-селекторів. Наприклад,
наступний код буде неправильним:
a[href^="http://"]:not([href*="google.com"]):not([href="yahoo.com])
Іншими словами, :not() з селектором можна використати тільки один раз.

39.

УЗАГАЛЬНЕННЯ ВИВЧЕНОГО МАТЕРІАЛУ
1 Що називають стилем CSS?
9 Охарактеризувати селектори модулів.
2 Що таке селектор, властивість, блок
10
оголошень?
3 Як зв’язати стиль з HTML?
4 Охарактеризувати селектори типів.
5 Охарактеризувати селектори класів.
6 Охарактеризувати id-селектор.
7 В чому суть групування селекторів?
8 Охарактеризувати селектори потомки
(нащадки).
Охарактеризувати
використання
псевдокласів в CSS.
11
Охарактеризувати
використання
псевдоелементів в CSS.
12
Охарактеризувати
використання
селекторів атрибутів?
13 Як відформатувати дочірні елементи?
14 Як відформатувати суміжні елементи
одного рівня?
15 Яке призначення селектора :not()?

40.

ДОМАШНЄ ЗАВДАННЯ:
Реалізувати розглянуті теги та приклади.
Роббинс Д. HTML5, CSS3 и JavaScript. Исчерпывающее руководство / Д. Роббинс;
[пер. с англ. М. А. Райтман]. – 4-е издание. – М. : Эксмо, 2014, с. 63-130.