| 1 |
1. Введение в КСС. КСС расшифровывается как «каскадные таблицы стилей». Этот язык отвечает за внешний вид ХТМЛ-страницы. Синтаксис языка достаточно прост: он состоит из селекторов и свойств. С помощью селекторов можно сказать браузеру какие именно элементы мы хотим оформить. Свойства описывают как именно мы хотим оформить эти элементы. То есть селекторы — это снайперский прицел, а свойства — это кисть, рубанок, скальпель и перфоратор. |
| 2 |
2. КСС-правила. Весь КСС-код состоит из повторяющихся блоков следующего вида: "селектор {свойство1: значение; свойство2: значение;}" Такой блок называется «КСС-правило». Каждое КСС-правило содержит хотя бы один селектор и свойство. Простейшие селекторы — это селекторы по именам тэгов. С их помощью можно задать стили для всех абзацев на странице, для всех ссылок или заголовков первого уровня. Такие селекторы просто содержат имя тэга без символов < и >. |
| 3 |
3. Продвинутые селекторы К более сложным селекторам можно отнести селекторы с использованием классов и псевдоклассов. Класс позволяет объединять разные элементы в смысловые группы и применять к ним одинаковое оформление. Например, можно создать класс «элементы с ошибкой» и задать ему красный цвет текста. Затем можно добавлять этот класс к любому HTML-тэгу: абзацу, заголовку, элементу списка и т.д. Класс тэга задаётся с помощью атрибута class, который содержит имя класса (или имена классов через пробел). Селектор с использованием класса задается так: ".имя_класса" |
| 4 |
4. Свойства для оформления текста. В КСС существует огромное количество свойств. Их можно разбить на следующие группы: 1 - оформление текста 2 - работа с размерами и отступами 3 - позиционирование элементов 4 - работа с сеткой страницы 5 - декоративные: цвета, фон, тени и другие. |
| 5 |
5. Свойства для задания размеров и отступов. С помощью КСС можно задавать ширину, высоту, внешние и внутренние отступы элементов, минимальную и максимальную ширину и высоту и так далее. Все свойства, которые так или иначе влияют на размеры и отступы элементов, описываются в так называемой «Блочной модели документа». Помимо свойств для отступов и размеров в блочную модель входят свойства для описания границ и очень важное свойство display, которое определяет тип элемента (блочный, строчный и другие). |
| 6 |
6.Позиционирование элементов. С помощью позиционирования можно более точно и гибко управлять расположением элементов. Главным свойством для работы с позиционированием является свойство position, которое переключает режимы позиционирования элемента. Еще четыре свойства: top, bottom, left, right, управляют расположением элемента. |
| 7 |
7. Создание сетки страницы. Типичный веб-сайт состоит из блока меню, блока с основным содержанием, боковых колонок, футера. Эти блоки могут быть расположены друг под другом, в несколько колонок или еще сложнее. Такое взаимное расположение основных блоков сайта и называют сеткой. Сетка может быть фиксированной или тянущейся, когда ширина блоков изменяется в зависимости от ширины браузера. Чтобы быстро и легко создавать сетки, нужно хорошо разбираться в блочной модели и в позиционировании. |
| 8 |
8. Декоративные свойства. Чтобы сделать страницу яркой и красивой можно использовать множество свойств: цвет текста, фон, тени, рамки, закругления и многие другие. |
| 9 |
9. Каскадность. Напомним, что КСС расшифровывается как «каскадные таблицы стилей». Почему именно каскадные? Всё дело в том, что стили для элемента могут быть определены в нескольких местах: внутри одного файла стилей и в разных файлах стилей. Браузер находит все КСС-правила, затрагивающие данный элемент, а затем комбинирует их и получает итоговый список свойств для этого элемента. Комбинирование свойств производится по четким правилам, которые опираются на приоритетность и специфичность. Название «каскадные» появилось из-за описанного механизма комбинирования стилей из разных CSS-правил. |
| 10 |
10. Каскадность и приоритеты. Когда для одного и того же элемента есть несколько КСС-правил, браузер использует понятия приоритетов и специфичности, чтобы выбрать какое-то одно из них. Упрощенно, можно сказать что: КСС-правила в тэге style самые приоритетные, за ними идет селектор с id, затем селектор с классом, затем селектор с именем тэга. На самом деле, механизм определения приоритетов и специфичности более сложный. |
| 11 |
11. Каскадность. Коктейль из классов. Одному и тому же элементу можно назначать несколько классов. Благодаря механизму каскадности, КСС-правила данных классов будут комбинироваться, а при конфликте свойств будет применяться механизм приоритетов. Назначение нескольких классов одному элементу — очень гибкий и мощный прием в арсенале веб-разработчика. Он позволяет упрощать и значительно сокращать КСС-код. Представьте, что на макете очень много блоков с одинаковым фоном, цветом текста и отступами. Вместо того, чтобы всё время повторять КСС-свойства для этих блоков, можно создать один общий класс и использовать его в ХТМЛ-коде. А если понадобится изменить внешний вид этих блоков, то нужно будет исправить всего один класс в КСС. |
| 12 |
12. Наследование. Другой важный механизм КСС — это наследование. Он заключается в том, что часть стилей может передаваться от родительского элемента к дочерним (вложенным в него). Например, все элементы внутри тэга body являются дочерними по отношению к нему. Если для body в стилях задать цвет текста красным, то цвет всех остальных элементов тоже станет красным. Еще пример: тэг ul является родительским по отношению к вложенным в него тэгам li. Если задать для ul шрифт курсивом, то и внутри всех li шрифт станет курсивным. |
| 13 |
13. Ненаследуемые свойства. Наследование работает не для всех свойств. Некоторые свойства применяются только к самому элементу и не переходят к его потомкам. К таким ненаследуемым свойствам относятся: ширина, высота, отступы, режим позиционирования и другие. Согласитесь, было бы странно задать отступы для body и обнаружить, что у всех вложенных элементов тоже появились отступы. |
Комментарии