<div> і <span> застосовуються разом з каскадними таблицями стилів. Окремо вони не викликають великих змін. Факт у тому, що тег <span> взагалі не впливає візуально на контент. Використання тега <div> призведе до «блокування» його вмісту, якщо б ви поставили тег <br> до і після секції на сторінці.
Як і більшість інших тегів, <div> та <span> може мати клас, ідентифікатор та стильові атрибути. Завдяки цим атрибутам стилі можна застосовувати до елементів. Теги застосовуються таким же способом, як і інші HTML-теги. Допускається вкладеність одних тегів в інші в кілька рівнів.
Зразок коду:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Div and Span</title> </head> <body> <div style="position:absolute; left:0px; top:0px; font-family:Verdana; font-size:10pt; border-style:groove; border-width:30px; border-color:blue; padding:4px"> This text appears in the <span style="font-style:italic; color:red">upper-left hand corner</span> of the page.<br /> It also has a big blue groovy border around it. </div> </body> </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)
Одиниця виміру, яка найбільш часто використовується у веб-дизайні, – це пікселі. На відміну, наприклад, від дюймів і пунктів, піксель не є абсолютною величиною. Остаточний розмір пікселя визначається розміром і роздільною здатністю екрана користувача. Уявіть собі картину шириною 900 пікселів. Якщо встановлений дозвіл монітора 800 на 600 пікселів, зображення не поміститься на екрані. Але якщо на тому ж моніторі встановлений дозвіл 1024 на 768 пікселів, картинка поміститься і залишиться небагато простору.
Типографський пункт (pt)
Пункти повинні використовуватися для друку. Один дюйм дорівнює 72 пунктам.
Дюйми (in), сантиметри (cm), міліметри (mm)
Незважаючи на те, що це одні з найпоширеніших одиниць вимірювань, у веб-дизайні краще їх не використовувати.
Піки (pc)
Піка (Picas) — одиниця вимірювань, яка використовується для друку. Один дюйм дорівнює 6 пікам.
Em (em)
Em, або Мутт, — це відносна одиниця вимірювань, що визначає розмір букви “М” в шрифті. Оскільки em – величина відносна, а не абсолютне значення, вона часто використовується у веб-дизайні.
Ex (em)
Ex, або “x-висота”, визначає висоту малої “x” шрифту. Ex застосовується для встановлення розміру контенту в залежності від розміру навколишнього шрифту.