підкреслений, - має межу над текстом, а - перекреслений.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Інтервал між буквами тексту можна специфікувати властивістю letter- spacing. Значення - потрібна величина. Наприклад, якщо необхідно задати інтервал 3px між буквами в параграфах
і 6px - в заголовках , то використовується такий код:
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Властивість text-transform управляє регістром символів. Можна вибрати capitalize, uppercase або lowercase, в залежності від того, як виглядає текст в оригінальному HTML-коді.
Наприклад, слово "headline" можна показати "HEADLINE" або "Headline". Є чотири можливих значення text-transform:
Capitalize - Капіталізує кожне слово. Наприклад: "john doe" стане "John Doe".
Uppercase - Конвертує всі символи у верхній регістр. Наприклад: "john doe" стане "JOHN DOE".
Lowercase - Конвертує всі символи в нижній регістр. Наприклад: "JOHN DOE" стане "john doe".
None - Трансформації немає - текст відображається так само, як в HTML-коді.
Для прикладу ми використовуємо список імен. Всі імена виділені за допомогою (list-item). Давайте капіталізуємо все імена і відобр азимо всі заголовки верхнім регістром.
Бачите, HTML-код в цьому прикладі в дійсності записаний в нижньому регістрі.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
2.4. Посилання та псевдокласи
Все вивчене на попередніх заняттях можна застосовувати і для посилань / links (наприклад змінювати шрифт, колір, підкреслення і т.д). Новим є те, що в CSS ці властивості можна визначати по-різному, в залежності від того, відвідали вже посилання, активна чи вона, чи знаходиться покажчик миші над посиланням.
Це дозволяє додати цікаві ефекти на ваш web-сайт. Для цього використовуються так звані псевдокласи. Псевдоклас дозволяє враховувати різні умови або події при визначенні властивостей HTML-тега. Розглянемо приклад.
Як ви знаєте, посилання специфицируются в HTML тегом . В CSS ми також можемо використовувати a як селектор:
a {
color: blue;
}
Посилання може мати різні стани: link (просто посилання) і visited (відвідана). Можна використовувати псевдокласи для установки різних стилів відвіданих і невідвіданих посилань.
a: link {
color: blue;
}
a: visited {
color: red;
}
Використовуйте | a: link | і | a: visited | для невідвіданих і відвіданих посилань, відповідно. Активні посилання мають псевдоклас a: active, і a: hover, коли покажчик - над посиланням. Ми розглянемо кожен з чотирьох псевдокласів на прикладах.
Псевдоклас: link
Псевдоклас: link використовується для посилань на сторінки, які користувач ще не відвідував.
У прикладі коду - невідвідані посилання - сині.
a: link {
color: # 6699CC;
}
Псевдоклас: visited
Псевдоклас: visited використовується для посилань на сторінки, які користувач відвідав. У прикладі коду відвідані посилання - фіолетові.
a: visited {
color: # 660099;
}
Псевдоклас: active
Псевдоклас: active використовується для активних посилань. У прикладі активні посилання мають жовтий фон.
a: active {
background-color: # FFFF00;
}
Псевдоклас: hover
Псевдоклас: hover використовується для посилань, над якими знаходиться вказівник. За допомогою псевдокласу: hover можна створювати цікаві ефекти. Наприклад, якщо ми хочемо, щоб посилання ставали помаранчевими і курсивними при проходженні покажчика над ними, то CSS - код повинен виглядати так:
a: hover {
color: orange; font-style: italic;
}
Властивість text-decoration можна використовувати для визначення підкреслення тексту. Для видалення підкреслення встановіть в text- decoration значення none.
a {
text-decoration: none;
}
Альтернативно можна також встановити text-decoration, поряд з іншими властивостями, для всіх чотирьох псевдокласів.
a: link {color: blue;
text-decoration: none;
}
a: visited {color: purple;
text-decoration: none;
}
a: active {
background-color: yellow; text-decoration: none;
}
a: hover {color: red;
text-decoration: none;
}
2.5. Ідентифікація та групування елементів
Іноді необхідно застосувати особливий стиль до певного елемента або конкретної групи елементів. У цьому розділі ми детально розберемо використання class і id для специфікування властивостей обраних елементів
Групування елементів за допомогою class
Припустимо, у нас є два списки посилань сортів винограду - для білого і для червоного соку. HTML-код може бути таким:
Виноград для білогосоку:
Рислінг
Брин
Піно
Виноград для червоного соку:
Каль
Мер
Нуар
Далі, ми хочемо, щоб посилання на білий сік були жовтого кольору, на червоний сік - червоного, а решта посилання на цій же сторінці залишалися синіми. Для досягнення цієї мети ми розділимо посилання на дві категорії за допомогою присвоєння класу кожному посиланні атрибутом class.
Встановимо класи для попереднього прикладу:
Виноград для білого соку:
Рислінг
Брин
Піно
Виноград для червоного соку:
Каль
Мер
Нуар
Далі можемо визначити спеціальні властивості для посилань whitegus і redgus, відповідно.
a {
color: blue;
}
a.whitegus {
color: # FFBB00;
}
a.r redgus {
color: # 800000;
}
Як показано в прикладі властивості можна визначати для елементів, що належать до певного класу, за допомогою імя_класса в таблиці стилів документа.
Елементи і використовуються для структурування документа, часто спільно з атрибутами class і id. Розглянемо їх використання, оскільки ці елементи HTML мають важливе значення в CSS.
Групування за допомогою
Елемент можна назвати нейтральним елементом, який нічого не додає до вмісту документа. Але, в поєднанні з CSS, може використовуватися для візуальних ефектів можна застосувати до окремих блоках тексту.
Приклад - цитата з Бенджаміна Франкліна:
<р> Early to bed, early to rise, make a man healthy, wealthy and wise
Припустимо, ми хочемо показати переваги відсутності сну. Відзначимо ці переваги за допомогою .
Кожному блоку span буде присвоєно class, який потім можна визначити в нашій таблиці стилів:
Хто рано лягає і рано встає,
буде здоровим ,
<span class = "benefit"> успішним
і мудрим . В CSS:
span.benefit {
color: red;
}
Можна також використовувати id для визначення стилю -елементів. Необхідно тільки пам'ятати, що ви повинні встановити унікальний id кожному з трьох -елементів.
Групування за допомогою
У той час як використовується в елементах рівня блоку, застосовується для групування одного або більше блок-елементів. Розглянемо, наприклад, два списки президентів США, згрупованих за політичною приналежністю:
Франклін Д. Рузвелт
Гаррі Трумен
Джон Ф. Кеннеді
Ліндон Б. Джонсон
Джиммі Картер
Білл Клінтон
Дуайт Д. Ейзенхауер
Річард Ніксон
Джералд Форд
Роналд Рейган
Джордж Буш
Джордж У. Буш
У таблиці стилів можна використовувати таке ж групування:
#democrats {
background: blue;
}
#republicans {
background: red;
}
У цих прикладах ми використовували і для визначення кольору тексту і фону. Але обидва елементи несуть в собі потенціал і для більш складних операцій.
Ідентифікація елемента за допомогою id
Крім групування елементів може знадобитися ідентифікувати один унікальний елемент. Це реалізується за допомогою атрибута id. Особливість id в тому, що в документі не може бути більше одного елемента з даним конкретним id. Кожен id повинен бути унікальним. В інших випадках використовуйте атрибут class.
Розглянемо приклад використання id.
- перекреслений.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Інтервал між буквами тексту можна специфікувати властивістю letter- spacing. Значення - потрібна величина. Наприклад, якщо необхідно задати інтервал 3px між буквами в параграфах
і 6px - в заголовках , то використовується такий код:
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Властивість text-transform управляє регістром символів. Можна вибрати capitalize, uppercase або lowercase, в залежності від того, як виглядає текст в оригінальному HTML-коді.
Наприклад, слово "headline" можна показати "HEADLINE" або "Headline". Є чотири можливих значення text-transform:
Capitalize - Капіталізує кожне слово. Наприклад: "john doe" стане "John Doe".
Uppercase - Конвертує всі символи у верхній регістр. Наприклад: "john doe" стане "JOHN DOE".
Lowercase - Конвертує всі символи в нижній регістр. Наприклад: "JOHN DOE" стане "john doe".
None - Трансформації немає - текст відображається так само, як в HTML-коді.
Для прикладу ми використовуємо список імен. Всі імена виділені за допомогою (list-item). Давайте капіталізуємо все імена і відобр азимо всі заголовки верхнім регістром.
Бачите, HTML-код в цьому прикладі в дійсності записаний в нижньому регістрі.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
2.4. Посилання та псевдокласи
Все вивчене на попередніх заняттях можна застосовувати і для посилань / links (наприклад змінювати шрифт, колір, підкреслення і т.д). Новим є те, що в CSS ці властивості можна визначати по-різному, в залежності від того, відвідали вже посилання, активна чи вона, чи знаходиться покажчик миші над посиланням.
Це дозволяє додати цікаві ефекти на ваш web-сайт. Для цього використовуються так звані псевдокласи. Псевдоклас дозволяє враховувати різні умови або події при визначенні властивостей HTML-тега. Розглянемо приклад.
Як ви знаєте, посилання специфицируются в HTML тегом . В CSS ми також можемо використовувати a як селектор:
a {
color: blue;
}
Посилання може мати різні стани: link (просто посилання) і visited (відвідана). Можна використовувати псевдокласи для установки різних стилів відвіданих і невідвіданих посилань.
a: link {
color: blue;
}
a: visited {
color: red;
}
Використовуйте | a: link | і | a: visited | для невідвіданих і відвіданих посилань, відповідно. Активні посилання мають псевдоклас a: active, і a: hover, коли покажчик - над посиланням. Ми розглянемо кожен з чотирьох псевдокласів на прикладах.
Псевдоклас: link
Псевдоклас: link використовується для посилань на сторінки, які користувач ще не відвідував.
У прикладі коду - невідвідані посилання - сині.
a: link {
color: # 6699CC;
}
Псевдоклас: visited
Псевдоклас: visited використовується для посилань на сторінки, які користувач відвідав. У прикладі коду відвідані посилання - фіолетові.
a: visited {
color: # 660099;
}
Псевдоклас: active
Псевдоклас: active використовується для активних посилань. У прикладі активні посилання мають жовтий фон.
a: active {
background-color: # FFFF00;
}
Псевдоклас: hover
Псевдоклас: hover використовується для посилань, над якими знаходиться вказівник. За допомогою псевдокласу: hover можна створювати цікаві ефекти. Наприклад, якщо ми хочемо, щоб посилання ставали помаранчевими і курсивними при проходженні покажчика над ними, то CSS - код повинен виглядати так:
a: hover {
color: orange; font-style: italic;
}
Властивість text-decoration можна використовувати для визначення підкреслення тексту. Для видалення підкреслення встановіть в text- decoration значення none.
a {
text-decoration: none;
}
Альтернативно можна також встановити text-decoration, поряд з іншими властивостями, для всіх чотирьох псевдокласів.
a: link {color: blue;
text-decoration: none;
}
a: visited {color: purple;
text-decoration: none;
}
a: active {
background-color: yellow; text-decoration: none;
}
a: hover {color: red;
text-decoration: none;
}
2.5. Ідентифікація та групування елементів
Іноді необхідно застосувати особливий стиль до певного елемента або конкретної групи елементів. У цьому розділі ми детально розберемо використання class і id для специфікування властивостей обраних елементів
Групування елементів за допомогою class
Припустимо, у нас є два списки посилань сортів винограду - для білого і для червоного соку. HTML-код може бути таким:
Виноград для білогосоку:
Рислінг
Брин
Піно
Виноград для червоного соку:
Каль
Мер
Нуар
Далі, ми хочемо, щоб посилання на білий сік були жовтого кольору, на червоний сік - червоного, а решта посилання на цій же сторінці залишалися синіми. Для досягнення цієї мети ми розділимо посилання на дві категорії за допомогою присвоєння класу кожному посиланні атрибутом class.
Встановимо класи для попереднього прикладу:
Виноград для білого соку:
Рислінг
Брин
Піно
Виноград для червоного соку:
Каль
Мер
Нуар
Далі можемо визначити спеціальні властивості для посилань whitegus і redgus, відповідно.
a {
color: blue;
}
a.whitegus {
color: # FFBB00;
}
a.r redgus {
color: # 800000;
}
Як показано в прикладі властивості можна визначати для елементів, що належать до певного класу, за допомогою імя_класса в таблиці стилів документа.
Елементи і використовуються для структурування документа, часто спільно з атрибутами class і id. Розглянемо їх використання, оскільки ці елементи HTML мають важливе значення в CSS.
Групування за допомогою
Елемент можна назвати нейтральним елементом, який нічого не додає до вмісту документа. Але, в поєднанні з CSS, може використовуватися для візуальних ефектів можна застосувати до окремих блоках тексту.
Приклад - цитата з Бенджаміна Франкліна:
<р> Early to bed, early to rise, make a man healthy, wealthy and wise
Припустимо, ми хочемо показати переваги відсутності сну. Відзначимо ці переваги за допомогою .
Кожному блоку span буде присвоєно class, який потім можна визначити в нашій таблиці стилів:
Хто рано лягає і рано встає,
буде здоровим ,
<span class = "benefit"> успішним
і мудрим . В CSS:
span.benefit {
color: red;
}
Можна також використовувати id для визначення стилю -елементів. Необхідно тільки пам'ятати, що ви повинні встановити унікальний id кожному з трьох -елементів.
Групування за допомогою
У той час як використовується в елементах рівня блоку, застосовується для групування одного або більше блок-елементів. Розглянемо, наприклад, два списки президентів США, згрупованих за політичною приналежністю:
Франклін Д. Рузвелт
Гаррі Трумен
Джон Ф. Кеннеді
Ліндон Б. Джонсон
Джиммі Картер
Білл Клінтон
Дуайт Д. Ейзенхауер
Річард Ніксон
Джералд Форд
Роналд Рейган
Джордж Буш
Джордж У. Буш
У таблиці стилів можна використовувати таке ж групування:
#democrats {
background: blue;
}
#republicans {
background: red;
}
У цих прикладах ми використовували і для визначення кольору тексту і фону. Але обидва елементи несуть в собі потенціал і для більш складних операцій.
Ідентифікація елемента за допомогою id
Крім групування елементів може знадобитися ідентифікувати один унікальний елемент. Це реалізується за допомогою атрибута id. Особливість id в тому, що в документі не може бути більше одного елемента з даним конкретним id. Кожен id повинен бути унікальним. В інших випадках використовуйте атрибут class.
Розглянемо приклад використання id.
Групування за допомогою
Елемент можна назвати нейтральним елементом, який нічого не додає до вмісту документа. Але, в поєднанні з CSS, може використовуватися для візуальних ефектів можна застосувати до окремих блоках тексту.
Приклад - цитата з Бенджаміна Франкліна:
<р> Early to bed, early to rise, make a man healthy, wealthy and wise
Припустимо, ми хочемо показати переваги відсутності сну. Відзначимо ці переваги за допомогою .
Кожному блоку span буде присвоєно class, який потім можна визначити в нашій таблиці стилів:
Хто рано лягає і рано встає,
буде здоровим ,
<span class = "benefit"> успішним
і мудрим . В CSS:
span.benefit {
color: red;
}
Можна також використовувати id для визначення стилю -елементів. Необхідно тільки пам'ятати, що ви повинні встановити унікальний id кожному з трьох -елементів.
Групування за допомогою
У той час як використовується в елементах рівня блоку,
застосовується для групування одного або більше блок-елементів. Розглянемо, наприклад, два списки президентів США, згрупованих за політичною приналежністю:
Франклін Д. Рузвелт
Гаррі Трумен
Джон Ф. Кеннеді
Ліндон Б. Джонсон
Джиммі Картер
Білл Клінтон
Дуайт Д. Ейзенхауер
Річард Ніксон
Джералд Форд
Роналд Рейган
Джордж Буш
Джордж У. Буш
У таблиці стилів можна використовувати таке ж групування:
#democrats {
background: blue;
}
#republicans {
background: red;
}
У цих прикладах ми використовували
У таблиці стилів можна використовувати таке ж групування:
#democrats {
background: blue;
}
#republicans {
background: red;
}
У цих прикладах ми використовували
і для визначення кольору тексту і фону. Але обидва елементи несуть в собі потенціал і для більш складних операцій.
Ідентифікація елемента за допомогою id
Крім групування елементів може знадобитися ідентифікувати один унікальний елемент. Це реалізується за допомогою атрибута id. Особливість id в тому, що в документі не може бути більше одного елемента з даним конкретним id. Кожен id повинен бути унікальним. В інших випадках використовуйте атрибут class.
Розглянемо приклад використання id.
Ідентифікація елемента за допомогою id
Крім групування елементів може знадобитися ідентифікувати один унікальний елемент. Це реалізується за допомогою атрибута id. Особливість id в тому, що в документі не може бути більше одного елемента з даним конкретним id. Кожен id повинен бути унікальним. В інших випадках використовуйте атрибут class.
Розглянемо приклад використання id.
1 2 3 4 5 6 7 8