Архив для категории ‘каскадная таблица стилей CSS’
В статье Псевдоклассы. Часть 1 мы рассмотрели наиболее используемые псевдоклассы. А сейчас рассмотрим два псевдокласса, которые используются реже, но знать их нужно :First-child и :Lang
Псевдокласс :First-child
Особеность этого псевдокласса в том, что с его помощью выбирается элемент только тогда, когда он является первым потомком родительского элемента:
p:first-child {
color: red;
}
Это правило можно прочесть так: Вывести красным цветом текст каждого параграфа, который является первым потомком.
Здесь нужно быть внимательным поскольку есть вероятность прочесть неправильно по аналогии с Псевдоклассы. Часть 1 : Выбрать первого потомка тега <p> и выделить его красным. Я специально перечеркнул правило, чтобы вы видили, что оно не является верным.
Теперь, когда вы познакомились с основными селекторами CSS, можно перейти к изучению возможности использования в CSS следующих правил. Таким образом, вы сможете улучшить качество вашего кода, а также сократить время загрузки веб-страниц, однако если вы хотите начать использовать WordPress, но не хотите углубляться в изучение CSS, то можете быстро создать блог на бесплатной платформе.
Универсальный селектор
Этот селектор очень мощный инструмент и представлен он звездочкой (*). Его можно читать как «все элементы». Он часто используется для «сброса» полей и отступов для всех элементов страницы:
* {
margin: 0;
padding: 0;
}
Это эквивалентно тому, что записать все HTML элементы друг за другом и для каждого из них установить нулевые поля и отступы.
Обратите внимание, что такие записи для всех идентификаторов и описаний классов, используемых в CSS:
#about { ..rules..}
.post { ..rules }
идиентичны записи
*#about { ..rules..}
*.post {..rules..}
Псевдоклассы определяют состояние элементов, которое может изменяться со временем или с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. При использовании псевдоклассов браузер не перегружает страницу, поэтому с их помощью можно получить разные динамические эффекты.
Главное правило, которое Вы должны помнить, что они завершают селектор, т.е. использование селекторов после псевдокласса будет ошибкой:
:link {...правила..} /*правильно*/
a:link {...правила...} /*правильно*/
p:first-line em {...правила...} /*ошибка*/
Об основах работы с селекторами CSS я написал ранее.
Теперь давайте рассмотрим селекторы, которые формируются на основе структуры документа (страницы HTML).
Структурные селекторы
Селектор-потомок или контекстный селектор
Это первый тип селектора, который мы рассмотрим. Благодаря этому типу селектора, можно применять стили к элементам, которые являются «потомками» по отношению к другим. Все, что вам нужно сделать, это написать различные элементы, разделив их пробелом, начиная от предка к потомку. Например так:

Это тема, которая касается многих разработчиков. Стили CSS служат для определения того, каким образом содержание страницы отображается в браузерах. Как нужно применять эти стили в работе, чтобы экономить время при одновременном повышении качества?
Ответ заключается в использовании селекторов.
Давайте начнем с основ
В качестве селектора может выступать любой тег HTML для которого будут определены правила форматирования, такие как: цвет, фон, размер и т.д., и которые присутствуют на этой странице. Например, если вы хотите, чтобы текст внутри <li> элементов вашей страницы был окрашен в красный цвет, вам придется нужно написать следующее:

Работаем с селекторами CSS. Псевдоэлементы
Псевдоэлементы :first-letter и :first-line
Псевдоэлементы — это селекторы, которые выполняют простые функции: они позволяют выбрать либо первый символ либо первую строку элемента.
:first-letter — создает эффект буквицы, т.е. позволяет вывести в увеличенном, по сравнению с основным текстом, размере первую букву.
Например, напишем правило CSS:
p:first-letter{ font: bold 65px Georgia, "Times New Roman", Times, serif; color: red; }Согласно этому правилу в следующем коде первая буква будет выведена жирным шрифом, размером 65 пикселей и красным цветом.
:first-line часто используется для вывода первой строки параграфа в увеличенном размере.
Например правило CSS:
p:first-line{ font-size:120%; }выведет в следующем коде первую строку размером на 20% превышающий размер основного текста.