869.57K

Категория:

Интернет

Похожие презентации:

HTML+CSS, верстка

HTML+CSS (верстка)

Основы Интернет-технологий

Базовый синтаксис CSS в HTML

CSS (Cascading Style Sheets - каскадные таблицы стилей)

Базовый синтаксис CSS

Cascading Style Sheets. Спецификация CSS

Каскадные таблицы стилей CSS. Управление стилем отображения элементов

Использование стилевых спецификаций. (Тема 3)

Тема 2. Каскадные таблицы стилей CSS

Псевдоэлементы. Псевдоклассы

1. Псевдоэлементы

<body>
<body>
::before
<div class="box"></div>
</body>
::after
</body>
.box
::before
::after

2. Псевдоклассы

:hover
:first-child
:last-child
:first-of-type
:last-of-type
:nth-child
:nth-of-type
:hover

3. Шрифт

- Семейство шрифтов
- Размер
- Начертание
- Насыщенность

4. Шрифт. Семейство

font-family: <значение>;
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans.woff“) format("woff");
}

5. Шрифт. Размер

font-size: <цифра><ед.измерения>;
font-size: 16px;

6. Шрифт. Начертание

font-style: <значение>;
font-style: normal;
Пример строки обычного начертания
font-style: italic;
Пример строки курсивного начертания

7. Шрифт. Насыщенность

font-weight: от 100 - 900;
font-weight: 400;
Пример обычной строки
font-weight: 600;
Пример насыщенной строки

8. Текст

- Горизонтальное выравнивание
- Высота строки
- Расстояние между буквами
- Трансформация
- Декорирование
- Цвет

9. Текст. Горизонтальное выравнивание

text-align: <значение>
слева
left
по центру
center
справа
right

10. Текст. Высота строки

line-height: <множитель>|<px>|normal
Множитель:
Размер текста * множитель line-height
normal – расстояние между строками
вычисляется автоматически

11. Текст. Расстояние между буквами

letter-spacing: <число><ед.измерения>
Пример строки с letterspacing 4px

12. Текст. Трансформация

Text-transform: <значение>
text-transform: uppercase
ПРИМЕР СТРОКИ UPPERCASE
text-transform: lowercase
пример строки lowercase

13. Текст. Декорирование

text-decoration: <значение>
Некоторые значения:
underline – линия под текстом
line-through – перечерктуный текст
none – декорирование отключено

14. Текст. Цвет

color: <цвет>|<ключевое слово>
Белый цвет в разных кодировках:
HEX - #FFFFFF
RGB – (255, 255, 255)
RGBA – (255, 255, 255, 1)

15. Фон

- Цвет
- Граница фона
- Изображение
- Повтор изображения
- Размер изображения
- Позиционирование изображения
- Граница изображения

16. Фон. Цвет

background-color: <цвет>|<ключевое слово>

17. Фон. Граница фона

18. Фон. Изображение

background-image: url("<ссылка>");

19. Фон. Повтор изображения

background-repeat: <значение>
repeat – повторять по вертикали и
горизонтали
repeat-x – повторять по горизонтали
repeat-y – повторять по вертикали
no-repeat – отключить повторение

20. Фон. Размер изображения

background-size: <цифра><ед.измерения>
Дополнительные значения:
contain – изображение подстраивается
под размеры блока, вмещаясь полностью
cover – высота и ширина изображения
соответствуют размерам блока.

21. Contain vs Cover vs Default

200 px
Контейнер 100 x 100
Изображение
250 px
contain

22. Contain vs Cover vs Default

200 px
Контейнер 100 x 100
Изображение
250 px
cover

23. Contain vs Cover vs Default

200 px
Контейнер 100 x 100
Изображение
250 px
auto
(default)

24. Фон. Позиционирование

background-position: <значение> <значение>
center
top
left
bottom
right

25. Фон. Позиционирование

center
left
top
bottom

26. Фон. Граница изображения

27. Форматирование

- Выравнивание элемента
- Показать/скрыть элемент
- Cодержание элемента
- Способ отображения элемента

28. Выравнивание элемента

float: <значение>
left
right

29. Показать/скрыть элемент

visibility: <значение>
visible – показать
hidden – скрыть

30. Строчные элементы

display: inline;
Lorem ipsum dolor sit
adipiscing
sed
amet consectetur
eiusmod
elit amet ipsum
Нельзя задать размеры, можно
оттолкнуться от соседних элементов по
горизонтали

31. Блочные элементы

display: block;
Ширина 90px
Ширина 50%
С блочными элементами
можно все
Ширина 100%

32. Строчно-блочные

display: inline-block;
Такие элементы ведут себя, как сточные,
но поддерживают все стили блочных

33. Размер

Высота
Ширина
Макс. высота
Макс. ширина
Мин. высота
Мин. ширина

34. Размер. Высота

height: <число><ед.измерения>|auto
max-height: <число><ед.измерения>
min-height: <число><ед.измерения>

35. Размер. Ширина

width: <число><ед.измерения>|auto
max-width: <число><ед.измерения>
min-width: <число><ед.измерения>

36. Содержание элемента

overflow: <значение>
visible
hidden
scroll

37. Отступы

Внутренние
Внешние
Внутренний отступ
между контентом и
границей элемента
Внешний отступ между
элементами
Свойство: padding
Свойство: margin
Контент
Контент
Контент

38. Позиционирование

- Способ позиционирования
- Положение по оси X и Y
- Положение по оси Z

39. Способ позиционирования

40. Положение по оси X и Y

top
right
left
bottom
Контейнер

41. Положение по оси Z

z-index: <число>
Всего 3 шт.
ось Z

42. Положение по оси Z

English Русский Правила