Lect 3

CSS технологія
(Каскадні таблиці стилів)

Поняття CSS
Впровадження CSS
в документ
Атрибут Style
Тег STYLE
Зовнішній CSS файл

CSS (Cascading Style Sheets)
Каскадні таблиці стилів – це зведення
стильових описів, тих чи інших HTML тегів, який
може бути застосований:
•до окремого тегу-елементу, або
•одночасно до всіх ідентичних елементів на
всіх сторінках сайту.
CSS по суті свого роду доповнення до HTML,

яке значно розширює його можливості.
Здійснити це завдання можна трьома
способами:
1.Написати стильовий опис безпосередньо в самому
елементі. Такий спосіб хороший лише в тому випадку
якщо такий елемент один єдиний в HTML документі,
який потребує окремого стильового опису.
Це найпростіший спосіб застосування стилю до тегу.
Для цього використовується атрибут style
<h1 style = "color: blue; font-style:
italic;"> Заголовок синій курсив </h1>
Цей стиль діє тільки для цього тега.

Практично кожен HTML тег має атрибут style,
який говорить про те, що до цього тегу
застосовується якийсь стильовий опис.
Пишеться так:
<p style=""> це параграф с індивідуальним
стилем </p>
Все що буде написано між лапками атрибута style і
буде стильовим описом для даного елемента.
Приклад:
<p style="color:#ff0000; font-size:12px"> це
параграф с індивідуальним стилем </p>
АЛЕ, такий спосіб
впровадження CSS гарний
лише в тому випадку якщо
потрібно задати певний стиль
малому числу HTML
елементів.
2. Написати стильовий опис для всіх
ідентичних елементів HTML документа.
Такий спосіб виправдовує себе, якщо стиль
сторінки принципово відрізняється від
загального дизайну сайту (групи
взаємопов'язаних сторінок).
Для того, щоб описати необхідні
елементи одночасно на всій сторінці
в заголовок HTML документа
впроваджують тег <STYLE> </ STYLE>
(Не плутайте з однойменним
атрибутом) в якому і відбувається
опис потрібних нам елементів.
Приклад опису стилів:
<head>
<title> Тег style </title>
В даному випадку стилі <style>
body{background-color:#c5ffa0}
описуються в заголовку h1{color:#0000ff; font-size:18px}
документа між тегами h2{color:#0000ff; font-size:16px}
HEAD!!!!! p{color:#ff0000; font-size:14px}
</style>
</head>
Використання тегів, для яких описаний стиль:

<body>
<h1>УВАГА</h1>
<h2>Шановні викладачі та студенти!</h2>
<p>До вашої уваги остаточна програма конференції
"Інтелектуальні інформаційні системи - 2018".</p>
</body>
Усередині тега <style> </ style> йде безпосереднє
оголошення стилів тих чи інших HTML елементів
відповідно до наступного синтаксису:
Якщо в блоці оголошення стилів вказується

кілька властивостей елемента, то вони між
собою розділяються крапкою з комою.
3. Винести стильовий опис елементів HTML в
окремий файл CSS. Це дозволить управляти
дизайном всього сайту цілком, кожною
сторінкою сайту в якій вказано звернення до
CSS файлу. Цей спосіб є найбільш
ефективним використанням таблиці
каскадних стилів.
1. відкриваємо блокнот (або інший
редактор) і пишемо стильові
правила;
2. Зберігаємо файл з розширенням
*.css (зазвичай файл зі стилями
називають style.css).
3. Підключити файл CSS до web-
сторінки:
<LINK> багатоцільовий і служить для
«зв'язування» HTML документа з додатковими
зовнішніми файлами, що забезпечують його
належну роботу. Тег <LINK> є свого роду
посиланням, тільки призначеної не для
користувачів, а для програм оглядачів
(браузерів). Так як <LINK> несе в собі виключно
службову інформацію він розташовується в
заголовку HTML документа між тегами <head>
</head> і не виводиться браузерами на екран.
Тег <link> має атрибути:
href – Шлях до файлу.
rel – Визначає відносини між поточним
документом і файлом, на який робиться
посилання.
shortcuticon – Визначає, що файл, який
підключається є іконкою.
stylesheet – Визначає, що файл, який
підключається містить таблицю стилів.
application/rss+xml – Файл у форматі XML
для опису стрічки новин.
<!DOCTYPE html>
<html>
<head>
<title> Заголовок сторінки </title>
<link rel="stylesheet"
href="my_styles.css" media="screen">
<link rel="stylesheet"
href="my_styles1.css" media="print">
</head>
В одному html-документі можна підключати кілька

таблиць стилів. При цьому браузер завантажить
обидві таблиці, комбінуючи їх правила.
3. Підключити файл CSS до web-
сторінки:
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>УВАГА</h1>
<h2>Шановні викладачі та студенти!</h2>
<p>До вашої уваги остаточна програма конференції
"Інтелектуальні інформаційні системи - 2018".</p>
</body>
style.css
body{background-color:yellow}
h1{color:#0000ff; font-size:18px}
h2{color:rgb(16,200,154); font-size:16px}
p{color:rgba(54,112,78,0.7); font-size:14px}
Одиниці виміру в CSS
Абсолютні:
Одиниця Опис
in Дюйм (1 дюйм дорівнює 2,54 см)

cm Сантиметр
mm Міліметр
pt Пункт (1 пункт дорівнює 1/72 дюйма)
pc Піка (1 піка дорівнює 12 пунктам)
Відносні:
Одиниця Опис
em Висота шрифту елемента
ex Висота символу x
px Піксель
% Відсоток
Одиниці виміру в CSS
em – це друкована одиниця, яка дорівнює
ширині великої літери М
ех – рівняється висоті малої літери х певного

шрифту
Вирівнювання тексту
text-align: left|right|center|justify
<!DOCTYPE html>
<html>
<head>
<title> Вирівнювання тексту </title>
<style>
h1{text-align:center}
p{text-align:justify}
</style>
</head>
Оформлення тексту
text-decoration дозволяє декорувати
текст, присвоївши йому одне або
кілька значень з нижче представлених
варіантів оформлення тексту:
Оформлення тексту
Відступ першого рядка
Властивість text-indent – задає відступ першого рядка в
текстовому блоці з лівого боку.
Відстань від лівого краю вікна браузера або ж елемента батька
(блоку в який поміщений блок з текстом) може бути заданно у
відсотках від ширини вікна браузера або ж одиницях виміру
прийнятих в CSS. У прикладі нижче відстань відступу від лівого
краю задається в пікселях (px):
p{text-align:justify; text-indent:20px}
Трансформація тексту
Властивість text-transform трансформує символи в
зазначеному текстовому блоці, роблячи їх великими або
прописними по одному з правил залежно від присудженого
значення даній властивості.
capitalize
Перший символ кожного слова в реченні буде з великої
літери. Решта символів свій вигляд не міняють.
lowercase
Всі символи тексту стають малими (нижній регістр).
uppercase
Всі символи тексту стають прописними (верхній регістр).
none
Не міняє регістр символів.
Вертикальне вирівнювання
Вертикальне вирівнювання тексту в рядку встановлює
властивість vertical-align
baseline - Вирівнює базову лінію поточного елемента за базовою лінії батька. Якщо
батьківський елемент не має базової лінії, то за неї приймається нижня межа
елемента.
bottom - Вирівнює основу поточного елемента по нижній частині елемента рядка,
розташованого нижче всіх.
middle - Вирівнювання середньої точки елемента за базовою лінії батька плюс
половина висоти батьківського елементу.
sub - Елемент зображується як підрядковий, у вигляді нижнього індексу. Розмір
шрифту при цьому не змінюється.
super - Елемент зображується як надрядковий, у вигляді верхнього індексу. Розмір
шрифту залишається колишнім.
text-bottom - Нижня межа елемента вирівнюється по самому нижньому краю
поточного рядка.
text-top - Верхня межа елемента вирівнюється за найвищим текстового елементу
поточного рядка.
top - Вирівнювання верхнього краю елемента по верху найвищого елемента
рядка.
Інтервал між буквами
letter-spacing
h1 {
letter-spacing: 6px;
}
p{
letter-spacing: 3px;
}
Міжсимвольний інтервал
Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut
nihil anteferat, nihil illis comparet, errat.
Пробіли та перенос рядка
Набраний текст, в будь-якому текстовому редакторі браузерами за
замовчуванням виводиться на екран у вигляді суцільного тексту, де
переноси рядків розставляються автоматично, а так само прибираються
зайві (більше одного) пробіли між символами.
Властивість white-space імітує роботу тега <pre>, визначаючи показувати чи

ні пробіли між символів, якщо таких більше ніж один, а так само дозволяє
або забороняє перенос рядка.
Значення Перенос тексту Пробіли

normal Переноситься Не враховуються
nowrap Не переноситься Не враховуються
pre Не переноситься Враховуються
pre-line Переноситься Не враховуються
pre-wrap Переноситься Враховуються
Сімейство шрифту
font-family: ім’я шрифту [, им’я шрифту[, ...]] | inherit
Шрифти з підтримкою
serif - шрифти із зарубками, типу Times; кирилиці:
sans-serif - рубані шрифти (шрифти без Arial Black;
зарубок або гротески), типовий Arial;
представник - Arial; Comic Sans MS;
cursive - курсивні шрифти; Courier New;
fantasy - декоративні шрифти; Georgia;
Lucida Console;
monospace - моноширинних шрифти,
Lucida Sans Unicode;
ширина кожного символу в такому Palatino Linotype;
сімействі однакова (шрифт Courier). Tahoma;
inherit Times New Roman;
Успадковує значення батька. Trebuchet MS;
Verdana.
h1 { font-family: Geneva, Arial, Helvetica, sans-serif; }
p { font-family: Georgia, “Times New Roman”, Times, serif; }
Стиль шрифту
font-style: normal | italic | oblique | inherit
normal
Звичайне написання тексту.
italic
Курсивне зображення.
oblique
Похиле накреслення. Курсив і похилий шрифт при всій їх схожості не
одне і те ж. Курсив це спеціальний шрифт імітує рукописний, похилий ж
утворюється шляхом нахилу звичайних знаків вправо.
inherit
Успадковує значення батька.
h2 {font-family: "Times New Roman", serif; font-style: italic;}

Варіант шрифту
font-variant: normal | small-caps | inherit
Normal - Залишає регістр символів вихідним, заданих за замовчуванням.
small-caps - Модифікує всі рядкові символи як заголовні зменшеного розміру
inherit - Успадковує значення батька
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Вага шрифту
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
За замовченням – 400
Bold – 700
p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Розмір шрифту
font-size: абсолютний розмір | відносний розмір| значення | відсотки | inherit
xx-
xx- x- x-
CSS small medium large larg
small small large
e
HTML 1 2 3 4 5 6 7
em (висота шрифту елемента), ex (висота символу х),

пункти (pt), пікселі (px), відсотки (%) та ін. За 100%
береться розмір шрифту батьківського елементу.
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Скорочений запис
p { font-style: italic;
p { font: italic
font-weight: bold;
font-size: 30px;
bold 30px arial,
font-family: arial, sans-serif; } sans-serif; }
Порядок властивостей:
font-style | font-variant | font-weight | font-size | font-family
Взаємодія стилів
body {font-family:sans-serif; background-color:yellow;}
p {color:red; background-color:aqua;}
a {text-decoration:overline underline;}
h2 {font-weight:bold; text-align:center;}
body
<body>
h2 p
<h2>Це заголовок</h2>
<p>А це абзац з
<a href="myref.html">посиланням</a> a
всередині</p> </body>
Це заголовок
А це абзац з посиланням всередині
Favicon
Назва «Favicon» - це англійське скорочення від слів FAVorites
ICON, що в перекладі означає «значок для обраного».
Як зробити «фавікон» для сайту:

1.Назвати її «favicon.ico».
2.Розмір іконки повинен становити 16х16 пікселів.
3.Розмістити favicon.ico для сайту в корені веб-ресурсу.
4.Потрібно зробити іконку в форматі .ico.
<link rel="shortcut icon"

href="img/favicon.ico"
type="image/x-icon"/>
Favicon
Інші варіанти місця розміщення і формату теж можливі, але
для цього доведеться вносити зміни в HTML-код сторінок в
залежності від обраного типу зображення:
<link rel="shortcut icon"

href="img/favicon.png"
type="image/png"/>
iconfinder
https://www.iconfinder.com/

Lect 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lect 3

Uploaded by

Copyright:

Available Formats

CSS технологія

(Каскадні таблиці стилів)

Зовнішній CSS файл

CSS по суті свого роду доповнення до HTML,

Цей стиль діє тільки для цього тега.

Використання тегів, для яких описаний стиль:

Якщо в блоці оголошення стилів вказується

В одному html-документі можна підключати кілька

in Дюйм (1 дюйм дорівнює 2,54 см)

ех – рівняється висоті малої літери х певного

Властивість white-space імітує роботу тега <pre>, визначаючи показувати чи

Значення Перенос тексту Пробіли

h2 {font-family: "Times New Roman", serif; font-style: italic;}

p {font-family: arial, verdana, sans-serif;}

em (висота шрифту елемента), ex (висота символу х),

Як зробити «фавікон» для сайту:

<link rel="shortcut icon"

<link rel="shortcut icon"

You might also like