Можно сказать, что текстовые ссылки являются наиболее распространенными элементами страниц на веб-страницах. Стили текстовых ссылок по умолчанию подчеркнуты. Этот неизмененный внешний вид может побудить многих друзей изменить его, чтобы он соответствовал всей странице. широко использовались, теперь это желание можно очень легко реализовать. Сегодня я познакомлю вас, как использовать таблицы стилей для создания красочных эффектов текстовых ссылок. Я познакомлю вас с этим в главах «Базовый», «Продвинутый» и «Продвинутый». Все эффекты стилей ссылок будут реализованы в редакторе стилей Dreamweaver. Подробную информацию об использовании редактора стилей в Dreamweaver см. в предыдущем введении. Эффект просмотра в стиле ссылки показан ниже, для просмотра конкретных страниц см. здесь;
1. Подготовка
Сначала мы создадим базовый стиль ссылки, а к другим стилям на его основе добавим собственный класс класса.
1. Нажмите Shift+F11, чтобы открыть панель стилей, и нажмите кнопку «Новый стиль», как показано на рисунке 1;
2. Выберите «Использовать селектор CSS» в разделе «Тип», чтобы создать стиль ссылки по умолчанию, как показано на рисунке 2;
3. Как показано на рисунке 3, установите стиль ссылки по умолчанию без подчеркивания, шрифт Song Dynasty 9pt, без других цветов и т. д. Позже мы установим его отдельно для каждого класса.
4. Определите класс стиля Class. Каждый из наших стилей ниже определяет отдельный класс и назначает его тексту ссылки. Шаги следующие: нажмите «Добавить», чтобы открыть новую панель стиля определения, выберите «Создать собственный стиль (класс), чтобы определить свой собственный класс стиля. Как показано на рисунке 4;
5. Добавьте класс стиля к тексту ссылки. Выберите текст ссылки в Dreamweaver, выберите метку на панели быстрого выбора метки в нижней части окна, щелкните метку правой кнопкой мыши и выберите «Задать класс», чтобы назначить индивидуальный стиль тексту ссылки, как показано на рис. 5;
6. Метод для других стилей текста ссылок тот же, и я не буду вводить его позже. В этом уроке друзья могут создавать свои собственные стили ссылок для определения статуса наведения. Я больше не буду его вводить, просто введите [.t1:hover] сразу, когда будет предложено определение.
2. Стиль основной ссылки
Мы полностью завершим эту часть эффекта ссылки в категории «Тип» редактора стилей. Я не буду вдаваться в подробности его создания и настройки, я лишь покажу вам готовую схему панели и дам краткое введение.
1. Обычная ссылка. Как показано на рисунке 6;
Обычные ссылки задаются в первом элементе «Тип» в категории «Категория» редактора стилей. Цвет определяет цвет шрифта ссылки, а «Украшение» определяет стиль подчеркивания ссылки, которая разделена на следующие категории:
подчеркивание: подчеркивание надчеркивание: перечеркивание, зачеркивание мигание: мигающая линия нет: подчеркивание отсутствует
Несколько других стилей ссылок в этом разделе создаются путем изменения комбинации штрихов.
2. Нет подчеркнутых ссылок, как показано на рисунке 7;
3. Ссылка, подчеркнутая двойным подчеркиванием, как показано на рисунке 8;
4. Зачеркнутые ссылки, как показано на рисунке 9;
3. Расширенные стили ссылок
Далее я представлю альтернативный метод определения стиля ссылки. Этот метод в основном использует атрибут Border в таблице стилей для замены подчеркивания обычных ссылок. Поскольку Border имеет больше параметров управления и стилей, можно реализовать некоторые специальные функции. Давайте посмотрим на панель ниже, как показано на рисунке 10;
Параметр «Граница» включает три части: «Ширина» (толщина линии), «Цвет» (цвет линии) и «Стиль» (тип линии), и каждая часть может устанавливать разные параметры для разных границ. Это обычный эффект «Невозможный».
Необходимо напомнить всем, что есть необходимое условие для использования этого метода для определения стилей ссылок: должен быть определен атрибут Box в стиле, как показано на рисунке 11;
Это связано с тем, что Border является блочным элементом в стиле, и мы должны сначала определить блочный элемент, прежде чем Border сможет работать. Нам нужно только произвольно определить ширину или высоту в поле. Вы можете попробовать конкретные значения, чтобы увидеть эффект. Здесь я определил высоту как 0. Давайте посмотрим, каких эффектов можно добиться.
1. Альтернативные стили ссылок. Настройки показаны на рисунке 12;
2. Настройте цвет подчеркивания. Мы можем определить разные цвета для подчеркивания и текста. Этого эффекта невозможно достичь с помощью обычного текста ссылки, если определены цвет границы и цвет текста. иначе, как показано на рисунке 13;
3. Настройте расстояние подчеркивания. Мы можем установить расстояние для такой линии в категории «Коробка», изменив значение Padding. В этом примере мы установили Padding-Bottom на 5 пикселей, как показано на рисунке 14.
4. Настройте длину и выравнивание разметки. Кроме того, мы также можем точно определить длину и выравнивание линий. Откройте категорию «Коробка» и установите для параметра «Ширина» значение 200, как показано на рисунке 15. Установите для параметра «Выравнивание текста» категории «Блок» значение «По центру», что соответствует выравниванию по середине, как показано; на рисунке 16;
5. Настройте эффект двойного подчеркивания. Измените стиль границы, чтобы изменить внешний вид подчеркивания. Установите для стиля значение «Двойной», а для параметра «Снизу» — значение 3 пикселя, чтобы добиться эффекта двойного подчеркивания. Как показано на рисунке 17;
4. Расширенные стили ссылок
Комбинируя представленные выше методы, мы также можем создавать более сложные стили текстовых ссылок. Ниже мы представляем три примера.
1. Определите ссылки блоков. Сначала добавьте к ссылке цвет фона, как показано на рисунке 18;
Затем добавьте четыре границы к текстовой ссылке, чтобы получить текстовую ссылку в виде плоского блока, как показано на рисунке 19;
2. Определите текстовые ссылки в виде кнопок. Измените стиль границы и определите Border-Style как начало, как показано на рисунке 20;
Определите параметр «Ширина и высота в поле», чтобы определить ширину и высоту кнопки. Определите отступ как 2 пикселя, чтобы создать интервал в 2 пикселя между текстом ссылки и кнопкой, как показано на рисунке 21;
3. Определите текстовые ссылки со специальными эффектами. Таблица стилей CSS также содержит набор фильтров специальных эффектов. Мы можем комбинировать фильтры с предыдущими параметрами для создания специальных стилей ссылок. В этом примере я создал текстовую ссылку с помощью фильтра «Размытие» с эффектом границы. Как показано на рисунке 22;
4. Определите эффект статического переключения фона. В этом примере достигается эффект переключения фона путем установки разных фоновых изображений для нормального состояния и состояния при наведении текста ссылки. Смотрите картинку ниже:
5. Эффект динамического переключения фона. Этот эффект в основном аналогичен приведенному выше примеру, за исключением того, что динамический фон изображения Gif определяется в состоянии наведения. И эта картинка требует небольшого умения, а именно установить цикл на один раз, добавить кадр в конце и установить время кадра на большее значение, например 10000. Это позволяет анимации выполняться для одной стороны, а затем останавливаться. Чтобы повысить скорость выполнения эффектов, нам также необходимо добавить поведение Preload /doc/webpage/images/images в Dreamweaver. Для этого необходимо открыть панель поведения и добавить поведение Preload /doc/webpage/images/images, как показано на рисунке:
Мы можем предварительно загрузить все четыре изображения, необходимые для двух последних стилей ссылок, как показано ниже:
5. Резюме
Я представлю очень много стилей ссылок, и вместе с настройкой статуса текста ссылки вы можете добиться очень красивых эффектов. См. Здесь просмотр конкретных страниц. Я надеюсь, что друзья смогут создать больше текста ссылок на основе вышеизложенного. идеи. Помните, что таблица стилей подобна айсбергу с сокровищами в создании веб-страниц. Сегодня мы открыли лишь небольшой уголок айсберга. Еще больше сокровищ ждут вас.