Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Определение</a></li>

2 <li><a>Разновидности</a><ul><li><a>По элементу</a></li>

3 <li><a>По классу</a></li>

4 <li><a>По идентификатору ID</a></li>

5 <li><a>Универсальный</a></li>

6 <li><a>По атрибуту</a></li>

7 </ul></li>

8 <li><a>Группы селекторов</a></li>

9 <li><a>Выбор по отношению и расположению</a><ul><li><a>Все потомки</a></li>

10 <li><a>Потомки первого уровня</a></li>

11 <li><a>Все последующие</a></li>

12 <li><a>Первый следующий элемент</a></li>

13 </ul></li>

14 <li><a>Краткий обзор селекторов</a></li>

15 <li><a>Псевдоклассы</a></li>

16 <li><a>Специфичность</a></li>

17 </ul><p>CSS (Cascading Style Sheets или "каскадные таблицы стилей") - это формальный язык декорирования и описания внешнего вида документа/веб-страницы. Он используется в сочетании с языками разметки (HTML, XHTML и другими). Может быть применен к любым XML-файлам. Примеры - SVG или XUL.</p>

18 <p>CSS используется для визуального оформления сайтов и других документов. Разработчики называют его "язык стилей". CSS поддерживает множество элементов и инструментов. Один из них - селекторы. Далее предстоит изучить соответствующий элемент программного кода более подробно. Информация больше ориентирована на тех, кто только начинает погружение в изучение упомянутого языка.</p>

19 <h2>Определение</h2>

20 <p>Селектор - часть CCS-правила, сообщающая браузеру, к какому элементу или компонентам веб-страницы будет применяться стиль. Selector является своеобразным указателем. Он служит фундаментальным механизмом.</p>

21 <p>Selector определяет, к каким элементам применяется стиль, написанный в фигурных скобках. Другого предназначения у этого компонента нет. Выше можно увидеть наглядный пример селектора в CSS. В нем:</p>

22 <ul><li>p - selector (селектор элемента);</li>

23 <li>правило устанавливает CSS свойства, описанные в нем, для всех p-элементов на странице.</li>

24 </ul><p>Селекторов в изучаемом языке стилей очень много. Далее предстоит разобраться с основными их видами. Пользуясь одним или несколькими такими компонентами можно максимально точно применить стиль к желаемым элементам веб-страницы.</p>

25 <h2>Разновидности</h2>

26 <p>Selectors могут быть разными. К простым селекторам языка относят:</p>

27 <ul><li>селектор типа;</li>

28 <li>универсальный;</li>

29 <li>атрибутов;</li>

30 <li>идентификатора;</li>

31 <li>класса.</li>

32 </ul><p>В данную категорию также можно отнести псевдо-классы. Язык стилей поддерживает составные селекторы. Они представляют собой последовательности простых selectors, которые не разделяются комбинаторами. Это значит, что за одним таким элементом сразу идет другой.</p>

33 <p>Составной тип selectors будет самостоятельно выбирать компонент, соответствующий всем простым "механизмам", включенным в него. Первыми в последовательностях могут выступать селекторы типа или универсальный.</p>

34 <p>Сложный селектор - еще один вид механизма "задания стилей". Он представляет собой последовательность selectors, которые разделены комбинаторами.</p>

35 <p>Далее предстоит разобраться с основными селекторами CSS, которые чаще всего встречаются в программных кодах. Также будут изучены псевдо-классы и иные связанные с темой элементы.</p>

36 <h3>По элементу</h3>

37 <p>Первый базовый (простой) способ "присваивания" стилей - это селекторы по элементам (тегам). Он используется для выбора элементов по имени тега. Имеет простой синтаксис - достаточно указать "название" желаемого компонента:</p>

38 <p>Выше можно увидеть пример задания правила для всех p-элементов на странице.</p>

39 <h3>По классу</h3>

40 <p>Следующий "способ" присвоить стиль оформления - это задействовать селектор по классу. Он выбирает элементы по значению атрибута class. После обработки такой "команды" компоненты, которые содержит указанный класс, будут оформлены по желаемому стилю.</p>

41 <p>Вот пример задания правила для всех элементов, имеющих класс center. Данным шаблоном можно пользоваться для формирования собственного кода. Селектор выберет все элементы, которые содержат класс center, а затем "отредактирует" их по заданному шаблону.</p>

42 <h3>По идентификатору ID</h3>

43 <p>Этот селектор предназначается для выбора элемента по идентификатору (значению атрибута id).</p>

44 <p>Следующий код выберет компонент, который содержит footer в своем составе в качестве идентификатора. Данный механизм обозначается как символ решетки (#).</p>

45 <h3>Универсальный</h3>

46 <p>Универсальный селектор пишется через символ "звездочка" (*). Его необходимо использовать для того, чтобы выбрать (select) все имеющиеся элементы (element).</p>

47 <p>Выше - пример синтаксиса и наглядный фрагмент кода, использующий универсальный селектор CSS. Этот код означает, что механизм выберет все компоненты, расположенные непосредственно на веб-странице.</p>

48 <h3>По атрибуту</h3>

49 <p>Что значит selector и для чего он используется, понятно. В процессе формирования стиля для веб-сайта можно осуществлять выборку по имени атрибута или его значения. Для этого используется отдельный вид selectors. В случае выбора элементов по атрибуту или его параметрам необходимо использовать следующие синтаксические формы:</p>

50 <ul><li>[attr] - по имени атрибута;</li>

51 <li>[attr = value] - имя и значение атрибута;</li>

52 <li>[attr ^= value] - имя и значение, с которого "параметр" начинается;</li>

53 <li>[attr |= value] - выбор по имени и значению, которое равно value или начинается с value-;</li>

54 <li>[attr $= value] - по параметрам, которыми элемент должен заканчиваться;</li>

55 <li>[attr *= value] - по указанному атрибуту и значению, содержащее value;</li>

56 <li>[attr ~= value] - имя атрибута и его значение, которое содержит value, отделенное от других с помощью пробела.</li>

57 </ul><p>Вот - пример задания правила для всех элементов, в которых содержится атрибут data-content. Его значение должно иметь news, которое отделено от других с помощью пробела. Пример - будет выбран элемент, если у него атрибут data-content равен het-news news news-football.</p>

58 <h2>Группы селекторов</h2>

59 <p>CSS-селекторы поддерживают группировку. В этом случае стили, используемые заданным правилам, будут применяться сразу к нескольким группам или (и) классам элементов.</p>

60 <p>Чтобы все содержимое кода сразу было оформлено одним стилем, компоненты необходимо просто перечислить через запятую.</p>

61 <h2>Выбор по отношению и расположению</h2>

62 <p>Далее стоит обратить внимание на выборку селекторами языка элементов по его отношению к другим компонентам (родитель/потомок), а также по расположению в DOM (Document Object Model). Такие ситуации тоже встречаются достаточно часто.</p>

63 <h3>Все потомки</h3>

64 <p>Дочерним элементом является компонент, который произошел от другого. Таких составляющих в коде может быть множество. Чтобы обратиться ко всем потомкам B элемента A достаточно использовать конструкцию, в которой селекторы разделяются пробелом (A B).</p>

65 <p>Вложенность здесь не играет роли. Приведенный выше пример позволяет установить всем изображениям внутри элемента figure значение нижних отступов, равное 20 пикселям.</p>

66 <h3>Потомки первого уровня</h3>

67 <p>Для применения стилей CSS3 к потомкам B элемента A на первом уровне вложенности, вместо пробела необходимо написать символ ">".</p>

68 <p>В предложенном фрагменте внутри контейнера с классом .container значение нижних отступов будет равняться 40 пикселям.</p>

69 <h3>Все последующие</h3>

70 <p>Если воспользоваться селектором A ~ B, произойдет выборка каждого элемента в списке B, которые идут после A. Стоит обратить внимание на то, что "идут после" - это не означает вложенность.</p>

71 <p>Этот код CSS3 tag позволяет выбрать цвет фона всем карточкам, которые написаны после блока из класса .about_us.</p>

72 <h3>Первый следующий элемент</h3>

73 <p>Selected "+" - это символ, который позволяет выбрать среди элементов первый следующий. Это значит, что при записи A + B стиль будет применен к первому компоненту B, который следует после A.</p>

74 <p>Текст кода, опубликованный выше - это фрагмент, который позволяет задать цвет фона карточки. Выставленные параметры будут работать только в отношении элемента, который идет сразу после .about_us.</p>

75 <h2>Краткий обзор селекторов</h2>

76 <p>Основные виды CSS-селекторов, их содержание и особенности уже были изучены. Вот краткий список tag, которые помогут быстрее запомнить рассматриваемые правила:</p>

77 <ul><li>"*" - выбор любых элементов;</li>

78 <li>div - компоненты с таким tag (тегом);</li>

79 <li>#id - элемент с заданным id;</li>

80 <li>.class - выбор компонента с указанным классом;</li>

81 <li>[name=”value”] - селекторе, работающие с атрибутами;</li>

82 <li>:visited - "псевдоклассы" или остальные разные условия на элемент (рассмотрены далее);</li>

83 <li>div p - выбор элементов p, имеющихся "в родителе" div;</li>

84 <li>div > p - применение правил только к потомкам элементов div;</li>

85 <li>:last-child - правила, которые будут "выполняться" последнем из элементов в родителе.</li>

86 </ul><p>В CSS3 добавлено множество селекторов для более продуктивной работы.<a>Здесь</a>можно увидеть больше их примеров.</p>

87 <h2>Псевдоклассы</h2>

88 <p>Псевдоклассы используются для более точного выбора компонентов в зависимости от их динамического состояния или расположения. С их помощью удается установить стили при поднесении к объекту на странице курсора или стилизовать его в зависимости от порядкового номера.</p>

89 <p>Псевдоклассы - дополнения, который расширяют основные selectors. Объект будет выбираться в зависимости от его особого состояния. Добавляется псевдокласс при помощи символа двоеточия. Синтаксическая форма записи имеет всего две составляющие:</p>

90 <p>селектор:псевдокласс.</p>

91 <p>Псевдоклассами для выбора элементов в зависимости от их состояния можно назвать:</p>

92 <ul><li>:link;</li>

93 <li>:visited;</li>

94 <li>:hover;</li>

95 <li>:active;</li>

96 <li>:focus.</li>

97 </ul><p>Первые два используются исключительно для ссылок (компонентов a с атрибутом href). Остальные могут использоваться не только к ссылкам, но и к другим элементам программного кода.</p>

98 <p>Псевдокласс :link используется для выбора непосещенных ссылок:</p>

99 <p>Выше - наглядный пример задания правила для компонентов a с классом external. Заданные параметры будут работать только относительно ссылок, по которым пользователь еще ни разу не переходил.</p>

100 <p>Visited можно использовать для противоположного эффекта - чтобы выбрать посещенные ссылки на странице.</p>

101 <p>Active предназначена для определения компонентов в момент, когда они активируются пользователем на странице. Пример - посетитель https страницы нажал левую кнопку мышки, находясь на ссылке, но не отпустил ее. В основном соответствующий div class применяется для ссылок (a) и кнопок (button).</p>

102 <p>Hover используется для выбора компонентов при поднесении курсора (наведении на них):</p>

103 <p>При использовании CSS-правил для ссылок с рассмотренными псевдоклассами их располагают в следующем порядке:</p>

104 <p>При ином размещении часть написанного программного кода может работать неисправно или вовсе не функционировать.</p>

105 <p>Focus используется для выбора компонента, который на текущий момент расположен непосредственно в фокусе. Пример - состояние, которое активируется при клике мышью в текстовом поле или при переходе в него через клавишу tab, расположенную на клавиатуре.</p>

106 <p>Таблица выше поможет лучше ориентироваться в псевдоклассах селекторов.</p>

107 <h2>Специфичность</h2>

108 <p>Один и тот же компонент веб-страницы может быть прописан в разных стилях. Для этого в CSS-документе какое-то свойство получает разные значения. Браузер будет при запуске портала выбирать нужный вариант. Для этого рекомендуется подключить правило с более высокой специфичностью.</p>

109 <p>Специфичность - показатель, по которому интернет-обозреватель определяет, какие стили применять для того или иного случая. Представляется в виде 4-х чисел 0.0.0.0, где каждый разряд - это вес, определяемый при помощи специальных правил:</p>

110 <ul><li>наивысший приоритет - у стилей с атрибутом style (1.0.0.0);</li>

111 <li>второе место - селекторы по идентификатору (0.1.0.0);</li>

112 <li>равноправные группы;</li>

113 <li>CSS селектор по тегу (ul li и так далее);</li>

114 <li>selectors по классу, атрибуту, псевдоклассы;</li>

115 <li>по тегу и псевдоэлементы;</li>

116 <li>комбинаторы.</li>

117 </ul><p>Псевдоклассы is, has и not имеют вес, который равен весу самого специфичного селектора внутри скобок.</p>

118 <p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>!</em> </p>

119