Каскадні таблиці стилів (Cascading Style Sheets) (CSS)
Каскадні таблиці стилів
Каскадні таблиці стилів - це правила описів стилю, тих чи інших HTML тегів (далі елементів HTML), які можуть бути застосовані як до окремого тегу елементу, так і одночасно до всіх ідентичних елементів на всіх сторінках сайту.
CSS по суті - це доповнення до HTML, яке значно розширює його можливості.
Стилі -це набір параметрів, що управляють видом і положенням елементів веб-сторінки.
Стилі є зручним, практичним і ефективним інструментом при верстці веб-сторінок та оформлення тексту, посилань, зображень та інших елементів.
Внутрішні або вбудовані стилі
<html>� <head>� <meta charset="utf-8">� <title>Вбудовані стилі</title>� </head>� <body>� <p style="font-size: 120%; font-family: monospace; color: #cd66cc">Приклад тексту</p>�</body>�</html>
Глобальні стилі.
<html>� <head>� <meta charset="utf-8">� <title>Глобальні стилі</title>� <style>� H1 { � font-size: 120%; � font-family: Verdana, Arial, Helvetica, sans-serif; � color: #333366; � }� </style>� </head>� <body>� <h1>Hello, world!</h1>� </body>�</html>
Пов'язані стилі.
При використанні пов'язаних стилів опис селекторів і їх значень розташовується в окремому файлі, як правило, з розширенням css, а для зв'язування документа з цим файлом застосовується тег <link>. Даний тег поміщається в контейнер <head>
default.htm
<html>� <head>� <meta charset="utf-8">� <title>Стилі</title>� <link rel="stylesheet" type="text/css" href="style/style.css" />� </head>� <body>� <h1>Заголовок</h1>� <p>Текст</p>� </body>�</html>
style.css
H1 {� color: #000080;� font-size: 200%;� font-family: Arial, Verdana, sans-serif;� text-align: center;�}�P {� padding-left: 20px;�}
Базовий синтаксис CSS
Скажімо, нам потрібен червоний колір фону web-сторінки:
У HTML це можна зробити так:
<body bgcolor="#FF0000">
За допомогою CSS того ж самого результату можна досягти так:
body {background-color: # FF0000;}
Cтильові правила записуються у своєму форматі, відмінному від HTML. Основним поняттям виступає селектор - це деяке ім'я стилю, для якого додаються параметри форматування.
В якості селектора виступають
Загальний спосіб запису має наступний вигляд.
Базовий синтаксис CSS
Спочатку пишеться ім'я селектора, наприклад, TABLE, це означає, що всі стильові параметри будуть застосовуватися до тегу <table>, потім йдуть фігурні дужки, в яких записується стильова властивість, а його значення вказується після двокрапки. Стильові властивості розділяються між собою крапкою з комою, в кінці цей символ можна опустити.
CSS не чутливий до регістру, переносу рядків, прогалин і символам табуляції, тому форма запису залежить від бажання розробника.
Найпростіші селектори
Найпростіші селектори - це селектори по іменам тегів.
З їх допомогою можна задати стилі для
Такі селектори містять ім'я тега без символів <і>.
наприклад:
p { / * Стилі для абзаців * / }
h1 { / * Стилі для заголовків * / }
select1.html, style1.css
Групи властивостей
У CSS існує величезна кількість властивостей.
Їх можна розбити на наступні групи:
• оформлення тексту;
• робота з розмірами і відступами;
• позиціювання елементів;
• створення сіток;
• декоративні: кольори, тло, тіні;
• інші.
Колір переднього плану: властивість 'color'
Властивість color описує колір переднього плану елемента.
Наприклад, уявіть, що ми хочемо зробити всі заголовки документа темно-червоними. Усі заголовки позначаються HTML-елементом <h1>. У наведеному нижче коді колір елемента <h1> встановлюється червоним.
h1 {color: # ff0000;}
Властивості шрифтів
Сімейство шрифту [font-family]
Сімейство шрифту [font-family]
Властивість font-family вказує пріоритетний список шрифтів, що використовуються для відображення даного елемента або web-сторінки. Якщо перший шрифт списку не встановлений на комп'ютері, з якого виконується доступ до сайту, шукається наступний шрифт списку, поки не буде знайдений відповідний.
Для категоризації шрифтів використовуються два типи імен: ім'я сімейства / family-name і загальне / родове сімейство / generic family. Ці два терміни пояснюються далі.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Сімейство шрифту [font-family]
Family-name
Приклад family-name (часто зване просто "шрифт") це, наприклад, "Arial", "Times New Roman" або "Tahoma".
Generic family
Його можна простіше описати як групу family-names, що мають характерні спільні риси.
Сімейство шрифту [font-family]
Стиль шрифту [font-style]
Властивість font-style, залежно від вибраного значення, визначає стиль шрифту.
Шрифт може мати наступні стилі:
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Варіант шрифту [font-variant]
Властивість font-variant використовується для вибору між варіантами
Шрифт small-caps використовує малі заголовні букви (upper case) замість літер нижнього регістру
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Вага шрифту [font-weight]
Властивість font-weight описує, наскільки товстим, або "важким", має відображатися шрифт.
Шрифт може бути
Деякі браузери підтримують навіть числові значення 100-900 (у сотнях) для опису ваги шрифту.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Розмір шрифту [font-size]
Розмір шрифту встановлюється властивістю font-size.
Використовуються різні одиниці вимірювання (наприклад, пікселі і відсотки) для опису розміру шрифту.
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Розміри
Для завдання розмірів різних елементів, в CSS використовуються
Абсолютні одиниці не залежать від пристрою виводу, а відносні одиниці визначають розмір елемента щодо значення іншого розміру.
Відносні одиниці
Розміри
Відносні одиниці зазвичай використовують для роботи з текстом, або коли треба обчислити процентне співвідношення між елементами.
Одиниця em це змінюване значення, яке залежить від розміру шрифту поточного елементу (розмір встановлюється через стильова властивість font-size). У кожному браузері закладений розмір тексту, застосовуваний у тому випадку, коли цей розмір явно не заданий. Тому споконвічно 1em дорівнює розміру шрифту, заданого в браузері за замовчуванням або розміром шрифту батьківського елементу. Процентний запис ідентична em, в тому сенсі, що значення 1em і 100% рівні.
em | Розмір шрифту поточного елемента |
ex | Висота символу x |
px | Піксел |
% | Відсоток |
Розміри
Одиниця ex визначається як висота символу «x» в нижньому регістрі. На ex поширюються ті ж правила, що і для em, а саме, він прив'язаний до розміру шрифту, заданого в браузері за замовчуванням, або до розміру шрифту батьківського елементу.
Піксел це елементарна точка, що відображається монітором або іншим подібним пристроєм, наприклад, смартфоном. Розмір пікселя залежить від вирішення пристрою і його технічних характеристик
Розміри
Абсолютні одиниці
Абсолютні одиниці застосовуються рідше, ніж відносні і зазвичай при роботі з текстом.
in | Дюйм (1 дюйм дорівнює 2.54 см) |
cm | Сантиметр |
mm | Міліметр |
pt | Пункт (1 пункт дорівнює 1/72 дюйма) |
pc | Піка (1 піку дорівнює 12 пунктам) |
Скорочений запис [font]
Використовуючи скорочений запис font, можна вказувати всі властивості шрифту в одному стильовому правилі.
Наприклад, ось чотири рядки опису властивостей шрифту для <p>:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Використовуючи скорочений запис, код можна спростити:
p {font: italic bold 30px arial, sans-serif;}
Порядок властивостей font такий:
font-style | font-variant | font-weight | font-size | font-family