Настройка внешнего вида сайтов
Данная заметка скоро будет удалена с сайта. Если Вы хотите оставить её себе — самое время сохранить её к себе на локальный диск.
Современные браузеры предлагают много полезных возможностей, часть из которых кажется слишком сложными для понимания. Примером такой «сложной» возможности является использование пользовательских стилей для сайтов. В этой заметке статье я постараюсь показать что же это за зверь такой и с чем его кушать.
Содержание
- Что такое стиль?
- Внутреннее устройство страницы
- Что можно сделать с блоками?
- Другие элементы страницы
- Селекторы
- Приоритет пользовательских стилей
- Расширения для разных браузеров
- Информация в сети
Что такое стиль?
Стиль – это описание внешнего вида того или иного элемента страницы. Раньше, когда стили использовались редко, всё оформление жёстко кодировалось в тексте страницы. Если верстальщику нужно было выделить какой-то текст красным цветом, то он так и писал:
При открытии такой страницы в браузере она выглядела так, как и ожидалось:
Конечно, этот способ прост, но неудобен: что если такой красный текст использовался на сотнях страниц сайта, а потом его решили заменить на, скажем, малиновый? Замену нужно было бы провести на всех страницах. Поэтому вполне логичным решением стало разделение наполнения страницы и её вида: за содержимое отвечает стандарт HTML, а за оформление - CSS. Теперь в коде страницы пишется лишь название стиля:
А в отдельном файле описываются свойства стиля warning:
Если теперь возникнет необходимость поменять цвет всех подобных текстов, нужно отредактировать один-единственный файл. Это облегчает жизнь верстальщикам – и нам, пользователям.
Внутреннее устройство страницы
Современные сайты делаются на основе блоков. Каждый блок содержит некоторый законченный объект, например, шапку сайта, меню, основной текст, рекламный блок или подвал:
Каждый такой блок представляет собой некоторое содержимое, заключенное между соответствующими тегами <div> и </div>. Как правило, внутри тега указывается и стиль, используется для оформления блока, например <div class="adv">. Иногда верстальщик для удобства может дать каждому блоку собственное имя: <div id="showtime">.
Именно эти параметры можно использовать для изменения внешнего вида блоков. Так, например, чтобы внести изменения в стиль сразу всех блоков с классом adv нужно написать в пользовательском стиле такой код:
Обратите внимание, что имя элемента div и имя класса adv разделены точкой. В случае, если для блока задано имя (id), вместо точки ставится решетка – в этом случае изменения стиля будут относиться к конкретному блоку, даже если на странице есть другие блоки с таким же стилем:
Что можно сделать с блоками?
Самая распространенная операция, для которой используются пользовательские стили, это изменение видимости блока: с её помощью можно скрыть целые части страницы, например, блок с комментариями пользователей или рекламой. Для управления видимостью используется свойство display. Чтобы скрыть блок, свойству display нужно установить значение none, а чтобы показать его снова – значение block или inline:
Если блок скрыт, то другие блоки, следующие в коде страницы за этим блоком, постараются занять освободившееся место, но иногда сделать это не получается и вместо блока остаётся пустое пространство.
Другая операция – это перекраска фона блока в другой цвет. Если дизайнер подобрал цвет фона, который затрудняет чтение текста, можно изменить цвет фона через свойство background-color:
Вместо white можно написать любое другое значение цвета.
Изменить цвет текста можно с помощью атрибута color:
Атрибут text-decoration позволяет сделать текст подчёркнутым (underline) или, напротив, неподчеркнутым (none):
Атрибут font-weight позволяет сделать текст полужирным (если в качестве значения указано bold) или нежирным (в случае значения normal):
Другие элементы страницы
Кроме блоков, стиль можно изменить практически у всех элементов страницы. Для этого нужно просто поменять стили того или иного стандартного элемента:
- body – внешний вид всей страницы;
- a – внешний вид ссылок;
- a:hover – внешний вид ссылки при наведении на неё курсора мышки;
- td – внешний вид ячеек таблицы;
- h1 ... h6 – внешний вид заголовков 1-6 уровня.
Конечно, элементов гораздо больше, просто эти являются самыми распространенными.
Селекторы
Иногда требуется применить стили избирательно: не ко всем элементам, а только к удовлетворяющим определенным условиям. Для таких выборок используются селекторы. Кроме того, селекторы могут помочь в тех случаях, когда авторы сайта не использовали классы и идентификаторы в нужном блоке, но изменить его оформление всё-таки хочется.
Если у элемента заданы атрибуты, то выборку можно сделать по ним, указав атрибуты и их значения в скобках после названия тега:
В этом примере ссылки, которые ведут на страницу контактов, будут выделены жирным. Конечно, не всегда значение атрибута нужно приводить целиком, иногда достаточно привести только его начало или некоторую часть:
Символ крышечки перед равенством обеспечивает проверку начала строки атрибута: в примере будут скрыты все картинки, размещенные на сайте русской Википедии, независимо от их имени. А если символ крышечки заменить на звездочку, то проверяться будет не начало атрибута, а любая его часть:
Если в ссылке встречается упоминание расширения .pdf (например, документы Adobe PDF Reader), то такая ссылка будет выделена красным цветом.
Иногда требуется проверять сразу несколько атрибутив. Так, ширина 88 пикселей может быть у разного рода изображений, но если у картинки ещё и высота 31 пиксель, то это скорее всего мини-баннер в виде кнопки. Следующий код позволяет скрыть все кнопки на странице (если у них явно заданы размеры):
В некоторых случаях требуется применять оформление к тегу, который вложен в другой тег. Например, если в документе ненужные блоки всегда заключены в тег <p>, который, в свою очередь, вложен в тег <div width="25%">, то можно выбрать такой блок используя простое перечисление через пробел:
Если на странице расположены несколько однотипных элементов, то можно применить оформление только к первому или последнему из них, используя модификаторы :first-child и :last-child соответственно:
В этом примере первый элемент ненумерованного списка с именем items будет раскрашен красным цветом.
Приоритет пользовательских стилей
В большинстве случаев браузер считает стили, установленные пользователем, более приоритетными, чем авторские стили страницы. Иными словами, сначала к элементу страницы применяются стили, определенные на сайте, а затем поверх них накладываются стили, определенные пользователем, и если оба варианта стиля содержат один и тот же атрибут, то данный атрибут будет иметь то значение, которое указал пользователь, а не автор сайта. Например, если автор решил сделать текст ссылки синим, а пользователь переопределил его на зеленый, то ссылка будет зеленой.
Однако, в некоторых случаях браузер считает стили автора более приоритетными и упорно использует для оформления именно их. В таком случае на помощь приходит атрибут !important, который повышает приоритет стиля пользователя. Например, пользователь переопределил цвет фона блока adv на белый:
Однако фон по-прежнему остаётся розовым. В этом случае можно попробовать изменить пользовательский стиль следующим образом:
Теперь фон должен стать белым.
Расширения для разных браузеров.
Для того чтобы изменять стили сайта требуется установка дополнительного расширения, которое будет применять наши CSS-стили к странице, например, Stylus. Скачать его можно здесь:
Информация в сети
Конечно, возможности стилей гораздо богаче описанного выше. В интернете можно найти множество руководств и справочников по стилям и их особенностям в реализации конкретных браузеров, например, сайт WebReference.ru предлагает хорошие самоучитель и справочник по каскадным таблицам стилей.
Опубликовано: 08.06.2011
Обновлено: 23.12.2018