Здрастуйте, шановні читачі блогу . Сьогодні я, нарешті, дістався до першої статті у рубрику Уроки CSS. Дуже давно вже хотів почати розгляд стилів, бо вони в купе з Html є тим основним інструментарієм, який дозволить вам впевнено працювати над своїм проектом. Без цих базових знань вам буде досить важко реалізувати і розкрити весь потенціал вашого сайту.
Навіть у тому випадку, якщо ви використовуєте в якості движка якусь CMS, яка завдяки вбудованому візуального редактора дозволяє тонко налаштовувати зовнішній вигляд статей, то вам все одно знадобляться навички верстки. На сайті завжди знайдеться щось, що вам обов’язково захочеться посунути, виправити, змінити або видалити, і робити вам доведеться безпосередньо, правлячи код або ж змінюючи його стильове оформлення.
Важливість знання CSS при роботі з сайтом
Про базові поняття я вже трохи писав у рубриці HTML для початківців, торкнувшись там питання створення основних елементів веб сторінок:
Думаю, що для швидкого редагування, цих матеріалів буде цілком достатньо, тим більше, що останнім часом сам по собі мова гіпертекстової розмітки дещо втратив свою значимість при роботі над зовнішнім виглядом сайту після того, як стала популярною блочна верстка.
Справа в тому, що зараз чистий Html виконує лише роль постачальника вмісту веб сторінки і дозволяє в тому чи іншому вигляді організувати її структурне оформлення (згадані вище списки, таблиці, форми, зображення, посилання тощо).
І якщо ви спробуєте подивитися сторінку з відключеними стилями, то весь текст, швидше за все, виводитися в одну колонку, зникнуть фонові зображення, шапка, зміняться шрифти і, загалом-то, перегляд інформації в такому вигляді вже не можна буде назвати комфортним.
Це зайвий раз підтверджує, яку велику і важливу роль виконують зараз стилі в оформленні зовнішнього вигляду сайту. Вони відповідають за колірне оформлення проекту, за ті шрифти, які використовуються у тексті та заголовках, за розміщення і позиціонування окремих елементів дизайну.
Навіть найменша зміна зовнішнього вигляду (додавання іконки RSS стрічки, лічильників відвідувань тощо) вимагає внесення змін в CSS код.
Я постараюся розповідати про роботу з ним не в академічній манері, згадуючи про всі можливості таблиць каскадних стилів (саме так у перекладі розшифровується абревіатура CSS), а в суто практичній манері викладу, згадуючи в основному тільки ті аспекти, які в першу чергу можуть вам знадобитися при роботі над дизайном свого проекту.
Отже, давайте приступимо. У цієї мови стильової розмітки є свій синтаксис написання властивостей і правил. Але він буде відмінний від Html, хоча нічого складного з себе не представляє. Напевно, перша відмінність, яке слід зазначити — це не критичність CSS коду до прогалин.
Його властивості можна писати взагалі навіть без прогалин і в один рядок (завдяки цьому CSS код можна стиснути спеціальними програмами для збільшення швидкості завантаження вашого сайту).
Правда такий спосіб подання (один рядок) сильно знижує його читабельність, і оптимізувати його слід, напевно, вже після остаточного завершення роботи над дизайном свого проекту.
За аналогією з Html, де є набір тегів з різними атрибутами, в CSS є ряд властивостей, здатних приймати різні значення, з допомогою яких і здійснюються маніпуляції з дизайном.
Майже всі основні CSS властивості ви зможете знайти на моєму блозі в статтях з докладним їх описом і конкретними прикладами використання.
На практиці вам знадобиться знати кілька десятків з них та їх можливі значення для того, щоб впевнено орієнтуватися в стильовому коді, і при необхідності вносити в нього осмислені зміни.
Як підключити CSS стилі Html документу
Але почати я хочу не з синтаксису або властивостей таблиці каскадних стилів, а з опису тих способів, за допомогою яких їх можна підключити до Html-документа. Таких способів існує лише три і найбільш часто використовуваним з них є розміщення стилів в окремому файлі з розширенням .css або декількох файлах.
В цьому випадку, в головній частині коду (між тегами Head) кожного Html документа (веб-сторінки) вашого ресурсу обов’язково повинен бути прописаний в спеціальному тегу (link) шлях до цього зовнішнього CSS файлу, бо в іншому випадку відвідувачі вашого проекту ризикують побачити його в досить непривабливому вигляді.
Якщо ж рядок з кодом підключення файлу CSS буде мати місце, то браузер відразу ж після того, як прочитає цей шлях, почне його завантаження і підключить стильове оформлення, не давши відвідувачам побачити ваш сайт неодетым. Рядок підключення зовнішніх стилів може виглядати приблизно так:
Якщо ви використовуєте CMS, то головна частина Html коду буде формуватися в одному з файлів PHP з папки з використовуваної вами темою оформлення. Для движків Joomla, WordPress та SMF можете дізнатися розташування цього файлу, формує відкривають і закривають теги HEAD, з цієї публікації.
Два інших способи підключення стилів до веб документа використовуються рідше, ніж зовнішні файли, але іноді буває зручно і актуально використовувати саме їх. В обох випадках CSS-код буде прописуватися прямо в Html-документі.
Можна прописати в ньому так звані глобальні стилі, які будуть застосовані для всього документа, а також можна використовувати внутрішні стилі, які будуть застосовані для одного єдиного тега, в якому вони будуть прописані.
До речі, якщо хочете більш докладно вивчити цю тему, то подивіться статтю — що це таке Style і Link для зв’язування мови Css і Html.
Глобальні стилі прописуються всередині відкриває і закриває тегів STYLE і, в принципі, можуть розташовуватися в будь-якому місці коду веб-сторінки, але найчастіше їх поміщають в головну частину документа між відкриваючим і закриваючим тегами HEAD:
…
…
«CSS властивості глобальних стилів, що застосовуються до всього Html документу»
…
…
Останній спосіб підключення реалізується за рахунок внутрішніх (вбудованих) стилів. Для цього необхідний Html тег вам потрібно буде додати атрибут Style, що включає в себе в якості параметрів CSS властивості, написані з урахуванням синтаксису таблиць каскадних стилів.
Код може виглядати, наприклад, так:
Я абзац, виділений червоним кольором, інших таких на сайті немає
В тег абзацу P ми додали властивості за правилами внутрішніх стилів, таким чином текст в даному абзаці буде виводитися шрифтом Verdana розміром 14 пунктів і кольором, закодованим у #aa87cc.
Причому ці властивості будуть застосовані виключно тільки до даного абзацу. Я іноді використовую внутрішні (вбудовані) стилі на етапі налагодження дизайну для прискорення процесу по внесенню змін, а потім переношу отримані CSS властивості файл з зовнішніми стилями.
Синтаксис CSS — правила, властивості, селектори
Ну ось і дісталися ми до більш цікавих речей, на мій погляд, ніж способи використання (підключення) CSS — синтаксис написання правил. Тут, до речі, все просто, але все це я, мабуть, можу порівняти з грою в шахи, бо ходи фігур (синтаксис стильової розмітки) вивчити не складно, але по-справжньому грати дано на жаль не кожному.
Професійні верстальники влаштовані все ж дещо інакше, ніж звичайні люди, і склад розуму у них, на мою думку, особливий. Особисто я не вмію грати в шахи, хоча і знаю всі ходи фігур, також я не навчився віртуозно володіти CSS, хоча і знаю напам’ять майже всі властивості і основні правила написання коду.
Але для того, щоб поправити трохи вже готовий шаблон сайту, вставити новий елемент дизайну або ж поміняти, або посунути чого по дріб’язку — особливого складу розуму не потрібно.
Це доступно всім, і саме такими базовими знаннями в каскадних таблицях стилів я і хочу спробувати поділитися з вами в цій серії статей. Подивимося, як вийде, бо одна справа вміти самому, а інша справа — намагатися навчити цьому інших.
Отже, давайте розглянемо CSS правило і дізнаємося з яких частин вона складається і як ці частини відокремлюються один від одного:
Селектор {Властивість: Значення; Властивість: Значення}
У фігурних дужках можна написати скільки завгодно пар «Властивість — Значення для даного правила, розділяючи їх крапкою з комою. Все, що укладено в фігурних дужках називають одним загальним терміном — блок оголошень, а пару «Властивість — Значення» називають оголошенням.
Прогалини в правилі не критичні, тобто вони можуть бути або не бути — на працездатність коду це не впливає.
Також цей код не чутливий до регістру використовуваних вами символів (великі чи малі літери для CSS не мають відмінностей), перенесення рядків і символів табуляції, тому ви можете оформляти правила так, як вам зручно, а після закінчення роботи над дизайном весь файл з ними можна оптимізувати в спеціально призначених для цього програм.
Наприклад, можна CSS правило записати в один рядок:
p {color:#aa87cc»;font-size:14px;font-family:verdana;}
А можна записати і так:
p {
color:#aa87cc»;
font-size:14px;
font-family:verdana;
}
В принципі, CSS допускає і таке трактування наведеного вище коду:
p {color:#aa87cc»;}
p {font-size:14px;}
p {font-family:verdana;}
Але кращим для сприйняття і в плані оптимізації розміру цей спосіб запису не можна назвати. Краще всі належать до одного селектору прописати в одному правилі.
До речі, якщо у вас виникне така ситуація, що для одного і того ж селектора буде задано повторно теж саме властивість, але з іншим значенням, то браузер виконає в результаті те, що буде написано нижче в коді. Наприклад, у наведеному прикладі:
p {color:blue;}
p {color:black;}
Браузер відобразить текст в абзацах саме чорним кольором, т. к. це правило розташоване нижче коді.
CSS селектор покликаний вказувати браузеру, до якого саме елементу Html-документа потрібно буде застосувати дане плавило. В якості селектора може бути використаний будь-який тег (P, H1-6, BODY, TABLE і т. д.), але також можуть використовуватися і так звані класи або ID.
Крім того, бувають і складові селектори (контекстні), у яких кілька простих селекторів розділені пропуском. Загалом тема CSS селекторів заслуговує того, щоб прочитати всі накопичені матеріали.
Коментарі і розміри в мові стильової розмітки
В CSS файлі шаблону вашого сайту ви можете побачити так звані коментарі, які покликані вносити деяку ясність до призначення того або іншого шматка коду або окремого правила.
Вони можуть допомогти вам орієнтуватися в стильовому файлі, але треба пам’ятати, що коментарі трохи збільшують розмір CSS файлу, і, отже, після закінчення роботи над дизайном сайту ви можете прогнати код через оптимізатори, обрізають коментарі і прогалини.
Для того, щоб браузер не намагався інтерпретувати коментарі як CSS код, вам потрібно укласти їх в спеціальні слеші із зірочками:
/* текст коментаря */
Іноді розробники шаблонів можуть закоментувати навіть деякі правила для того, щоб ви тільки в разі необхідності могли б скористатися закладеними можливостями:
.tabberlive .tabbertab {
padding:5px;
border-top:0;
position:relative;
/* If you don’t want the tab size changing whenever a tab is changed
you can set a fixed height */
/* height:200px; */
/* If you set a fix height set to overflow auto and you will get a
scrollbar when necessary */
/* overflow:auto; */
Ну і ще кілька слів варто сказати про можливі значення властивостей. Тут насправді все регламентовано і кожна властивість має свій набір значень, які можуть складатися з слів, цифр, відсотків, різних розмірів, коду кольору, Url-адреси.
Слід зазначити, що у разі використання в значеннях властивостей десяткових дробів, їх потрібно розділяти крапкою, причому нуль як цілої частини можна не писати (0.5 або .5 буде інтерпретовано браузером однаково).
Примітно, що при завданні розміру шрифту потрібно вказувати в значеннях як відносні одиниці розміру шрифту (em, px, px або просто %), так і абсолютні одиниці (pt, cm, mm). Найчастіше використовують відносні одиниці, але буває, що розмір шрифту вказують в pt (пунктах — 1/72 дюйма). Читачів детальніше про одиниці розмірів (пікселі, Em і Ex), колір та спадкування в CSS.
Трохи відволікаючись від теми, зауважу, що відносна одиниця em дозволяє задати розмір шрифту відносного розміру, що прийнятий у використовуваному користувачем браузері як розмір тексту за замовчуванням.
Тому 1em можна прийняти за 100% і тоді, для збільшення розміру тексту відносно прийнятого в браузері за замовчуванням, потрібно буде прописати в CSS властивості значення, наприклад, 1.1 em. А для зменшення — 0.9 em.
Розмір шрифту задається в ex по логіці роботи схожий з em, з тією лише різницею, що за 100 відсотків береться висота малої літери «x». Але найпопулярнішою відносною одиницею визначення розміру шрифту є, звичайно ж, px — піксель.
Ви, напевно, вже давно знайомі з цією відносною одиницею вимірювання, бо вона представляє з себе мінімальну точку, з яких складається екран, на якому він переглядає цей текст.
Припустимо, монітор, на якому я друкую цей текст, має дозвіл 1280 на 1024 пікселів і фізичний розмір мінімальної точки (пікселя) у мене може відрізнятися від будь-якого іншого монітора або телефону, на якому може бути переглянутий той самий текст. Досить зручний спосіб, що враховує зручність сприйняття тексту користувачем.
Удачі вам! До зустрічей на сторінках блогу
