[Udemy] CSS - 45 видеоуроков (Оганнес Торосян)

• Вы узнаете что такое CSS, для чего нужен и как его правильно использовать.

• теги не дублируются;
• документ проще обслуживать;
• внешний вид всего сайта можно изменить централизованно, а не корректировать форматирование каждой странички.

Спойлер
селектор { свойство: значение ;}
тег html Объявление
класс
id
Что такое селектор в CSS? Это конструкция, которая позволяет выбрать отдельные или однотипные элементы на странице, чтобы их стилизовать. С селектора начинается каждый блок объявлений в CSS:
.my-class {
background-color: #999;
}
В качестве селектора в примере используется my-class. Все элементы с этим классом получают единое оформление — серый фон цвета #999.
Каскады в CSS
И всё-таки почему CSS — это именно Cascading Style Sheets? Дело в том, что в единую схему стили организуются при помощи каскада. Вот простой пример, который также поможет понять, что такое CSS-код и как он выглядит:
p {
color: green;
font-size: 20px;
}
p {
color: red;
}
При помощи каскадов мы присвоили элементу p красный цвет. Зелёный цвет, указанный выше красного, учитываться не будет. Используется то значение параметра, которое указано ниже, и это помогает избежать конфликтов. При этом размер шрифта — 20 пикселей — не меняется. Если упростить написанное выше, то получится:
p {
color: red;
font-size: 20px;
}
Кроме того, один элемент можно сделать зависимым от нескольких селекторов разного типа. Пример:
p {
color: red;
}
p.important {
font-size: 20px;
}
#intro {
font-style: italic;
}
Чтобы использовать все параметры, в HTML указываем:

CSS упрощает форматирование документов.

Здесь мы присвоили элементу следующие свойства: он красный, размером 20 пикселей и написан курсивом. Важно, что в данном случае у разных селекторов — разный приоритет. Их порядок:

• Селектор типа элемента (p).
• Селектор класса (.important).
• Селектор id (#intro).

1 — низкий приоритет, 3 — высокий.
Приоритеты в CSS
Обговорим подробнее вопрос приоритетов. Их иерархия работает следующим образом:

• Самый высокий приоритет у свойств, в конце объявления которых указано !important.
• Затем идут инлайновые стили, которые прописываются в теге через атрибут style.
• Ещё ниже приоритет стилей, заданных в теге style в самом документе.
• Далее следуют стили, подключённые к документу как внешний CSS-файл с использованием тега

Методологии CSS
Начинающему веб-мастеру для работы с CSS достаточно просто знать, что такое стили и как их использовать, изучить основные свойства и способы их задавать. А вот при работе с большими проектами уже необходимо использовать специализированные инструменты, а также чёткие стандарты написания CSS. Иначе другие разработчики просто не смогут нормально обслуживать код.
Единой методологии CSS нет. Существует несколько вариантов, и задача разработчика — выбрать ту методологию, которая оптимально ему подходит. Но сначала стоит разобраться с основами, научиться работать с CSS. Кстати, новые варианты появляются не так уж редко, так что за новинками стоит следить.
Наиболее популярные современные методологии CSS — это Atomic CSS (Functional CSS) и CSS в JavaScript. В основе первого варианта лежит использование максимального количества базовых классов, чтобы как можно чаще применять их повторно. Сторонники второго варианта считают, что стили CSS стоит определять не в отдельной таблице, а внутри каждого компонента.
Будущее CSS
CSS постоянно развивается — сейчас активно разрабатывается уже третье поколение этого стандарта. В нём спецификация разделяется на модули, причём разработка и развитие каждого из них идут независимо. Разработчики современных браузеров постепенно расширяют поддержку стандарта CSS3.
Несколько лет назад начало формироваться и четвёртое поколение стандарта CSS, но пока спецификации находятся на уровне драфтов.

Нажмите, чтобы раскрыть...

• Начинающие веб-разработчики.