Css - стаття
У веб-розробці CSS практично повністю замінили собою застарілі теги, що використовувалися в перших чотирьох специфікаціях мови гіпертекстової розмітки. Сьогодні таблиці стилів дозволяють не тільки відокремити контент сайту від його оформлення, а й дають можливість застосовувати різні ефекти, які раніше на сайтах можна було реалізувати тільки за допомогою графіки.
У статті нижче ми розкриємо особливості сучасного використання CSS в веб-дизайні, розберемося з основними принципами створення каскадних таблиць стилів, а також розглянемо деякі корисні властивості цієї мови розмітки, які Ви можете використовувати на своїх сайтах.
Що таке CSS? Руслан Тертишний
Хто знає HTML, той напевно звертав увагу, що в ньому існує ряд тегів і властивостей, які описують не тільки структуру документа, а й його зовнішній вигляд. Наприклад, тег , який задає колір виділеного тексту, або властивість border, яке вказує на наявність рамки у елемента і її товщину.
З тих пір знання CSS і стає необхідним всім, хто працює з HTML-кодом. За своєю суттю каскадні таблиці стилів не є повноцінною мовою програмування, а, як і HTML, всього лише специфічною мовою розмітки. Однак, з кожною новою версією можливості CSS ростуть, тому в недалекому майбутньому, можливо, з'явиться підтримка змінних і нормальних умов.
Поки ж пропоную ознайомитися з каскадними таблицями стилів в тому вигляді, в якому вони є зараз.
основи CSS
Каскадні таблиці стилів містять інструкції по візуального оформлення тих чи інших елементів веб-сторінки, тобто, описують їх стиль. Каскадність ж полягає в тому, що прописані стилі успадковуються всіма компонентами, які є дочірніми по відношенню до тих, для яких ми задали певний вид.
На практиці це означає наступне. Якщо ми, наприклад, задали для тега
колір тексту, скажімо, зелений, то все текстові елементи на сторінці (по суті весь видимий контент сторінки є вкладеним в тег body) стануть зеленими :) Скасувати дію стилю не можна (в цьому вся суть каськадності), але можна його перепризначити, задавши для потрібних елементів нове оформлення:На скріншоті вище ми бачимо, що стилі прописані в "голові" (секція HEAD) HTML-документа і обмежені тегами . Це не єдиний і не найкращий спосіб оголошувати стилі, але для наочності ми поки зупинимося на ньому (про те, як підключити CSS іншими способами мова піде трохи нижче).
Зараз нас цікавить тільки принцип опису стилів. Цей принцип має назву "синтаксис CSS". В основі своїй він досить простий для розуміння, якщо Ви вже знаєте HTML або хоча б англійську. Описати синтаксис CSS можна декількома правилами:
Всі перераховані вище правила можна виразити в одній картинці:
Ось, власне, і вся основа синтаксису CSS. Винятків з вищеописаних правил немає, але є деякі доповнення, про які Ви дізнаєтеся далі по ходу читання статті.
Поки ж нам залишається тільки розібратися, які параметри можна регулювати за допомогою CSS. Якщо не торкатися специфічні сфери застосування сучасного CSS 3 такі як, наприклад, анімація, то список буде приблизно таким:
- зовнішній вигляд, розмір і колір текстових елементів;
- фонові кольори і зображення;
- позицію окремих елементів по відношенню до інших;
- відступи всередині блоків і між ними;
- наявність і зовнішній вигляд обведення блокових і малих елементів;
- зовнішній вигляд специфічних блоків, типу, списків, посилань і таблиць;
- видимість або невидимість певних фрагментів на сторінці.
підключення CSS
Тепер, коли ми вже маємо уявлення про те, що таке стильові правила і навіщо вони використовуються, розберемося як можна скористатися їхнім досвідом в HTML-документ. Всього існує 4 способи підключення CSS:
- Підключення зовнішнього файлу з розширенням .css за допомогою тега :
Я стильний абзац :)
Кожен із способів має свій пріоритет виконання. Найнижчий пріоритет у першого способу підключення зовнішнього CSS-файлу через тег . Другий і третій способи рівнозначні. По суті, другий спосіб імпортує стилі з зовнішнього файлу і прописує їх у внутрішні, але не скрізь коректно працює. Найвищий же пріоритет у строкових стилів, заданих за допомогою атрибута style конкретного елементу на сторінці.
На практиці це означає, що спочатку будуть застосовані стилі, оголошені прямо в тексті сторінки, потім (якщо строкових стилів не знайшлося) ті, які прописані в "голові" документа, а, в останню чергу, оформлення, заданий в зовнішньому CSS-файлі.
селектори CSS
Щоб отримати можливість тим чи іншим способом оформити певний елемент на веб-сторінці, нам потрібно якось його знайти. Власне, саме для вказівки потрібних фрагментів сторінок ми і використовуємо селектори.
У прикладах вище ми розглядали тільки селектори конкретних тегів. Однак, на практиці, досить часто доводиться з усієї маси контенту з однаковими тегами виділяти тільки певну їх частину. Тому, крім селектор тегів існує ще ряд різних типів селекторів і їх комбінацій. Пропоную розглянути їх у вигляді таблиці:
Застосовується для вставки символів, слів чи фрагментів тексту перед (before) або після зазначеного елемента. Для вставки використовується обов'язкове властивість content.
Існують і деякі інші типи комбінації селекторів і псевдокласів, але вони використовуються не так часто, тому обійдемося поки без них. А зараз розглянемо основи роботи з блоками, без яких зверстати сайт на CSS Ви ніяк не зможете.
Блокова модель документа і позиціонування блоків
Таблична верстка могла бути фіксованою (кожному осередку задавалася сувора ширина в пікселях) або "гумової" (замість точних розмірів використовували процентні значення). Такий принцип верстки був досить простим і очевидним, однак, вимагав використання таблиць не за призначенням, а значить, порушував семантику веб-сторінки.
Суть блокової верстки
Поширення ж CSS 2.0, як говорилося вище, дозволило практично повністю відокремити контент від його стильового оформлення тому на світ з'явився новий принцип, актуальний донині - "блокова верстка".
В основу нового підходу була покладена так звана блокова модель. Суть її зводиться до того, що контент сторінки розташовується в незалежних або вкладених один в одного блоках, розташування які можна досить гнучко змінювати за допомогою CSS. Основа ж блокової верстки - блок (зазвичай
Кожен блок, крім явно заданих властивостей width (ширина) і height (висота), складається з декількох компонентів, які впливають на його розміри. По-перше, це відступи від тексту до кордону всередині блоку, що виражаються властивістю "padding", а також відступи між блоками зовні, що задаються властивістю "margin".
По-друге, як і у таблиць, у блоків може бути рамка, що виражається властивістю "border". Однак, на відміну від осередків таблиць, рамки блоку виходять за його кордон, збільшуючи його реальні ширину і висоту. Частково це вирішується додаванням до всього документа властивості "box-sizing: border-box", проте, це властивість було впроваджено тільки в CSS 3.0 і не підтримується старими браузерами.
До речі, блоком може бути не тільки елемент спочатку блочного типу. Будь-рядковий елемент, на кшталт абзацу (
), Заголовка (
, . ) Або текстового фрагмента () Засобами CSS можна уявити як блок. Для цього використовується властивість "display" зі значенням "block" або "inline-block". За допомогою ж значення "inline" можна навпаки, блок (наприклад, ) Зробити рядковим елементом.
позиціонування блоків
За замовчуванням блоки розташовуються один під одним в порядку їх прописування в тілі HTML-документа. Це називається стандартним потоком. Однак, при верстці практично будь-якого сайту потік доводиться раз у раз порушувати, оскільки деякі блоки потрібно розмістити в ряд.
Зробити це можна різними способами, причому у кожного є як свої плюси, так і недоліки, тому універсального рецепта, на жаль, поки немає. Вибір того чи іншого методу залежить від конкретних завдань, які стоять перед нами як верстальниками. Найбільш часто використовуваними методами є:
- відносне позиціонування ( "position: relative") в поєднанні з властивостями "float" і "clear";
- абсолютне позиціонування ( "position: absolute") в поєднанні з властивостями "left" і "right" для розміщення блоків з потрібними відступами;
- змішування варіантів позиціонування з вкладенням блоків;
- використання нових властивостей CSS 3.0 "flex" і "grid";
- динамічна зміна позиціонування за допомогою медіа-запитів.
Сучасні властивості, які з'явилися в CSS 3.0 значно спрощують процес верстки, однак, поки що далеко не всі браузери підтримують нові стандарти. Тому, особливу увагу приділимо старим прикладам з відносним і абсолютним позиціонуванням:
На скріншоті вище ми можемо бачити шість блоків різного кольору. Червоний, синій і рожевий з сірої обведенням мають відносне позиціонування, а перші два ще і обтікання зліва. Зелений і жовтий квадрати позиціонуються абсолютно зі строго заданими відступами від верхнього і лівого краю. Рожевий же блок з чорної обведенням доданий для порівняння в самому кінці і має відносне позиціонування.
Червоний і синій блоки розміщені поруч один з одним і, по суті, порушують стандартний потік даних. Це виражається в необхідності скидання відступу зліва для першого рожевого блоку. Далі по тексту йдуть зелений і жовтий блоки, але за рахунок абсолютного позиціонування вони зовсім випадають з потоку і після рожевого блоку йде відразу другий рожевий з чорної обведенням.
Зелений же і жовтий квадрати накладаються вже на другий рожевий блок в строго заданому нами місці. Відповідно, вивчивши запропоновану конструкцію, ми можемо зробити висновок, що абсолютно позиційований елементи практично не взаємодіють з іншими блоками і підкоряються тільки власним стильовим правилами, випадаючи із загального потоку.
Це властивість можна використовувати, наприклад, для створення жорсткого каркаса сайту або реалізації плаваючих і перекриваються блоків. Відносна ж позиціонування зручно використовувати для створення адаптивних сіток, оскільки воно не порушує стандартний потік даних.
Адаптивна і чуйна верстка
Поява і розвиток CSS 3.0, а також широке поширення пристроїв для доступу до Інтернету з різними дозволами екрану призвело до появи такої новомодної тенденції як адаптивна і чуйна верстка. Коротенько суть її в тому, щоб сторінки сайту виглядали зручними для читання за будь-яких розмірах дисплея.
З цією метою графічні елементи сайту можуть змінювати свій зовнішній вигляд для зручного натискання пальцями, переміщатися на нову позицію або зникати зовсім. Робиться це для того, щоб основний акцент був на блоці з контентом, який є основним елементом, що несе інформаційне навантаження.
Для реалізації такого типу верстки користуються спеціальним нововведенням CSS під назвою медіа-запити (англ. "Media queries"). Це спеціальні директиви типу "@media", які можуть перевіряти ряд параметрів пристрою, що запитує сторінку і в залежності від отриманих даних міняти її оформлення.
Для створення більшості сайтів з адаптивною версткою зазвичай досить використовувати перевірку на відповідність ширини екрану пристрою потрібної максимальної або мінімальної ширини. Приблизно це виглядає так: "@media screen and (max-width. 480px)". Тут директиві "@media" ми даємо завдання дізнатися розмір екрану і виконати форматування, якщо ширина не перевищує 480 пікселів.
Ми практично не чіпали код сторінки, а тільки дописали медіа-запит в кінці стилів, але отримали потрібний результат! На практиці, на жаль, для нормальної адаптації зверстаний раніше сторінок іноді доводиться частково переписувати і стилі і навіть сам код сторінки, однак, іноді буде досить, як і в нашому прикладі, всього лише незначних правок.
Ось ми з Вами і закінчили оглядове знайомство з каскадними таблицями стилів. Ми ознайомилися з синтаксисом CSS, сферами його застосування, принципами блокової і адаптивної верстки. За кадром залишилися, мабуть, тільки самі властивості CSS, яких досить багато і яким присвячені спеціальні онлайн-довідники.
На додаток до статті Ви можете завантажити архів, що містить всі тестові сторінки з прикладами, які ми розглянули у вигляді скріншотів. На базі даних прикладів Ви можете виробляти власні експерименти по верстці або навіть використовувати їх в якості найпростішого шаблона для власного сайту :)
А взагалі CSS - це досить цікава штука. Це як ребус або кросворд, підібравши правильні слова до якого, Ви зможете побачити красиву картинку, чи то пак, сайт. Вивчайте каскадні таблиці стилів - не дайте своєму мозку зачахнути. )
позиціонування блоків
За замовчуванням блоки розташовуються один під одним в порядку їх прописування в тілі HTML-документа. Це називається стандартним потоком. Однак, при верстці практично будь-якого сайту потік доводиться раз у раз порушувати, оскільки деякі блоки потрібно розмістити в ряд.
Зробити це можна різними способами, причому у кожного є як свої плюси, так і недоліки, тому універсального рецепта, на жаль, поки немає. Вибір того чи іншого методу залежить від конкретних завдань, які стоять перед нами як верстальниками. Найбільш часто використовуваними методами є:
- відносне позиціонування ( "position: relative") в поєднанні з властивостями "float" і "clear";
- абсолютне позиціонування ( "position: absolute") в поєднанні з властивостями "left" і "right" для розміщення блоків з потрібними відступами;
- змішування варіантів позиціонування з вкладенням блоків;
- використання нових властивостей CSS 3.0 "flex" і "grid";
- динамічна зміна позиціонування за допомогою медіа-запитів.
Сучасні властивості, які з'явилися в CSS 3.0 значно спрощують процес верстки, однак, поки що далеко не всі браузери підтримують нові стандарти. Тому, особливу увагу приділимо старим прикладам з відносним і абсолютним позиціонуванням:
На скріншоті вище ми можемо бачити шість блоків різного кольору. Червоний, синій і рожевий з сірої обведенням мають відносне позиціонування, а перші два ще і обтікання зліва. Зелений і жовтий квадрати позиціонуються абсолютно зі строго заданими відступами від верхнього і лівого краю. Рожевий же блок з чорної обведенням доданий для порівняння в самому кінці і має відносне позиціонування.
Червоний і синій блоки розміщені поруч один з одним і, по суті, порушують стандартний потік даних. Це виражається в необхідності скидання відступу зліва для першого рожевого блоку. Далі по тексту йдуть зелений і жовтий блоки, але за рахунок абсолютного позиціонування вони зовсім випадають з потоку і після рожевого блоку йде відразу другий рожевий з чорної обведенням.
Зелений же і жовтий квадрати накладаються вже на другий рожевий блок в строго заданому нами місці. Відповідно, вивчивши запропоновану конструкцію, ми можемо зробити висновок, що абсолютно позиційований елементи практично не взаємодіють з іншими блоками і підкоряються тільки власним стильовим правилами, випадаючи із загального потоку.
Це властивість можна використовувати, наприклад, для створення жорсткого каркаса сайту або реалізації плаваючих і перекриваються блоків. Відносна ж позиціонування зручно використовувати для створення адаптивних сіток, оскільки воно не порушує стандартний потік даних.
Адаптивна і чуйна верстка
Поява і розвиток CSS 3.0, а також широке поширення пристроїв для доступу до Інтернету з різними дозволами екрану призвело до появи такої новомодної тенденції як адаптивна і чуйна верстка. Коротенько суть її в тому, щоб сторінки сайту виглядали зручними для читання за будь-яких розмірах дисплея.
З цією метою графічні елементи сайту можуть змінювати свій зовнішній вигляд для зручного натискання пальцями, переміщатися на нову позицію або зникати зовсім. Робиться це для того, щоб основний акцент був на блоці з контентом, який є основним елементом, що несе інформаційне навантаження.
Для реалізації такого типу верстки користуються спеціальним нововведенням CSS під назвою медіа-запити (англ. "Media queries"). Це спеціальні директиви типу "@media", які можуть перевіряти ряд параметрів пристрою, що запитує сторінку і в залежності від отриманих даних міняти її оформлення.
Для створення більшості сайтів з адаптивною версткою зазвичай досить використовувати перевірку на відповідність ширини екрану пристрою потрібної максимальної або мінімальної ширини. Приблизно це виглядає так: "@media screen and (max-width. 480px)". Тут директиві "@media" ми даємо завдання дізнатися розмір екрану і виконати форматування, якщо ширина не перевищує 480 пікселів.
Ми практично не чіпали код сторінки, а тільки дописали медіа-запит в кінці стилів, але отримали потрібний результат! На практиці, на жаль, для нормальної адаптації зверстаний раніше сторінок іноді доводиться частково переписувати і стилі і навіть сам код сторінки, однак, іноді буде досить, як і в нашому прикладі, всього лише незначних правок.
Ось ми з Вами і закінчили оглядове знайомство з каскадними таблицями стилів. Ми ознайомилися з синтаксисом CSS, сферами його застосування, принципами блокової і адаптивної верстки. За кадром залишилися, мабуть, тільки самі властивості CSS, яких досить багато і яким присвячені спеціальні онлайн-довідники.
На додаток до статті Ви можете завантажити архів, що містить всі тестові сторінки з прикладами, які ми розглянули у вигляді скріншотів. На базі даних прикладів Ви можете виробляти власні експерименти по верстці або навіть використовувати їх в якості найпростішого шаблона для власного сайту :)
А взагалі CSS - це досить цікава штука. Це як ребус або кросворд, підібравши правильні слова до якого, Ви зможете побачити красиву картинку, чи то пак, сайт. Вивчайте каскадні таблиці стилів - не дайте своєму мозку зачахнути. )