Випуск №7. Продовжуємо CSS

Доброго часу доби шановні передплатники.

У цьому випуску продовжимо вивчення каскадних таблиць стилів (CSS).
Розширимо наші знання за властивостями таблиць стилів. Подивимося на можливості керування посиланнями з CSS. Почнемо говорити про блоках.

Отже, давайте розглянемо декілька властивостей, пов’язаних з форматуванням тексту.

font-family — назви застосовуваного шрифту.

Приклад:

body{
font-family:Arial, Helvetica, sans-serif;

Можна вказати кілька шрифтів через кому, це означає, що якщо на комп’ютері немає першого шрифту (Arial), то застосується другий (Helvetica), якщо немає другого, то застосується третій, і т. д.

font-style — задає стиль шрифту.

Значення:

Приклад:

p {font-style:italic;}

font-weight — задає товщину шрифту

Значення:

Приклад:

p { font-weight: 700;}

font-size — задає розмір шрифту.

Значення:

Приклад:

p { font-size: 12px;}

text-align — вирівнювання тексту

Значення:

text-decoration – задає оформлення тексту

Значення:

Це, мабуть, основні властивості роботи з текстом. Тепер, давайте, їх застосуємо до сторінки.

Я рекомендую використовувати 3-ий спосіб впровадження CSS в html документ).

Збережіть наш lesson2.html файл з уроку № 2 в папку з 7-м уроком під ім’ям lesson7.html(там має бути дві казки). Зараз ми їх почнемо форматувати засобами CSS.

Створюємо новий текстовий документ, зберігаємо в папку з 7-м уроком під назвою style.css.
Підключаємо його до lesson7.html().

У файлі style.css пишемо:

body{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

Для заголовків поставимо червоний колір, шрифт — курсивне.

h2{
color: #FF0000;
font-style:italic;
}

Виділимо який-небудь абзац жирним шрифтом, розміром шрифту 11px.

.paragraf1{
font-size:11px;
font-weight:600;
}

(і для параграфа, до якого ми хочемо це застосувати, вкажемо p class=”paragraf1″).

Виділимо який-небудь абзац курсивом, з темно-сірим кольором, з сірим кольором фону.

.paragraf2{
color:#333434;
background-color:#CCCCCC;
}

(і для параграфа, до якого ми хочемо це застосувати, вкажемо p class=”paragraf2″).

Принцип, сподіваюся, зрозуміла.

Тепер розглянемо керування посиланнями.

В CSS є 3 типи посилань:

В принципі це є окремі класи, застосовуються виключно для посилань.

Створимо посилання на початку документі. Для посилань, в таблиці стилів вкажемо наступні правила:

a:link{
color:blue;
}
a:visited {
color:red;
}
a:active {
color: black;
}
a:hover {
color:aqua;
}

Це у нас для всіх посилань в документі.

Настав час познайомитися ще з одним способом завдання класу.

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

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

зі стилем .paragraf1), то вона буде відображена зі стилем, визначеному для всіх посилань в документі.

Синтаксис наступний:

.paragraf1 a{
color:blue;
text-decoration:none;
}
.paragraf1 a:hover{
color:blue;
text-decoration:underline;
}

Давайте зробимо посилання всередині

з класом .paragraf2 білого кольору на синьому фоні, а при наведенні жовтого кольору на чорному тлі.

.paragraf2 a{
color:#ffffff;
background-color:#000099;
text-decoration:none;
}
.paragraf2 a:hover{
color:#FFFF00;
background-color:#000000;
text-decoration:none;
}

Думаю зрозуміло, як працюють посилання і як для них задавати властивості через CSS. Спробуйте самі задавати різні властивості посиланнях.

Тепер давайте познайомимося ще з парою тегів. Це тег

і тег ….

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

Приклад:

“Чого ти так голову повісила так тиняєшся тут однісінька?” –
“Ах, – відповідала кінь, – на світі так ведеться,
що скупість і вірність не можуть ужитися в одному будинку:
мій пан забув, скільки я йому послуг надавала протягом моєї довгої служби,
і ось з-за того, що я тепер не можу так добре, як орати, як колись,
він мені і корму давати не хоче і вигнав мене з стійла”

А для класу .red вкажемо:

.red{
color: red;
}

Чим же відрізняються ці два тега?

Тег — рядковий, всередині нього може бути тільки текст, а тег