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

Содержание

Слайд 2

Человек Одежда Сайт CSS-стили Аналогия:

Человек

Одежда

Сайт

CSS-стили

Аналогия:

Слайд 3

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

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

Делают сайты такими, какими мы привыкли

их видеть.
Красивыми
Слайд 4

Что будет, если стили на сайте отключить? Встречайте, Medium

Что будет, если стили на сайте отключить?

Встречайте, Medium

Слайд 5

Немного CSS-магии

Немного CSS-магии

Слайд 6

Цели: Научиться подключать CSS-стили тремя способами Узнать об особенностях каждого из них Научиться выбирать оптимальный способ

Цели:

Научиться подключать CSS-стили тремя способами
Узнать об особенностях каждого из них
Научиться выбирать

оптимальный способ
Слайд 7

Как запоминать CSS-свойства: Фоновый цвет => background-color Цвет => color

Как запоминать CSS-свойства:

Фоновый цвет => background-color
Цвет => color
Размер шрифта => font-size
Жирность

шрифта => font-weight
Ширина => width
Высота => height
Граница => border
Слайд 8

Способ #1 Инлайновые стили



Способ

#1 Инлайновые стили
Слайд 9

1 способ: инлайновые стили Задаются прямо у элемента в атрибуте

1 способ: инлайновые стили

Задаются прямо у элемента в атрибуте style

= “property : value”>


Если нужно задать более одного стиля, значения разделяются точкой с запятой


Слайд 10

Инлайновые стили: особенности Свойства CSS У CSS есть много полезных свойств

Инлайновые стили: особенности

solid yellow;”>

Свойства CSS



У CSS есть много полезных свойств



Слайд 11

Инлайновые стили: особенности Свойства CSS У CSS есть много полезных

Инлайновые стили: особенности

solid yellow;”>

Свойства CSS



У CSS есть много полезных свойств



Что тут написано? Стилей БОЛЬШЕ, чем текста

Слайд 12

Инлайновые стили: особенности Свойства CSS У CSS есть много полезных свойств

Инлайновые стили: особенности


Свойства CSS


У CSS есть много полезных свойств



Слайд 13

Инлайновые стили: особенности Когда тегов много и стилей много, ухудшают

Инлайновые стили: особенности

Когда тегов много и стилей много, ухудшают читаемость

кода
Можно приписать непосредственно к элементу => имеют наибольший приоритет
Слайд 14

p {color: black} div {font-size: 18px} Способ #2 тег


Способ #2 тег

Слайд 16

2 способ: стили в теге Применяются ко всем элементам на

2 способ: стили в теге То есть все элементы div на странице будут иметь 18 размер шрифта

Слайд 17

2 способ: стили в теге Имеют меньший приоритет, чем инлайновые

2 способ: стили в теге