Перш ніж приступити до вивчення CSS, давайте згадаємо, для чого насправді потрібна мова гіпертекстової розмітки HTML і визначимося, як ми будемо його використовувати в подальшому.
Як використовувався HTML до появи CSS
Головне призначення HTML (HyperText Markup Language - англ.) - структурування інформації на веб-сторінках. Спочатку ця мова була придуманий саме для цих цілей. Але в міру того як популярність Інтернету стала зростати, росло і бажання користувачів якось урізноманітнити і прикрасити свої сайти.
Веб-дизайнери почали шукати способи красивою подачі інформації. Деякі теги HTML використовувалися не за своїм прямим призначенням, наприклад,
. Метод верстки веб-документів з використанням даного тега став настільки популярним, що навіть отримав окрему назву - таблична верстка. Раніше тільки за допомогою такого способу можна було точно розташувати елементи на сторінці.
При табличній верстці дизайн веб-сторінки створювався безпосередньо всередині HTML-документа. Там же використовувалися і інші теги для стилізації і форматування. До яких проблем це призводило? По-перше, HTML-код ставав неймовірно великим по довжині, що негативно впливало як на вагу документа, так і на його індексування пошуковими роботами. По-друге, щоб змінити, наприклад, колір заголовків h1 на кожній сторінці сайту, доводилося опрацьовувати вручну кожну з них. Все це відбирало багато часу і сил.
Для чого потрібен HTML зараз
Сьогодні, завдяки існуванню CSS, є можливість відокремити дизайн сторінки від її вмісту, а також прискорити процес роботи і в рази скоротити розмір HTML-документа. Тим, хто вже дуже давно займається створенням сайтів, належить позбутися від старих звичок і навчитися сприймати HTML тільки як мову розмітки, призначений для структурування і впорядкування даних. Новачкам буде легше освоювати нові принципи створення веб-сторінок в зв'язку з відсутністю поглядів на HTML як на інструмент додання сторінок привабливого вигляду. За це тепер відповідає CSS.
Ось деякі HTML-теги, які можна (і потрібно) сміливо замінювати стилями CSS:
«Прикрашають», вирівнюють атрибути до тегам (color. Bgcolor. Align і т. Д.);
тег
(При використанні для макетування веб-сторінки);
тег .
HTML-теги для структурування
Для структурування сторінок використовуйте наступні теги:
H1-H6 (heading) Теги h1-h6 призначені для позначення заголовків. За допомогою цих тегів дуже зручно розділяти текст. Для кращого розуміння уявіть собі книгу, в якій є розділи і подглави. Назва глави книги - це h1. подглави - h2. частини подглав - h3 і т. д. Розставляти теги заголовків краще послідовно. P (paragraph) Тег
служить для позначення абзаців тексту. OL, UL (ordered list, unordered list) Теги
.
- зручний інструмент для позначення переліків (навігаційні посилання, пункти в тексті, послідовний список і т. Д.). DL (definition list) Тег
в зв'язці з тегами
.
використовується при створенні списку визначень, де
- назва визначення (definition term),
- опис визначення (definition description). DIV (division) DIV - блоковий елемент, який може використовуватися для виділення фрагмента документа, а також для логічного об'єднання кількох елементів. За допомогою CSS можна надати блоку
необхідний вид і позиціонування, але сам по собі
ніяк не змінює зовнішній вигляд документа. SPAN (span) Тег за своєю роллю схожий на
. але
- це блоковий елемент, а - рядковий. Наприклад, якщо вам потрібно поміняти стиль одного слова всередині тега
. ви «завертаєте» це слово в тег . додаєте атрибут id або class з ім'ям селектора, після чого в CSS призначаєте йому необхідний стиль. Семантичні теги HTML5 Щоб більш грамотно структурувати HTML-документ, використовуйте нові теги, які допомагають краще описати вміст. Наприклад, як відрізнити шапку сайту, навігаційне меню і футер від іншого вмісту, якщо всі вони позначені тегами