30 CSS-селекторов, о которых полезно помнить

• Главная
• ->
• Материалы
• ->
• 30 CSS-селекторов, о которых полезно помнить

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

30 CSS-селекторов, о которых полезно помнить

Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.

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

1. *

* {
 margin: 0;
 padding: 0;
}

Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.

Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для «обнуления» всех внешних и внутренних отступов.

Также символ * можно использовать для дочерних элементов объекта.

#container * {
 border: 1px solid black;
}

Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

2. #X

#container {
   width: 960px;
   margin: auto;
}

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

«Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?»

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

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

3. .X

.error {
  color: red;
}

Это селектор класса. Разница между id и классами в том, что с помощью классов можно выбирать сразу несколько элементов. Используйте классы, если Вам нужно применить один стиль к группе элементов.

В противном случае используйте

id для нахождения «иголки в стоге сена» и применения стиля только к одному конкретному объекту.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

4. X Y

li a {
  text-decoration: none;
}

Следующий часто используемый тип селектора — селектор потомка. Его следует использовать, когда нужно производить более точечный отбор элементов.

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

«Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ»

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

5. X

a {color: red;}
ul {margin-left: 0px;}

Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul{}.

Совместимость:

* IE6+

* Firefox
* Chrome
* Safari
* Opera

6. X:visited и X:link

a:link {color: red;}
a:visited {color: purple;}

Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.

Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

7. X + Y

ul + p {
   color: red;
}

Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

8. X > Y

#container > ul {
  border: 1px solid black;
}

Различие между X Y и X > Y в том, что последний выберет только прямых потомков. Рассмотрим следующий пример:

<div>
      <ul>
         <li>Элемент списка
           <ul>
              <li>Потомок</li>
           </ul>
         </li>
         <li>Элемент списка</li>
         <li>Элемент списка</li>
         <li>Элемент списка</li>
      </ul>
</div>

Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.

Совместимость:

* IE7+
* Firefox
* Chrome

* Safari
* Opera

9. X ~ Y

ul ~ p {
   color: red;
}

Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.

В нашем случае он отберет все элементы p, следующие за элементом ul.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

10. X[title]

a[title] {
   color: green;
}

Здесь мы обращаемся к атрибуту селектора. В нашем примере будут окрашены в зеленый цвет только ссылки, имеющие атрибут title.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

11. X[href=»foo»]

a[href="http://www.codeharmony.ru"] {
  color: red;
}

Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.

Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как

codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

12. X[href*=»codeharmony»]

a[href*="codeharmony"] {
  color: red;
}

Поехали дальше; это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и http://www.codeharmony.ru и www.codeharmony.ru и codeharmony.ru.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

13. X[href^=»http»]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

Вы когда-нибудь думали о том, как на некоторых сайтах рядом с ссылками, ведущими на другие сайты (внешние по отношению к текущему) проставлены небольшие иконки, которые дают знать об этом пользователю? Это отличные «напоминалки» пользователю о том, что ссылка ведет на другой сайт.

Делается это с помощью символа ^ (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.

«Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://.»

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

14. X[href$=».jpg»]

a[href$=".jpg"] {
   color: red;
}

И снова мы используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

15. X[data-*=»foo»]

a[data-filetype="image"] {
   color: red;
}

Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

Но это муторно и не элегантно. Другой вариант — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.

<a href="path/to/image.jpg" data-filetype="image">Ссылка</a>

Поступив таким образом, мы можем использовать код данного примера:

a[data-filetype="image"] {
   color: red;
}

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

16. X[foo~=»bar»]

a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

Вот еще один интересный трюк, о котором не все знают. Знак ~ (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.

<a href="path/to/image.jpg" data-info="external image">Кликни сюда</a>

Используя данный прием мы можем делать выборки с нужными нам комбинациями:

/* Отобрать атрибут data-info, который содержит значение external */
a[data-info~="external"] {
   color: red;
}

/* и отобрать атрибут data-info, который содержит значение image */
a[data-info~="image"] {
  border: 1px solid black;
}

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

17. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

18. X:after

Данный псевдо-класс позволяет сгенерировать контент вокруг выбранного элемента.

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.

Совместимость:

* IE8+
* Firefox
* Chrome
* Safari
* Opera

19. X:hover

div:hover {
  background: #e3e3e3;
}

Это Вы точно знаете. Официальное название звучит вроде «псевдо-класс, основанный на действии пользователя». Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!

«Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а.»

Часто данный прием используется для задания нижней границы для ссылок при наведении на них курсора:

a:hover {
 border-bottom: 1px solid black;
}

«Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;»

Совместимость:

* IE6+ (в IE6 работает только по отношению к ссылкам)
* Firefox
* Chrome
* Safari
* Opera

20. X:not(selector)

div:not(#container) {
   color: blue;
}

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

Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:

*:not(p) {
  color: green;
}

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

21. X::pseudoElement

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

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

Выбираем первую букву параграфа:

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта «газетного заголовка».

Выбираем первую строку параграфа:

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

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

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

22. X:nth-child(n)

li:nth-child(3) {
   color: red;
}

Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!

В качестве параметра принимается целое число. Если нужно выбрать 2-й элемент списка, нужно использовать конструкцию: li:nth-child(2).

Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {
   color: red;
}

Что, если у Вас есть большой неупорядоченный список и Вам нужно, к примеру, выбрать третий элемент с конца. Вместо того, чтобы писать li:nth-child(397), Вы можете воспользоваться псевдо-классом nth-last-child.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {
   border: 1px solid black;
}

Иногда бывают ситуации, когда вместо того, чтобы выбирать определенных потомков, нужно сделать выбор по типу элемента.

Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных «зацепок», то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

26. X:first-child

ul li:first-child {
   border-top: none;
}

Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.

К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.

Для устранения этого недостатка можно использовать данный псевдо-класс.

Совместимость:

* IE7+
* Firefox
* Chrome * Safari
* Opera

27. X:last-child

ul > li:last-child {
   color: green;
}

В противоположность классу first-child, last-child выберет последний элемент родительского элемента.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

28. X:only-child

div p:only-child {
   color: red;
}

Честно говоря, это довольно редко используемый псевдо-класс, но, тем не менее, он тоже бывает полезен. Он позволяет выбрать Вам те элементы, которые являются единственными потомками для своих родителей.

В нашем примере стиль будет применен только к параграфу, который является единственным потомком блока div.

Давайте рассмотрим для наглядности такую разметку:

<div><p>Здесь идет единственный в блоке параграф.</p></div>

<div>
   <p>Здесь идет первый параграф в блоке.</p>
   <p>Здесь идет второй параграф в блоке.</p>
</div>

В этом случае параграфы во втором блоке div выбраны не будут. Стиль будет применен только к параграфу из первого блока div.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

29. X:only-of-type

li:only-of-type {
   font-weight: bold;
}

Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере. Например, давайте выберем все ul, которые содержат одинокие li.

Вы могли бы написать ul li, но этот способ выберет все элементы li. Единственный способ — использовать only-of-type.

ul > li:only-of-type {
   font-weight: bold;
}

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

30. X:first-of-type

Этот псевдо-класс позволяет отобрать первого сиблинга того же типа.

Чтобы лучше это понять, скопируйте в свой редактор следующий код:

<div>
   <p>Здесь параграф.</p>
   <ul>
      <li>Элемент 1.</li>
      <li>Элемент 2.</li>
   </ul>

   <ul>
      <li>Элемент 3.</li>
      <li>Элемент 4.</li>
   </ul>
</div>

Сейчас, не читая дальше, попробуйте придать стиль только «элементу 2». Когда догадаетесь (либо сдадитесь), читайте дальше.

Решение 1

Есть много способов решить данную задачу. Рассмотри лишь некоторые из них. Начнем с использования first-of-type:

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

Данный код гласит: «Найди первый неупорядоченный список на странице, затем найди только его прямых потомков, являющихся элементами li. После этого выбери только второй по порядку элемент li.»

Решение 2

Другой вариант — воспользоваться смежным селектором:

p + ul li:last-child {
   font-weight: bold;
}

Здесь мы находим ul, следующий непосредственно за тэгом параграфа, после чего находим самый последний его дочерний элемент.

Решение 3

Можно еще немного поиграть с селекторами и поступить таким образом:

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

Сейчас мы уже получаем первый элемент ul на странице, затем ищем самый первый элемент li, но начиная с конца.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

Вывод

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

Если Вы работаете с какими-либо JavaScript-библиотеками, например, с jQuery, то всегда старайтесь использовать «родные» CSS3 селекторы, когда это возможно. В этом случае Ваш код будет работать быстрее.

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

По материалам www.net.tutsplus.com
Перевод — Дмитрий Науменко.

P.S. Уже верстаете сайты или планируете глубже освоить CSS? Посмотрите еще серию бесплатных видео по резиновой верстке и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх

Правила | CSS справочник

basicweb.ru

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

HTML

• HTML учебник
• Справочник тегов
• Атрибуты событий
• Глобальные атрибуты
• Мнемоники
• Коды языков
• HTML цвета
• Тесты знаний

CSS

• CSS учебник
• Справочник свойств
• CSS селекторы
• CSS функции
• CSS правила
• Flexbox генератор
• Grid генератор
• LESS учебник

JavaScript

• Интерфейсы веб API
• Объект Array
• Объект Date
• Объект Function
• Объект Global
• Объект JSON
• Объект Math^β
• Объект Number
• Объект Object
• Объект Promise

Что такое CSS: объясняем простыми словами | GeekBrains

Почему нельзя обойтись одним HTML и при чём тут какие-то каскады

https://d2xzmw6cctk25h.cloudfront.net/post/2270/og_image/9969a3f6341d09d7adb07e4042d1c690.png

Встречая аббревиатуру CSS впервые, новички уже догадываются, что это как-то связано с сайтами. Разберёмся: CSS — Cascading Style Sheets — это каскадные таблицы стилей. По сути — язык, который отвечает за описание внешнего вида HTML-документа. Подавляющее большинство современных веб-сайтов работают на основе связки HTML+CSS.

Теперь ответим на вопрос о том, что делает CSS. Всё просто: если HTML структурирует контент на странице, то CSS позволяет отформатировать его, сделать более привлекательным для читателя. Изначально веб-разработчики использовали исключительно HTML — так было на заре развития интернет-технологий. С помощью разметки можно было выделить параграф, заголовок, изменить начертание текста. А большего и не требовалось.

Со временем этих возможностей стало мало — и появилась технология форматирования без изменения самого содержимого и структуры документа. CSS решил проблему «зоопарка» тегов форматирования, когда разные браузеры поддерживали разные теги. Их унификация и единая база упростили работу с веб-документами и облегчили жизнь веб-мастерам.

CSS и стили

CSS используется для определения стилей (правил) оформления документов — включая дизайн, вёрстку и вариации макета для различных устройств и размеров экрана. У такого способа форматирования несколько достоинств:

• теги не дублируются;
• документ проще обслуживать;
• внешний вид всего сайта можно изменить централизованно, а не корректировать форматирование каждой странички.

Стили можно разметить внутри тега <HEAD> или использовать отдельный CSS-файл.

Вот так можно прописать CSS в качестве атрибута непосредственно в HTML:

А так CSS прописывается при помощи тега <style> и в теге <head> документа HTML.

Теперь разберёмся, что такое CSS-файл. Всё просто — это файл с расширением .css, где прописываются правила оформления документа. Чтобы привязать файл к оформлению страницы, нужно использовать тег <link>:

Современный способ оформления веб-документов вошёл в практику в 2011 году. Это свойство CSS grid — теперь оно поддерживается практически всеми браузерами. И если раньше приходилось верстать документы с использованием элементов вроде <div>, то сейчас всё это выполняется средствами CSS.

После того как этот способ стал стандартом, проблема разделения содержания (HTML) и оформления (CSS) решилась раз и навсегда. 

Синтаксис CSS

У языка CSS относительно простой синтаксис. Сначала прописывается селектор — он выбирает конкретный элемент на странице. Потом, после фигурных скобок, указываются свойства со значениями — между ними ставится двоеточие. Сами свойства отделяются друг от друга точкой с запятой.

Что такое селектор в CSS? Это конструкция, которая позволяет выбрать отдельные или однотипные элементы на странице, чтобы их стилизовать. С селектора начинается каждый блок объявлений в CSS:

.my-class {
  background-color: #999;
}

В качестве селектора в примере используется my-class. Все элементы с этим классом получают единое оформление — серый фон цвета #999.

Каскады в CSS

И всё-таки почему CSS — это именно Cascading Style Sheets? Дело в том, что в единую схему стили организуются при помощи каскада. Вот простой пример, который также поможет понять, что такое CSS-код и как он выглядит:

p {
  color: green;
  font-size: 20px;
}
 
p {
  color: red;
}

При помощи каскадов мы присвоили элементу p красный цвет. Зелёный цвет, указанный выше красного, учитываться не будет. Используется то значение параметра, которое указано ниже, и это помогает избежать конфликтов. При этом размер шрифта — 20 пикселей — не меняется. Если упростить написанное выше, то получится:

p {
  color: red;
  font-size: 20px;
}

Кроме того, один элемент можно сделать зависимым от нескольких селекторов разного типа. Пример:

p {
  color: red;
}
 
p.important {
  font-size: 20px;
}
 
#intro {
  font-style: italic;
}

Чтобы использовать все параметры, в HTML указываем:

<p>
  CSS упрощает форматирование документов.
</p>

Здесь мы присвоили элементу следующие свойства: он красный, размером 20 пикселей и написан курсивом. Важно, что в данном случае у разных селекторов — разный приоритет. Их порядок:

1. Селектор типа элемента (p).
2. Селектор класса (.important).
3. Селектор id (#intro).

1 — низкий приоритет, 3 — высокий.

Приоритеты в CSS

Обговорим подробнее вопрос приоритетов. Их иерархия работает следующим образом:

1. Самый высокий приоритет у свойств, в конце объявления которых указано !important.
2. Затем идут инлайновые стили, которые прописываются в теге через атрибут style.
3. Ещё ниже приоритет стилей, заданных в теге style в самом документе.
4. Далее следуют стили, подключённые к документу как внешний CSS-файл с использованием тега <link>

Методологии CSS

Начинающему веб-мастеру для работы с CSS достаточно просто знать, что такое стили и как их использовать, изучить основные свойства и способы их задавать. А вот при работе с большими проектами уже необходимо использовать специализированные инструменты, а также чёткие стандарты написания CSS. Иначе другие разработчики просто не смогут нормально обслуживать код.

Единой методологии CSS нет. Существует несколько вариантов, и задача разработчика — выбрать ту методологию, которая оптимально ему подходит. Но сначала стоит разобраться с основами, научиться работать с CSS. Кстати, новые варианты появляются не так уж редко, так что за новинками стоит следить.

Наиболее популярные современные методологии CSS — это Atomic CSS (Functional CSS) и CSS в JavaScript. В основе первого варианта лежит использование максимального количества базовых классов, чтобы как можно чаще применять их повторно. Сторонники второго варианта считают, что стили CSS стоит определять не в отдельной таблице, а внутри каждого компонента.

Будущее CSS

CSS постоянно развивается — сейчас активно разрабатывается уже третье поколение этого стандарта. В нём спецификация разделяется на модули, причём разработка и развитие каждого из них идут независимо. Разработчики современных браузеров постепенно расширяют поддержку стандарта CSS3.

Несколько лет назад начало формироваться и четвёртое поколение стандарта CSS, но пока спецификации находятся на уровне драфтов.

Все премудрости CSS, HTML и их совместного использования вы можете освоить на отдельном интерактивном курсе GeekBrains. В течение месяца вы научитесь верстать статические сайты, освоите блочную вёрстку, препроцессор Less, Bootstrap и другие полезные инструменты.

CSS свойства

Перейти к основному содержанию

• Самоучители
  • HTML для начинающих
  • CSS для начинающих
  • Учебник HTML5
  • Учебник Canvas
  • XML для начинающих
  • Учебник XML DTD
  • Учебник по XML схемам
  • Учебник XPath
  • Учебник по XSLT
  • Учебник SVG

основы работы с операторами и условиями

От автора: сегодня расскажу, как работают в CSS if и for. Я продолжаю рассматривать CSS, как язык программирования. Вопрос, является ли он таковым или нет, в данный момент очень горячая тема, но мне не очень интересен ответ.

.Другими словами, есть ли образовательная ценность в том, чтобы рассматривать CSS как язык программирования? Скажите, пожалуйста, приведенное ниже объяснение полезным или запутанным для вас.

Оператор if

Область, где язык программирования CSS менее развит, чем JavaScript — это управляющие структуры — или так может показаться. Тем не менее, CSS имеет операторы, если. Вот несколько примеров:

@media all and (max-width: 900px) { } @supports (display: flex) { }

@media all and (max-width: 900px) { } @supports (display: flex) { }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Они означают «если область просмотра макета имеет максимальную ширину 900 пикселей» и «если движок CSS принимает» отображение: flex.Нет сомнений в том, что это фактические операторы, если: блоки кода применяются только в том случае, если удовлетворяется условие. (Кроме того, спецификация для @media и @supports называется Условными правилами CSS. Это просто: at-правила должны быть операторы if.)

Но рассмотрим — если можно так выразиться — более сомнительный пример. Является ли следующее также оператором, если?

«Если в меню есть ссылка, выделите ее красным цветом». Несколько человек, у которых я брал интервью для книги, были заблокированы в том, что селекторы — это тоже операторы.

Вы согласны? Согласен ли я? Я не уверен, хотя и вижу в этом определенном смысле: можно рассматривать селекторы и так. Согласны ли вы с этим, вероятно, зависит от вашего определения оператора if.

Цикл для

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

и применить к ним красный цвет.

Является ли селектор циклом для? Может ли он быть оператором, если и циклом одновременно? Опять же, это зависит от ваших определений циклов для и операторов if. Я хотел бы отметить, что можно добавить в CSS дополнительную логику для циклов.

menu a: first-child { цвет синий; } меню a: not (#current) { красный цвет; }

меню a: первый ребенок { цвет: синий; } меню a: нет (#current) { цвет: красный; }

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

Декларативный и императивный подходы

Давайте возьмем самое общее представление и скажем, что CSS-селекторы рассматривают как операторы if и как циклы for. Это будет звучать довольно странно для любого, кто имеет опыт работы с JavaScript, поскольку эти два типа управляющих структур просто не одинаковы. Итак, как вы можете заменить оба на одну структуру?

, я думаю, мы еще раз видим, что CSS является декларативным языком, а не императивным. Некоторые простые управляющие структуры могут быть выражены гораздо более кратко, чем в императивных.Возьмем последний пример кода. В JavaScript мы должны написать что-то вроде:

for (все меню) { for (все ссылки в этом меню) { let first = [выяснить, первая ли это ссылка в меню] if (first) { link.color = ‘синий’ } else if (link.id! == ‘current’) { link.color = ‘красный’; } } }

для (все меню) { для (все ссылки в этом меню) { let first = [выяснить, первая ли это ссылка в меню] if (first) { ссылка.color = ‘blue’ } else if (link.id! == ‘current’) { link.color = ‘красный’; } } }

Недостатком версии JavaScript является то, что она более многословна, чем версия CSS, и, следовательно, более подвержена ошибкам. Преимущество ее состоит в том, что она включает более тонкий контроль, чем CSS. В CSS мы почти достигли пределов того, что мы можем выразить. В версии JavaScript мы могли бы добавить гораздо больше логики, если хотите.

В CSS мы сообщаем браузеру, как должны выглядеть ссылки. В JavaScript мы описываем алгоритм для определения, как должна выглядеть отдельная ссылка. Ни то, ни другое не является единственно правильным, но в этом примере CSS является эффективным более эффективным.

Лично мне комфортно рассматривать CSS-селекторы как операторы и циклы одновременно. Тем не менее, я чувствую, как только вы начинаете понимать CSS, тот факт, что селекторы меняют себя, если / за, становится все менее и менее актуальным.Вместо этого селекторы — просто селекторы: отлично подходят для относительно простых объявлений; меньше для очень сложных.

Полезно это или сбивает с толку?

Если вы джаваскриптер, который желает лучше узнать CSS, я хотел бы услышать, это дает или сбивают вас с толку несколько приведенных выше примеров примеров. Чем больше отзывов я получаю, тем лучше я могу написать книгу, которая поможет вам изучить CSS, а не просто запутает вас. Благодарю за внимание.

Источник: https: // www.quirksmode.org

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD в HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть.

условие if / else в CSS

Учитывая HTML-файл, и мы применим, используя условия if-else в CSS.

Нет, мы не можем использовать условия if-else в CSS, так как CSS не поддерживает логику. Мы можем использовать некоторые альтернативы if-else, которые обсуждаются ниже:

Метод 1: В этом методе мы будем использовать классы в файле HTML для достижения этой цели. Мы будем определять разные классы в соответствии с условиями, которые мы хотим применить в CSS.

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

Пример:

< html > < голова > 0 < > название Условие If-else в CSS title > < стиль > / * Первая строка CSS * / .color-line1 { цвет: красный; } / * Вторая строка CSS * / .color-line2 { цвет: зеленый; } стиль > головка > < корпус стиль = "выравнивание текста: по центру;" > < h2 стиль = «цвет: зеленый»; > GeeksforGeeks h2 > < h4 > 2 2 состояние в CSS h4 > < span class = "color-line1" > Это первая строка пролет > < br > < br > < пролет класс = "color-line2" > Это вторая линия пролет > 9 0021 корпус > html >

Выход:

Способ 2. Мы можем использовать CSS-препроцессоры, такие как SASS, что позволяет нам писать в них операторы условий. Даже если вы используете SASS, вы можете создать условия для создания таблицы стилей, что означает, что условие оценивается во время компиляции, а не во время выполнения.

Синтаксис:

 $ type: line;
п {
  @if $ type == line1 {
    цвет синий;
  } @else if $ type == line2 {
    красный цвет;
  } @else if $ type == line3 {
    цвет: зеленый;
  } @else {
    черный цвет;
  }
}
 

Чтобы узнать больше о SASS, нажмите здесь
Чтобы прочитать о if-else в SASS, нажмите здесь

Рекомендуемые посты:

условие if / else в CSS

0.00 (0%) 0 голосов

.

No related posts.