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

22

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

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

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

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

Приклад:

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

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

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

Значення:

italic — курсив

normal — звичайний

Приклад:

p {font-style:italic;}

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

Значення:

normal — звичайний

bold — напівжирний

bolder — кілька жирніша, ніж в батьківському елементі

lighter — дещо тонший, ніж у батьківському елементі
число — числове значення(допестимы наступні значення: 100, 200, 300, 400, 500, 600, 700, 800,900.)

Приклад:

p { font-weight: 700;}

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

Значення:

larger/smaller — на 1 більше/менше ніж у оточуючих

число — значення в пунктах

число — значення в пікселях

Приклад:

p { font-size: 12px;}

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

Значення:

left — по лівому краю

right — по правому краю

center — по центру

justify — по ширині

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

Значення:

none — без оформлення

underline — текст підкреслений

overline — риса зверху

line-though — перекреслений текст

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

Я рекомендую використовувати 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 — не відвідана посилання

a:visited — відвідана посилання

a:active — активне посилання

a:hover — посилання, над якою розташований курсор миші

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

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

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;
}

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

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

— блочного типу, всередині нього можуть розташовуватися будь-які інші позначки(картинки, абзаци, списки, таблиці і т. д.).

На цьому завершимо цей випуск, якщо виникли питання, пишіть.

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

Обов’язково скачайте собі html і css документи як результат даного уроку за посиланням:

Архів 7 уроку

І пропрацюйте урок, поглядаючи на результат.

Успіхів у навчанні!

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