Изменение цвета ссылки текущей страницы с помощью css

Относительный путь

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


Части пути Описание Примеры значений
имя_файла Если в качестве значения атрибута указать только имя файла это значит, что нужный файл находится в той же папке, где и страница со ссылкой. «»
каталог/ Если файл, к которому нужно указать путь, расположен в дочернем каталоге относительно файла с ссылкой, это означает, что нам надо спуститься на один уровень вниз (в дочернюю папку текущего каталога), в этом случае путь начинается с указания имени дочернего каталога, после его имени указывается прямой слэш «», он служит для разделения частей пути, после него указывается имя нужного нам файла. Примечание: опуститься можно ровно на столько папок вниз, сколько вы их создали. К примеру, если вы создали папку на 10 уровней ниже корневой, то можете указать путь, который приведет вас вниз на 10 папок. Однако, если у вас так много уровней, это, скорее всего, означает, что организация вашего сайта излишне неудобно составлена. «»»»
Если нужно указать, что файл, на который вы ссылаетесь, находится в родительской папке, используйте символы (две точки), они означают подняться на один уровень вверх (в родительскую папку текущего каталога). Далее мы указываем прямой слэш «», чтобы разделить части пути, и пишем имя нашего файла.

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

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

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

«»»»

Подчёркивание текста

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

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

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

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

Для добавления подчёркивания есть два основных метода. Первый заключается в использовании свойства text-decoration со значением underline, как показано в примере 1.

Пример 1. Свойство text-decoration

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Подчёркивание</title> <style> .dot { text-decoration: underline; } </style> </head> <body> <h1 class=»dot»>Часть 4, в которой Пол и Пропилен наносят ответный удар</h1> </body> </html>

Результат данного примера показан на рис. 2. Цвет и толщина такой линии устанавливаются браузером самостоятельно в зависимости от размера и цвета текста и не могут быть изменены через стили. Кстати, это же свойство со значением none применяется для того, чтобы убрать подчёркивание у текста, например, у ссылок.

Рис. 2. Вид линии, полученной с помощью text-decoration

Второй метод позволяет установить линию произвольного стиля и цвета через свойство border-bottom. Например, для добавления пунктирного подчёркивания у ссылок используем значение dashed. Чтобы подчёркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовём его, скажем dot. Также необходимо убрать исходное подчёркивание у ссылок (пример 2).

Пример 2. Пунктирное подчёркивание

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Пунктирное подчёркивание</title> <style> a.dot { text-decoration: none; /* Убираем подчёркивание */ border-bottom: 1px dashed #000080; /* Добавляем свою линию */ } </style> </head> <body> <p><a href=»link1.html»>Обычная ссылка</a> на другую страницу.</p> <p><a href=»link2.html» class=»dot»>Ссылка с пунктирным подчёркиванием</a>.</p> </body> </html>

Результат примера показан на рис. 3.

Рис. 3. Вид обычной ссылки и ссылки с пунктирным подчёркиванием

Толщина линии и цвет подчёркивания у ссылок также задаются через свойство border-bottom

Обратите внимание на некоторые моменты. Линия, полученная через border-bottom, располагается чуть ниже традиционного подчёркивания

При добавлении такой линии к блочным элементам, вроде

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

Какими бывают состояния ссылок

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

  • — ссылка, на которую наведен курсор;
  • — активная ссылка (та, по которой совершается клик, или на которой удерживается кнопка мыши);
  • — ссылка, еще не посещенная пользователем;
  • — посещенная ссылка.

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

Стилизация состояний

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

a { color: red; } /* обычный цвет ссылки */
a:hover { color: blue; } /* цвет ссылки, на которую наведен курсор */

Псевдокласс также поддается гибкой стилизации:

a:active { background-color: yellow; } /* цвет фона ссылки в момент нажатия на нее */

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

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

a:link { color: red; }
a:visited { color: grey; }
a:hover { color: blue; }
a:active { background-color: yellow; }

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

Выбор ссылок с помощью селекторов

Как записать селектор с псевдоклассом для определенной группы ссылок? Например, если вам нужно применить какой-то стиль для всех ссылок навигационного меню с идентификатором , когда такая ссылка находится в состоянии наведенного на нее курсора, вы можете использовать такой селектор:

#main-menu a:hover {background-color: #a38beb;}

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

#main-menu a.menu-link:hover {background-color: #a38beb;}
#main-menu .menu-link:hover {background-color: #a38beb;} /* так тоже сработает */

Чтобы определить стили для всех состояний данных ссылок, запишите для каждого псевдокласса отдельное правило:

#main-menu .menu-link:link { color: red; }
#main-menu .menu-link:visited { color: grey; }
#main-menu .menu-link:hover { background-color: #a38beb; }
#main-menu .menu-link:active { background-color: yellow; }

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

14 ответов

79 Лучший ответ

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

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

Хорошо, что мы не можем делать определенные вещи. по-прежнему подвергается насилию, и всплывающие окна делаются до смерти.

19 окт. 2010, в 17:27 Поделиться 41


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

Ниже приведены параметры для нового стиля:

Не тестировал параметр none, возможно, он использует настройку браузера по умолчанию.

Я подтвердил это для Firefox и IE7-9.

17 июль 2013, в 10:50 Поделиться 9

Нет, нет.

19 окт. 2010, в 18:48 Поделиться 7

Я надеюсь, что это поможет вам

window.open(URL, ‘_ newtab’);

17 окт. 2013, в 07:45 Поделиться 1

Свойство target-new указывает, должны ли новые целевые ссылки открываться в новом окне или на новой вкладке существующего окна.

Примечание. Свойство target-new работает только в том случае, если свойство target-name создает новую вкладку или новое окно.

21 янв. 2015, в 12:38 Поделиться 1

26 авг. 2014, в 21:35 Поделиться 1

Я не пробовал это, но думаю, что он работает во всех браузерах:

02 авг. 2013, в 14:59 Поделиться 1

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

19 окт. 2010, в 20:26 Поделиться

Просто использование «target = _blank» будет учитывать предпочтение пользователя/браузера, использовать ли вкладку или новое окно, которое в большинстве случаев «делает правильную вещь».

  • IE9 + По умолчанию: вкладка: Предпочтение: «Всегда открывать всплывающие окна на новой вкладке»
  • Chrome По умолчанию: вкладка. Скрытое предпочтение:
  • Firefox: По умолчанию: вкладка https://support.mozilla.org/en-US/kb/tab-preferences-and-settings
  • Safari: по умолчанию: вкладка

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

08 апр. 2015, в 00:06 Поделиться

Это возможно!

Отменяет настройки браузера. Надеюсь, это сработает для вас.

24 фев. 2015, в 02:24 Поделиться

Попробуйте использовать функцию javascript, подобную этой

Html:

JavaScript:

12 сен. 2013, в 14:33 Поделиться

В Internet Explorer выберите Инструменты → Свойства обозревателя. Нажмите вкладку «Общие» → «Вкладки» → «Настройки». Выберите «Когда всплывающее окно встречается» → Всегда открывать всплывающее окно в новой вкладке. Нажмите «ОК».

10 сен. 2013, в 15:51 Поделиться

Вы можете установить IE для открытия ссылок на новой вкладке, просто перейдите в меню настроек.

19 март 2012, в 17:42 Поделиться

Вы можете изменить способ открытия Safari новой страницы в Safari > «Настройки» > «Вкладки» > «Открыть страницы в закладках вместо окон» > «Автоматически»

09 март 2012, в 03:26 Поделиться

Ещё вопросы

  • 178Как читать, если в PHP установлен флажок?
  • 1567Как переместить элемент в другой элемент?
  • 691Ввод текста в формате HTML позволяет вводить только цифры
  • 303Вкладки Twitter Bootstrap: перейти к конкретной вкладке на странице «Перезагрузка» или «Гиперссылка»
  • 1574Как совместить флажки и их метки последовательно в кросс-браузерах
  • 1113Как оформить выпадающий список <select> только CSS?
  • 872Что такое исправление?
  • 686Открыть ссылку в новой вкладке или окне
  • 350В чем разница между disabled = «disabled» и readonly = «readonly» для полей ввода формы HTML?
  • 298Атрибут ввода файла «принять» — это полезно?

Псевдоклассы, определяющие состояние элементов

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

:active

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

:link

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

Запись A {…} и A:link {…} по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.

:focus

Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст (пример 15.1).


Пример 15.1. Применение псевдокласса :focus

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.

Рис. 15.1. Изменение стиля текста при получении фокуса

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

Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <a>, <input>, <select> и <textarea>.

:hover

Псевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.

:visited

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

Пример 15.2. Изменение цвета ссылок

HTML5CSS 2.1IECrOpSaFx

Результат примера показан на рис. 15.2.

Рис. 15.2. Вид ссылки при наведении на неё курсора мыши

В данном примере показано использование псевдоклассов совместно со ссылками. При этом имеет значение порядок следования псевдоклассов. Вначале указывается :visited, а затем идёт :hover, в противном случае посещённые ссылки не будут изменять свой цвет при наведении на них курсора.

Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.

Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.

Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR.

Пример 15.3. Выделение строк таблицы

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.3).

Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши

Задание цвета отдельных ссылок на странице

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

Для изменения цвета ссылки следует использовать атрибут style=»color: #rrggbb» в теге <a>, где #rrggbb — цвет в шестнадцатеричном представлении. Можно, также, использовать названия цветов или указывать цвет в формате: rgb (132, 33, 65). В скобках указаны десятичные значения красного, зеленого и синего цвета (пример 3).

Пример 3. Изменение цвета ссылки с помощью стилей

В данном примере приведены три разных способа задания цвета с помощью стилей.

HTML цвет ссылки

<a href="http//:sait.ru">анкор ссылки</a>

Для того, чтобы задать ей цвет, нужно добавить значение font color для текста ссылки, чтобы получилось вот так:

<a href="http//:sait.ru"><span style="color: #f61212;">анкор ссылки</span></a>

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

Настройка области просмотра

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

Необходимо включить следующий элемент , установить во все ваших веб страницах:

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

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

Часть задает ширину страницы следить за шириной экран — устройства (которая будет меняться в зависимости от устройства).

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

Вот пример веб страницы без метатега и та же веб страница с метатегом :

Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.

Без метатега viewport

С метатегом viewport

Всё дело в CSS


Что­бы сде­лать кра­си­во, нам пона­до­бит­ся CSS — спе­ци­аль­ная раз­мет­ка, кото­рая отве­ча­ет за внеш­ний вид и пове­де­ние эле­мен­тов на стра­ни­це.

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

За ссыл­ки на стра­ни­це отве­ча­ет тег <a>, поэто­му доба­вим в CSS-раздел настрой­ки того, как будут выгля­деть наши ссыл­ки:

a {   }

Меж­ду фигур­ны­ми скоб­ка­ми мы напи­шем код, кото­рый пре­вра­тит наши ссыл­ки в ссыл­ки со стиль­ным тон­ким под­чёр­ки­ва­ни­ем. Для это­го нам пона­до­бит­ся:

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

Сде­ла­ем всё по оче­ре­ди.

Уби­ра­ем стан­дарт­ное под­чёр­ки­ва­ние

text-decoration: none;

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

Зада­ём цвет ссыл­ки

color: #0f7afc;

Это стан­дарт­ный цвет ссы­лок в бра­у­зе­ре Chrome, возь­мём его за осно­ву.

Дела­ем тон­кую линию вни­зу

border-bottom: 1px solid;border-bottom-color: rgba(15, 122, 252, 0.2);

Пер­вая строч­ка гово­рит бра­у­зе­ру, что­бы он нари­со­вал под ссыл­кой (border-bottom) сплош­ную линию (solid) тол­щи­ной в один пик­сель (1px).

А вто­рая — что­бы эта линия была опре­де­лён­но­го цве­та. RGBA озна­ча­ет, что нам нуж­но сме­шать крас­ный, зелё­ный и синий цве­та (RGB) и задать им какую-то про­зрач­ность (A). Сде­ла­ем всё тем же цве­том, что и ссыл­ки, а про­зрач­ность поста­вим 0.2 — так линия будет выгля­деть тонь­ше, чем один пик­сель.

Соби­ра­ем всё вме­сте

Ссылка на элемент страницы

Ссылка может вести не только на другую страницу, но и на определённый элемент страницы. Для этого нужному элементу нужно указать атрибут id. Значением этого атрибута является текст. У ссылки, которая ведёт к элементу страницы, атрибут href содержит знак «#» и id элемента.

Чтобы показать, как работает ссылка, создадим абзац и добавим ссылку, которая ведёт на него. А между ними вставим большой блок. Я сделаю его с помощью стилей, поэтому Вам в нём не нужно разбираться. Просто скопируйте тэг.

121314
<p id="ab">На этот элемент ведёт ссылка</p>
<div style="width: 200px; height: 1100px; border: 1px solid Red"></div>
<a href="#ab">Ссылка на абзац</p>

Ссылку на определённый элемент можно сделать не только на текущей странице, но и на новой. Для этого в атрибуте href нужно указать путь к файлу, затем знак # и id нужного элемента.

Варианты подключения медиазапросов

Подключение медиазапросов с использованием тега <link>

Вы можете подключать различные стили для различных устройств, используя HTML тег <link> (определяет связь между документом и внешним ресурсом) и его атрибута media:

<link media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media

Подключение медиазапросов с использованием тега <style>

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

1. Используя атрибут media HTML тега <style>:

<style media =  "mediatype and | not | only (media function)">
	...код CSS 
</style>
	
2. Используя CSS правило @media внутри HTML тега <style>:

<style>
	@media not | only mediatype and (media function) {
	  ...код CSS
	}
</style>

Обратите внимание, что при использовании атрибута media тега

Подключение медиазапросов с использованием правила @import

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

@import url("main.css") (min-width:481px) and (max-width:768px); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */
@import url("print.css") print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */
@import url("protv.css") projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */
@import url("file.css") screen and (orientation:landscape); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/

Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Вы можете подключать различные стили для различных устройств, используя HTML тег <link> (определяет связь между документом и внешним ресурсом) и его атрибута media:

<link media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

Вы можете подключать различные стили для различных устройств, используя HTML тег <style> (сообщает браузеру, что внутри него содержится код CSS):

1. Используя атрибут media HTML тега <style>:

<style media =  "mediatype and | not | only (media function)">
	...код CSS 
</style>
	
2. Используя CSS правило @media внутри HTML тега <style>:

<style>
	@media not | only mediatype and (media function) {
	  ...код CSS
	}
</style>

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

@import url("main.css") (min-width:481px) and (max-width:768px); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */
@import url("print.css") print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */
@import url("protv.css") projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */
@import url("file.css") screen and (orientation:landscape); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/

Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Псевдоклассы, имеющие отношение к дереву документа

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

:first-child

Применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа. Чтобы стало понятно, о чем речь, разберём небольшой код (пример 15.4).

Пример 15.4. Использование псевдокласса :first-child

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.4).

Рис. 15.4. Использование псевдокласса :first-child

В данном примере псевдокласс :first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7.0.

Псевдокласс :first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, в некоторых случаях красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки. С этой целью применяют свойство text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом :first-child (пример 15.5).

Пример 15.5. Отступы для абзаца

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.5).

Рис. 15.5. Изменение стиля первого абзаца

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

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности


С этим читают