Каскадные таблицы стилей css

При вступлении хочу сказать следующее, в css, это главное понятие что и для чего мы делаем. В этом весь успех курса по сути и зависит, когда вы будете понимать для чего вы редактируете и ставите то или иное значение определенному элементу, это уже успех!

Основные понятия css

Стили, это определенные правила для определенных элементов разметки html. Стили состоят с свойства и его значения, это напоминает нам атрибуты в html. Отдельное свойство со значением называется Декларацией, если их несколько, тогда ставится разделитель ; сразу после первой декларации. Обратно же припомним html, там разделитель между атрибутами играл пробел.

Набор деклараций принято называть правилами. Чтобы было проще понять принцип работы со стилями рассмотрим два простые и очень часто используемые свойства. Итак работать будем со свойством цвета текста и цвета фона, а именно свойство — color и свойство — background.

Когда мы выбрали свойства для применения стал открытым вопрос, куда и где и как применить эти цвета? Правила применяются к селекторам, такое интересное слово)))

Селектор это часть CSS-правила, которая определяет элемент или элементы, к которым будет применён блок объявлений (стиль), содержащий форматирующие свойства.

Теперь о практике применения стилей в верстке или задании стилей для нашего документа. Есть три способа применения стилей к нашим элементам html страницы.

Каждый из способов имеет свои определенные преимущества перед другими. Начнем с самого простого способа, а именно inline, вложенный. Этот способ помогает применить стиль к определенному элементу на странице используя атрибут style. Как использовать атрибуты мы уже с вами знаем.

 

Сохраните и просмотрите на результат, а теперь попробуйте задать что-то подобное для другого параграфа используя другие цвета и снова просмотрите на результат.

На практике рекомендую использовать этот вариант только в случае большой надобности. Ибо самим правильным использованием будет последний способ. А сейчас перейдем ко второму способу применения стилей к документу.

Итак вторым способом есть так называемый встраиваемый стиль. Прошу обратить внимание, внутри блока head ибо это служебная информация, которая только для браузера предназначается. В хеде мы прописываем тег, вот такой стайл элемент, парный при всем этом! А внутри открывающего тега можно указать атрибут задающий тип стиля будущего кода.

 

Как видите выше в примере кода я использовал цвет текста и фона ко всем тегам параграфа на этой странице, и теперь сколько бы их не было далее все они будут иметь такие свойства. Но это не касается параграфа, которому мы ранее индивидуально задали стиль с помощью атрибута style.

Данный пример кода называется — селектором тега p. Еще раз, в хеде мы пишем парный тег style а в нем уже перечисляем все свойства и значения, которые задаем для страницы.

Как и в html в css есть комментарии и имеют они следующий вид:

 

То есть начинаются они с /* и заканчиваются */. 

Рассмотрим третий способ подключения стилей к нашему документу, это самый правильный и самый распространенный прием использования css на практике. Открываем новый документ в редакторе и скопируем туда все правила с тега style нашей страницы, а на странице закомментируем. Сохраняем новый документ с именем style.css, то есть указываем ему расширение css.

Теперь все наши стили находятся во внешнем документе, осталось их только подключить к нашей страницы, вот этим мы и займемся сейчас. Обратно же в служебном теге head прописываем следующий код:

 

Итак, тег link это одиночный тег, который присоединяет к нашей страницы что-то, в данном случае это наши стили. Атрибут rel указывает, что это именно таблица стилей, а второй атрибут задает тип этих стилей. Последний нам уже знакомый атрибут указывает откуда брать эти стили. Вот таким способом мы подключили внешний файл с стилями.

Почему стили называются каскадными, а все потому, что имея на одну страницу все три подключения стилей, браузер будет применять их относительно близости к элементам. Что это нам говорит, что если во внешних стилях параграфам задан цвет текста синий, а внутри мы зададим с помощью инлайн элемента черный цвет, то приоритетнее будет для него черный!

Чтобы понять чего я вам здесь рассказываю сделайте это на практике.

Наследование в стилях

Давайте рассмотрим вот такой пример:

 

Вот так это будет выглядеть в браузере:

Разберем все по порядку. Браузер начинает считывать элементы страницы, доходит к первому div и смотрит, что у него цвет текста зеленый, отображает нам зеленый текст, идет ко второму div и видит там уже желтый фон, но так как этот второй div вложен в первый, он наследует его стиль в цвете и получает свой желтый фон с унаследованным цветом текста. Дойдя к третьему div браузер видит, что здесь индивидуально задан другой цвет текста, но фон остался унаследованным от второго div.

Надеюсь вы хоть немного поняли принцип унаследования элементов. Это важный момент, который стоит понять и применять на практике при верстке ваших сайтов.

Единицы измерения

Относительные

Основные единицы измерения в css это:

• px — пиксели
• % — проценты
• em — размеры шрифта (по умолчанию em = ширине букве m текущего шрифта)
• ex — размеры шрифта (высота буквы ‘x’ используемого шрифта)

Абсолютные

• cm — сантиметры
• mm — миллиметры
• in (2.54 cm) — дюймы
• pt (1/72 in) — пункты
• pc (12 pt) — пики

Абсолютными никто не пользуется, но вы должны знать, что они в значениях имеют право быть.

Использование цвета в css

Указание цвета при помощи css есть несколько вариантов. Во первых много цветов имеют свои прямые названия, то есть указываем в значении свойства color соответствующее название и получаем цвет.

Шестнадцатеричная система

Вторым традиционным указанием цвета есть шестнадцатеричная система управления цветом. Шестнадцатеричный код цвета представляет собой шесть символов, стоящих после символа #:ff55cc

Каждый набор двух символов представляет номер от 0 до 255. Так первые два символа представляют красный (red) цвет, следующие два — зеленый (green) и последние два — синий (blue). В этом шестнадцатеричный код очень похож на RGB с тем отличием, что тут каждый цвет задан в шестнадцатеричной системе счисления вместо десятичной.

Здесь используются для указания цифры от 0 до 9 и латинские цифры a, b, c, d, e, f. Более детально о цветах  и их строении можно прочесть в интернете, в данном курсе я лишь поверхностно называю применяемые цвета.

В формате RGB

• rgb(0, 240, 125) — указание в точных числах в модели rgb
• rgb(0%, 80%, 25%) —  указание в процентном соотношение каждого из трех цветов.

Знакомство с селекторами

Вот в этом примере кода мы видим селекторы тегов p и h2, другими словами это набор правил примененных к определенным тегам html страницы:

 

Здесь все понятно. Но есть объединение в классов, так называемый селектор класса. Что это такое и с чем его едят, разные элементы страницы мы можем объединить, сгруппировать по определенным признакам, этими признаками могут быть, цвет, фон, значение чего либо, даже расположение.

Класс задается атрибутом для тега, вот пример задания класса тегу p и тегу h2.

А вот так он пишется в таблице стилей:

 

Всегда в задании стиля перед указанием класса ставится точка. Следует понимать, что класс всегда приоритетнее перед элементом, то есть перед тегом.

Бывает такое, что нужно выделить какой-то один элемент, вот в таком случае вместо класса мы задаем/присваиваем атрибут id для этого элемента. Как задавать атрибут id любому с тегов мы проходили ранее в предыдущих занятиях.

А теперь посмотрим, как задать стиль этому id в таблице стилей:

 

Это селектор id, то есть есть селектор тега, селектор класса, а это селектор id.

Разберем еще такой вариант применения: к примеру есть у нас 4 параграфа и два абзаца, все они объединены классом standart:

И к примеру этому классу задан фон серый.
Но у нас появилась задача задать всем заголовка второго уровня другой цвет ,к примеру зеленый, что мы делаем. Создаем новое правило для наших заголовков:
 

То есть указываем, что всем элементам h2 с классом .standart присвоить зеленый цвет текста. Заметьте это не распространяется на параграфы, они так и остались черного цвета.

И последний селектор, который я рассмотрю, это контекстный селектор. Задает применение определенного правила к элементу вложенному в другой элемент. Ну и как же без примера:

Мы видим, что в блочном элементе div находятся два строчных элемента em и strong. К элементу em применим правило:
 

В правиле мы задаем этому элементу золотой цвет. И только он будет золотым, а остальное содержимое div останется черным.

На сегодня достаточно, прошу поупражняться со всем, что мы в этом занятии прошли, чтобы освоить и понять, как это работает на практике.