Для початку давайте розберемося, що ж таке CSS. Всі знають що HTML - це мова розмітки гіпертексту. А CSS в свою чергу мова візуального оформлення цієї самої розмітки. CSS - це Cascading Style Sheets - каскадні таблиці стилів. В HTML існують свої інструменти візуального оформлення, але вони багато в чому поступаються можливостям CSS, та й якщо у вас багато сторінок, то уявіть собі, вам раптом захотілося поміняти колір всіх заголовків, вам доведеться перелопачувати всі HTML файли, а на css це робиться в одній рядку. Я думаю, що вистачить тільки цього аргументу, для того щоб почати вивчати CSS.
CSS до речі використовується не тільки для візуального оформлення сторінок розмічених на HTML, але і тих сторінок написаних за допомогою мови розмітки XHTML, також відмінно підходить для оформлення XML документів.
Так як ми з вами тільки новачки то і почнемо з самих основ, надалі будемо вже заглиблюватися в цю технологію, так як CSS це досить потужна штука і в рамках однієї статті все просто не вмістити, тому розіб'ємо вивчення CSS на кілька уроків, з поступовим поглибленням в ці каскадні таблиці стилів.
Ну що переходимо до практики, і почнемо ми з вами з простого синтаксису. Виглядає він приблизно так:
Елемент оформлення прийнято називати селектор, але для простоти я вказав його саме так.
Щоб був зрозумілий синтаксис, наведемо простий приклад:
де,
p - це тег абзацу;
color - це властивість тобто в нашому випадку це колір;
red - це значення, в нашому випадку це червоний.
І в результаті у вас текст у всіх абзацах стане червоним кольором.
З синтаксисом трохи розібралися, перейдемо до того моменту, де це все писати, тобто підключати CSS до нашого HTML документу.
Існує кілька способів:
1. Безпосередньо в самому елементі документа за коштами атрибута style. наприклад, якщо перевести вище зазначений приклад в сам документ і описати його в самому елементі, то це буде виглядати так:
Даний спосіб не зручний тим, що знову ж таки якщо у вас буде багато документів, то вам доведеться міняти у всіх цих документах, причому в кожному елементі.
2. Трохи по зручніше спосіб це застосування css коли таблиця стилів описана в самому документі. У розділі head застосовується елемент style, в якому і описується сама таблиця стилів. Наприклад, знову задіємо вище зазначений приклад, але вже з використанням цього способу:
Вийде те ж саме, що і було вище. Цей спосіб іноді використовують, але він все одно не ідеальний.
3. У третьому способі використовується імпорт css документа. я рідко зустрічав застосування цього способу, може їм і ніхто і не користується, але знати про нього потрібно. Тут таблиця стилів тут вже описана в окремому документі.
де,
css-file.css - це файл css де і описана таблиця стилів, якщо він лежить в іншій папці то потрібно писати шлях до цього файлу.
4. Найпоширеніший спосіб застосувань каскадної таблиці стилів це підключення css файлу до вашого документа. Цим способом користуються практично всі, так як він найзручніший. Підключається css за коштами тега link в елементі head.
де,
css-file.css - це файл в якому описана таблиця стилів, знову якщо файл лежить в папці відмінною від розташування самого документа то необхідно писати шлях до нього.
Так з підключенням css розібралися тепер перейдемо до селекторам, тобто способам пошуку цих самих елементів у вашому документі, іншими словами, якщо вам не потрібно, що всі абзаци були червоним кольором як у вище зазначеному прикладі, а наприклад, у одних абзаців він був чорним, а у інших він був червоний. Насправді їх дев'ять видів, але ми поки розглянемо найпопулярніші.
З селекторами елементів (тегів) ми вже познайомилися вище перераховані приклади, застосовувалися до всіх тегам:
p - це і є селектор елемента, тут можуть бути практично будь-які теги HTML документа, такі як body, div, table, tr, td, h1 і багато, багато інших.
На мій погляд, найпопулярніші види селекторів це з використанням класів і ідентифікаторів. Іншими словами при розмітці свого документа ви помічаєте елементи документа за допомогою ідентифікаторів (які є унікальними у всьому документі) або приводите їх до одного класу (він може повторюватися в документі). Що було зрозуміліше, наведемо приклад, в якому у нас буде два абзаци, один з яких буде червоним кольором, а інший чорним.
Текст css буде таким:
Текст документа буде таким:
Для практики підключіть самі будь-яким із способів каскадну таблицю стилів до вашого документа.
Напевно, ви вже зрозуміли, що ідентифікатори в css позначаються за допомогою символу # (#idred) а класи за допомогою точки і назви класу (.black).
В HTML документі вони позначаються за коштами відповідних тегів: id для ідентифікатора і class для класів.
Текст HTML документа:
Як ви бачите у потрібній нам посилання, шрифт став 20 пікселів.
Тепер розглянемо теж популярний вид селекторів це - селектори нащадків. Іншими словами ви вказуєте, що цей елемент, ідентифікатор або клас має ось таких нащадків, тобто він знаходиться в тому чи іншому елементі який, наприклад, має той чи інший id або class. приклад:
Текст css:
Текст HTML документа:
Ви тут бачите що абзац який знаходиться в елементі div став зеленим, а все абзаци які не перебувають в елементі div стануть корисним.
Потрібно відзначити, що виділяти нащадків потрібно з права наліво, наприклад, у нас спочатку йде нащадок (div) потім йде наш потрібний елемент (p).
Як ви бачите, сьогодні ми використовували всього два властивості це font-size і color. Насправді їх дуже багато тому на сьогодні я думаю досить, в наступних уроках продовжимо розгляд інших властивостей і багато що ще!
Сподіваюся, ви хоч трохи стали розуміти суть цих самих Каскадних таблиць стилів CSS. Надалі будуть уроки складніша! Щоб ви переконалися що CSS це дуже прикольна річ, ось приклад кулінарного сайту де головне меню реалізовано тільки з використанням HTML і CSS, без всяких там java скриптів. Сподіваюся ми надалі теж навчимося так робити.