Введение в CSS (урок № 3)

1.

УРОК №3
Введение в CSS
И тонкости CSS

2.

CSS
Cascade Style Sheets - Каскадные таблицы стилей
Используются для оформления HTML страниц
Тоже есть версии, но разницы особо нет

3.

Пример
.modal .btn {
font-family: 'Exo 2';
font-weight: bold;
text-transform: uppercase;
border-color: #ffffff;
}
.modal .btn-primary {
background-color: #b9a791;
}
#video {
background-color: #b9a791;
}

4.

Подключение CSS
Есть три способа для работы с css
атрибут style
<p style="background-color: red;"></p>
тег style
<style>/*Тут css код*/</style>
внешний файл
<link rel="stylesheet" href="style.css">

5.

Синтаксис CSS
селектор {
свойство: значение;
свойство2: значение2;
}

6.

Синтаксис CSS
CSS селекторы позволяют нацелиться на определенный элемент.
CSS свойства - описание того, что мы хотим изменить.
Значение свойства - то, на что мы можем поменять значение.
Свойств и значений может быть несколько, они разделяются ;
Селекторов тоже может быть несколько.

7.

На первое время
color - свойство, отвечающее за цвет текста
цвет задаётся несколькими способами:
red - просто слово описывающее цвет (есть определенный набор)
#9efa00 - hex-код
rgb(0, 255, 0) - rgb-код
rgba(0, 255, 0, 0.5) - rgb с альфа каналом

8.

Простые селекторы
Для выбора элемента можно воспользоваться одним из трех простых вариантов
селекторов:
По тегу, по классу и по id

9.

class
class - атрибут, позволяющий сгруппировать несколько тегов.
<p class="my-class"></p>
Классов может быть несколько, они разделяются пробелами.
Имя класса задается самостоятельно.
Во избежание проблем не создавайте классы, состоящие только из цифр.
ОДИН И ТОТ ЖЕ КЛАСС МОЖЕТ БЫТЬ У НЕСКОЛЬКИХ ЭЛЕМЕНТОВ!

10.

id
id - атрибут, который помечает уникальным образом один из элементов.
<p id="my-id"></p>
Правила именования id такие же, как и у класса.
ID - УНИКАЛЬНЫЙ ИДЕНТИФИКАТОР И НЕ ДОЛЖЕН ПОВТОРЯТЬСЯ!
CSS нормально отработает с совпадающими id у нескольких элементов, но
проблемы будут при проверке кода валидаторами и SEO, а также при
использовании JS.

11.

Обращение по тегу, id и классу
tag { }
#id { }
.class { }
Это простые селекторы и с ними уже можно работать.

12.

Задание
1. При помощи любых тегов создайте текст из всех цветов радуги и задайте
им цвета.
2. Используйте несколько разных селекторов для разных тегов, проверьте,
как назначается цвет.

13.

Приоритеты CSS
При назначении стилей одним и тем же элементам с помощью разных
селекторов работает таблица приоритетов стилей.
#id - высокий приоритет
.class - средний приоритет
tag - низкий приоритет
Атрибут style имеет высший приоритет.
Все приоритеты отменяются при помощи !important (после значения стиля).
Использование !important не рекомендуется!

14.

Сложные селекторы
.first.second
Без пробелов - означает проверку нескольких селекторов
одновременно
.first>.second
.second находится на первом уровне вложения, т.е. является
прямым потомком (дочерним элементом) .first
.first .second
Есть пробел - .second находится на любом уровне вложения, т.е.
является любым потомком .first
.first+.second
.second находится на одном уровне с .first, т.е. является соседним,
и находится СРАЗУ за .first
.first~.second
.second находится на одном уровне с .first, т.е. является соседним,
и находится после .first
.first[attr]
.first имеет атрибут attr
.first[attr=”val”]
.first имеет атрибут attr со значением val

15.

Приоритеты сложных селекторов
Условный вес приоритета - (id, class, tag)
При комбинировании селекторов складываются соответствующие значения.
Чем больше значение, тем выше приоритет.
ПРОСТОЕ ПРАВИЛО: чем точнее селектор, тем выше приоритет.

16.

Конец
ПОСЛЕСЛОВИЕ
Давайте подведем итоги урока!
Чему мы научились? Что мы использовали?
К чему мы пришли?