Розробка сайту з використанням CSS
Зміст:
1. Коротко про CSS.
2. Основи.
3. Розширення властивостей тегів.
4. Способи визначення стилів.
5. Класи і ідентифікатори.
6. Робота зі шрифтами.
7. Вільне позиціонування.
8. Властивості блоків тексту.
9. Приклади використання.
Коротко про CSS.
Під терміном CSS ми розуміємо фразу "Каскадні Таблиці Стилів". Вони впроваджуються в HTML-код і не вимагають ніяких спеціальних редакторів і компіляторів, адже інтерпретуються оні звичайним броузером.
Каскадні таблиці стилів являють собою опису різних HTML-елементів і створені вони для розширення властивостей останніх. Вперше стилі були запропоновані WWW Consorcium'ом в рамках розробки специфікації HTML 3.0, проте реально цю шняга стали підтримувати тільки в 1997 році. Насолодитися CSS мали можливість лише щасливі власники таких броузерів, як Netscape Navigator 4.0 і Internet Explorer 4.0.
На цьому з історичними фактами дозвольте зав'язати і приступити безпосередньо до справи. CSS відкриває нам нові, раніше невідомі і недоступні грані. З їх допомогою ми отримуємо можливість більш вишукано оформити свій Web-сайт, надати йому нових рис і симпатичне обличчя.
Синтаксис CSS досить простий у вивченні, тому освоєння каскадних стилів є справою досить легким, але дуже і дуже корисним. Для того, щоб не опинитися голослівним, я хочу привести невеликий приклад. Візьмемо типову таблицю HTML і поставимо атрибут border = "1". Після інтерпретації даного коду броузером ми отримаємо самий звичайний результат, до якого звик наш досвідчений очей. Інша справа, що таблиці подібного роду не сумісні ні з одним мало-мальськи хорошим дизайном. Ну куди годиться ця псевдо-тривимірна лінія, що представляє собою кордон? Ось тут і приходять на допомогу CSS, по засобах яких можна без зайвого гемора оформити будь-яку таблицю на свій смак.
Розглянемо невеликий приклад:
В контейнер тегів
Спробуйте завантажити цей код в браузері, і ви побачите, що фон дійсно став отруйно-зеленим. В якості кольору не обов'язково вказувати повну назву останнього. Як і в звичайному HTML ви можете вдатися до таблиці RGB.
З прикладу видно, що, хоча ми описували тег , в стилях він прописаний без обмежувачів <і>. І дійсно, якщо ви поставите дані знаки, то броузер буде перебувати в замішанні, сприймаючи , як елемент тіла, а не описуваний тег.
При роботі зі стилями необхідно пам'ятати, що не всі користувачі Мережі мають сучасні броузери. Такі динозаври не зможуть правильно інтерпретувати CSS-код, і обов'язково зроблять якусь капость, зіпсувавши тим самим ваше творіння. Але не варто зневірятися і пускати на клавіатуру соплі, адже від такої поведінки є ліки, ім'я якому В«коментаріВ». Перепишемо нашу каскадну таблицю наступним чином:
При такому розкладі, старі броузери пропустять весь вміст стилів, а нові виконають їх, так як вони розуміють, що в даному випадку коментарі несуть інший сенс.
Розширення властивостей тегів.
Найпростіший приклад опису тега BODY ілюструє лише саму першу сходинку нашого вивчення. Ми змогли забарвити сторінку в зелений колір, проте ту саму проблему можна було вирішити і без застосування стилів. Тепер я хочу показати вам, як за допомогою CSS розширюються властивості тегів. Для початку розгляньте такий приклад:
Це заголовок
Подивіться, що у нас вийшло. Звичайно, з точки зору дизайну, це потворний шматок смердючою субстанції, але вже тут ви можете споглядати ті переваги, які дає нам CSS:
Почнемо з того, що ми змогли задати фоновий колір елемента H1. Те ж саме можна зробити і з іншими рівнями H, а також з P і іншими тегами. Розмір тексту був визначений властивістю Font-size, значення якого можна вказати, як у відсотках, так і в пікселях, наприклад Font-size: 8; З іншими властивостями така ж петрушка.
Як видно з прикладу, використання CSS істотно полегшує процес форматування Web-сторінок, і в цьому полягає їх головна перевага.
Способи визначення стилів.
Тепер настав час поговорити про способи визначення стилів. До нинішнього уроку, CSS ми оголошували в спеціальному контейнері , але це не завжди зручно.
Стиль можна визначити усередині якого-небудь HTML-тега. Виглядає це наступним чином:
---
---
Як бачите, такий спосіб дуже незручний, а до всього іншого тут відбувається засмічення коду, що призводить до більшого гальмування вашого сайту. Таким чином, я раджу вам уникати CSS в цьому виді і юзати більш раціональні методи.
У першому уроці я вже згадував про те, що каскадні стилі можна завантажувати з зовнішнього файлу. Як це робиться? Давайте подивимося:
---
---
Останній атрибут дає зрозуміти броузеру, що вміст файлу style.css - ніщо інше, як таблиці стилів. Такий спосіб дуже зручний і є одним із самих бажаних. Style.css - це текстовий файл, що містить лише описи елементів. Тут не повинно бути ніяких контейнерів і тегів. Можу навести прик...
