Що таке css і css3
Що таке стиль? Грубо кажучи, стиль це те, як виглядає елемент на сайті. Наприклад, будь-який текст можна написати розміром 10 пікселів, а можна 14 пікселів. Можна написати чорним кольором, можна синім. Можна підкреслити / нахилити / закреслити і т.п. Все форматування текстів пов'язане з CSS.
Але це лише мала частина з можливостей. За всю візуалізацію всіх тегів html відповідає CSS. Навіть за динамічні зміни: випадають меню, підсвічування посилань при наведенні.
Найчастіше список всіх стилів називають "таблиця стилів CSS".
Цілі і завдання CSS
- Зробити сайт більш красивим (в плані дизайну), зробити доброзичливий інтерфейс, та й просто, щоб сайти хоч якось відрізнялися один від одного
- Відокремити код html від коду опису стилів і дизайну
синтаксис CSS
Селектор, як правило, це назва стилю. У фігурних дужках описуються конкретні правила. Опис відбувається завжди за правилом: назва атрибута, двокрапка, значення. Кожне правило має закінчуватися крапкою з комою.
Можна задавати стилі по різному. Давайте розберемо на прикладі.
Стиль global_style можна використовувати для всіх тегів як класу. наприклад,
Стиль style1 можна використовувати тільки для тега . оскільки у визначенні було зазначено font.style1.
Третій варіант завдання через решітку (#). Як і в першому випадку він визначений для всіх елементів, але ставити його потрібно не через class, а через атрибут id:
В останньому варіанті ми просто вказали назву тега
і прописали йому стиль. Це означає, що тепер все теги h1 наслідуватимуть значення цього стилю.
Останнім часом часто можна зустріти поняття CSS3. По суті це все той же CSS, з набором нових аргументів, які дають додаткові можливості в плані різних ефектів. Наприклад, світіння тексту. Багато браузери не підтримують такі властивості, тому рекомендується використовувати такі ефекти в мінімальних кількостях.
У чому різниця між CSS і HTML?
HTML це каркас вашої сторінки, це посилання, картинки, контент. А в CSS визначається те, як все це буде відображатися для користувача. Так що HTML і CSS це різні речі, але вони пов'язані між собою. Причому правилом хорошого тону є поділ кодів між собою, щоб не змішувати їх на одній сторінці.
Як і де ставити стилі CSS
Стиль задається в мета тегах head за допомогою тега style:
Але це погано, тому що загромождают код описами стилів. До того ж, якщо цей код однаковий для всіх сторінок сайту, то щоб поміняти його всюди, доведеться повозитися. Тому використовують спеціальні файли з розширеннями .css, куди заносяться всі стилі. Робиться це через тег link в розділі head:
Перевагою такого підходу є так само і те, що цей файл кешується браузерами, що знижує "вага" сайту, тим самим він швидше вантажиться. А це зараз дуже важливо для SEO. Див. Як збільшити швидкість завантаження сайту
Що дає CSS (плюси)
- Легко міняти дизайн. Досить поміняти стиль лише в одному місці і він зміниться на кожній сторінці сайту
- Це єдиний спосіб змінювати дизайн
- Простота синтаксису мови
Проблеми CSS з браузерами
Старі браузери підтримують не всі можливості CSS. З цим виникають проблеми відображення. Наприклад, ефект, який був задуманий для кращого сприйняття контенту, може привести до зворотного ефекту. Якщо якесь властивість не підтримується, тобто ризики накладення блоків, текстів один на одного і т.п.
Частково цю проблему вирішують "префікси". По суті це просто слово стоїть перед аргументом в таблиці стилів. Для кожного браузера існує свій префікс.
- -moz- для браузера Firefox
- -webkit- для браузерів Chrome і Safari (в обох браузерах використовується один і той же движок візуалізації)
- -ms- для браузера Internet Explorer
- -o- для браузера Opera