Тема 40(10): Каскадні таблиці стилів. Стильове оформлення сторінок. 

8 веб_технології_8.pptx

HTML -  Мова розмітки гіпертексту (англ. HyperText Markup Language - HTML). Основна мова для опису змісту веб-сторінок.

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

Переваги викорстання CSS:

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


Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) — спеціальна мова, що використовується для запису опису зовнішнього вигляду сторінок, написаних мовами розмітки даних.

Конструкція СSS, яка відповідає за зовнішній виглядмпевного елемента HTML називається CSS-правилом.

Всі CSS-правила складаються з селектора і блоку оголошень. Блок оголошень містить одне або декілька оголошень розташованих у фігурних дужках. Всередині блоку оголошень знаходяться пари CSS-властивість: значення, розділені крапкою з комою.

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

Тобто, селектор - це вибірка та формальний опис того елемента чи групи елементів, до яких будуть застосовані CSS стилі. Селектор дозволяє звернутись до одного або кількох HTML-елементів, наприклад  - h1,p{color:blue}

Види селекторів:

Селектор CLASS дозволяє задати для одного і того ж елемента різні правила і/або оголоситиодне правило для різних елементів сторінки однакових за типом (тексту чи зображення)

Селектор Id задає унікальне ім'я елемента, яке використовується для посилань на нього у таблицях стилів

Способи підключення CSS-коду до HTML-документу.

Правила форматування CSS:

• Кожна властивість — в окремому рядку.

• Кожен селектор — в окремому рядку.

Порядок опису стилів:

• Позиціонування (position, left/right/top/bottom, float, clear, z-index.)

• Дісплей і блочне моделювання (display, width, height, margin, padding...

• Колір (background)

• Текст (list-style-type, overflow, color font...)

• Інші

Пріоритетність застосування стилів браузером:

1) Якщо в таблиці є однакові селектори, то виконуватиметься той, який записаний останнім.

Наприклад p{color: grey;} p{color: pink;} — колір абзацу будерожевим.

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

Наприклад, спочатку в <head> підключили зовнішню таблицю, а потім за допомогою тегу <style> додали внутрішню таблицю. Браузер відобразить стилі внутрішньої таблиці.

3) Пріоритетність за спаданням:

• inline-стилів,

• ідентифікаторів,

• класів,

• тегів.

Властивості шрифтів 

Довідник стилів

Властивості оформлення тексту

Колірне оформлення Детальніше тут

Увага!   Під час роботи з комп'ютером дотримуйтеся вимог БДЖ та санітарно-гігієнічних норм.

Посилання на On-line редактори:

Приклад 1:  застосування Внутрішнього (вбудованого) зв'язуванння html-файлу з  CSS-таблицею через тег style у розділі head і застосування класів 

<html>

<head>

<title>Застосування стилів</title>

<style type="text/css">

.mystyle1{color:red; font-size:120px; margin-top:100px; margin-left:70px}

.mystyle2{color:blue; font-size:110px; margin-top:-55px; margin-left:200px}

.mystyle3{color:green; font-size:100px; margin-top:-40px; margin-left:340px}

.mystyle4{color:black; font-size:90px; margin-top:-15px; margin-left:430px}

</style>

</head>


<body>

<div class=mystyle1>Кіпр</div>

<div class=mystyle2>Італія</div>

<div class=mystyle3>Греція</div>

<div class=mystyle4>Україна</div>

</body>

</html>

Тег <div> використовується, щоб групувати блоки інформації та форматувати її за допомогою CSS. Тег <div> дуже часто використовується разом з CSS, для створення макета веб-сторінки. 

Елемент <div> є блоковим елементом і призначений для виділення фрагмента документа з метою зміни виду вмісту. Як правило, вид блоку управляється за допомогою стилів. Щоб не описувати кожен раз стиль всередині тега, можна виділити стиль в зовнішню таблицю стилів, а для тега додати атрибут class або id з ім'ям селектора.

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

Тег <span> є рядковим і застосовується до внутрішніх (inline) елементів сторінки, тобто до слів, фраз, які знаходяться в межах абзацу або невеликого фрагмента тексту, змісту тощо. Зазвичай цей тег використовується для виділення одного чи декількох символів в реченні, для подальшої зміни їх оформлення за допомогою CSS властивостей.  

Приклад 2. Застосування селектора Id

Приклад 3. Застосування тега Span

Приклад 4: застосування псевдокласу

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

Синтаксис застосування псевдокласів

Селектор: Псевдоклас { Опис правил стилю }

Умовно всі псевдокласи діляться на три групи:

<Html>

<Head>

<title>Застосування стилів</title>


<style type="text/css">

<!--

  body{background-color:c0c0c0;

color:yellow;

font-family:"Times New Roman", serif;

margin: 10 10 20 20;}


a:link{color:red;} /*невідвідане гіперпосилання*/

a:visited{color:blue;} /*відвідане гіперпосилання*/

a:active{color:green;} /*активне гіперпосилання*/

a:hover{color:yellow;} /*гіперпосилання. на якому розміщено вказівник миші*/

-->


</style>

</head>

<body>


<h1>приклад </h1>

<a href=http://www.nvk12.rv.ua>Рівненський НВК №12</a>


</body>

</html>

Завдання для самостійного виконання:

<link rel="stylesheet" type="text/css" href="style.css">

Додаткові джерела:

https://html-css.co.ua/self-css/psevdoklasi/