Вивчення Css
Починаємо роботу з HTML + CSS

Цей документ є перекладом статті з сайту W3C.
Оригінальна версія документу знаходиться тільки на сайті W3C http://www.w3.org/Style/Examples/011/firstcss.en.html
Цей переклад НЕ є офіційним документом W3C.
Всі Авторські Права Належать W3C.
Цей документ може містить помилки перекладу та похибки.
Автор: Скрипець Євген І., розробник проекту Speed Lab. Всі переклади автора: en, ru, uk
Локальна копія: http://www.smartviper.com/Style/Example007ukr/011/firstcss.html

Зміст

Це коротке керівництво призначене для людей, які почали своє вивчення CSS вперше.

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

В кінці даної статті Ви створите HTML файл який виглядатиме як цей:

[Закінчена сторінка HTML]

Отримана сторінка HTML з кольорами і розміткою зробленою за допомогою CSS.

Відмітьте, що я не претендую на те, що це дуже красиво ☺

Увага! Просунутий варіант: Розділи помічені даним знаком необов`язкові. Вони містять додаткові пояснення HTML і CSS коди в наведених прикладах. Знак “увага!” на початку абзацу позначає більш розширену інформацію чим інший текст.

КРОК 1: написання коду HTML

Для цієї статті я пропоную використовувати прості утиліти, наприклад Блокнот від Windows, Textedit на Mac або Kedit під KDE сповна підійдуть під завдання. Як тільки Ви зрозумієте основні принципи, ви можете перемкнутися на використання більш просунутих інструментів розробки, наприклад на такі комерційні програми як Style Master або Dreamweaver. Але для створення першого файлу CSS не варто відволікатися на безліч розширених можливостей.

Не використовуйте текстовий редактор на зразок Microsoft Word або Openoffice. Ці програми зазвичай створюють файли, які не можуть бути прочитані браузерамі. Для HTML і CSS файлів нам потрібні звичайні текстові файли без будь якого формату.

Перший крок полягає у відкритті порожнього вікна текстового редактора (Notepad, Textedit, Kedit або будь-якого Вашого коханого) і наборі в ньому наступного тексту: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>

</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>

  <li><a href="musings.html">Musings</a>

  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>

</ul>

<!-- Main content -->

<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.


<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>

  by myself.</address>

</body>
</html>

Вам не обов'язково це перенабірать - ви можете просто скопіювати і вставити текст з цієї сторінки в редактор.

(Якщо ви використовуєте Textedit на Макінтоші, не забудьте вказати Textedit'у, що це дійсно простою текстовий файл, відкривши меню Format і вибравши опцію “Make plain text”.)

Увага! Просунутий варіант: Перша строчка нашого HTML файлу говорить браузеру про тип документу (DOCTYPE позначає Document TYPE). У нашому випадку - це HTML версиі 4.01.

Слова між < і > називаються тегамі і як ви можете бачити, документ міститься між <html> і </html> тегами. Між <head> and </head> знаходиться різна інформація, яка не відображується в самому документі. Наприклад там міститься заголовок документа. Пізніше ми додамо туди і зв'язок з CSS файлом.

Тег <body> це місце самого документу. В принципі, все що знаходиться усередині цього тега за винятком тексту між <!-- і -->, що є коментарями, будлет виведене на екран. Коментар браузером ігнорується.

Тег <ul> у нашому прикладі задає відображення “неврегульованого списку” (Unordered List), тобто списку, елементи якого непронумеровані. Теги <li> починають “елементи списку” (List Item). Тег <p> є “параграфом”. А тег <a> - “якір” (Anchor), за допомогою якого створюються гіперпосилання.

the HTML source shown inside KEdit

Код HTML в редакторі Kedit.

Увага! Поглубленний варіант: Якщо ви хочете дізнатися які бувають теги в дужках <.>, то ви можете вивчити Начало роботи з HTML. Але спочатку декілька слів про структуру нашої HTML сторінки.

Відзначте, що я не закрив “li” і “p” елементи. У HTML (але не в XHTML), можна опускати закриваючі теги </li> і </p>, що я і зробив в даному випадку, для того, щоб було простіше текст. Але ви можете додати їх, якщо вважаєте за необхідне.

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

Виберіть “Зберегти як.” або “Save As.” з випадного меню Файл або File, вкажіть каталог для збереження файлу (наприклад Робочий Стіл) і збережіть файл як “mypage.html”. Не закривайте редактор, він нам ще буде потрібен.

(Якщо ви використовуєте Textedit для Mac OS X версії менше ніж 10.4, ви побачите опцію "Don't append the .txt extension" в діалоговому вікні "Save as". Виберіть цю опцію, тому що ім'я файлу “mypage.html” вже включає розширення. Новіші версії Textedit відмітять .html розширення автоматично.)

Далі, відкрийте файл в браузере. Ви можете зробити це таким чином: знайдіть файл вашим файловим менеджером (Провідник, Windows Explorer, Finder or Konqueror) і клацніть (одного разу або двічі) на ньому. Якщо ви робили все як описано то ім'я файлу буде “mypage.html”. У вас повинен відкритися файл в браузері, встановленому за умовчанням. (Якщо немає, то відкрийте браузер і перетягнете файл в його вікно.)

Як Ви бачите, сторінка виглядає досить нудно…

КРОК 2: змінюємо кольори

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

Ми почнемо із стилів, вбудованих в HTML файл. Пізніше, ми покладемо CSS стилі і HTML розмітку в різні файли. Роздільне зберігання добре тим, що легко використовувати ті ж самі стилі для безлічі HTML файлів: Вам потрібно написати CSS стилі лише один раз. Але на цьому кроці ми залишимо все в одному файлі.

Нам потрібно додати елемент <style> до HTML файлу. Визначення стилів будуть усередині цього тега. Повертаємося до редактора і додаємо наступні п'ять строчок в заголовок HTML коди між тегами <head> і </head>. Рядки, які треба додати виділені красним (з 5-ою по 9-у) . 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]

Перший рядок говорить браузеру про те, що це таблиця стилів і що вона написана на CSS (“text/css”). Другий рядок говорить, що ми застосовуємо стиль до елементу “body”. Третя встановлює колір тексту в пурпурний, а наступна встановлює колір фону в жовто-зелений відтінок.

Увага! Поглубленний варіант: Style sheets in Таблиці стилів CSS створюються згідно правілам. Кожне правило складається з трьох частин:

  1. селектор (у нашому прикладі: “body”), який говорить про те, до якої частини документа застосувати правило;
  2. свойство (у нашому прикладі властивостями є ''color'' і ''background-color''), яке вказує що саме ми встановлюємо для елементу, вибраного селектором;
  3. значення (''purple'' і ''#d8da3d''), яке встановлює значення атрибуту.

Наш приклад показує що правила можуть бути скомбіновані. Ми встановили дві властивості, так само ми могли задати їх окремо: 

body { color: purple }
body { background-color: #d8da3d }

але оскільки обидва правила відносяться до body ми записали “body” один раз і помістили властивості і значення разом. Для здобуття більшої інформації про селектори дивитеся главу 2 з lie & Bos.

Фон елементу body так само є фоном цілого документа. Ми явно не призначили іншим елементам (p, li, address.) фону, так що за умовчанням у них його немає (або він прозорий). Властивість ''color'' встановлює колір тексту елементу body, але всі останні елементи усередині body успадковують цей колір, поки для них не заданий інший у вигляді іншого правила. (Ми додамо інші кольори пізніше.)

Тепер збережете цей файл (використовуйте команду “Зберегти” або “Save” з файлового меню) і вертайтесь назад у браузер. Якщо ви натискуватимете кнопку “відновити”, то зображення зміниться з “нудної” сторінки на прикрашену (але все ще одноманітну) сторінку. Окрім заслань зверху, весь текст має бути пурпурний на жовто-зеленому фоні.

Знімок прикрашеної сторінки в Konquerror

Тепер браузер показує сторінку до якої ми додали колір.

Увага! Додатково: У CSS можна задавати кольори декількома способами. Наш приклад показує два з них: по імені (“purple”) і за шістнадцятковим кодом (“#d8da3d”). Існує порядка 140 імен кольорів і 16 шістнадцяткових значень. Додаючи стилі пояснює деталі відносно цих кодів.

КРОК 3: змінюємо шрифти

Ще одна річ яку можна зробити - шрифтова різноманітність різних елементів на сторінці. Давайте напишемо шрифтом “Georgia” увесь текст, виключаючи заголовки, які ми напишемо “Helvetica.”

Оскільки в Web ніколи не можна бути цілком упевненим в тому, які шрифти встановлені на комп'ютерах відвідувачів, ми додамо альтернативні способи відображення: якщо Georgia не знайдена, то ми використовуватимемо Times New Roman або Times, а якщо і він не знайдений, то браузер може узяти будь-який шрифт із зарубками. Якщо відсутній Helvetica, то ми можемо спробувати використовувати Geneva, Arial або Sunsans-regular оскільки вони дуже схожі по зображенню, ну а якщо у користувача немає таких шрифтів, то браузер може вибрати будь-який інший шрифт без зарубок.

У текстовому редакторові додайте наступні строки (рядки 7-8 і 11-13) : 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>

  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;

    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

Якщо ви збережете файл знову і натискуватимете “відновити” у браузері, то у вас мають бути різні шрифти у заголовках і у тексті.

Знімок із зміненими шрифтами

Зараз шрифт заголовків і основного тексту розрізняється.

КРОК 6: додаємо горизонтальні лінії

Останнім додаванням до нашої таблиці стилів стане горизонтальна смуга для розділення тексту і підпису знизу. Ми використовуємо властивість ''border-top'' для того щоб додати переривисту лінію над елементом <address> (рядки 34-37) : 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">

  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]

Тепер наше оформлення закінчене. Давайте винесемо таблицю стилів в окремий файл, щоб інші файли могли використовувати ту ж саму таблицю стилів, що і перший файл.

КРОК 7: зовнішній CSS

Зараз у нас є HTML файл з вбудованою таблицею стилів. Але якщо наш сайт розростатиметься, можливо, нам буде потрібно безліч сторінок, що використовують один і той же стиль оформлення. Є метод трохи краще, чим вставка таблиці в кожну сторінку - ми можемо винести стилі в окремий файл, на який вказуватимуть всі сторінки.

Для створення окремого файлу таблиці стилів нам потрібний інший порожній текстовий документ. Ви можете вибрати пункт “Новий” з меню "Файл" в редакторові, для створення порожнього файлу. (Якщо ви іспользуєте Textedit, не забудьте зробити його текстовим знову, використовуючи меню Format.)

Потім виріжте і вставте весь вміст усередині <style> з HTML в це нове вікно. Не копіюйте елементи розмітки <style> і </style>. Вони належать HTML коду, а не CSS. У новому вікні у вас тепер має бути повна таблиця стилів: 

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Виберіть “Зберегти як.” з меню "Файл", переконаєтеся що ви в тій же директорії що і файл mypage.html, і збережіть таблицю стилів під ім'ям “mystyle.css”.

Тепер поверніться до HTML коду. Приберіть все содержівмоє від <style> до </style> включно і заміните прибране елементом <link> як показано (строка 5): 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">

</head>

<body>
[etc.]

Така конструкція скаже браузеру про те, що таблиця стилі розташовується у файлі під назвою “mystyle.css”, і оскільки директорія не згадана, браузер шукатиме цей файл там же, де ліжіт HTML файл.

Якщо ви збережете файл і відновите його у браузері, то не повинно статися жодних змін: сторінка по колишньому використовує те ж оформлення що і минулого разу, але цього разу оформлення зберігається в зовнішньому файлі.

Final result of styling

The final result

Наступний крок - покласти обидва файли mypage.html і mystyle.css на ваш сайт. (Звичайно, ви можете захотіти злегка змінити їх спершу.) Як покласти файли на сайт залежить від вашого інтернет провайдера.

Подальше вивчення

Для введення в CSS, дивитеся главу 2 lie & Bos або введение у CSS Дейва Реггета.

Інша інформація, включаючи більшу кількість уроків може бути знайдена в розділі вивчення Css.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos, CSS contact
Created 5 Apr 2004. Last updated $Date: 2008/02/22 23:53:55 $ GMT