Розробка сайту з використанням CSS

Розробка сайту з використанням 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, по засобах яких можна без зайвого гемора оформити будь-яку таблицю на свій смак.
Розглянемо невеликий приклад:

<STYLE TYPE="text/css">
Опис стилів форматування
</ STYLE>

В контейнер тэгов <STYLE> заключены описания различных элементов. Атрибут TYPE указывает тип стилей, но является необязательным. Тем не менее, во избежание всяких казусов, рекомендуется ставить оный, в виду того, что старые броузеры могут неправильно отобразить CSS.

Найчастіше каскадні таблиці розташовуються в шапці документа, але тут є винятки. Можливо, деякі з вас бачили такі файли, як, наприклад, pupok.css. Служать вони для того, щоб не перенасичувати сторінку CSS-кодом, завантажуючи оний з цих самих файлів.
Основи.
Як же описувати властивості деяких елементів сторінки? Насправді, в цьому немає нічого складного, і найпримітивніший випадок присвоєння стилів виглядає так:
ім'я елемента {властивість: значення;}
Тут «ім'я елемента» - це назва будь-якого HTML-тега, чиї властивості ми бажаємо задати. Для простоти і наочності я візьму елемент BODY і спробую за допомогою стилів зробити фон сторінки зеленим. Звичайно, такий крок у Web-дизайні просто не допустимо, але ми з вами тільки вчимося.
Нижченаведений код укладений в шапці документа, тобто між тегами <HEAD> і </ HEAD>. Я не став приводити повний лістинг Web-сторінки, щоб вам легше було розібратися:

<STYLE TYPE="text/css">
BODY {background-color: green;}
</ STYLE>

Попробуйте загрузить данный код в браузере, и вы увидите, что фон действительно стал ядовито-зеленым. В качестве цвета не обязательно указывать полное название последнего. Как и в обычном HTML вы можете прибегнуть к таблице RGB.

Из примера видно, что, хотя мы описывали тэг <BODY>, в стилях он прописан без ограничителей < и >. И действительно, если вы поставите данные знаки, то броузер будет пребывать в замешательстве, воспринимая <BODY>, как элемент тела, а не описываемый тэг.

При роботі зі стилями необхідно пам'ятати, що не всі користувачі Мережі мають сучасні броузери. Такі динозаври не зможуть правильно інтерпретувати CSS-код, і обов'язково зроблять якусь капость, зіпсувавши тим самим ваш твір. Але не варто впадати у відчай і пускати на клавіатуру соплі, адже від такої поведінки є ліки, ім'я якому «коментарі». Перепишемо нашу каскадну таблицю наступним чином:

При таком раскладе, старые броузеры пропустят все содержимое стилей, а новые выполнят их, так как они понимают, что в данном случае комментарии несут иной смысл.

Розширення властивостей тегів.
Найпростіший приклад опису тега BODY ілюструє лише саму першу сходинку нашого вивчення. Ми змогли забарвити сторінку в зелений колір, однак ту ж проблему можна було вирішити і без застосування стилів. Тепер я хочу показати вам, як за допомогою CSS розширюються властивості тегів. Для початку розгляньте такий приклад:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<! -
BODY {background-color: gray;}
H1 {background-color: blue;
Font-size: 200%;
Color: black;
Text-align: center;}
->
</ STYLE>
</ HEAD>
<BODY>
<H1> Цей заголовок </ H1>
</ BODY>
</ HTML>

Подивіться, що у нас вийшло. Звичайно, з точки зору дизайну, це потворний шматок смердючої субстанції, але вже тут ви можете споглядати ті переваги, які дає нам CSS:
Почнемо з того, що ми змогли задати фоновий колір елемента H1. Те ж саме можна зробити і з іншими рівнями H, а також з P і іншими тегами. Розмір тексту був визначений властивістю Font-size, значення якого можна вказати, як у відсотках, так і в пікселях, наприклад Font-size: 8; З іншими властивостями такі ж петрушка.
Як видно з прикладу, використання CSS істотно полегшує процес форматування Web-сторінок, і в цьому полягає їх головна перевага.
Способи визначення стилів.
Тепер настав час поговорити про способи визначення стилів. До нинішнього уроку, CSS ми оголошували в спеціальному контейнері <STYLE>, але це не завжди зручно.
Стиль можна визначити усередині якого-небудь HTML-тега. Виглядає це наступним чином:
---
<P Style="text-align: center; font-style: italic; font-size: 5pt;">
---
Як бачите, такий спосіб дуже незручний, а до всього іншого тут відбувається засмічення коду, що призводить до більшого гальмування вашого сайту. Таким чином, я раджу вам уникати CSS в цьому виді і юзати більш раціональні методи.
У першому уроці я вже згадував про те, що каскадні стилі можна завантажувати з зовнішнього файлу. Як це робиться? Давайте подивимося:
---
<Link "style.css" Type="text/css" rel="stylesheet">
---
Останній атрибут дає зрозуміти броузеру, що вміст файлу style.css - ніщо інше, як таблиці стилів. Такий спосіб дуже зручний і є одним з найбільш бажаних. Style.css - це текстовий файл, який містить лише описи елементів. Тут не повинно бути ніяких контейнерів і тегів. Можу навести приклад:

P {text-indent: 15;
font-size: 20;}

Як бачите, нічого складного тут немає. Властивість text-indent визначає новий рядок, яка в нашому випадку дорівнює 15 пікселям.
Установку стилів для одного тега можна застосовувати багато разів. Якщо мої слова для вас - порожній звук, то погляньте на черговий приклад:

Font, P {font-size: 20;}
P, H1 {color: darkgreen;}

Припустимо, що в деякому файлі style.css, ви визначили властивість P {color: blue;}, але вам необхідно зробити колір абзацу іншим. У такому випадку, при постановці стилів у контейнері <Style> і розмітці P {color: red;}, колір буде однаково корисним у всіх абзацах, тобто властивість, визначене в файлі заміщається.
Класи і ідентифікатори.
Існують ще 2 способи визначення стилів, а саме: через класи та ідентифікатори. Давайте поговоримо про кожне з них детальніше.
Припустимо, вам необхідно задати властивості для тега P, але кожен абзац має бути відмінним від попереднього. Досягти даної мети відомими нам способами неможливо, ось тут-то і приходять на допомогу класи. Давайте подивимося на черговий лістинг:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<! -
p.one {background-color: # D6D2DD; font-style: regular; font-size: 15;}
p.two {background-color: # D1DED7; font-style: bold; font-size: 20;}
p.three {background-color: # DDD8D2; font-style: italic; font-size: 25;}
->
</ STYLE>
</ HEAD>
<BODY>
<P>> CSS має дуже простий синтаксис, але відкриває нам нові грані, недоступні при стандартній HTML-верстки.
<P>> Знаючи CSS, ви зможете створити по-справжньому гарний сайт, сподіваюся, що моя книга допоможе вам у навчанні.
<P>> Не забувайте переглядати вихідні коди інших сайтів, розбір яких допоможе вам набути необхідний досвід.
</ BODY>
</ HTML>

Перш ніж детально розібрати викладене, подивіться, що з цього вийшло:
Як бачите, в даному випадку описуваний елемент розділений на 2 сектори: тег.імя-класу. У кожного класу є свої властивості, які ви задаєте в фігурних дужках. Для того щоб CSS вступили в дію, необхідно викликати клас в тегу, який ви описували. Робиться це за допомогою атрибуту Це дуже зручний спосіб, який застосовується майже повсюдно.
Іноді виникають випадки, коли потрібно створити клас, не прив'язаний до певного тегом. У попередньому випадку ім'я. One належало елементу P, але така ситуація не завжди прийнятна. У цих випадках визначення тега потрібно опустити. Погляньте на приклад:

<STYLE>
. One {color: green;}
. Two {color: blue;}
</ STYLE>

Після оголошення стилів, їх необхідно викликати. У нашому випадку, класи стають дуже гнучкими, і викликати їх можна в будь-якому теге з атрибутом Наприклад:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
. One {color: green;}
. Two {color: blue;}
</ STYLE>
</ HEAD>
<BODY>
<Div>> Текст, написаний зеленим кольором.
<P>> Абзац, написаний синім кольором.
<HR>>
</ BODY>
</ HTML>

А ось і скрін того, що в мене вийшло:

На цьому з класами покінчено (в хорошому сенсі слова). Плавно переходимо до ідентифікаторів ...
Об'єкт нашого розбору застосовується не так часто, як вивчені вище класи, проте нехтувати ним не варто. Будь-який ідентифікатор починається з префікса # id. Ну, наприклад:
---
# IdFontArial {font-family: Arial;}
---
Потім викликаємо ідентифікатор:
---
<P Id=idFontArial> Шрифт з гарнітурою Arial </ P>
---
Тепер можна зробити глибокий видих - ми вивчили всі способи визначення стилів!
Вільне позиціонування.
У даному уроці ми поговоримо про позиціонування елементів. Якщо в HTML Web-майстер не має можливості тикати текст, куди завгодно (без застосування таблиць), то CSS вирішує проблему і робить це вельми ефективно. Існує спеціальний параметр, ім'я якому Position. Він може приймати 2 значення, а саме: absolute і relative. У першому випадку ми задаємо абсолютне положення елемента, а в другому - його місце щодо початкового. Хтось з вас вже кричить: «ти ваще сам зрозумів, що сказав?», Але іншими словами висловитися непросто. Пропоную вам розглянути один досить примітивний лістинг і поекспериментувати з ним:

<HTML>
<HEAD>
<Style>
.1 {Position: absolute; top: 37; left: 17;}
.2 {Position: absolute; top: 40; left: 20; color: red;}
</ Style>
</ HEAD>
<BODY>
<H1 заголовок. </ H1>
<H1 заголовок. </ H1>
</ BODY>
</ HTML>

І результат:

Робота зі шрифтами.
CSS надає нам широкі можливості для роботи зі шрифтами. Перше властивість, з яким вам належить познайомитися - це font-size. Ви могли помітити, що даний параметр нам вже зустрічався, проте ми не мали честі познайомитися зі значеннями оного. Давайте виправимо образливий ляпсус:
Large - великий.
X-large - більше.
XX-large - найбільший.
Medium - середній.
Small - маленький.
X-small - менше.
XX-small - найменший.
Крім того, ніхто не заважає нам застосовувати відносні значення. Всього їх два: larger і smaller. Вони змінюють розмір тексту відносно базового.
Наступне властивість виглядає так: font-family. Воно задає гарнітуру застосовуваного шрифту, проте застосовувати цю шняга не варто, з причини того, що у користувача його може не бути. Параметр font-family має наступний синтаксис:
---
{Font-family: шріфт1, шріфт2, ...}
---
Наступний параметр поточного уроку:
---
{Font-style: стиль;}
---
Ну а значення його такі:
Italic - курсив.
Normal - звичайний.
Ну і останній параметр:
---
{Font-weight: стиль;}
---
І значення:
Bold - жирний.
Bolder - жирніше.
Lighter - тонше.
Властивості блоків тексту.
Для початку давайте з'ясуємо, що під терміном «блок тексту», розуміється, перш за все, абзац. Визначається того відпочинку, як ви пам'ятаєте, тегом P, що мають одне скупе властивість align = "...". Непорядок, так? CSS надає нам величезні можливості для роботи з абзацами, і цієї актуальної теми я вирішив присвятити поточний урок.
Давайте розглянемо декілька параметрів, а потім перейдемо до прикладу, наочно ілюструє всі вивчене.
Line-height - задає межстрочное відстань. Наприклад, p {line-height: 50px;}
Text-decoration - ця штука дозволяє трохи прикрасити текст. Які значення приймає властивість? Давайте подивимося:
- Underline - підкреслення.
- Overline - лінія над текстом.
- Line-through - перекреслення.
- Blink - мерехтіння.
- None - значень немає, йдемо пити пиво!
Наведу такий приклад: p {text-decoration: overline;}
Text-transform - перетворює символи тексту тим чи іншим чином. Значення:
- Capitalize - перетворить виділений блок так, що перша буква кожного слова стає великої букви.
- Uppercase - виділений блок пишеться прописними буквами.
- Lowercase - виділений блок пишеться малими літерами.
Text-align - вже знайоме нам властивість, що визначає вирівнювання тексту. Значення, як ви вже знаєте, виглядають наступним чином:
- Left - по лівому краю.
- Right - по правому краю.
- Center - по центру.
- Justify - по ширині.
Text-Indent - задає червону рядок від лівого краю. Значення можна вказати, як в пікселях, так і у відсотках.
Margin-left - задає величину лівого поля. (Відстань між блоком тексту і його сусідами)
Margin-right - задає величину правого поля.
Margin-top - задає величину верхнього поля.
Margin-bottom - задає величину нижнього поля.
Margin - задає величину всіх полів.
Наприклад: p {margin: top right bottom left;}
Замість top right bottom left потрібно поставити значення в пікселях або відсотках.
Padding-top - задає внутрішнє поле (відстань між текстом і рамкою, його обрамлює. Як задати рамку дивіться нижче).
Padding-right - праве внутрішнє поле.
Padding-bottom - нижнє внутрішнє поле.
Padding-left - ліве внутрішнє поле.
Paddings - загальне значення усіх внутрішніх полів. Має той же синтаксис, що і Margin.
Border - задає рамку, що обрамляє абзац. Має такий вигляд:
border: color style width;
Але бувають (і дуже часто) такі випадки, коли необхідно задати властивості для кожної частини рамки (лівої, правої, нижньої і верхньої). У такому випадку, параметр border з відомих причин не котить. Тоді можна використовувати такі властивості:
Border-top-width - ширина верхньої межі.
Border-bottom-width - ширина нижньої межі.
Border-left-width - ширина лівої межі.
Border-right-width - ширина правої межі.
Border-width - ширина всього кордону.
Слід зазначити, що всі перераховані параметри працюють тільки в тому випадку, коли вказаний стиль рамки. Здійснити цей благородний вчинок можна, застосувавши наступне властивість:
Border-style - задає стиль рамки. Значення має наступні:
- None - я крутий і рамки не юзаю!
- Dotted - задається точкова рамка.
- Dashed - штрихованої рамка.
- Double - подвійна рамка.
- Groove - тривимірна втиснута рамка.
- Ridge - тривимірна опукла рамка.
- Inset - тривимірна опукла ступінчаста рамка.
- Outset - тривимірна втиснута ступінчаста лінія.
Border-color - задає колір кордону. Використовувати можна і для окремої лінії, наприклад, так: p {Border-left-color: green;}
Тепер ви знаєте дуже багато параметрів, які можна застосувати до абзаців і не тільки. Взяти той же border. Здогадайтеся, де ще його можна використовувати? Правильно в таблицях! Давайте розглянемо черговий приклад:

<HTML>
<HEAD>
<TITLE> Властивості блоків </ TITLE>
<Style Type="text/css">
<! -
p.dagger {border-width: 2;
border-style: dotted;
border-left-color: green;
border-right-color: red;
border-top-color: blue;
border-bottom-color: black;
padding: 5;}
p.nedagger {background-color: # F3F5F4;
text-align: justify;
text-indent: 20;
line-height: 1;
color: red;
font-weight: bold;}
Table.rulez {border: black solid 1px;}
->
</ Style>
</ HEAD>
<BODY>
<P чортівню, звичайно даремна, але зате красива !!!!!!
<P теж нічого! </ P>
<Table>
<TR>
<TD> Ось така от красива таблиця! Тільки через можливість подібним чином оформляти блоки, необхідно вивчати CSS! </ TD>
<TR>
</ Table>
</ BODY>
</ HTML>

А виглядає це так:

По-моєму, вийшло дуже навіть красиво, як вважаєте? Ми не розглянули останній атрибут: background-image: ім'я_файлу;
Наприклад:
P {background-image: pupok.gif;}

Приклади:
>>> Колір ліній прокрутки:

>>> Властивості форм:

INPUT.ok {BORDER-RIGHT: # F1F2F3 1px solid;
BORDER-TOP: # F1F2F3 1px solid;
MARGIN: 6px 0px 4px;
FONT: bold 11px tahoma;
BORDER-LEFT: # F1F2F3 1px solid;
COLOR: # ffffff;
BORDER-BOTTOM: # F1F2F3 1px solid;
BACKGROUND-COLOR: # 95ACBF}
INPUT.textarea {BORDER-RIGHT: # 000000 1px solid;
BORDER-TOP: # 000000 1px solid;
FONT: 11px verdana;
BORDER-LEFT: # 000000 1px solid;
WIDTH: 120px;
BORDER-BOTTOM: # 000000 1px solid}