1 of 25

Введение в CSS

Павел Радкевич

2 of 25

Повестка дня

  1. Что такое CSS
  2. Правила CSS
  3. Подключение стилей
  4. Классы. Селекторы

3 of 25

CSS (Cascading Style Sheets)

Набор правил, управляющих отображением элементов страницы:

  • позиционирование
  • свойства блоков: размер, поля, отступы, границы, фоны, тени, ...
  • списки и таблицы
  • отображение текста
  • приоритет отображения (слои)
  • эффекты
  • анимации
  • ...

4 of 25

Правила CSS

5 of 25

Типы значений. Число

6 of 25

Типы значений. Процент

7 of 25

Типы значений. Размеры

8 of 25

Типы значений. Размеры

9 of 25

Типы значений. Абсолютные размеры

10 of 25

Типы значений. Абсолютные размеры

11 of 25

Типы значений. Цвет

  • в HEX-коде
  • через конструкции rgb(), rgba()
  • через ключевые слова

12 of 25

Цвет. Палитра RGB

Цвет складывается из трёх компонент, которые определяют интенсивность каждого из базовых цветов:

ЦВЕТ = КРАСНЫЙ + ЗЕЛЁНЫЙ + СИНИЙ

Значения цвета принимают в диапазоне 0..255

13 of 25

Цвет. Палитра RGB

14 of 25

Типы значений. Цвет

15 of 25

Типы значений. Адреса (URL)

16 of 25

Типы значений. Ключевые слова

17 of 25

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

  • подключение внешнего файла стилей
  • объявление глобальных стилей для документа
  • объявление встроенных, inline-стилей для элемента

18 of 25

Подключение CSS. Внешний файл

main.css

index.html

19 of 25

Подключение CSS. Глобальные стили

20 of 25

Подключение CSS. Inline-стили

21 of 25

Классы

Класс - именованная совокупность правил CSS.

Используются для переиспользования элементов дизайна

Используются в качестве селекторов.

22 of 25

Классы

23 of 25

Селекторы

* {} - все элементы страницы

p {} - все теги <p> на странице

.class_name {} - все элементы страницы с атрибутом class=”class_name”

24 of 25

Внеклассное чтение

25 of 25

Практика. Реферат

Оформить при помощи стилей страницу A4 с аналогичными полями и внешним видом и расположением блоков

HTML - https://jsfiddle.net/pr73Lhaq/

https://github.com/AdukarIT/_Tasks_/blob/master/referat.pdf

(шрифт Times New Roman, 14 пунктов)

font-family

font-size

font-weight

text-decoration

text-align

width

height

margin-top

margin-left

border

background-color