4. Методичні вказівки щодо заключної частини заняття

ХІД ЗАНЯТТЯ

• 
  Реалізація текстового поля введення даних на сайті засобами HTML.
  
• 
  Реалізація елементу прапорця на сайті засобами HTML.
  
• 
  Реалізація елементу випадаючого списку на сайті засобами HTML.
  
• 
  Реалізація елементу кнопки на сайті засобами HTML.
  

• 
  використання різноманітних розширень HTML;
  
• 
  застосування зображень замість тексту;
  
• 
  використання малюнків для контролю порожнього простору, так
  
• 
  звані "розпірки";
  
• 
  використання таблиць для верстання веб-сторінок;
  
• 
  написання програмних скриптів замість використання HTML.
  

• 
  Управління дизайном декількох документів за допомогою однієї таблиці стилів;
  
• 
  Більш точний дизайн сторінок, підтримуваний всіма браузерами;
  
• 
  Поділ документа на дві складові: структура та дизайн, завдяки чому вихідні коди стають простішими і легко читаються;
  
• 
  Різноманітні представлення для різних носіїв інформації (екран, друк);
  
• 
  Пророблена техніка дизайну і розширені можливості в порівнянні зі звичайним HTML.
  

на сторінці, скільки б їх не було. Погодьтеся, що це дуже швидко і зручно. Аналогічно можна створювати стилі для інших тегів, замінюючи назву селектора на потрібне вам ( p, h1, h2, h3 і т. д.).

h3 {

font-family: Geneva, Arial, sans-serif;

color: orange;

}
Селектор Класу. Селектори класу використовуються для визначення стилів, які можна застосувати для різних елементів, розміщених в різних частинах або на різних сторінках сайту.

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

Отже, трохи вище ми застосували стиль для всіх тегів

на веб-сторінці - текст має шрифт Geneva і помаранчевий колір. Але що робити, якщо вам знадобилося змінити колір одного з тегів

на зелений? На допомогу приходять селектори класів. Все що вам необхідно зробити, це створити стиль, де селектор - придумане вами ім'я класу. Ми назвемо клас greentext і запишемо правило:

.greentext {

color: green;

}

Але це ще не все. Тепер, щоб змінити колір для одного з ключових слів

на сторінці, потрібно відредагувати HTML-документ, застосувавши клас greentext до необхідного нам тегу. Записується це так:

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

Запам'ятайте кілька правил написання класів:

в CSS перед назвою селектора класу обов'язково ставиться крапка (але при присвоєнні класу в HTML-документі ця точка не потрібна);

в назві класів можна використовувати тільки букви латинського алфавіту, дефіс, підкреслення, цифри;

назва класу завжди повинно починатися з літери (правильні варіанти назв: .intro, .img-border, .nav_menu_01; неправильні: .2color, .-link, ._divider);

назви класів CSS чутливі до регістру, тому класи начебто .reviewі .Review будуть сприйматися як два окремих.
Index.html



Style.css



Результат:


Селектор Ідентифікатора. Селектори ідентифікатора використовуються для привласнення стилю одному конкретному елементу. Ідентифікатор id належить унікальному елементу, тому його можна використовувати в документі лише один раз.

Записується він майже так само, як і клас, тільки в CSS замість точки ставиться символ решітки #:

#footer {

width: 100%;

}

У HTML-документі ідентифікатор присвоюється за допомогою атрибута id:


Відміності між класом та індефікатором:

- ID - це унікальна назва елемента на веб-сторінці, яке повинно зустрічатися на ній тільки один раз (наприклад, шапка сайту і підвал: id="header"і id="footer"), в той час як клас може присвоюватися кількох елементів з метою відрізняти їх від інших;

- ідентифікатори зручні для JavaScript-розробників, оскільки дозволяють отримати швидкий доступ до елементу DOM з скриптів (багато в чому саме тому необхідно, щоб ID зустрічався на сторінці лише один раз);

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


текст


#text {

color: yellow;

}

.content {

color: blue;

}

У ID більшу вагу, тому колір тексту буде жовтим (yellow).

- за допомогою ідентифікаторів можна ставити якірні посилання на певні елементи веб-сторінки. Досить привласнити цьому елементу ID ...:

Описание

... і дати на нього посилання виду http://site.com/category/page/#description.

Селектори груп

Уявіть ситуацію, що вам необхідно зробити шрифт жирним для декількох елеметів веб-сторінки - p, h1, h2, h3. Можна було б записати цей стиль окремо для кожного елемента:

p {

font-weight: bold;

}

h1 {

font-weight: bold;

}

h2 {

font-weight: bold;

}

h3 {

font-weight: bold;

}

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

p, h1, h2, h3 {

font-weight: bold;

}

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

А якщо з якоїсь причини вам необхідно створити стиль абсолютно для всіх елементів веб-сторінки, можна скористатися універсальним селектором CSS, для позначення якого використовується символ зірочки *:

* {

font-family: Geneva, Arial, sans-serif;

}

Селектор Нащадку. До нащадків елемента відносяться його дочірні елементи. Селектори нащадків дозволяють стилізувати всі вкладені елементи, наприклад, можна відформатувати зовнішній вигляд всіх елементів маркованого списку:

ul li {text-transform: uppercase;}
Якщо потрібно відформатувати нащадки певного елемента, то можна поставити йому стильовий клас:

p.first a {color: green;} - означає, що потрібно застосувати даний стиль до всіх посилань,

нащадків абзацу, що відноситься до класу з назвою first;

p .first a {color: green;} - якщо додати пробіл, то будуть обрані посилання, розташовані всередині будь-якого тегу класу .first, який є нащадком елемента
;

.first a {color: green;} - даний стиль застосовується до любого посилання, що розташоване всередині інших тегів, позначених класом .first.
Дочірній селектор. Дочірній тег є прямим нащадком тегу, що його містить. Тобто, відносини "батьки-діти" існують між елементами і тими елементами, які містяться безпосередньо всередині них. В одного елемента може бути кілька дочірніх елементів, а батьківський елемент може бути в кожного елемента тільки один.
p> strong - вибирає всі елементи strong, які є дочірніми по відношенню до елементу p.
Сестринський селектор. Сестринські відносини виникають між елементами, що мають загального батька. Селектори сестринських елементів дозволяють вибрати теги з групи елементів одного рівня.

h1 + p - вибере всі перші абзаци, що йдуть безпосередньо за будь-яким тегом