Разбор селекторов, псевдоклассы и псевдоелементы

Группировка селекторов

Группировку селекторов производят чисто из-за удобства, то есть без нее можно обойтись, но иногда она упрощает нам жизнь, вот простой пример группировки:

Значение * обозначает правило для всех элементов страницы, то есть в данном случае любой цвет на странице будет черный.

Псевдоклассы и псевдоэлементы

Все мы знаем о таком понятии, как ссылки, их есть три вида состояния.

• Не посещенная — синия
• Посещенная — фиолетовая
• Активная — красная

С помощью псевдоклассов мы можем переопределить значение цвета этим ссылкам.

Здесь такой момент, псевдокласс hover можно применить к любому элементу, к тому же div, p, strong. Но на практике мы применяем только на ссылках. Все выше, это псевдоклассы, но давайте пару моментов с псевдоэлементов рассмотрим.

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

Свойства шрифтов

Свойство font-family задает тип шрифта либо его семейство, а мы с вами знаем, что все шрифты объединяются в семейства характеризующие их вид.

Семейство шрифта

 

Во второй строке указаны два шрифта Arial и Geneva, если их не будет на компьютере пользователя, тогда взять любой шрифт из семейства шрифтов sans-serif.

Размер шрифта

Теперь рассмотрим свойство font-size, которое задает размер шрифта. Можно указать в значении как величину, так и соотношение в процентах. Можно задать в px или em.

Жирность шрифта

Помимо размера шрифта, можно задать ему жирность с помощью свойства font-weight, это свойство имеет следующие значения:  normal | bold | bolder | lighter | [100-900]. Укажите вашему любому элементу это свойство и проставьте какое-либо значение из перечисленных выше.

Стиль шрифта

Также шрифту можно задать стиль через свойство font-style, и здесь применимо два значения normal и italic, второе делает его курсивом, как тег i ранее.

Вариант шрифта

Есть еще такое свойство, как вариант шрифта и пишется оно вот так font-variant, ну и имеет два значения, по умолчанию normal, но можно задать и small-caps. Работает следующим образом К примеру есть у нас большая и маленькая буква B b, так вот при small-caps еще одна большая B будет по размерам с маленькую.

Все эти свойства шрифтов можно еще записать одной строкой вот в таком виде: font: style (|) variant (|) weigth (|) size family. То есть пишем свойство font и начинаем перечислять для него значения, последовательность должна быть именно такой, как я написал выше. Значений может быть не 5, а меньше, но два с них обязательны: size и family.

Свойства текста в css

Мы уже разобрались со свойствами шрифтов и пора переходить к свойствам текста, что мы прямо сейчас и сделаем.

Выравнивание текста

Мы уже с вами на первых занятиях рассматривали атрибут align для тегов, теперь пришло время рассмотреть его при помощи css. Свойство выравнивания текста задается так text-align и имеет 4 значения, которые вам уже знакомы: left | right | center | justify. Давайте на примере зададим любому с наших абзацев выравнивание по правому краю и посмотрим на результат.

Декорация текста

Свойство декорации текста задается text-decoration и  содержит в себе 4 значения:

• none — обычный (по умолчанию)
• overline — надчеркнутый текст
•  underline — подчеркнутый текст
• line-through — перечеркнутый текст

Попробуйте любой ссылке задать свойство text-decoration со значением none и вы увидите, что у ссылки пропадет подчеркивание. Вот так оно работает. В большинстве случаем данное свойство мы будем применять при работе с ссылками.

Красная строка

Есть в документах, особенно в работе с Word понятие красной строки, это задание отступа с лева на право первой строке в любом абзаце. Ну и в css это свойство также есть и пишется следующим образом text-indent, а значение задается величиной либо процентами.

Трансформация текста

Еще одним замечательным свойством есть text-transform, который имеет четыре значения:

•  none — по умолчанию обычный вид
• capitalize — первая буква в каждом слове заглавная
• uppercase — все буквы в верхнем регистре
• lowercase — все буквы в нижнем регистре

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

Буквенное расстояние

Как и в обычном наборе текста, так и в верстке можно задать расстояние между буквами свойством letter-spacing, а значение либо нормальное (normal по умолчанию) либо величина (px).

Но еще можно задать расстояние и между словами с помощью свойства word-spacing, и в нем аналогичные два значения — нормальное состояние и величина.

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

Вертикальное выравнивание

Работает по принципу надстрочный и подстрочный индекс. Свойство задается так vertical-align и имеет два значения:

• sub — подстрочный индекс
• super — надстрочный индекс

Вот пример:

Как видите работает на отлично, вот как оно выглядит в браузере:

H2O

183=5832

Межстрочный интервал

Задается свойством line-height и значения имеет следующие: нормально (normal), величина и процентное соотношение. В верстке частенько используется для задания расстояний в определенных участках верстки.

Свойства цвета и фона

Цвет и фон мы с вами уже изучили, эти два свойства задаются colorи background-color и в значениях указываются цвета. О цветах более подробно можно прочесть в интернете, как они строятся по модели RGB, какие цвета можно задать в значением именем цвета и т.д.

Фоновое изображение

Фон при верстке можно задавать любому элементу, начиная с body и до строчного элемента span, свойство это пишется вот так: background-image и либо имеет в значении путь к изображению, либо значение none, то есть без фона. После задания фона, по умолчанию картинка начинает свое повторение с верхнего левого угла и повторяется (дублируется) до тех пор, пока не заполнит все окно браузера.

Позиция картинки

Чтобы задать вот это самое повторение картинки с другого места существует свойство background-position, оно и определяет откуда будет идти это самое повторение. Значений есть несколько: top | bottom | left | right | center | величина | %, как видите можно с низу, с права и даже задать в пикселях откуда начнется повторение.

Повторение фона

Что делать, если нам это повторение не нужно вовсе? Здесь вступает в силу еще одно свойство фоновых изображений, а именно background-repeat, и уже в его значении мы указываем необходимые параметры:

• repeat — повтор (по умолчанию)
• repeat-x — повтор только по x (горизонтально)
• repeat-y — повтор только по y (вертикально)
• no-repeat — не повторять

Здесь надеюсь все понятно, хотим задаем повторение по определенным осям или убираем его вовсе.

Фиксированный фон

Вы уже наверное заметили, что при большой странице документа фон чередуется везде, даже если мы его скролим немного вниз, но этот фон движется вместе с содержимым самой страницы, можно его зафиксировать и здесь вступает в силу еще одно свойство background-attachment, которое имеет два значения: fixed и scroll. Значения и так понятны.

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

Используя свойство background мы можем перечислять в нем все значения доступные свойствам, которые мы только что рассмотрели, при этом в отличие от свойства шрифта, здесь не важна последовательность и количество. Вы помните, что в третьем занятии мы к этому свойству писали лишь фон!

Применение css в списках

Мы с вами уже создавали списки нумерованные, маркированные и вложенные, а теперь поговорим о стилях, которые можно применять к этим спискам. Первый стиль можно применять как к нумерованному, так и к маркированному, это свойство пишется вот так: list-style-type, а в значении мы пишем как раз то, что задавали в атрибутах ранее при создании списка.

То есть для маркированного списка (ul) мы можем задать четыре значения для свойства list-style-type:

• none — нет марок в списке
• disc — кружочки
• circle — пустые кружочки
• square — квадратики

А для нумерованного списка в таком же свойстве  list-style-type имеются следующие значения:

• none — нет цифр в списке
• decimal — значение по умолчанию
• lower-alpha — латинские буквы нижнего регистра
• upper-alpha — латинские буквы верхнего регистра
• lower-roman — римские маленькие цифры
• upper-roman — римские большие цифры

Разберем еще несколько свойств, которые относятся к спискам: list-style-position: outside | inside Значение outside идет по умолчанию, но можно задать еще значение inside. На что же это влияет, а влияет это как раз на отношение символов, которые рядом со списком. Чтобы понять это на практике, давайте зададим нашим <li></li> какой-то цвет, а потом для ul укажем свойство list-style-position.

И сохранив посмотрите на результат.

Очень интересным моментом есть то, что вместо вот этих всех кружочков, квадратиков можно указать свое изображение с помощью свойства list-style-image в значении которого и указываем путь к картинке, ну и как без примера:

пример работы такой вставки можно наблюдать у меня в блоге во всех списках))). Как и в шрифтах и изображениях можно использовать сокращенное написание, так и в списках есть такая возможность и выглядит эта запись вот так: list-style: none inside url(‘point.gif’). Свойство list-style, и три значения: тип, позиция и изображение маркировки.

На сегодня мы закончим наше занятие по css и естественно я вам рекомендую поупражняться и сделать разные значения изученных свойств с сегодняшнего занятия.