Здрастуйте, шановні читачі блогу . Сьогодні я хочу почати розповідати у всіх подробицях про CSS (матеріали будуть накопичуватися у відповідному довіднику).
Саме час переходити до нього після вивчення Html. У сучасній блокової верстки мова стильової розмітки відповідає за зовнішнє оформлення сторінок сайту і без його розуміння буде дуже складно щось поправити, пересунути або вирівняти.
Звичайно ж, Css порівняно з Html виглядає набагато складнішим, але це якщо торкатися питання кросбраузерною верстки, а от стосовно того, щоб самому поправити яку-небудь дрібницю в дизайні власного сайту, то тут особливого розуму не треба. Загалом, ми спробуємо в деталях розібрати його основи, а вже нюанси їх філігранного використання залишаться на факультативне вивчення (за бажанням). Але базові поняття потрібно знати всім вебмайстрам.
Що таке мова CSS і для чого це потрібно?
Абревіатура CSS розшифровується, як Cascading Style Sheets або ж, в російському перекладі, як каскадні таблиці стилів. Що ж це таке і для чого ця мова була в свій час придуманий?
Отже, спираючись на вивчений нами трохи раніше підручник Html ми можемо сказати, що розмітка веб документа здійснюється за допомогою тегів цієї мови. Тобто з допомогою ХТМЛ ми створюємо структуру наших документів (веб-сторінки). Наприклад, в чистому Html ми можемо задавати заголовки через теги H1-H6, абзаци P і інші елементи структури документів, і навіть надати їм потрібний нам вигляд у браузері.
Але час диктував необхідність використання в ХТМЛ все нових і нових атрибутів візуального оформлення, які сильно захаращували вихідний код. У зв’язку з цим був запропонований інший, більш перспективний варіант розвитку — створення окремої мови стильової розмітки CSS. І цей варіант мав ряд переваг перед простим збільшенням кількості атрибутів оформлення.
Чому? А ви згадайте, як можна в чистому Html задати колір фрагменту тексту? Правильно, за допомогою тега Font і атрибут Color. А якщо ви хочете пофарбувати в потрібний колір відразу кілька абзаців у вашому тексті?
Тоді доведеться всередині кожного з них (тег абзацу P є блочним, а значить його можна буде поміщати усередині рядкового елемента Font) вставляти теги Font з потрібним значенням кольору в атрибуті Color.
Все це моторошно буде захаращувати вихідний код, що дуже і дуже небажано, бо постраждає швидкість завантаження сайту, а на комунікаційне обладнання інтернету буде створювати зайве навантаження. На це розробники специфікацій Html 4.01 з валідатора W3C «пойтіть» не могли.
Тому вони придумали наступний вихід із ситуації. Розробники з W3C вирішили оформити всі візуальні подання web документа у вигляді спеціального мови стильової розмітки, який назвали каскадними таблицями стилів або ж просто CSS (читається як сі-ес-ес). У чому суть технології?
А суть в наступному — підключаючи мова стильової розмітки до будь-яких документів (сторінок), ми зможемо ставити візуальне подання всіх тих елементів (створюваних Html тегів), які будуть зустрічатися в цьому документі.
В інтернеті є ресурс, який допомагає дуже наочно побачити, як може змінювати свій вигляд веб сторінка тільки з-за того, що до неї підключають інший файл таблиці каскадних стилів. По моєму, це буде найкращою відповіддю на питання: що таке CSS і навіщо це потрібно.
Базовий вид документа (веб-сторінки) ви зможете побачити, перейшовши за цим посиланням:
Нічого особливого, але от якщо ви перейдете по посиланню «View All Designs» з лівого меню, то зможете побачити десятки або навіть сотні варіантів оформлення цієї ж самої веб-сторінки за допомогою підключення іншого стильового оформлення (іншого файлу таблиць стилів).
Зверніть увагу, що вихідний Html-код при цьому залишається в точності таким же, а змінюється лише CSS оформлення. Вражає, чи не правда?!
CSS не є мовою розмітки, в тому розумінні, як, наприклад, Html. Це мова саме стильовий розмітки — у нього свій синтаксис, свій внутрішній зміст і багато в чому він буде сильно відрізнятися від вже вивченого раніше.
Крім того, в порівнянні з Html, мова стильової розмітки набагато складніше. У ньому дуже багато нюансів, які потрібно буде знати окрім базових понять. В ХТМЛ ніяких особливих нюансів не було — вивчили всі елементи і можете спокійно працювати з кодом. Мені здається, що CSS можна порівняти з шахами — мало знати, як ходять усі фігури, треба ще й вміти грати.
Отже, що ж це таке і з чого він складається? Цей нібито мову можна розділити на дві частини:
Тепер давайте подивимося, як оформлення заданий в стилях підключається до вихідного коду веб-сторінки. Існують три основних способи використання CSS спільно з Html:
Ну ось, бачите як ми вже багато дізналися про мову стильової розмітки. Тепер саме час поговорити про його синтаксис. Загалом-то, він досить простий:
Одне правило в коді CSS складається з двох елементів — властивість (у нашому прикладі це color — колір тексту і background — колір фону) і його значення (у нашому прикладі це код кольору red і #CCCCCC). Обов’язковою умовою є відокремлення властивості від його значення двокрапкою.
Далі. Одне правило відокремлюється від іншого в обов’язковому порядку крапкою з комою. Після останнього правила можна буде крапку з комою вже не ставити, але під уникнення ексцесів краще всього взяти за правило ставити її завжди. Прогалини (як переноси рядків і символи табуляції) в коді CSS не мають ніякого значення і ставити ви їх можете на свій розсуд.
Використання Style для підключення Css Html коду
Ну, а тепер давайте розглянемо на прикладах всі ті способи застосування стильових правил оформлення до нашого документу, які існують і які в загальних рисах були описані трохи вище.
Перший спосіб називається методом вкладення CSS в Html з використанням атрибута Style:
Давайте подивимося, як можна використовувати цей метод для завдання кольору і фону абзацу:
Що таке метод вкладення
Як ви можете бачити, одним легким рух ми пофарбували текст абзацу в червоний колір (color:red) і одночасно підклали під нього сірий фон (background:#cccccc). Style відноситься до тих шести глобальним атрибутів у Html, які можуть використовуватися спільно з абсолютно будь-якими тегами (вони перераховані внизу наведеного скріншота):
В Css ми так само будемо активно застосовувати універсальні атрибути Id, Class, але про це розмова піде вже в наступних статтях, а поки що ми розглянули можливість використання Style для підключення стильових правил оформлення до певних елементів Html коду. Він дозволяє використовувати в якості свого значення набір цих правил (в необмеженій кількості).
Метод вкладення з допомогою атрибута Style дуже просто реалізувати на практиці, але тим не менш він в реальному верстці використовується дуже рідко. Але зате з допомогою нього можна дуже просто щось спробувати поекспериментувати, а вже потім перенести всі ці правила в окремий файл з таблицями стилів CSS.
Наступний спосіб підключення мови стильової розмітки називається методом вбудовування CSS в Html. Цей спосіб принципово відрізняється від розглянутого раніше методу вкладення.
Замість того, щоб включати в кожен тег на сторінці атрибут Style, що містить правила стилів мови, ми тепер буде прописувати всі потрібні нам для цього web документа правила CSS всередині одного єдиного тега Style, який в свою чергу буде розміщуватися в шапці документа (між елементами Head).
Ви пам’ятаєте, що таке Head і де він прописується в структурі веб документа? Якщо не пам’ятаєте, то подивіться це на даній блок-схемою:
Тобто в коді це могло б виглядати так:
…
…
«стильові правила, що застосовуються до всього цього документу (сторінці)»
…
…
Не зовсім зрозуміло? Ну, зараз я спробую проілюструвати:
Для того, щоб браузер не брав стильові правила за мову гіпертекстової розмітки, в елементі Style потрібно буде прописати обов’язковий атрибут Type зі значенням «text/css» (заголовок медіа контенту для каскадних таблиць стилів). Т. о. укладений всередині цього елемента код інтерпретується браузером як CSS.
Далі дивимося на наведений трохи вище приклад. Як ви можете бачити, стильові правила укладені у фігурні дужки, а перед ними прописаний так званий селектор у вигляді латинської букви «P». Навіщо потрібен цей селектор?
А як інакше ми можемо вказати браузеру, що дані правила CSS потрібно буде застосувати тільки до тегам абзаців (селектор P) web даного документа і ні до чого іншого.
Тут ми знову торкнулися питання синтаксису. При використанні методів вбудовування і вкладення, всі правила мови стильової розмітки повинні бути укладені у фігурні дужки, а перед ними повинен обов’язково стояти селектор або ж кілька селекторів:
Селектор CSS {Властивість: Значення; Властивість: Значення}
При використанні методу вкладення селектор і фігурні дужки ми не використовували, т. к. браузеру було вже і так зрозуміло, що дані правила CSS потрібно застосовувати саме до того тегу, всередині якого і прописаний атрибут Style.
При використанні методу вбудовування або вкладення, ситуація з визначенням того, кому адресовані дані стильові правила ускладнилася і знадобилося використання фігурних дужок і селекторів. Т. о. ми вказуємо браузеру, що ось цей набір CSS правил (укладений у фігурні дужки) ти вже будь люб’язний застосувати до всіх абзаців, а цей набір — для чогось там ще.
В найпростішому випадку В якості селектора можете використовувати назву тега, до якої мають бути застосовані правила мови CSS укладені у фігурні дужки, що відкриваються одразу після назви селектора. В нашому прикладі в якості селектора використовується назва тега абзацу «P». Вже більш детально про селектори в мові стильової розмітки ми з вами поговоримо в наступній статті (див. посилання вище).
Підіб’ємо підсумок для методу вбудовування CSS коду в Html документ — всі потрібні для цього документа стильові правила будуть описані в одному єдиному тегу Style, а не в багатьох різних елементах, як це було б у разі використання методу вкладення, описаного трохи вище.
Винос таблиць стилів CSS в окремий файл з допомогою Link
Останній спосіб інтеграції стильового коду веб документ називається методом зв’язування. Простіше всього буде проілюструвати цей метод:
Основна відмінність його від розглянутих трохи вище способів (вкладення і вбудовування) полягає в тому, що при використанні методу зв’язування всі правила мови CSS виносяться в окремий зовнішній файл. Він буде знову ж текстовим (як і будь-який Html-документ) і йому зазвичай присвоюють розширення .css, щоб для його відкриття на локальному комп’ютері під керуванням Windows можна було б призначити спеціальну програму (я раджу використовувати для цього кращий Html редактор Нотпад++, описаний тут).
При використанні зовнішнього CSS файлу використовується спеціальних тег Link, який прописується знову ж між відкриваючим і закриваючим елементами Head в шапці вебсторінки. Link відноситься до розряду службових гіперпосилань не видимих в браузері.
Браузер в цьому випадку знайде вказаний файл таблиці стилів (відносний або абсолютний шлях до нього вказано у атрибуті Href тега Link), завантажить його і застосує зазначені в ньому правила мови CSS для зовнішнього оформлення поточного Html документа.
Взагалі, зв’язування дуже схоже на описане трохи раніше використання тега Style, але воно дозволяє дуже істотно прискорити завантаження сторінок сайту і знизити навантаження на комунікаційне обладнання інтернету.
При використанні елемента Style (метод вбудовування) браузер повинен буде кожен раз довантажувати разом з ХТМЛ кодом документа і зашиті в ньому CSS правила і селектори, а в разі використання зовнішнього файлу таблиць стилів, браузеру досить лише один раз завантажити Style.css і вже потім брати його з власного кеша (області на жорсткому диску комп’ютера користувача) під час оформлення інших сторінок вашого сайту.
Атрибут type=»text/css» тега Link означає, що даний медіа контент буде нічим іншим, як мовою стильової розмітки. Але так само при зв’язуванні файлу CSS і Html документа використовується атрибут Rel зі значенням Stylesheet. Справа в тому, що Link (службова гіперпосилання) може використовуватися для абсолютно різних цілей.
Якщо ви подивіться вихідний код цієї сторінки в браузері, то побачите, що в області Head є ціла розсип різних тегів Link:
І призначення кожної з цих службових гіперпосилань визначається значенням атрибута Rel. Наприклад, rel=»shortcut icon» використовується для вказівки шляху до файлу іконки Favicon, а rel=»alternate» може використовуватися для вказівки альтернативної версії сторінки (прикладом альтернативного подання Html документа може служити RSS стрічка).
Ну, і в разі використання атрибуту rel=»stylesheet» в Link, ми задаємо браузеру шлях до файлу таблиць стилів (в атрибуті Href цей шлях можна вказати в абсолютному або відносному вигляді). Тобто з допомогою атрибута Rel ми говоримо браузеру, що буде з себе представляти файл, шлях до якого вказаний Href (stylesheet — з CSS).
На сайтах майже завжди використовується метод зв’язування CSS і Html (зовнішній файл таблиці стилів). Атрибути і теги Style застосовують зазвичай тільки для тестування, хоча можуть знайтися й такі специфічні завдання, коли їх використання буде виправдано (наприклад, при оформленні поштової розсилки). Але в реальній роботі на сайтах використовуються саме зовнішні файли, тобто метод зв’язування.
За сім дозволю собі відкланятися і клятвено пообіцяти вам, що продовження буде найближчим часом. Ще раз повторюся, що навчання CSS зазвичай проходить набагато важче ніж вивченні ХТМЛ, тому постараюся бути максимально докладним і наочним.
Удачі вам! До зустрічей на сторінках блогу
