Стиль – це набір правил оформлення та форматування, який можна застосувати до різних елементів сторінки. Каскадні аркуші стилів, (так звані CSS, Cascading Style Sheets) містять опис формату частини або всього тексту. В одному документі можна описати кілька аркушів, браузер використовуватиме їх каскадом, відповідно до пріоритету цих описів.
Стиль можна задавати для конкретного тега, для стандартних тегів у документі чи кількох документах, а також для ідентифікаторів та класів, створених для проекту.
Таким чином виділяється зовнішній аркуш стилів, внутрішній, вбудований стиль тегу та стилі класів та ідентифікаторів. Вони застосовуються по порядку, і найменший пріоритет мають зовнішні аркуші стилів, а найвищий – стилі конкретних тегів.
Стилі визначають форматування, а також розташування елементів у документі. Так, можна змінити вигляд усіх заголовків чи вирівнювання усіх зображень документа. Крім того можна задати певне оформлення для горища чи підвалу сайту, навігаційної панелі тощо.
Прикладами стильових ефектів є наступні:
background – колір тла;
font-family – вид шрифта;
font-size – розмір шрифта;
color – колір шрифта;
text-decoration – оздоблення тексту;
font-weight – жирність шрифта;
text-align - вирівнювання тексту;
border-width - ширина границі;
border-style - стиль оформлення границі;
margin-top – відстань від верхнього рядка;
line-height – висота рядка.
Довідник кольорів: http://astra.besaba.com/h/colors.html
Довідник стилів: https://css.in.ua/
Верстка сторінок може виконуватись різними способами, і найбільш поширеними є таблиці, та стилі.
Застосувати ці стилі до 3-го і 4-го абзаців за допомогою
<p class=style1> текст абзаца </p>
Стиль можна задавати для конкретного тега, для стандартних тегів у документі чи кількох документах, а також для ідентифікаторів та класів, створених для проекту.
Таким чином виділяється зовнішній аркуш стилів, внутрішній, вбудований стиль тегу та стилі класів та ідентифікаторів. Вони застосовуються по порядку, і найменший пріоритет мають зовнішні аркуші стилів, а найвищий – стилі конкретних тегів.
Стилі визначають форматування, а також розташування елементів у документі. Так, можна змінити вигляд усіх заголовків чи вирівнювання усіх зображень документа. Крім того можна задати певне оформлення для горища чи підвалу сайту, навігаційної панелі тощо.
Прикладами стильових ефектів є наступні:
background – колір тла;
font-family – вид шрифта;
font-size – розмір шрифта;
color – колір шрифта;
text-decoration – оздоблення тексту;
font-weight – жирність шрифта;
text-align - вирівнювання тексту;
border-width - ширина границі;
border-style - стиль оформлення границі;
margin-top – відстань від верхнього рядка;
line-height – висота рядка.
Довідник кольорів: http://astra.besaba.com/h/colors.html
Довідник стилів: https://css.in.ua/
Верстка сторінок може виконуватись різними способами, і найбільш поширеними є таблиці, та стилі.
Знайдіть в Інтернеті текст "Як треба вчитися". Відформатуйте його, використовуючи зовнішні та внутрішні стилі.
Внутрішні стилі
Внутрішня
таблиця стилів - CSS код записується в HTML документі
Заголовки «10 правил, як треба
вчитися» і «8 правил, як не треба вчитися» відформатувати стилем h1, а заголовки другого рівня стилем h2.
Приклад1:
<head>
<head>
<style>
h1 {font-size: 48 pt; color: red}
h2 {font-size: 24 pt; color: blue}
</style>
</head>
При використанні заголовків h1 і h2 текст буде відформатовано згідно заданим параметрам.
3) Приклад2
Нові стилі, можна створювати, надаючи їм імена з
крапкою перед першим символом
<head>
<style>
.style1{ font-size: 24 pt; color: red; background-color: olive; font-family : Tahoma}.style2{ font-size: 32 pt; color: green; background-color: white; font-family : Times New Roman}
</style>
</head>
<head>
<style>
.style1{ font-size: 24 pt; color: red; background-color: olive; font-family : Tahoma}.style2{ font-size: 32 pt; color: green; background-color: white; font-family : Times New Roman}
</style>
</head>
Застосувати ці стилі до 3-го і 4-го абзаців за допомогою
<p class=style1> текст абзаца </p>
Зовнішні стилі
Зовнішня таблиця стилів – це текстовий файл із розширенням .css
Приклад3.
Приклад3.
1.
Відкрийте текстовий редактор
блокнот і введіть таке визначення тегу <p>:
P{font-size: 40 pt; color: green; font-family: "Tahoma"}
P{font-size: 40 pt; color: green; font-family: "Tahoma"}
2.
Збережіть файл з іменем mystyle.css
3.
Відкрийте новий текстовий редактор
блокнот і введіть такі теги
<HTML>
<head>
<link rel="stylesheet"
type="text/css" href="mystyle.css">
</head>
<body>
<p> Цей текст оформлено відповідно до таблиці стилів,
яка міститься у файлі mystyle.css
</p>
</body>
</html>
4.
Збережіть цей файл з іменем pryklad1.html у тій самій
папці, що і mystyle.css
5.
Відкрийте файл у вікні браузера,
переконайтесь, що абзац відформатовано так, як описано у файлі mystyle.css
6.
Внесіть зміни до файлу mystyle.css
P{font-size: 32 pt; color: red;font-family: "Times New Roman"}
h1{font-size: 40 pt; color: green;font-family: "Colibri"}
P{font-size: 32 pt; color: red;font-family: "Times New Roman"}
h1{font-size: 40 pt; color: green;font-family: "Colibri"}
7.
У файлі pryklad1.html створіть
заголовок Зовнішня таблиця стилів
Комментариев нет:
Отправить комментарий