Включение CSS в HTML (стр.3). Оформление тэга more в WordPress. Ссылки без подчеркивания

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

Понятно, что картинка уже должна лежать в папке images вашего шаблона и иметь заданные размеры и название bg-more.gif .

Все просто! Если у вас есть другие варианты решения данной проблемы, буду рад услышать.

Внешние таблицы стилей

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

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

Как вы уже знаете, для этих целей используется пустой элемент LINK, который располагается в секции head. Рассмотрим пример, когда нам нужно подключить к HTML-документу таблицу стилей, находящуюся в файле style.css .

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

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

Такой выбор предоставляют только браузеры Netscape версии 6.x (и Mozilla соответственно), Opera 5 и старше. Они предоставляют возможность увеличения размера шрифта, даже если он задан в пикселях. Так что, по сути, альтернативные таблицы стилей и не нужны. Internet Explorer , хоть и самый распространенный браузер, но не предоставляет такой возможности. Размер шрифта он позволяет увеличить только в том случае, если шрифт задан при помощи ключевых слов или с помощью стандартных размеров языка HTML, т.е. чисел от 1 до 7. Наверное, поэтому разработчики и не пишут несколько альтернативных таблиц.

Теперь вернемся к элементу LINK. А

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

Атрибут rel указывает, какое отношение имеет подключаемый файл к данному HTML-документу. Чтобы добавить основную таблицу стилей, используется значение stylesheet, при этом описание в атрибуте title задавать не нужно. Для того чтобы из множества альтернативных таблиц можно было выбрать предпочитаемую пользователем, укажите атрибут rel="stylesheet" и задайте ее описание в атрибуте title . Чтобы задать альтернативную таблицу стилей, задайте атрибут rel="alternate stylesheet" иописание в атрибуте title .

Вот несколько примеров:

Эта строка подключает альтернативную таблицу стилей с более мелким размером шрифта, таблица хранится в файле small-font.css .

С помощью этой строки подключается альтернативная таблица стилей с самым большим размером шрифта, таблица хранится в файле big-font.css .

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

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

Импорт таблиц стилей

Существует еще один способ подключить к HTML-документу таблицу стилей, хранящуюся в отдельном файле. Делается это при помощи специальной директивы @import следующим образом.

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

Следует отметить, что директиву @import не поддерживает браузер Netscape Navigator 4.0 , но он установлен не более чем у 0,1% пользователей Сети, поэтому ими можно пренебречь.

Как скрыть информацию о стиле от браузера

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

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

Но, вначале немного справочной информации:

Элемент может принимать несколько «состояний», определяемых псевдо-классами CSS:

• a:link - нормальное состояние ссылки;
• a:visited - ссылка была посещена ранее;
• a:hover - на ссылку наведен курсор (есть статья про );
• a:active - активная ссылка (при нажатии на нее);
• a:focus - пользователь использует клавишу TAB для навигации.

Один из классических примеров:

Распространенные свойства CSS для оформления ссылок

• color – цвет гиперссылки;
• text-decoration – применяемый к тексту оформительский прием (в блоге есть детальная статья );
• background-color – цвет фона (может, например, меняться если на ссылку наведен курсор (a:hover);
• font-weight – хороший способ подчеркнуть ссылку, сделав ее жирным шрифтом Bold.
• border – рамка;

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

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

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

В обязательном порядке следует определять все псевдо-классы, хотя ссылки вполне будут работать если стили псевдо-классов не определены, поэтому веб-мастера часто их игнорируют. Не стоит забывать так же что, большое количество людей не используют мышь, поэтому даже о таком “ерундовом” состоянии как a:focus, забывать нельзя. В идеале желательно определить стиль для каждого из состояний. К тому же следует помнить, что по умолчанию разные браузеры имеют разное оформление для псевдо-клссов. Так, например, в Firefox:active и:focus выделяются с помощью серой рамки, в то время как в Google Chrome ссылки с:active идут без стиля, а:focus имеет рамку желтого цвета.

Ну и напоследок, несколько хороших примеров для подражания:

G4Tv

Демонстрирует массу «ссылочных» эффектов, гулять по сайту просто интересно!

Сarsonified

Очень четкие состояния a:hover. Пример для подражания!

Надеюсь, эти несколько примеров вдохновили вас на серьезное оформление ссылок! Главное в этом деле — не забывать о деталях (мелочах). Можно не создавать отдельные оригинальные эффекты для состояния наведения на ссылку (hover), а просто хотя бы изменить цвет. Не обязательно делать ссылки яркими и привлекающими внимание, достаточно просто «отделить их от текста». Ну и, конечно, проверяйте работу ссылок во всех браузерах.

P.S. Постовой. Вот, например, как раз по теме — интернет магазин парфюмерии Vanilla имеет очень красивый дизайн и продуманное оформление ссылок.
Чтобы сайт радовал посетителей дизайном и стабильно работал закажите хостинг у надежной хостинговой компании с хорошими ценами.
Крайне полезной для вебмастеров окажется статья где купить ссылки в биржах статей или ссылок — автоматических или с размещением навсегда.

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.

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

Ссылки без подчеркивания

Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).

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

Подчеркнутые и надчеркнутые ссылки

Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением свойства text-decoration: underline overline в селекторе A:hover .

Изменение размера ссылки

Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.

Изменение цвета подчеркивания

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).

Пример 4. Создание подчеркивание другого цвета

Ссылки разных цветов

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

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