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

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

Содержание

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

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

<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; }

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

Расширения для разных браузеров.

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

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

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

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