Urok - 11 - 10 - Klas CSS

Сьогодні
Каскадні таблиці стилів. Стильове

31.08.2022 оформлення сторінок.
http://vsimppt.com.ua/
Сьогодні Повторимо правила поведінки та безпеки
31.08.2022 в комп’ютерному класі
Сьогодні
31.08.2022
Сьогодні
31.08.2022 Пригадаємо
1. Яким чином змінити колір тексту для
окремої частини тексту? Яких ще
параметрів може набувати
використовуваний тег?
2. Як глобально змінити забарвлення
активних, використовуваних та пасивних
гіперпосилань та тексту?
Сьогодні
Сьогодні Каскадні таблиці стилів. Стильове
31.08.2022
Каскадні таблиці стилів (CSS —

Cascading Style Sheets)
дозволяють розширити
можливості мови HTML за
рахунок більш гнучкого
форматування Web-сторінки.
Сьогодні
31.08.2022
Способи додавання стилів
Додати стиль в тег
Описати стилі в технічній

частині документу
Створити спеціальну
таблицю стилів в окремому
документі
Сьогодні
31.08.2022
Додавання стилів в тег.
Сьогодні
31.08.2022
Сьогодні
31.08.2022
Сьогодні
31.08.2022
Описання стилів в технічній частині.
Початок опису атрибутів стилю

Сьогодні
31.08.2022
Стиль .text1, котрий матиме розмір 12 пунктів, червоний

колір та шрифт Arial
Сьогодні
31.08.2022
Стиль стандартного HTML тегу font, котрий матиме розмір 12 пунктів,

зелений колір та шрифт Arial
Сьогодні
31.08.2022
Стиль стандартного HTML тегу font з використанням

каскадного стилю text2, котрий матиме розмір 12 пунктів,
синій колір та шрифт Arial
Сьогодні
31.08.2022
Аналіз результату опису стилів.
Як ви бачите text2 без тегу font не діє.

Сьогодні
31.08.2022
Теги з ідентифікаторами.
#txt1 { color: red }
Текст Текст
<p>Текст</p> <p id="txt1">Текст</p>
Сьогодні
31.08.2022
Надання стильового класу декільком тегам:
h1, h2 { font-family: "Arial" }

Сьогодні
31.08.2022
Опис стилів в окремому файлі
style.css
Сьогодні
31.08.2022
Опис стилів в окремому файлі
Сьогодні
31.08.2022
Підключення стилів до основного документу
Сьогодні
31.08.2022
Підключення стилів до основного документу
Сьогодні
31.08.2022
Форматування шрифта
font-family
p { font-family: "Arial" }
Сьогодні
31.08.2022
font-style
normal — нормальний шрифт:

p { font-family: "Arial"; font-style: normal }
italic — курсивний шрифт:
p { font-family: "Arial"; font-style: italic }
oblique — похилений шрифт:
p { font-family: "Arial"; font-style: oblique }
Сьогодні
31.08.2022
font-size
Атрибут font-size дозволяє задати розмір шрифта:
.text1 { font-size: 12pt; font-family: "Arial" }

Сьогодні
31.08.2022
font-size
Можна вказати абсолютну величину або одну із
констант — xx-small, x-small, small, medium, large,
x-large або xx-large:
.text1 { font-size: large; font-family: "Arial" }
.text1 { font-size: 150%; font-family: "Arial" }

Сьогодні
31.08.2022
color
.text1 { font-size: 12pt; font-family: "Arial"; color: red }
.text2 { font-size: 12pt; font-family: "Arial"; color: #00FF00 }
.text3 { font-size: 12pt; font-family: "Arial"; color: rgb(255, 0, 0) }

Сьогодні
31.08.2022
font-weight
100, 200, 300, 400, 500, 600, 700, 800, 900 — значення 100 співвідноситься до
більш блідого, а 900 — найбільш жирному:
p { font-family: "Arial"; font-style: italic; font-weight: 700 }
normal — нормальний шрифт. Дорівнює значенню 400:

p { font-family: "Arial"; font-style: italic; font-weight: normal }
bold — напівжирний шрифт. Дорівнює значенню 700:

p { font-family: "Arial"; font-style: italic; font-weight: bold }
Сьогодні
31.08.2022
Працюємо за комп’ютером
Сьогодні
31.08.2022
Працюємо за комп’ютером
Працюємо з інструкційними
картками
Сьогодні
31.08.2022
Сьогодні
31.08.2022 Повторюємо
1. Чому каскадні таблиці настільки
популярні при побудові сайтів?
2. Які існують способи додавання
стилів до документу?
3. Опишіть процес підключення
окремої таблиці стилів до веб-
документу.
Сьогодні
31.08.2022
Сьогодні
31.08.2022 Домашнє завдання
Опрацювати вивчений
матеріал. Підготуватись
до тестової перевірки
знань.
Сьогодні
31.08.2022
До нових зустрічей!

Urok - 11 - 10 - Klas CSS

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

Urok - 11 - 10 - Klas CSS

Uploaded by

Copyright:

Available Formats

Сьогодні

Каскадні таблиці стилів. Стильове

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

Додати стиль в тег

Описати стилі в технічній

Початок опису атрибутів стилю

Стиль .text1, котрий матиме розмір 12 пунктів, червоний

Стиль стандартного HTML тегу font, котрий матиме розмір 12 пунктів,

Стиль стандартного HTML тегу font з використанням

Як ви бачите text2 без тегу font не діє.

#txt1 { color: red }

h1, h2 { font-family: "Arial" }

normal — нормальний шрифт:

Атрибут font-size дозволяє задати розмір шрифта:

.text1 { font-size: 12pt; font-family: "Arial" }

.text1 { font-size: large; font-family: "Arial" }

.text1 { font-size: 150%; font-family: "Arial" }

.text1 { font-size: 12pt; font-family: "Arial"; color: red }

.text2 { font-size: 12pt; font-family: "Arial"; color: #00FF00 }

.text3 { font-size: 12pt; font-family: "Arial"; color: rgb(255, 0, 0) }

normal — нормальний шрифт. Дорівнює значенню 400:

bold — напівжирний шрифт. Дорівнює значенню 700:

You might also like