Div та Span

Русский перевод: Div и Span

<div> і <span> застосовуються разом з каскадними таблицями стилів. Окремо вони не викликають великих змін. Факт у тому, що тег <span> взагалі не впливає візуально на контент. Використання тега <div> призведе до «блокування» його вмісту, якщо б ви поставили тег <br> до і після секції на сторінці.

Як і більшість інших тегів, <div> та <span> може мати клас, ідентифікатор та стильові атрибути. Завдяки цим атрибутам стилі можна застосовувати до елементів. Теги застосовуються таким же способом, як і інші HTML-теги. Допускається вкладеність одних тегів в інші в кілька рівнів.

Зразок коду

01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03
<head>
04
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05
<title>Div and Span</title>
06
</head>
07
<body>
08
<div style="position:absolute; left:0px; top:0px;
09 font-family:Verdana; font-size:10pt;
10 border-style:groove; border-width:30px; border-color:blue; padding:4px">
11 This text appears in the
12  <span style="font-style:italic; color:red">upper-left hand corner</span>
13  of the page.<br />
14  It also has a big blue groovy border around it.
15 </div>
16 </body>
17 </html>

Вправа: Div та Span

Тривалість завдання: від 10 до 20 хв.

Ця вправа навчить вас як додавати класи (class) і атрибути ідентифікаторів (id) тегам div і span HTML-сторінки, які вже існують. HTML-сторінка вже має вбудовану таблицю стилів, яка повинна залишатися без змін. Ваше завдання полягає в тому, щоб зробити так, що сторінка виглядає як слід.

Ніяких детальних інструкцій. Просто аналізуйте правила у вбудованій таблиці стилів, використовуйте класи та ідентифікатори id і відповідним чином застосовуйте їх.

Одиниці вимірювань

У CSS ви можете визначати розмір шрифту, меж (рамок), полів і відступів, використовуючи різні одиниці вимірювань. Ознайомтеся з таблицею нижче, де вказані різні одиниці:

Одиниця вимірювання	Опис	Приклад
px	Пікселі	`margin-top: 10px;`
pt	Пункти	`font-size: 12pt;`
in	Дюйми	`padding-top: .5in;`
cm	Сантиметри	`top: 5cm;`
mm	Миліметри	`left: 45mm;`
pc	Піка	`bottom: 12pc;`
em	Em	`font-size: 1.5em;`
ex	Ex	`font-size: 1.5ex;`
%	Відсотки	`width: 80%;`

Пояснення

Пікселі (px): найбільш часто використовувана одиниця. Остаточний розмір залежить від екрана і його роздільної здатності.

Типографський пункт (pt): використовується у друці. 1 дюйм = 72 пункти.

Дюйми (in), сантиметри (cm), міліметри (mm): існують, але у веб-дизайні краще уникати.

Піки (pc): також одиниця для друку. 1 дюйм = 6 пік.

Em: відносна одиниця, залежить від розміру букви “M”. Широко використовується у вебі.

Ex: залежить від висоти малої “x” в шрифті. Використовується рідше.

← Угрупування і вкладеність | Селектори, властивості і значення в CSS →