CSS.Урок 2. Як воно працює?


Багато приналежностей CSS аналогічні до приналежностей HTML. Отож, якщо ви коли-небудь використовували HTML для дизайну сторінок, у роботі з CSS ви безперечно побачите велику кількість знайомих кодів.

Синтаксис (або як воно там пишеться):

Скажімо, ми хочемо зробити фон сторінки червоним. У HTML код цього задуму буде виглядати так:

За допомогою CSS того ж самого результату доб’ємося іншим чином:

Body {background-color: #FF0000;}

Як бачите, коди загалом схожі. Ми використали майже подібні теги, а от правила їх написання відрізняються:

селектор {властивість: значення;} де:

селектор пояснює, якій HTML-складовій ми зібралися надавати особистісні властивості. Селектором може бути тіло документу у цілому, календар, шапка, etc.

Властивість означає, чому саме збираємося придавати власне значення – кольору фону, шрифту, підкреслюванню, вирівнюванню і так далі.

І значенням властивості у нас буде код обраного кольору, якщо ми працюємо з фоном сторінки, розмір та вигляд, якщо працюемо зі шрифтом, координати розташування на сторінці, якщо працюємо з яким-небудь елементом (продовжувати можна до безкінечності).

Таким чином складаються команди  CSS. Звичайно, вони можуть буди і більш складними, як бувають складні та прості речення у будь-якій мові. Наприклад, до селектору ми можемо додати не одну властивість, а декілька, у спеціальних дужках — слешах можемо залишати свої коментарі у коді: /* Ваш коментар */ Такі коментарі завше можна знайти на початку документу, де автор коду залишає відомості про себе.
На Блоксі CSS міститься у окремому файлі, який можна знайти у вкладці Вигляд>CSS власного блогу. Роздивіться уважніше цей код стосовно правил його написання. Якщо ви добре знайомі з HTML, ви без проблем зможете його змінювати, користуючися лише даним правилом, якщо з HTML ви знайомі дуже поверхово, наступні мої уроки обов’язково стануть у пригоді 🙂

CSS.Корисні посилання

Декілька лінків, зайти на які буде корисно кожному, хто вирішив працювати з CSS.

Цю сторінку завше можна буде знайти у категорії «Корисні посилання».

Пам’ятайте, інформація може поновлюватися 🙂

http://www.colorschemer.com/online.html

Сайт, присвячений схемам кольорів. Ви можете обрати один з багатьох зі схеми, або зміксувати колір власноруч, за допомогою програмки, встроєної онлайн. Код кольору задеється як у RGB, так і у HEX. Проект англомовний.

http://szablon.blox.pl/html

Величезна бібліотека шаблонів. Проект ведеться польською.

http://www.htmldog.com/guides/cssbeginner/

Декілька підручників з CSS англійською.

http://www.csszengarden.com/

Англомовна бібліотека шаблонів  CSS.

http://www.dp76.com/Style/CSS/

Переклад на російську відомостей по CSS з офіційного сайту.

http://www.htmlbook.ru/

Гарний ресурс по веб-програмуванню. Містить багато матеріалів як з CSS, так і по HTML. Дякую aqua за наданий лінк 🙂

http://template.blox.ua/html/1310721,262146,21.html?1046

Альтернативний блоксоблог, у якому деякі статті присвячені CSS.

 

http://tools.sitepoint.com/spanky/index.php

 

Онлайн-редактор, у якому ви можете змінити колір та скруглити вугли будь-якого блоку сторінки.

CSS. Урок 1. Трохи теорії :)

У цьому блозі планується розробити невеличку серію уроків по CSS, за допомогою яких ви без проблем зможете налаштовувати та змінювати дизайн свого блогу.

Які навички та програми потрібно мати, щоб змінити дизайн блогу за своїми власними вподобаннями?

Можу запевнити — ви вже маєте усе, що потрібно для роботи 🙂

У вас є браузер, за допомогою якого ви читаєте цей текст, і є простий текстовий редактор, встроєний до операційної системи. У Windows це — Notepad (Блокнот), що зазвичай знаходиться у меню «Пуск» >  «Програми» > «Стандартні», Pico у Linux’і, та Simple Text у Mac. Оце і є ті інструменти, що знадобляться у нашій роботі 🙂

Звичайно, до цих вимог треба додати трохи вільного часу, наполегливості і бажання вчитися.

Насамперед давайте трохи зануримося у теорію:

HTML, або Hyper Text Markup Language — це «рідна мова» вашого браузеру, тобто програми, призначеної для перегляду веб-сторінок.

HTML було розроблено у 1990 році вченим Тімом Бернсом Лі. Спочатку ця мова програмування призначалася лише для полегшення обміну документами між вченими з різних університетів. Та так вийшло, що проект набув набагато більшого успіху, аніж очікував Тім Бернс. Своїм винаходом вчений заклав основи сучасного інтернету.

Звичайно, інтернет-технології не стояли увесь цей час на місці, і згодом інтернет-користувачам стало не вистачати тегів, які запровадив Тім Бернс Лі. Компанії Netscape та Microsoft запропонували нові теги (мітки, що показують браузеру, яким чином  він повинен демонструвати на екрані той чи інший веб-сайт), які відрізнялись від оригінальних тим, що зумовлювали зовнішній вигляд документу, а не його структуру.

Це призвело до того, що оригінальні теги структурування (

, наприклад) стали усе частіше використовуватися для дизайну сторінок замість розмічення тексту. Багато тегів підтримувалися тільки одним видом браузеру — зазвичай, тієї компанії, яка їх запровадила.

«Вам треба мати браузер Х для перегляду цієї інтернет-сторінки», — мабуть, багато хто з вас ще пам’ятає такі попередження.

CSS (Каскадні Таблиці Стилей) було розроблено для виправлення цієї ситуації. CSS — це інструмент, призначений для точного дизайну однієї або багатьох сторінок одразу і підтримується усіма браузерами. До того ж зазвичай Таблиці Стилей знаходяться у окремому від коду HTML файлі, що значно полегшує їх використання.

Все, теоретичний вступ до предмету закінчено 🙂

Надалі нас з вами чекає тільки практика.