Виде непосредственно касающиеся CSS


Содержание

Виде непосредственно касающиеся CSS

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

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

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

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

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

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

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

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

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

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

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

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

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

1. *

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

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

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

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

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

* IE6+
* Firefox
* Chrome
* Safari
* Opera

2. #X

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

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

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

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

* IE6+
* Firefox
* Chrome
* Safari
* Opera

3. .X

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

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

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

* IE6+
* Firefox
* Chrome
* Safari
* Opera

4. X Y

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

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

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

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

* IE6+
* Firefox
* Chrome
* Safari
* Opera

5. X

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

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

* IE6+
* Firefox
* Chrome
* Safari
* Opera

6. X:visited и X:link

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

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

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

* IE7+
* Firefox
* Chrome
* Safari
* Opera

7. X + Y

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

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

* IE7+
* Firefox
* Chrome
* Safari
* Opera

8. X > Y

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

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

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

* IE7+
* Firefox
* Chrome
* Safari
* Opera

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

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

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

* IE7+
* Firefox
* Chrome
* Safari
* Opera

10. X[title]

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

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

* IE7+
* Firefox
* Chrome
* Safari
* Opera

11. X[href=»foo»]

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

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

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

* IE7+
* Firefox
* Chrome
* Safari
* Opera

12. X[href*=»codeharmony»]

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

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

* IE7+
* Firefox
* Chrome
* Safari
* Opera

13. X[href^=»http»]

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

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

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

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

* IE7+
* Firefox
* Chrome
* Safari
* Opera

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

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

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

* IE7+
* Firefox
* Chrome
* Safari
* Opera

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

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

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

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

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

* IE7+
* Firefox
* Chrome
* Safari
* Opera

Вот еще один интересный трюк, о котором не все знают. Знак

(тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.

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

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

* IE7+
* Firefox
* Chrome
* Safari
* Opera

17. X:checked

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

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

* IE9+
* Firefox
* Chrome
* Safari
* Opera

18. X:after

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

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

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

* IE8+
* Firefox
* Chrome
* Safari
* Opera

19. X:hover

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

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

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

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

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

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

20. X:not(selector)

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

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

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

* IE9+
* Firefox
* Chrome
* Safari
* Opera

21. X::pseudoElement

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

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

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

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

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

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

* IE6+
* Firefox
* Chrome
* Safari
* Opera

22. X:nth-child(n)

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

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

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

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

* IE9+
* Firefox
* Chrome
* Safari

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

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

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

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

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

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

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

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

* IE9+
* Firefox 3.5+
* Chrome
* Safari

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

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

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

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

26. X:first-child

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

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

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

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

* IE7+
* Firefox
* Chrome


Сайт на WordPress

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

Селекторы CSS – точечное применение свойств CSS к элементам страницы (тегам) | Оптимизация HTML за счёт использования селекторов

Здравствуйте дорогие подписчики и не менее дорогие гости Site on! Надеюсь, вам были интересны предыдущие статьи раздела HTML + CSS, потому как сегодня скучать точно не придётся, ведь мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

На что стоит обратить внимание:

  • Классы и идентификаторы можно присваивать любым (всем) тегам.
  • Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
  • Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
  • Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
  • Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.

По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:

Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

Родственный селектор

Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

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

Универсальный селектор

С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.

Псевдо-классы

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

Естественно можно комбинировать селекторы как захотим, например:

Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

Псевдо-класс :lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:

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

Динамические псевдо-классы

Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

Смежные селекторы

Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

Обобщённые смежные селекторы

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

Селекторы атрибутов

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

CSS 3 псевдо-классы

Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.

:last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.

:only-child – сработает, если элемент (тег) является единственным ребёнком.

:only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.

:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

:first-of-type – первый ребёнок своего типа в рамках прямого родителя.

:last-of-type – последний ребёнок своего типа в рамках прямого родителя.

:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

:not() – делает исключение для заданных элементов. Пример:

Управление полями, формами, переключателями и флажками в CSS

:enabled — применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

:disabled — применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

:checked – применяется к элементам интерфейса типа переключатели (radio) и флажки (checkbox), когда они находятся во включённом положении.

Псевдо-элементы

Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

:first-line – первая строка внутри блочного или табличного элемента.

:first-letter – первая буква внутри блочного элемента.

:before и :after – используются чтобы с помощью CSS вставить содержимое до или после элемента, к которому они относятся, лично я ими не пользовался, поэтому сильно расписывать не буду. А как часто вы используете данные псевдо-элементы в своих проектах? Можете поделиться своим опытом в комментариях к данной статье.

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

Преимущества оптимизации HTML за счёт CSS

Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

Илон Маск рекомендует:  Что такое код setdate

Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

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

Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.

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

CSS3-селекторы – фундаментально полезная вещь.

Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.

Поэтому эти селекторы необходимо знать.

Основные виды селекторов

Основных видов селекторов всего несколько:

  • * – любые элементы.
  • div – элементы с таким тегом.
  • #id – элемент с данным id .
  • .class – элементы с таким классом.
  • [name=»value»] – селекторы на атрибут (см. далее).
  • :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).

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

  • .c1.c2 – элементы одновременно с двумя классами c1 и c2
  • a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited

Отношения

В CSS3 предусмотрено четыре вида отношений между элементами.

Самые известные вы наверняка знаете:

  • div p – элементы p , являющиеся потомками div .
  • div > p – только непосредственные потомки

Есть и два более редких:

p – правые соседи: все p на том же уровне вложенности, которые идут после div .

  • div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).
  • Виде непосредственно касающиеся CSS

    CSS – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML). Название происходит от английского Cascading Style Sheets, что означает «каскадные таблицы стилей».

    Зачем используется CSS

    Назначение CSS – отделять то, что задает внешний вид страницы, от ее содержания. Если документ создан только с использованием HTML, то в нем определяется не только каждый элемент, но и способ его отображения (цвет, шрифт, положение блока и т. д.). Если же подключены каскадные таблицы стилей, то HTML описывает только очередность объектов. А за все их свойства отвечает CSS. В HTML достаточно прописывать класс, не перечисляя все стили каждый раз.

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

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

    Развитие CSS

    Необходимость разработки CSS была признана консорциумом W3C в 1990-х годах. В 1996 году был принят стандарт CSS1, позволяющий изменять параметры шрифта, цвет, атрибуты текста, выравнивания и отступы. В 1998 году состоялся выход CSS2, добавивший возможности использования блочной верстки, звуковых таблиц, генерируемого содержания, указателей, страничных носителей. Версия CSS3 заметно увеличила возможности стилей: стало доступным создание анимированных элементов без использования JavaScript, появилась поддержка сглаживания, теней, градиентов и т. д. Спецификация была разделена на модули, каждый из которых стал развиваться обособленно. С 2011 года ведется разработка модулей CSS4. Возможности пока описаны в черновых вариантах.

    Структура языка

    CSS можно охарактеризовать простыми словами как набор правил, описывающих, как должен выглядеть элемент.

    Правило состоит из селектора и блока объявлений.

    Селекторы

    Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.). Если для тега нужно задать разные стили или применить один для отличных элементов, используются классы и запись вида «Тег.Класс <свойство: значение;>». Имя класса задается латиницей, может содержать подчеркивание или дефис. Если не указывать тег, а начинать запись с «.Класс», то можно использовать правило для любого тега. Если перечислять несколько классов для одного тега, к нему применятся все описанные стили. Идентификатор задает уникальное имя элемента для изменения стиля или обращения с помощью скрипта. Запись «#Идентификатор <свойство: значение;>». Название идентификатора состоит из букв латинского алфавита, допустимо использовать дефис и подчеркивание. Чтобы применить идентификатор к конкретному тегу, указывается его имя, потом без пробела и через знак решетки название идентификатора.

    Блок объявлений

    Блок объявлений состоит из пар «свойство: значение» (запись всегда черед двоеточие), размещенных в фигурных скобках. Записи заканчиваются точкой с запятой. CSS нечувствителен к табуляции, пробелам, регистру. Выбор способа записи (столбиком с отступами или просто в строчку) остается на усмотрение разработчика. Если для одного селектора прописаны разные значения для одного свойства, то приоритет отдается нижней записи.

    Подключение CSS

    CSS можно связать с HTML несколькими способами:

    • внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
    • добавить тег с атрибутом type=»text/css»;
    • подключить внешнюю таблицу стилей:
    • .

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

    Виде непосредственно касающиеся CSS

    Бабочки, конечно, ничего не знают о змеях. Зато о них знают птицы, охотящиеся на бабочек. Птицы, плохо распознающие змей, чаще становятся.

    Октавой называется интервал между двумя ближайшими одноименными звуками: до и до, ре и ре и т. д. С точки зрения физики «родство» этих.

    В 27 году до н. э. римский император Октавиан получил титул Август, что на латыни означает «священный» (в честь этого же деятеля, кстати.

    Известная шутка гласит: «NASA потратило несколько миллионов долларов, чтобы разработать специальную ручку, способную писать в космосе.

    Известно порядка 10 миллионов органических (то есть основанных на углероде) и лишь около 100 тысяч неорганических молекул. Вдобавок.

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

    При большом перепаде температур внутри облака возникают мощные восходящие потоки. Благодаря им капли могут долго держаться в воздухе и.

    СМИ ПОН

    Новости СМИ ПОН

    Подлинная история советского «ограбления века». Дело братьев Калачян

    В 1977 году в Армении произошло крупнейшее в истории СССР ограбление Госбанка.

    Об ограблении денежных хранилищ Госбанка не думали даже матёрые уголовники. И тем не менее в 1977 году случилось немыслимое — злоумышленники покусились на святая святых советской финансовой системы.

    Операция «Архив». Как Советский Союз окончательно избавился от Гитлера

    На рубеже 1980–1990-х годов, когда в Восточной Европе произошло обрушение просоветских режимов, а Западная Германия поглотила Восточную, произошло резкое усиление позиций неонацистов.

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

    Непобедимая страна. 15 интересных фактов о Советском Союзе

    30 декабря 1922 года на Первом Всесоюзном съезде Советов было утверждено образование Союза Советских Социалистических республик. Советский Союз занимал территорию площадью 22 400 000 квадратных километров, являясь самой большой страной на планете, имел самую протяжённую границу в мире (свыше 60 000 километров) и граничил с 14 государствами.

    Великая душа. Жизнь и принципы Махатмы Ганди

    Мохандас Карамчанд Ганди родился 2 октября 1869 года в индийском городе Порбандар в состоятельной семье из варны вайшьев. Маленький Мохандас, или Мохан, меньше всего напоминал философа, мыслителя и политика, идеи которого перевернут мир.

    Продукт гуманизма. Как сердобольный дантист придумал «электрический стул»

    6 августа 1890 года человечество вписало новую страницу в свою историю. Научно-технический прогресс добрался и до такого специфического рода деятельности, как исполнение смертных приговоров. В Соединённых Штатах Америки была проведена первая смертная казнь на «электрическом стуле».

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

    CSS (Cascading Style Sheets – каскадные таблицы стилей) – это свод стилевых описаний, тех или иных HTML тегов (элементов HTML). Он может быть применён как к отдельному тегу – элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.

    История возникновения и развития CSS

    CSS — одна из широкого спектра технологий, которые одобрены консорциумом W3C (World Wide Web Consortium), возглавляемым Тимати Джоном Бернерсом-Ли и получили общее название «стандарты Web». Необходимость стандартизирования Web, создания единых правил, по которым работали бы программисты и веб-дизайнеры, возникла еще в 1990-х годах. Тогда был разработан язык HTML 4.01 и XHTML. Позже был разработан и стандарт CSS.

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

    Термин Cascading Style Sheets в 1994 году предложил Хокон Виум Ли, нынешний главный инженер компании Opera. С того момента Виум Ли совместно с Бертом Босом, одним из разработчиков браузера Argo, занялись развитием стилевого языка CSS. Одним из отличия CSS стал принцип наследования, благодаря которому разработчик может определить стиль на основании более ранних. То есть, в CSS определенные раньше стили дают возможность определить последующие.

    Консорциум Всемирной паутины (World Wide Web Consortium, W3C) обратил внимание на стилевой язык CSS уже через пару лет работы над ним. И в 1996 году технология CSS была ободрена. 17 декабря 1996 года также была издана соответствующая рекомендация CSS1, первые коррективы в которую были внесены 11 января 1996 года.

    Уровень 1 (CSS1)

    Возможности первой CSS, рекомендованной Консорциумом Всемирной паутины:

    1. Параметры шрифтов. Предоставлены возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
    2. Настройка цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
    3. Текстовые атрибуты. Существует возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы).
    4. Возможность выравнивания текста, изображений, таблиц и других элементов.
    5. Возможность настройки свойств блоков, таких как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки.
    6. Ограниченные средства по позиционированию элементов, такие как float и clear.

    Уровень 2 (CSS2)

    На основании CSS1 12 мая 1998 года Консорциум принял вторую рекомендацию – CSS2. Была сохранена обратная совместимость.

    Добавленные возможности в CSS2:

    1. Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование: управление размещением элементов на странице без табличной вёрстки.
    2. Типы носителей. На данном уровне возможно устанавливать разные стили для разных носителей (например отдельно для монитора стационарного компьютера и отдельно – для КПК).
    3. Звуковые таблицы стилей. Ориентируются по голосу, громкость и т. д. для звуковых носителей (например, для посетителей сайта с плохим или вовсе отсутствующим зрением).
    4. Страничные носители. Предоставляют возможность установки различных стилей постранично (например, отдельно для четных и отдельно для нечетных страниц).
    5. Расширенный механизм селекторов.
    6. Указатели.
    7. Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.

    В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1

    Уровень 2, ревизия 1 (CSS2.1)

    Данная рекомендация W3C была принята 7 июня 2011 года.

    CSS2.1 основана на CSS2. В ней были исправлены ошибки, а также изменены некоторые части спецификации, некоторые – удалены вовсе. Удаленные части могут в будущем быть добавлены в CSS3.

    Уровень 3 (CSS3)

    Сильно расширена по сравнению с предыдущими версиями. Нововведения касаются практически всего, начиная с малых, закругленных углов блоков, заканчивая трансформацией, анимацией и введением переменных (variables).

    Уровень 4 (CSS4)

    Разрабатывается W3C с 29 сентября 2011 года.

    Для чего нужен CSS

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

    Безусловно, для оформления ресурса можно использовать и HTML. Однако гораздо больше возможностей предоставит CSS. И, кроме того, в нем все настройки можно выставить гораздо точнее. На сегодняшний день работа с CSS поддерживается всеми браузерами.

    Немаловажное преимущество CSS – это то, что все настройки по оформлению и дизайну сайта можно единожды прописать в одном месте (а не делать отдельно для каждой страницы, как, допустим, пришлось бы в HTML). То есть, в CSS повторяющиеся стилевые описания одних и тех же элементов можно вынести в единый файл. Благодаря этому обеспечивается значительное «облегчение» HTML-документов. И, следовательно, экономится время, трафик, деньги, занимаемый объем и т. д., при этом код становится максимально простым и удобным как для чтения, так и для последующего редактирования.

    CSS и HTML

    Главное отличие состоит в том, что задача HTML – структурировать содержимое страницы, а задача CSS – форматирование уже структурированного содержимого.

    Изначально язык HTML применялся исключительно для вывода структурированного текста. Текст можно было только размечать (заголовками, параграфами и т. д.) с помощью определенных тегов. Постепенно веб-дизайнеры перестали удовлетворяться этим нехитрым способом размещения текстов, и стали изобретать различные HTML-теги, которые отвечали уже не за структуру текста, а за его внешний вид (то есть, за то, какой видят страницу пользователи).

    Такая дизайнерская деятельность в результате привела к тому, что и оригинальные теги, предназначенные для структурирования (такие как, например,

    ) стали применяться для дизайна. Однако возникла проблема – новые дизайнерские теги не поддерживались многими браузерами.

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

    Преимущества CSS

    Конкретные преимущества, которые дает веб-дизайнеру использование стандарта CSS:

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

    Внедрение CSS в HTML документ

    Связать стилевое описание элемента непосредственно с самим элементом, то есть HTML-документом, можно тремя способами:

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

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

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

    Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css, либо же обрамлена тегами и размещена в «шапке» той веб-страницы, на которую она действует):

    Комплексные селекторы

    Селекторы являются одной, если не самой важной частью CSS. Они формируют каскад и определяют, как стили должны применяться к элементам страницы.


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

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

    Типовые селекторы

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

    Селектор типа идентифицирует элемент, основанный на его типе, в частности, как этот элемент объявлен в HTML. Селектор класса идентифицирует элемент, основанный на значении атрибута class , который может повторно применяться к нескольким элементам по мере необходимости и помогает делиться популярными стилями. И, наконец, идентификатор определяет элемент, основанный на значении атрибута id , который является уникальным и должен быть использован на странице только один раз.

    Обзор типовых селекторов

    Пример Название Описание
    h1 Селектор типа Выбирает элемент по его типу.
    .tagline Класс Выбирает элемент по значению атрибута class , который может быть использован повторно несколько раз на одной странице.
    #intro Идентификатор Выбирает элемент по значению атрибута id , который является уникальным и должен использоваться только один раз на странице.

    Дочерние селекторы

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

    Селектор потомка

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

    Селектор article h2 является селектором потомка и выбирает только элементы

    , которые находятся внутри элемента . Обратите внимание, независимо от того, где живёт элемент

    , пока он находится внутри элемента , он всегда будет выбран. Кроме того, любой элемент

    за пределами элемента не будет выбран.

    Ниже приведены заголовки, из которых выбраны строки 3 и 5.

    Прямой дочерний селектор

    Порой селекторы потомка заходят слишком далеко, выбирая больше, чем хотелось бы. Иногда должны быть выбраны только прямые дети родительского элемента, а не каждый экземпляр элемента вложенный глубоко внутри предка. В этом случае может быть использован прямой дочерний селектор путём размещения знака больше (>) между родительским и дочерним элементом в селекторе.

    Например, article > p является прямым дочерним селектором только когда элементы

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

    Обзор дочерних селекторов

    Пример Название Описание
    article h2 Селектор потомка Выбирает элемент, который находится в любом месте внутри определённого предка.
    article > p Прямой дочерний селектор Выбирает элемент, который находится непосредственно внутри определённого родителя.

    Родственные селекторы

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

    Общий родственный селектор

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

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

    p — это общий родственный селектор, он ищет элементы

    , которые следуют после любых элементов

    в том же родителе. Чтобы элемент

    был выбран, он должен идти после любого элемента

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

    Соседние селекторы

    Иногда может быть желательно иметь немного больше контроля, в том числе возможность выбрать родственный элемент, который следует непосредственно за другим родственным элементом. Соседний селектор будет выбирать только родственные элементы, непосредственно следующие за другим родственным элементом. Вместо символа тильды, как в случае с общим родственным селектором, соседний селектор использует символ плюс (+) между двумя элементами в селекторе. Опять же, первый элемент определяет, что второй элемент должен непосредственно следовать после него и быть ему родственным и у обоих элементов должен быть один и тот же родитель.

    Взглянем на соседний селектор h2 + p . Будут выбраны только элементы

    идущие непосредственно после элементов

    . У обоих также должен быть один и тот же родительский элемент.

    Абзац на строке 5 выбирается, так как непосредственно следует после его родственного заголовка и у них один общий родительский элемент.

    Пример соседних селекторов

    Обзор родственных селекторов
    Пример Название Описание
    h2

    p Общий родственный селектор Выбирает элемент, который следует в любом месте после предыдущего элемента, и оба элемента имеют одного общего предка. h2 + p Соседний селектор Выбирает элемент, который следует непосредственно после предыдущего элемента, и оба элемента имеют одного общего предка.

    Селекторы атрибутов

    Некоторые рассмотренные ранее типовые селекторы также могут быть определены как селекторы атрибутов, в котором элемент выбирается на основе значения class или id . Эти селекторы атрибутов class и id широко используются и довольно мощные, но это лишь начало. Другие селекторы атрибутов появились в последние годы, в частности, сделали большой скачок вперед вместе с CSS3. Теперь элементы могут быть выбраны на основе того, присутствует ли атрибут и какое значение он содержит.

    Селектор наличия атрибута

    Первый селектор атрибута определяет элемент на основе того, включен ли этот атрибут или нет, независимо от его фактического значения. Чтобы выбрать элемент основываясь на том, присутствует атрибут или нет, просто включите имя атрибута в квадратных скобках ([]) в селекторе. Квадратные скобки могут идти после любого селектора типа или класса, в зависимости от желаемого уровня специфичности.

    Селектор атрибута =

    Для идентификации элемента с определённым и точно заданным значением может быть использован тот же селектор что и раньше, однако на этот раз внутри квадратных скобок после имени атрибута включают желаемое значение. Внутри квадратных скобок должно быть имя атрибута идущее после знака равно (=), где внутри кавычек и пишется желаемое значение атрибута.

    Селектор атрибута *=

    Когда мы пытаемся найти элемент на основе части значения атрибута, но не точного совпадения, может быть использован символ звёздочки (*) в квадратных скобках селектора. Звёздочка должна идти сразу после имени атрибута, непосредственно перед знаком равенства. Это означает, что следующее за ним значение только должно появиться или содержаться в значении атрибута.

    Селектор атрибута ^=

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

    Селектор атрибута $=

    Противоположностью предыдущего селектора является селектор атрибутов, где значение оканчивается определённым текстом. Вместо использования символа ^ применяется знак доллара ($) в квадратных скобках селектора между именем атрибута и знаком равенства. Использование знака доллара означает, что значение атрибута должно заканчиваться указанным текстом.

    Селектор атрибута

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

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

    Селектор атрибута |=

    Когда значение атрибута разделено дефисом, а не пробелами, может быть использован символ вертикальной линии (|) в квадратных скобках селектора между именем атрибута и знаком равенства. Вертикальная линия означает, что значение атрибута может быть разделено дефисом, однако слова должны начинаться с указанного значения.

    Пример селекторов атрибутов

    Обзор селекторов атрибутов
    Пример Название Описание
    a[target] Селектор наличия атрибута Выбирает элемент если данный атрибут присутствует.
    a[href=»http://google.com/»] Селектор атрибута = Выбирает элемент, если значение данного атрибута в точности соответствует указанному.
    a[href*=»login»] Селектор атрибута *= Выбирает элемент, если значение данного атрибута содержит по крайней мере один экземпляр указанного текста.
    a[href^=»https://»] Селектор атрибута ^= Выбирает элемент, если значение данного атрибута начинается с указанного текста.
    a[href$=».pdf»] Селектор атрибута $= Выбирает элемент, если значение данного атрибута заканчивается указанным текстом.
    a[rel

    =»tag»] Селектор атрибута

    = Выбирает элемент, если значение данного атрибута разделено пробелами и точно совпадает с одним указанным словом. a[lang|=»en»] Селектор атрибута |= Выбирает элемент, если значение данного атрибута разделено дефисом и начинается с указанного слова.

    Псевдоклассы

    Псевдоклассы похожи на обычные классы в HTML, однако они непосредственно не указаны в разметке, вместо этого они поселяются динамически как результат действий пользователя или структуры документа. Наиболее распространённый псевдокласс, и его вы, вероятно, видели раньше, это :hover. Обратите внимание, что этот псевдокласс начинается с двоеточия (:), как и все остальные псевдоклассы.

    Псевдоклассы ссылок

    Некоторые основные псевдоклассы включают в себя два псевдокласса, вращающихся вокруг ссылок. Это псевдоклассы :link и :visited и они определяют, что ссылка была или не была посещена. Чтобы задать стиль ссылки, которая ещё не была посещена, в игру вступает псевдокласс :link , а псевдокласс :visited задаёт стиль ссылок, которые пользователь уже посетил на основе их истории просмотра.

    Псевдоклассы действия пользователя

    К элементу могут динамически применяться основанные на действиях пользователей разные псевдоклассы, которые включают в себя :hover , :active и :focus . Псевдокласс :hover применяется к элементу, когда пользователь двигает курсор над элементом, наиболее часто это используется со ссылками. Псевдокласс :active применяется к элементу, когда пользователь приводит в действие элемент, например, при щелчке по нему. И, наконец, псевдокласс :focus применяется к элементу, когда пользователь сделал элемент точкой внимания страницы, часто с помощью клавишы Tab , переходя от одного элемента к другому.

    Псевдоклассы состояния интерфейса

    Подобно ссылкам существуют также некоторые псевдоклассы, связанные с состоянием элементов пользовательского интерфейса, в частности, внутри форм. Эти псевдоклассы включают в себя :enabled , :disabled , :checked и :indeterminate .

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

    Последние два элемента состояния интерфейса, псевдоклассы :checked и :indeterminate вращаются вокруг флажков и переключателей. Псевдокласс :checked выбирает флажки или переключатели, которые, как вы можете ожидать, помечены. Когда ни один флажок или переключатель не помечен и не выбран, то он живёт в неопределённом состоянии, для которого может быть использован псевдокласс :indeterminate для нацеливания на подобные элементы.

    Псевдоклассы структуры и положения

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

    :first-child, :last-child и :only-child

    Первые структурные псевдоклассы, которые вам скорее всего попадутся, это :first-child , :last-child и :only-child . Псевдокласс :first-child выберет элемент, если это первый ребёнок в родителе, в то время как псевдокласс :last-child выберет элемент, если он последний в родителе. Эти псевдоклассы идеально подходят для выбора первого или последнего элемента в списке и др. Кроме того, :only-child выберет элемент, если он является единственным элементом в родителе. В качестве альтернативы, псевдокласс :only-child может быть записан как :first-child:last-child , однако у :only-child ниже специфичность.

    Здесь селектор li:first-child определяет первый пункт списка, в то время как li:last-child определяет последний пункт списка, таким образом, выбираются строки 2 и 10. Селектор div:only-child ищет

    :first-of-type, :last-of-type и :only-of-type

    Нахождение первого, последнего и единственного ребёнка у родителя очень полезно и часто только это и требуется. Однако иногда вы хотите выбрать только первого, последнего или единственного ребёнка определённого типа элемента. К примеру, вы желаете выбрать только первый или последний абзац внутри статьи или, возможно, только изображение в статье. К счастью, в этом помогают псевдоклассы :first-of-type , :last-of-type и :only-of-type .

    Псевдокласс :first-of-type выберет первый элемент своего типа внутри родителя, в то время как псевдокласс :last-of-type выберет последний элемент этого типа внутри родителя. Псевдокласс :only-of-type выберет элемент, если он является единственным такого типа в родителе.

    В приведённом ниже примере псевдоклассы p:first-of-type и p:last-of-type выберут, соответственно, первый и последний абзацы в статье, независимо от того, являются ли они на самом деле первыми или последними детьми в статье. Строки 3 и 6 выбраны этими селекторами. Селектор img:only-of-type определяет изображение в строке 5, как единственное изображение появляющееся в статье.

    Наконец, есть несколько псевдоклассов структуры и положения, которые выбирают элементы, основанные на номере или алгебраическом выражении. Эти псевдоклассы включают в себя :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) и :nth-last-of-type(n) . Все эти уникальные псевдоклассы начинаются с nth и принимают число или выражение внутри круглых скобок, которое обозначается символом n.

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

    Использование чисел и выражений в псевдоклассах

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

    Выражения для псевдоклассов бывают в формате an, an+b, an-b, n+b, -n+b и -an+b. То же самое выражение может быть переведено и читаться как (a×n)±b. Переменная a обозначает множитель, с учётом которого будут вычисляться элементы, в то время как переменная b обозначает, откуда будет начинаться или происходить отсчёт.

    Например, селектор li:nth-child(3n) будет определять каждый третий элемент пункта списка. Использование этого выражения соответствует 3×0, 3×1, 3×2 и так далее. Как вы можете видеть, результаты этого выражения выбирают третий, шестой и каждый элемент кратный трём.

    Кроме того, в качестве значений могут быть использованы ключевые слова odd и even . Как и следовало ожидать, они будут выбирать, соответственно, нечётные или чётные элементы. Если ключевые слова не привлекают, то выражение 2n+1 выберет все нечётные элементы, а выражение 2n выберет все чётные элементы.

    Селектор li:nth-child(4n+7) определит каждый четвёртый пункт списка, начиная с седьмого пункта. Опять же, использование этого выражения эквивалентно (4×0)+7, (4×1)+7, (4×2)+7 и так далее. Результаты этого выражения приведут к выбору седьмого, одиннадцатого, пятнадцатого и каждого четвёртого элемента.

    При использовании аргумента n без числа впереди, переменная a расценивается как равная 1. Селектор li:nth-child(n+5) выберет каждый пункт списка, начиная с пятого, оставив первые четыре пункта списка не выбранными. В выражении это разбирается как (1×0)+5, (1×1)+5, (1×2)+5 и так далее.

    Для создания более сложных вещей могут быть задействованы отрицательные числа. Например, селектор li:nth-child(6n-4) будет отсчитывать каждый шестой пункт списка, начиная с -4, выбрав второй, восьмой, четырнадцатый пункты списка и так далее. Тот же селектор li:nth-child(6n-4) также может быть записан как li:nth-child(6n+2) , без использования отрицательной переменной b.

    Отрицательная переменная или отрицательный аргумент n должен сопровождаться положительной переменной b. Когда аргументу n предшествует отрицательная переменная a, то переменная b определяет, насколько высоко будет достигнут отсчёт. Например, селектор li:nth-child(-3n+12) выберет каждый третий пункт списка в первых двенадцати пунктах. Селектор li:nth-child(-n+9) выберет первые девять пунктов списка, так как переменная a без заявленного числа по умолчанию равна -1.

    :nth-child(n) и :nth-last-child(n)

    При общем понимании того, как работают числа и выражения в псевдоклассах, давайте взглянем на полезные псевдоклассы, где эти числа и выражения могут использоваться, первыми из которых являются :nth-child(n) и :nth-last-child(n) . Эти псевдоклассы работают похоже на :first-child и :last-child , в том смысле что они рассматривают и считают все элементы в родителе и выбирают только определённый элемент. :nth-child(n) работает с начала дерева документа, а :nth-last-child(n) работает с конца дерева документа.

    Используя псевдокласс :nth-child(n) давайте взглянем на селектор li:nth-child(3n) . Он определяет каждый третий пункт списка, таким образом, будут выбраны строки 4 и 7.

    Использование другого выражения в псевдоклассе :nth-child(n) даст другую выборку. Селектор li:nth-child(2n+3) , к примеру, определит каждый второй пункт списка, начиная с третьего. В результате будут выбраны пункты в строках 4 и 6.

    Очередное изменение выражения, на этот раз с отрицательным значением, даст новый выбор. Здесь селектор li:nth-child(-n+4) определяет четыре верхних пункта списка, оставляя остальные пункты не выделенными, таким образом будут выбраны строки со 1 по 4.

    Добавление отрицательного числа перед аргументом n снова изменяет выбор. Здесь селектор li:nth-child(-2n+5) определяет каждый второй пункт списка из первых пяти пунктов, таким образом, будут выбраны пункты в строках 2, 4 и 6.

    Изменение псевдокласса :nth-child(n) на :nth-last-child(n) переключает направление счёта, теперь подсчёт начинается с конца дерева документа. Селектор li:nth-last-child(3n+2) , к примеру, определяет каждый третий пункт списка, начиная со второго по последний, двигаясь по направлению к началу списка. Здесь выбраны пункты списка в строках 3 и 6.

    :nth-of-type(n) и :nth-last-of-type(n)

    Псевдоклассы :nth-of-type(n) и :nth-last-of-type(n) очень похожи на :nth-child(n) и :nth-last-child(n) , однако вместо того чтобы считать каждый элемент внутри родителя псевдоклассы :nth-of-type(n) и :nth-last-of-type(n) учитывают только элементы своего собственного типа. Например, при подсчете абзацев в статье, псевдоклассы :nth-of-type(n) и :nth-last-of-type(n) пропустят любые заголовки,

    Используя псевдокласс :nth-of-type(n) в селекторе p:nth-of-type(3n) мы можем определить каждый третий абзац в родителе, независимо от других родственных элементов внутри родителя. Здесь выбираются абзацы в строках 5 и 9.

    Как и с псевдоклассами :nth-child(n) и :nth-last-child(n) , основное различие между :nth-of-type(n) и :nth-last-of-type(n) состоит в том, что :nth-of-type(n) считает элементы с начала дерева документа, а :nth-last-of-type(n) считает элементы с конца дерева документа.

    Используя псевдокласс :nth-last-of-type(n) мы можем записать селектор p:nth-last-of-type(2n+1) , который определяет каждый второй абзац с конца родительского элемента, начиная с последнего абзаца. Здесь выбираются абзацы в строках 4, 7 и 9.

    Псевдокласс :target

    Псевдокласс :target используется для стилизации элементов, когда значение атрибута >id у элемента на странице, к примеру, , то этот элемент может быть идентифицирован и стилизован с помощью псевдокласса :target . Указатель фрагмента наиболее часто встречаются при использовании на странице ссылки или ссылки на другую часть той же страницы.

    Взгляните на приведённый ниже код. Если пользователь хотел бы посетить страницу с указателем фрагмента #hello, то раздел с тем же значением атрибута id будет стилизован соответствующим образом с помощью псевдокласса :target . Если указатель фрагмента URI изменился и совпадает со значением атрибута id другого раздела, то новый раздел может быть стилизован с помощью того же селектора и псевдокласса, что и ранее.

    Псевдокласс :empty

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

    Использование псевдокласса div:empty определит

    Псевдокласс :not

    Псевдокласс :not(x) принимает аргумент и отфильтровывает выборку, которая будет сделана. Селектор p:not(.intro) использует псевдокласс :not для определения каждого абзаца без класса intro . Элемент абзаца определяется в начале селектора, затем следует псевдокласс :not(x) . Внутри скобок идёт селектор отрицания, в данном случае класс intro .

    Ниже оба селектора div:not(.awesome) и :not(div) используют псевдокласс :not(x) . Селектор div:not(.awesome) определяет любой

    Пример с псевдоклассами

    Обзор псевдоклассов
    Пример Название Описание
    a:link Псевдокласс ссылок Выбирает ссылки, которые не были просмотрены пользователем.
    a:visited Псевдокласс ссылок Выбирает ссылки, которые были посещены пользователем.
    a:hover Псевдокласс действия Выбирает элемент, когда пользователь наводит на него курсор.
    a:active Псевдокласс действия Выбирает элемент, когда пользователь активирует его.
    a:focus Псевдокласс действия Выбирает элемент, когда пользователь сделал его точкой внимания.
    input:enabled Псевдокласс состояния Выбирает элемент в доступном состоянии.
    input:disabled Псевдокласс состояния Выбирает элемент в отключенном состоянии, посредством атрибута disabled .
    input:checked Псевдокласс состояния Выбирает флажок или переключатель, который был помечен.
    input:indeterminate Псевдокласс состояния Выбирает флажок или переключатель, который не был помечен или не помечен, оставляя его в неопределённом состоянии.
    li:first-child Структурный псевдокласс Выбирает первый элемент в родителе.
    li:last-child Структурный псевдокласс Выбирает последний элемент в родителе.
    div:only-child Структурный псевдокласс Выбирает единственный элемент в родителе.
    p:first-of-type Структурный псевдокласс Выбирает первый элемент своего типа в родителе.
    p:last-of-type Структурный псевдокласс Выбирает последний элемент своего типа в родителе.
    img:only-of-type Структурный псевдокласс Выбирает единственный элемент своего типа в родителе.
    li:nth-child(2n+3) Структурный псевдокласс Выбирает элемент, который соответствует заданному числу или выражению, считая все элементы с начала дерева документа.
    li:nth-last-child(3n+2) Структурный псевдокласс Выбирает элемент, который соответствует заданному числу или выражению, считая все элементы с конца дерева документа.
    p:nth-of-type(3n) Структурный псевдокласс Выбирает элемент, который соответствует заданному числу или выражению, считая только элементы этого типа с начала дерева документа.
    p:nth-last-of-type(2n+1) Структурный псевдокласс Выбирает элемент, который соответствует заданному числу или выражению, считая только элементы этого типа с конца дерева документа.
    section:target Псевдокласс :target Выбирает элемент, у которого значение атрибута id совпадает с указателем фрагмента URI.
    div:empty Псевдокласс :empty Выбирает элемент, который не содержит каких-либо детей или текста.
    div:not(.awesome) Псевдокласс :not Выбирает элемент не представленный заявленным аргументом.

    Псевдоэлементы

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

    Текстовые псевдоэлементы

    Первыми реализованными псевдоэлементами были текстовые псевдоэлементы :first-letter и :first-line . Псевдоэлемент :first-letter определяет первую букву текста внутри элемента, в то время как :first-line определяет первую строку текста внутри элемента.

    В демонстрации ниже первая буква абзаца с классом alpha задана большим размером шрифта и оранжевым цветом, так же как и первая строка абзаца с классом bravo . Эта выборка сделана с помощью текстовых псевдоклассов :first-letter и :first-line , соответственно.

    Демонстрация текстовых псевдоэлементов

    Псевдоэлементы, генерируемые содержимое

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

    Псевдоэлемент :before создаёт псевдоэлемент до или впереди выбранного элемента, в то время как :after создаёт псевдоэлемент после или позади выбранного элемента. Эти псевдоэлементы выводятся вложенными внутри выбранного элемента, а не за его пределами. Ниже псевдоэлемент :after используется для отображения значения атрибута href у ссылок в круглых скобках после самой ссылки. Такая информация полезна, но, в конечном итоге, не всякий браузер поддерживает эти псевдоэлементы.

    Демонстрация псевдоэлементов, генерируемых содержимое

    Псевдоэлемент ::selection

    Псевдоэлемент ::selection определяет выделенную пользователем часть документа. Выделение затем может быть стилизовано, но только с помощью свойств color , background , background-color и text-shadow . Стоит отметить, что свойство background-image игнорируется. В то же время сокращённое свойство background может быть использовано для добавления цвета, но любые изображения будут игнорироваться.

    Двоеточие (:) и двойное двоеточие (::)

    Псевдоэлемент ::selection был добавлен в CSS3 в попытке отделить псевдоклассы от псевдоэлементов с помощью двойного двоеточия, которое было добавлено к псевдоэлементам. К счастью, большинство браузеров будут поддерживать оба значения, одиночные или двойные двоеточия у псевдоэлементов, однако псевдоэлемент ::selection всегда должен начинаться с двойного двоеточия.

    При выделении любого текста в демонстрации ниже фон становится оранжевым благодаря псевдоэлементу ::selection . Также обратите внимание на ::-moz-selection . Префикс от Mozilla был добавлен, чтобы обеспечить лучшую поддержку для всех браузеров.

    Демонстрация псевдоэлементов

    Обзор псевдоэлементов
    Пример Название Описание
    .alpha:first-letter Текстовый псевдоэлемент Выбирает первую букву текста внутри элемента.
    .bravo:first-line Текстовый псевдоэлемент Выбирает первую строку текста внутри элемента.
    div:before Генерируемое содержимое Создаёт псевдоэлемент внутри выбранного элемента в его начале.
    a:after Генерируемое содержимое Создаёт псевдоэлемент внутри выбранного элемента в его конце.
    ::selection Псевдоэлемент ::selection Выбирает часть документа, который был выделен с помощью действий пользователя.

    Поддержка селекторов в браузерах

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

    CSS3.info предлагает инструмент CSS3 Selectors Test, который будет информировать вас о том, какие селекторы поддерживаются браузером. Также неплохой идеей будет проверить поддержку браузера непосредственно в нём.

    Кроме того, Selectivizr, утилита JavaScript, обеспечивает великолепную поддержку этих селекторов в Internet Explorer 6-8. Больше поддержки при необходимости может также предложить jQuery selectors.

    Скорость и производительность селекторов

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

    CSS (Cascading Style Sheets).

    CSS (Cascading Style Sheets) — Каскадные таблицы стилей — это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу — элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.

    Чтобы внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом , можно тремя способами:

    1. Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе, который нуждается в отдельном стилевом описании.

    2. Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).

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

    Практически каждый HTML тег имеет атрибут style, который говорит о том, что к этому тегу применяется некое стилевое описание:

    это параграф с индивидуальным стилем

    Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента

    это параграф с индивидуальным стилем

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

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

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

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

    Тег идет непосредственное объявление стилей тех или иных HTML элементов.

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

    Главное достоинство CSS — возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

    Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

    Далее сохраняем этот небольшой файл с расширением *.css(обычно файл со стилями называют style.css).

    Нужно заставить страницы нашего сайта черпать информацию с этого файла.

    Делается это с помощью тега

  • (связь). Тег многоцелевой и служит для «связывания» HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег
  • является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

    Тег имеет атрибуты:

    href— Путь к файлу.
    rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.

    shortcut icon — Определяет, что подключаемый файл является иконкой.

    stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.

    application/rss+xml — Файл в формате XML для описания ленты новостей.

    type — MIME тип данных подключаемого файла.

    Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

    Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type=»text/css»

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

    Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.

    Используйте тег

    Всё о слонах

    Слон — самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.

    Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон — «животное, которое превосходит всех других в остроумии и интеллекте».

    30 селекторов CSS, которые нужно запомнить

    Дата публикации: 2010-12-11

    От автора: Итак, вы выучили основные селекторы css: id, class, наследование – и довольны? Если да, то вы упускаете гигантский объем гибкости. Хотя многие селекторы, упомянутые в этой статье, являются частью спецификации CSS3 и, следовательно, имеются в наличие только на современных браузерах, вы должны их запомнить.

    Давайте перед тем, как перейти к более продвинутым селекторам CSS, мы с новичками одолеем самые простые и очевидные.

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

    Как создать сайт самому?


    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Звездочку * также можно использовать для дочерних селекторов.

    Он выберет каждый отдельный элемент, являющийся дочерним div’у #container. И еще раз, старайтесь не пользоваться этим приемом слишком часто, или вообще не пользуйтесь.

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

    Указание символа # в качестве префикса селектора позволяет делать выборку по id. Это, бесспорно, самое обычное использование, однако при использовании селекторов id будьте осмотрительны.

    Спросите себя: мне совершенно необходимо привязать id для выборки к этому элементу?

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

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

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

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

    4. X Y

    Следующий наиболее комментируемый селектор — потомок. Пользуйтесь им, когда к своим селекторам нужно отнестись более конкретно. Например, что делать, если нежели выбирать все тэги-привязки all, лучше было бы сделать своей целью привязки внутри неупорядоченного списка? Вот когда вы определенно воспользовались бы наследованием селекторов.

    Профессиональная подсказка – если ваш селектор выглядит как X Y Z A B.error, вы поступаете неправильно. Всегда спрашивайте себя, так ли уж абсолютно необходимо применять всю эту нагрузку.

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

    Что, если нужно выбрать все элементы страницы соответственно их типу, нежели по имени их id или class’а? Сделайте проще и используйте селектор типа. Если нужно выбрать все неупорядоченные списки, примените ul <>.

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

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

    Как альтернатива, у нас имеется псевдокласс :visited, который, как подразумевается, позволяет нам применять специальные стили только к тэгам-привязкам на странице, по которой уже щелкнули, или которую посетили.

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

    7. X + Y

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

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

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

    Селектор #container > ul выберет своей целью только те ul’ы, которые являются прямыми потомками div’а с id container. Он не выберет, например, ul –потомок первого li.

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

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

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

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

    10. X[title]

    Относимый к селекторам атрибутов, в вышеприведенном примере он выберет только тэги-привязки, имеющие атрибут title. Тэги-привязки, не имеющие его, не получат этого конкретного стиля. А что, если вам нужен более специальный случай ? Что ж…

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

    11. X[href=»foo»]

    Вышеприведенный фрагмент определит стили всем тэгам-привязкам, которые ссылаются на http://net.tutsplus.com; они получат наш фирменный зеленый цвет. Все прочие тэги-привязки останутся нетронутыми.

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

    Работает хорошо, только слегка негибко. Что получится, если ссылка действительно направляет на Nettuts+, но, возможно, путь – это nettuts.com, а не полный url? В таких случаях можно использовать чуть-чуть нормального синтаксиса выражений.

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

    12. X[href*=»nettuts»]

    Вот сюда мы шли; вот то, что нам нужно. Звездочка обозначает, что действующее значение должно появиться где-то в значении атрибута. Таким образом покрывается nettuts.com, net.tutsplus.com, и даже tutsplus.com.

    Помните, что это обширное утверждение. Что выйдет, если тэг-привязка соединяет с каким-то сайтом, расположенным не на Envato, со строкой tuts в url’е? Если нужно более точно определить, используйте ^ и & для ссылки соответственно на начало и конец строки.

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

    13. X[href^=»http»]

    Когда-нибудь интересовались, каким образом некоторые веб сайты могут отображать маленькую иконку рядом с внешними ссылками? Я уверен, вы такое уже видели; они отлично напоминают о том, что ссылка направит вас на совершенно другой веб сайт.

    Это легко делается при помощи знака ^ («карат»). Чаще всего он используется в регулярных выражениях для обозначения начала строки. Если нужно выбрать все тэги-зацепки, имеющие href, начинающийся с http, можно применить селектор, подобный вышеуказанному фрагменту.

    Обратите внимание, что мы не ищем http://; он не нужен и не несет ответственности за url’ы, начинающиеся с https://.

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

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

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

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

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

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

    Вернитесь к номеру восемь; как можно скорректировать все эти разные типы изображений: png, jpeg,jpg, gif? Ну, мы могли бы создать множественные селекторы, такие как:

    Но так мы создаем себе головную боль и, к тому же, это неэффективно. Другое возможное решение – применение пользовательских атрибутов. Что получится, если добавить свой собственный атрибут data-filetype к каждой привязке, ссылающейся на изображение?

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

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

    16. X[foo

    А вот особенность, которой можно удивить своих друзей. Об этом приеме знает не так уж много людей. Знак «тильда» (

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

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

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

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

    17. X:checked

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

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

    18. X:after

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

    Многие познакомились с этими классами при первой встрече с хаком clear-fix.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

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

    19. X:hover

    Ой, да ладно! Этот вы знаете. Официальный термин для него: user action pseudo class (псевдокласс пользовательского действия). Название сбивает с толку, но на деле он не такой. Хотите, когда пользователь проводит мышью над элементом, применить специальные стили? Он выполнит эту работу!

    Помните, что более старая версия Internet Explorer не отвечает на применение псевдокласса :hover к чему-либо, кроме тэга-ссылки.

    Чаще всего мы используем этот селектор при применении к тэгам-привязкам, например, border-bottom , когда над ними проводят мышью.

    Профессиональная подсказка — border-bottom: 1px solid black; смотрится лучше, чем text-decoration: underline;.

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

    20. X:not(selector)

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

    Или, если бы я хотел выбрать каждый отдельный элемент (не советую), кроме тэгов абзаца, можно было бы сделать:

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

    21. X::pseudoElement

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

    Псевдоэлемент состоит из двух двоеточий: ::

    Выберите первую букву абзаца

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

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

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

    «Для совместимости с существующими таблицами стилей агенты пользователя также должны принимать нотацию (систему обозначений) одного предыдущего двоеточия для псевдоэлементов, представленных в уровнях 1 и 2 CSS (а именно: :first-line, :first-letter, :before и :after). Эта совместимость не предоставляется новым псевдоэлементам, представленным в этой спецификации» — источник

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

    22. X:nth-child(n)

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

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

    Можно даже употребить его, чтобы выбрать совокупность дочерних переменных. Например, мы могли бы сделать li:nth-child(4n) для выделения каждого четвертого пункта списка.

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

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

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

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

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

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

    Временами вместо выбора дочернего элемента (child), вам понадобится выбрать согласно типу (type) элемента.

    Представьте себе разметку, содержащую пять неупорядоченных списков. Если бы вы хотели присвоить стили только третьему ul’у и не имели уникального id для привязки, то могли бы использовать псевдокласс nth-of-type(n). Иметь вокруг себя рамку в верхнем фрагменте будет только третий ul.

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

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

    Да, оставаясь до конца логичными, мы еще можем применить nth-last-of-type для того, чтобы начать с конца списка селекторов и продвигаться в обратную сторону для выборки нужного элемента.

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

    26. X:first-child

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

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

    Для корректировки этого многие дизайнеры применяют классы first и last. Вместо них можно использовать эти псевдоклассы.

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

    27. X:last-child

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

    Пример

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

    Разметка

    Здесь нет ничего особенного; всего лишь простой список.

    CSS

    Эти стили установят фон, удалят отступ браузера по умолчанию в ul, и применят к каждому li рамки для обеспечения глубины.

    Для добавления в свои списки глубины примените border-bottom к каждому li, на оттенок или два темнее, чем цвет фона li. Затем примените border-top на пару оттенков светлее.

    Как видно на изображении вверху, единственная проблема состоит в том, что рамка будет применяться к самому верху и низу неупорядоченного списка – это выглядит странно. Давайте для устранения этой проблемы используем псевдоклассы :first-child и :last-child.

    Вот так; все исправлено!

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

    Ага … IE8 поддерживал :first-child , но не:last-child. Поди разберись!

    28. X:only-child

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

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

    Давайте представим следующую разметку.

    My paragraph here.

    Two paragraphs total.

    Two paragraphs total.

    В этом случае вторые абзацы div’а не будут выбраны; только первый div. Как только вы примените более одного дочернего элемента, псевдокласс only-child перестанет иметь эффект.

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

    29. X:only-of-type

    Этот структурный псевдокласс может использоваться несколькими хитрыми способами. Он выберет элементы, не имеющие сиблингов (элементов одного уровня) в своем родительском контейнере. В качестве примера давайте выберем все ul’ы, имеющие всего один пункт списка.

    Во-первых, задайте себе вопрос, каким образом вы выполнили бы это задание? Вы могли бы сделать ul li, но так они выберут своей целью все пункты списка. Единственное решение – использовать only-of-type.

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

    30. X:first-of-type

    Псевдокласс first-of-type позволяет выбирать первые сиблинги (элементы одного уровня) своего типа.

    Проверка

    Для лучшего понимания давайте проведем тест. Скопируйте в свой редактор кода следующую разметку:

    My paragraph here.

    Теперь, не читая дальше, попробуйте догадаться, как выбрать только «List Item 2″. Когда придете к решению (или сдадитесь), продолжите чтение.

    Решение 1

    Решить эту контрольную работу можно многими способами. Мы рассмотрим некоторые из них. Давайте начнем с использования first-of-type.

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

    Решение 2

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

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

    Решение 3

    Можно вредить им или играть с этими селекторами, как угодно.

    На этот раз мы берем первый ul на странице, затем находим самый первый пункт списка, но начинаем с конца!

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

    Заключение

    Если вы корректируете более старые браузеры, типа Internet Explorer 6, вам все же следует быть осторожным при использовании новых селекторов. Но, пожалуйста, не позволяйте отпугнуть вас от их изучения. Вы окажете себе этим медвежью услугу. Не стесняйтесь сверяться здесь со списком совместимости с браузерами. Как альтернативу можно использовать прекрасный скрипт IE9.js Dean Edward’а для предоставления этим селекторам поддержки в старых браузерах.

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

    Спасибо за прочтение урока по селекторам CSS, надеюсь, вы усвоили пару приемов!

    Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

    P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Виде непосредственно касающиеся CSS

    Содержание и внешний вид веб-страницы должны быть разделены.

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

    Содержимое веб-сайта должно храниться в HTML файле, а информация о том, как он будет отображаться, соответственно, в файле стилей CSS.

    Такое распределение дает неоспоримые преимущества. Допустим, у вас имеется сайт, состоящий из десятка страниц с текстом. Если вы задавали стиль текста непосредственно в HTML документе, то при возникновении потребности изменить, к примеру, его шрифт, вам потребуется вносить правки в каждую страницу вашего сайта. Но если использовать для задания внешнего вида таблицу стилей, то такую правку можно внести лишь единожды, и она коснется всех страниц вашего веб-сайта. Одно это преимущество позволяет сэкономить уйму времени и сил.

    Вот еще несколько полезных свойств CSS:

    • более точный контроль над внешним видом страниц;
    • различные представления для разных носителей информации (экран, печать, и т. д.);
    • сложная и проработанная техника дизайна.

    Что же представляет собой CSS?

    На самом деле это простой текстовый файл (с расширением css), написанный в соответствии с грамматикой определяемой в CSS рекомендациях.

    Вот простой пример.

    Как и HTML-документ, CSS простой текстовый файл. Но в отличие от HTML документа, вам не нужно специальная запись в верхней части файлов, что это таблица стилей. Достаточно поставить соответствующее расширение в имени файла (css).

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

    Как работают таблицы стилей?

    Таблицы стилей представляют собой определенный набор инструкций, который интерпретируются браузером.

    Элементы таблицы стилей

    Как уже говорилось выше, таблица стилей содержит инструкции. Инструкция в свою очередь состоит из элемента и его свойств.

    К элементам можно отнести любые теги HTML документа — параграфы, ссылки, списки (


    Та часть инструкции, которая определяет элемент, называется селектором.

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

    Это инструкция, возможно, одна из многих в таблице стилей.

    Селектором является body. Это означает, что инструкция относится к тегу для любой страницы, связанной с данной таблицей стилей.

    В инструкции имеются три свойства. Каждое из которых состоит из имени и значения. Например: имя — «text-align» и значение «justify».

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

    Синтаксис таблицы стилей

    В течение долгого времени не существовало такого понятия, как «веб-стандарт». В результате браузеры были весьма снисходительными к HTML. Однако CSS всегда был весьма специфическим стандартом. Это означает, что если вы не будите соблюдать грамматику, браузеры не будет благосклонны к вам. Ваша таблица стилей может не работать вообще либо будет отображаться непредсказуемым образом. Выше вы видели, какие части имеет таблица стилей, а также пример того, как они выглядят вместе. Что касается приведенного выше примера, вот несколько простых правил, следуя которым вы избежите ненужных проблем.

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

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

    Виде непосредственно касающиеся CSS

    Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

    Дизайн лендинга

    Создавайте дизайн любых сайтов — для себя и на заказ!

    Популярное

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Что нужно знать для создания PHP-сайтов?

    Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

    Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

    Создайте свой сайт за 3 часа и 30 минут.

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

    Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

    Изучите основы HTML и CSS менее чем за 4 часа.

    После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

    Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

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

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

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

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

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

    Хотите изучить JavaScript, но не знаете, как подступиться?

    После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

    Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

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

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

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

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

    1. *

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

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

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

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

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

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    2. #X

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

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

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

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

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    3. .X

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

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

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

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    4. X Y

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

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

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

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

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    5. X

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

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

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    6. X:visited и X:link

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

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

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

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    7. X + Y

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

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

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    8. X > Y

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

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

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

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

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

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

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

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    10. X[title]

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

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

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    11. X[href=»foo»]

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

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

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

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    12. X[href*=»codeharmony»]

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

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

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    13. X[href^=»http»]

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

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

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

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

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

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

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

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

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

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

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

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

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

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

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    Вот еще один интересный трюк, о котором не все знают. Знак

    (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.

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

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

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    17. X:checked

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

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

    * IE9+
    * Firefox
    * Chrome
    * Safari
    * Opera

    18. X:after

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

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

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

    * IE8+
    * Firefox
    * Chrome
    * Safari
    * Opera

    19. X:hover

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

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

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

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

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

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

    20. X:not(selector)

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

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

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

    * IE9+
    * Firefox
    * Chrome
    * Safari
    * Opera

    21. X::pseudoElement

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

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

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

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

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

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

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    22. X:nth-child(n)

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

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

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

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

    * IE9+
    * Firefox
    * Chrome
    * Safari

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

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

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

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

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

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

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

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

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari

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

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

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

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

    26. X:first-child

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

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

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

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

    * IE7+
    * Firefox
    * Chrome

    Сайт на WordPress

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

    Илон Маск рекомендует:  Книга Вёрстка веб-страниц
  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL