- •Гіперпосилання на конкретний текст на іншій сторінці
- •Поштове гіперпосилання
- •Структура та правила
- •Id селектори (id Selectors)
- •Властивості контейнерів, що керуються описувачами стилів
- •I {text-decoration: line-through;} – закреслення
- •I {text-transform: lowercase;} - Всі букви перетворяться в рядкові.
- •Постановка задачі
- •Код програми:
- •Скриншот
- •Главная
- •Дополнительная
Id селектори (id Selectors)
#id {властивості}
ID – індивідуально іменований стиль. C його допомогою можна створювати стилістичні виключення серед елементів одного класу. Індіфікатори використовуються в основному для додання одному або декільком елементам одного класу індивідуальних властивостей. Скажімо, Ви створили клас blue - синій курсив. Але Вам знадобився жирний підкреслений текст синім курсивом. Звичайно, можна створити новий клас, але навіщо? Простіше описати ID. Наприклад "boldunderline". І всі елементи класу blue із значенням ID "boldunderline" стануть жирним підкресленим синім курсивом. Станеться як би синтез властивостей класу blue і ідентифікатора boldunderline.
Приклад
<head>
<title>Пример CSS </title>
<head>
<style>
.blue {color:blue; font-style:italic}
#boldunderline {text-decoration:underline; font-weight:bold}
</style>
<body>
<p class="blue"> Здравствуйте, это моя домашняя страница. </p>
<p class="blue" id="boldunderline"> Пока еще в стадии разработки ... </p>
<p id="boldunderline">... Но скоро откроется </p>
</body>
</html>
Як видно з прикладу, атрибут ID може бути використаний без вказівки класу (останній параграф прикладу. Тоді параграф володітиме лише властивостями ID "boldunderline" (у прикладі - жирний, підкреслений текст).
Властивості контейнерів, що керуються описувачами стилів
Властивості шрифту
font-family
Використовується для вказівки шрифту або шрифтового сімейства, яким відображуватиметься елемент.
P {font-family: Times New Roman, sans-serif;}
font-style
Задає спосіб зображення шрифту: normal - Нормальний (за умовчанням), italic - Курсив, oblique - Похилий.
P {font-style: italic;}
font-variant
Задає варіанти зображення шрифту: normal - Нормальний (за умовчанням, small-caps - Всі букви заголовні).
P {font-variant: small-caps;}
font-weight
Визначає міру жирності шрифту за допомогою параметрів: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
B {font-weight: bolder;}
font-size
Встановлює розмір шрифту. Параметр може вказуватися як у відносній (відсотки), так і абсолютній величині (пункти, пікселі, сантиметри).
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}
Колір елементу і колір фону
color
Визначає колір елементу.
I {color: green;}
background-color
Встановлює колір фону для елементу – саме для елементу, а не для сторіночки. Різні браузери відображують цю властивість по-різному: Microsoft IE відводить під фон елементу всю доступну ширину сторінки, а Netscape Navigator – лише ширину, займану цим елементом.
H4 {background-color: yellow;}
background-image
Фоновий малюнок.
Body {background-image: url(img/texture.jpg)}
Властивості тексту
text-decoration
Встановлює ефекти оформлення шрифту, такі, як підкреслення або закреслений текст.
H4 {text-decoration: underline;} – підкреслення
A {text-decoration: none;} - стандартний текст
I {text-decoration: line-through;} – закреслення
B {text-decoration: overline;} – надкреслення
text-transform
Задає перетворення регістра тексту при відображенні.
H4 {text-transform: capitalize;} - Перша буква кожного слова перетвориться в заголовну.
A {text-transform: uppercase;} - Всі букви перетворяться в заголовні.