1 of 30

Каскадные таблицы стилей. Стилевое оформление страниц.

Выполнил: Ткач Я.Р.

2 of 30

Хвилина Патріотичного Виховання�Цікаво знати

Рейтинг топ-запитів українців у Google в другій половині лютого

Топ-запитів українських користувачів Google за період 18.02.2019 - 24.02.2019 очолюють «Привітання з 23 лютого», австралійський натураліст, актор, тележурналіст і телеведучий Стів Ірвін, а також померлий модельєр Карл Лагерфельд.

​

1. Поздравления с 23 февраля�2. Стив Ирвин�3. Карл Лагерфельд�4. Динамо Олимпиакос�5. Maruv�6. Оскар 2019�7. Лига чемпионов 2019�8. Музика 2018 популярна�9. Масленица 2019 дата�10. Анна-Мария

3 of 30

  1. Каким образом изменить цвет текста отдельной части текста? Каких еще параметров может приобретать используемый тег?
  2. Как глобально изменить окраску активных, используемых и пассивных гиперссылок и текста?

Актуализация опорных знаний

4 of 30

Каскадные таблицы стилей (CSS - Cascading Style Sheets) позволяют расширить возможности языка HTML за счет более гибкого форматирования Web-страницы.

Каскадные таблицы стилей. Стилевое оформление страниц.

5 of 30

Способы добавления стилей

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

Описать стиле в технической части документа

Создать специальную таблицу стилей в отдельном документе

Каскадные таблицы стилей. Стилевое оформление страниц.

6 of 30

Добавление стилей в тег.

Каскадные таблицы стилей. Стилевое оформление страниц.

7 of 30

Добавление стилей в тег.

Каскадные таблицы стилей. Стилевое оформление страниц.

8 of 30

Добавление стилей в тег.

Каскадные таблицы стилей. Стилевое оформление страниц.

9 of 30

Описание стилей в технической части.

Начало описания атрибутов стиля

Каскадные таблицы стилей. Стилевое оформление страниц.

10 of 30

Описание стилей в технической части.

Стиль .text1 который будет размер 12 пунктов, красный цвет и шрифт Arial

Каскадные таблицы стилей. Стилевое оформление страниц.

11 of 30

Описание стилей в технической части.

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

Каскадные таблицы стилей. Стилевое оформление страниц.

12 of 30

Описание стилей в технической части.

Стиль стандартного HTML тега font с использованием каскадного стиля text2 который будет размер 12 пунктов, синий цвет и шрифт Arial

Каскадные таблицы стилей. Стилевое оформление страниц.

13 of 30

Анализ результата описания стилей.

Как вы видите text2 без тегу font не действует.

Каскадные таблицы стилей. Стилевое оформление страниц.

14 of 30

Теги с идентификаторами.

#txt1 { color: red }

<p id="txt1">Текст</p>

<p>Текст</p>

Текст

Текст

Каскадные таблицы стилей. Стилевое оформление страниц.

15 of 30

Предоставление стилевого класса нескольким тегам:

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

Каскадные таблицы стилей. Стилевое оформление страниц.

16 of 30

Описание стилей в отдельном файле

style.css

Каскадные таблицы стилей. Стилевое оформление страниц.

17 of 30

Описание стилей в отдельном файле

Каскадные таблицы стилей. Стилевое оформление страниц.

18 of 30

Подключение стилей к основному документу

Каскадные таблицы стилей. Стилевое оформление страниц.

19 of 30

Подключение стилей к основному документу

Каскадные таблицы стилей. Стилевое оформление страниц.

20 of 30

Форматирование шрифта

font-family

p { font-family: "Arial" }

Каскадные таблицы стилей. Стилевое оформление страниц.

21 of 30

Форматирование шрифта

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 }

Каскадные таблицы стилей. Стилевое оформление страниц.

22 of 30

Форматирование шрифта

font-size

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

​

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

Каскадные таблицы стилей. Стилевое оформление страниц.

23 of 30

Форматирование шрифта

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" }

Каскадные таблицы стилей. Стилевое оформление страниц.

24 of 30

Форматирование шрифта

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) }

Каскадные таблицы стилей. Стилевое оформление страниц.

25 of 30

Форматирование шрифта

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}

Каскадные таблицы стилей. Стилевое оформление страниц.

26 of 30

Интересно знать

27 of 30

Работаем с инструкционных карточками

Работаем за компьютером

28 of 30

Физкультминутка

29 of 30

  1. Почему каскадные таблицы настолько популярны при построении сайтов?  
  2. Какие существуют способы добавления стилей к документу?
  3. Опишите процесс подключения отдельной таблицы стилей веб-документа.

Подведение итогов урока

30 of 30

Домашнее задание

Проработать изученный материал. Подготовиться к тестовой проверки знаний.