Настройка внешнего вида сайтов

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

Содержание

Что такое стиль?

Стиль – это описание внешнего вида того или иного элемента страницы. Раньше, когда стили использовались редко, всё оформление жёстко кодировалось в тексте страницы. Если верстальщику нужно было выделить какой-то текст красным цветом, то он так и писал:

<p><font color="red">Внимание! Это очень важный текст!</font></p>

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

Внимание! Это очень важный текст!

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

<p class="warning">Внимание! Это очень важный текст!</p>

А в отдельном файле описываются свойства стиля warning:

p.warning { color: red; }

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

Внутреннее устройство страницы

Современные сайты делаются на основе блоков. Каждый блок содержит некоторый законченный объект, например, шапку сайта, меню, основной текст, рекламный блок или подвал:

Внутреннее устройство страницы

Каждый такой блок представляет собой некоторое содержимое, заключенное между соответствующими тегами <div> и </div>. Как правило, внутри тега указывается и стиль, используется для оформления блока, например <div class="adv">. Иногда верстальщик для удобства может дать каждому блоку собственное имя: <div id="showtime">.

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

div.adv { ... }

Обратите внимание, что имя элемента div и имя класса adv разделены точкой. В случае, если для блока задано имя (id), вместо точки ставится решетка – в этом случае изменения стиля будут относиться к конкретному блоку, даже если на странице есть другие блоки с таким же стилем:

div#showtime { ... }

Что можно сделать с блоками?

Самая распространенная операция, для которой используются пользовательские стили, это изменение видимости блока: с её помощью можно скрыть целые части страницы, например, блок с комментариями пользователей или рекламой. Для управления видимостью используется свойство display. Чтобы скрыть блок, свойству display нужно установить значение none, а чтобы показать его снова – значение block или inline:

div.adv { display: none; }

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

Другая операция – это перекраска фона блока в другой цвет. Если дизайнер подобрал цвет фона, который затрудняет чтение текста, можно изменить цвет фона через свойство background-color:

div.adv { background-color: white; }

Вместо white можно написать любое другое значение цвета.

Изменить цвет текста можно с помощью атрибута color:

div.adv { color: black; }

Атрибут text-decoration позволяет сделать текст подчёркнутым (underline) или, напротив, неподчеркнутым (none):

div.adv { text-decoration: underline; }

Атрибут font-weight позволяет сделать текст полужирным (если в качестве значения указано bold) или нежирным (в случае значения normal):

div.adv { font-weight: bold; }

Другие элементы страницы

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

Конечно, элементов гораздо больше, просто эти являются самыми распространенными.

Селекторы

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

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

a[href="/contacts/"] { font-weight: bold; }

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

img[src^="https://ru.wikipedia.org/"] { display: none; }

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

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

Если в ссылке встречается упоминание расширения .pdf (например, документы Adobe PDF Reader), то такая ссылка будет выделена красным цветом.

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

img[width="88"][height="31"] { display: none; }

В некоторых случаях требуется применять оформление к тегу, который вложен в другой тег. Например, если в документе ненужные блоки всегда заключены в тег <p>, который, в свою очередь, вложен в тег <div width="25%">, то можно выбрать такой блок используя простое перечисление через пробел:

div[width="25%"] p { background-color: white; }

Если на странице расположены несколько однотипных элементов, то можно применить оформление только к первому или последнему из них, используя модификаторы :first-child и :last-child соответственно:

ul#items li:first-child { font-color: red; }

В этом примере первый элемент ненумерованного списка с именем items будет раскрашен красным цветом.

Приоритет пользовательских стилей

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

Однако, в некоторых случаях браузер считает стили автора более приоритетными и упорно использует для оформления именно их. В таком случае на помощь приходит атрибут !important, который повышает приоритет стиля пользователя. Например, пользователь переопределил цвет фона блока adv на белый:

div.adv { background-color: white; }

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

div.adv { background-color: white !important; }

Теперь фон должен стать белым.

Практика: собираем всё вместе

В качестве примера попробуем убрать полосу навигации на этом сайте в браузере Opera. В других браузерах может потребоваться установка дополнительного расширения, которое будет применять наши CSS-стили к странице, например, в браузере Google Chrome одним из таких расширений является Stylebot, а в браузере Firefox – Stylish.

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

На этом сайте полоса навигации заключена в блок с именем menu:

<div id="menu">

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

div#menu { ... }

Внутри фигурных скобок напишем атрибут display и установим ему значение none:

div#menu { display: none; }

На этом редактирование файла завершено.

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

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

Информация в сети

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

Опубликовано: 08.06.2011
Обновлено: 30.08.2016