Що таке CSS?
Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) — спеціальна мова, що використовується для відображення сторінок, написаних мовами розмітки даних. Найбільш часто CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML.
CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних) та їх візуальної презентації.
CSS використовується авторами та відвідувачами веб-сторінок для того щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки. Одна з головних переваг — можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS).
Таке розділення може покращити сприйняття та доступність контенту, забезпечити більшу гнучкість та контроль за відображенням контенту в різних умовах, зробити контент більш структурованим та простим, прибрати повтори та ін. Один і той же HTML або XML документ може бути відображенний по-різному в залежності від використаного CSS.
Прочитали і не зрозуміли?
CSS - текст, у якому написано, як має виглядати текст і картинки на сторінці (зазвичай, виписаний у файлі STYLE.CSS,). Зміните опис в STYLE.CSS - на всіх сторінках, до яких він підключений зміниться відображення.
Приклад STYLE.CSS (можна прочитати у програмі "Блокнот"):
body { - тіло сторінки
font-size:75%; - розмір шрифту 75%
color:#222; -колір шрифту і цифрове значення
background:#fff; - фоновий колір і цифрове значення
font-family:"Helvetica Neue", Arial, Helvetica, sans-serif; - назви шрифтів
}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 { - опис для стилю "Заголовок1"
color: navy; - колір шрифту
font-size: 200%; - розмір
font-family: Arial, Verdana, sans-serif; - назви шрифтів
text-align: center; - "вирівнювання по центру"
}
h2 - розписуються аналогічно для "Заголовок 2-6"
h3
h4
h5
h6
p { - опис для абзацу тексту
padding-left: 20px; - відступ зліва 20px
}
#menu { - опис блоку з назвою "меню"
float:left; - обтікання зліва
width:197px; - ширина 197px
margin-top:19px; відступ згори 19px
background:#f3f3f3; - фоновий колір
}
