Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » FAQ по оформлению ссылок (линки, links)

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3

Открыть новую тему     Написать ответ в эту тему

ZiLot



Тот еще тип
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Народ! Помогите кто-нибудь с CSS... Сделал CSS файл в нем прописано
Цитата:
A:link {COLOR: #ffffff; CURSOR: hand; TEXT-DECORATION: none}
 
Как мне теперь сделать, чтобы у ОДНОЙ конкретной ссылки был другой цвет, естественно отличный от установленного? (и hover, и link и visited...)

FAQ по оформлению ссылок

© lynx
 
  • За подчеркивание или неподчеркивание ссылки отвечает параметр text-decoration, который может принимать значения:  

    Цитата:
    none - не подчеркивать  
    underline - подчеркивать снизу (по умолчанию)  
    overline - подчеркивать сверху  
    line-through - зачеркивать  
    blink - мигать

     
    За цвет текста ответает параметр color, который может принимать значение шестнадцатеричного числа или имени цвета:  
    color:#000000;  
    color:black  

    © 8AleX8
    Вышепреведёнными параметрами возможности оформления ссылок не ограничеваются.
    Также можно использовать:
  • 'background'
  • 'border'
  • 'font'
    И т.д. -> http://loc.stack.ru/projects/CSS2/
     
    Пример.  
    Ссылка по умолчанию не подчеркнута, подчеркивается при наведении.  

    Код:
    a{font-family:Verdana, Arial; font-size:9pt; text-decoration:none; margin:0pt;}  
    a:link {color:#0000cc;}  
    a:hover {text-decoration:underline;}  
    a:active {color:#ff0000; text-decoration:underline;}  
    a:visited {color:#000066;}  

     
  • Вопрос:
    Цитата:
     
    Нужно чтобы на странице было несколько типов оформления посещенных и активных ссылок.  
    Например:  
    1. Красные (visited) и зеленые (active)  
    2. Синие(visited) и желтые(active)  

     
    Ответ:  
    Для каждого нужного тебе варианта создаешь отдельный класс:  

    Код:
    a.main {font-family:Verbana, Arial; font-size:10pt; text-decoration:none; margin:0pt;}  
    a:link.main {color:#0000cc;}  
    a:hover.main {text-decoration:underline;}  
    a:active.main {color:#ff0000; text-decoration:underline;}  
    a:visited.main {color:#000088;}  
       
    a.main1 {font-family:Verdana, Arial; font-size:8pt; text-decoration:none; margin:0pt;}  
    a:link.main {color:#0000cc;}  
    a:hover.main {text-decoration:underline;}  
    a:active.main {color:#ff0000; text-decoration:underline;}  
    a:visited.main {color:#000088;}  
       
    a.other {font-size:10pt; font-family:Verdana, Times New Roman; text-decoration:none;}  
    a:link.other {color:#0000dd;}  
    a:hover.other {text-decoration:underline; color:#0000ff;}  
    a:active.other {color:#ff0000; text-decoration:underline;}  
    a:visited.other {color:#5500aa;}  
       
    a.reestr {font-size:8pt; font-family:Verdana, Times New Roman; text-decoration:none; text-align:center;}  
    a:link.reestr {color:#0000dd;}  
    a:hover.reestr {text-decoration:underline; color:#0000ff;}  
    a:active.reestr {color:#ff0000; text-decoration:underline;}  
    a:visited.reestr {color:#5500aa;}
     
    И потом:  

    Код:
    <a class="main" href="http://xxx.x.net">.....</a>  

     
  • Вопрос:
    Цитата:
    почему посещеные сылки уже не меняют цвет, когда наводишь, в то время  как НЕпосещеные меняют?  

     
    Решение:

    Цитата:
    a:link {color: #0000FF}  
    a:hover {color: #FF0000}  
    a:visited {color: #0000FF}  
    a:visited:hover {color: #FF0000}

     


    Чтобы предупредить дальнейшие вопросы, советую ознакомиться с  
    ресурсами по CSS  
     
    <!-- тж. см.: -->  
    http://htmlbook.ru/html/links/index.shtml  
     

    CSS  » FAQ по оформлению ссылок
     

    © nuToH
    еще момент - эффект изменения фона ячейки (подразумевается, что значение cellpadding равняется "0"):

    Код:
    a:link,a:active,a:visited {
    background-color: blue;
    width: 100%;
    height: 100%
    }
    a:hover {
    background-color: red;
    width: 100%;
    height: 100%
    }

    эксперементируйте!

  • Всего записей: 936 | Зарегистр. 12-11-2002 | Отправлено: 15:49 21-01-2003 | Исправлено: nuToH, 17:08 21-08-2003
    GOOSE



    Advanced Member
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    lost_cat
     
     

    Цитата:
    Советую не использовать в размере текста фиксированные значения (вроде 11рх), а лучше в % (например, если хочешь текст сделать чуть меньше, пишешь 80%).  

     
    Ну это на любителя! А если страница сверстана так, что изменение отображаемого размера шрифта пользователем, полностью ее "порушит"???
    Попробуй изменить на этой странице... Как было, так практически и осталось Интервалы межстрочные кое где увеличились - и все!
    А будь тут по другому, боюсь, что результат был бы кошмарным!
    Короче - вывод: каждый решает сам! Например я предпочитаю задавать размер шрифта именно в пикселях


    ----------
    AutoPlay Media Studio по-русски!
    Русский хелп AutoPlay Media Studio

    Всего записей: 903 | Зарегистр. 17-10-2001 | Отправлено: 20:46 17-06-2003
    lynx



    Advanced lynx
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

    Цитата:
    Советую не использовать в размере текста фиксированные значения (вроде 11рх), а лучше в % (например, если хочешь текст сделать чуть меньше, пишешь 80%).  

     
    А еще можно задать (число)em - например 0.7em - это будет 0.7 от текущих установок. Мерзенькая директива, но Лебедев ее юзает. Я, видимо, не привыкла - вечно забываю, от чего она отсчет начнет и у меня текст крохотульный выходит

    Всего записей: 11712 | Зарегистр. 08-05-2001 | Отправлено: 21:20 17-06-2003
    Svarga

    Moderator
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    GOOSE

    Цитата:
    Ну это на любителя! А если страница сверстана так, что изменение отображаемого размера шрифта пользователем, полностью ее "порушит"???  

    Как раз что обратное на любителя
    При нормальной вёрстке нужно учитывать возможность увеличения размера шрифта посетителем (хотя бы до 150%)-- мало ли что: или с глазами у человека проблемы, или разрешение стоит такое, что текст в те же 12 пикселов невозможно читать, или шрифты корявые у посетителя выставлены, которые только когда нормальный размер у них читабельны...

    ----------
    away.

    Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 05:30 18-06-2003
    Lechii



    Member
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    lynx

    Цитата:
     
    вечно забываю, от чего она отсчет начнет и у меня текст крохотульный выходит

     
    только для IE PC , размер меньше 1.0 em по автомату микроскопический , а ровно 1.0 em получается большим .  
    Это решается простым ухищрением - для элемента P прописываем размер 1.0 em , и уменьшаем установкой размера в BODY через %, т.е. желая видеть на самом деле 0.8 em - прописываем в BODY 80%.
    Пример :

    Код:
     
    body {

     font-size: 80%; /* учитывая что размер шрифта задан в em , с тем чтобы  изменить размер  - меняем здесь */

    }
     
    h1 {
    font-size: 2.0em;
    font-weight: normal;

    }
    h2 {
    font-size: 1.7em;
    font-weight: normal;
    }
    h3 {
    font-size: 1.4em;
    font-weight: normal;
    }
     
    ol, ul, li {
    font-size: 1.0em;
    line-height: 1.8em;
    }
    p {
    font-size: 1.0em;
    line-height: 1.8em;
    margin: 1.2em 0em 1.2em 0em;
    }

    strong, b {
    font-weight: bold;
    }
     

     
    Просто , легко и пригодно для IE , Gecko-based и Opera тоже  

    Всего записей: 273 | Зарегистр. 26-12-2002 | Отправлено: 13:27 18-06-2003
    djelektronik

    Silver Member
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    а можно пойти еще круче и дать юзверю выбрать размер как он хотит
     
    http://www.padonki.org/creatiff/1126.html
    ну вот .. там народ пошел еше дальше
    теперь можно выбрать какой то шрифт и размер через дропдаун меню
     
    раньше там было + и - для текста одной колонки

    Всего записей: 2530 | Зарегистр. 28-06-2001 | Отправлено: 16:42 18-06-2003
    vladmir

    Silver Member
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    GOOSE

    Цитата:
    А будь тут по другому, боюсь, что результат был бы кошмарным!

    НИ-ФИ-ГА
    У меня в Мозилле всегда установлен минимальный размер шрифтов 16px.
    Эта страница выглядит замечательно - ни что ни на что не налезает.
    Svarga

    Цитата:
    или с глазами у человека проблемы

    Даже если не проблемы, а так - по мелочи (-2.2) зачем зрение дальше портить?
     
    Универсального рецепта не существует, но я бы предложил ещё один вариант: в критичных элементах (меню, формы...) - пиксели, основной текст - абсолютные размеры (medium, large ...)
    djelektronik
    Заглянул на падонкиорг - впечатляит, но только в IE, в Мозилле результат именно кошмарный или как там у них написано: "лоховские традиции". А вот по другому небезизвестному адресу вариант попроще(+- и 4 цвета), но универсальный:
    http://devedge.netscape.com/toolbox/tools-validation/
     

    Всего записей: 2232 | Зарегистр. 22-01-2003 | Отправлено: 18:23 21-06-2003
    GOOSE



    Advanced Member
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    vladmir

    Цитата:
    НИ-ФИ-ГА  
    У меня в Мозилле всегда установлен минимальный размер шрифтов 16px.  
    Эта страница выглядит замечательно - ни что ни на что не налезает.  

    Дык! Елы-палы! Потому и нормально все, что как ты не меняй размер, хоть 40px поставь, все равно он будет выглядеть так, как его придумали! Вот потому то я тоже так поступаю. Хотя если честно, жаль тех, с -2,2... которым это видеть приходится...
    Лучший выход, правильно  
    Svarga сказал: верстать так, чтоб при любых размерах макет не коробило.
    Однако это трудно... и трудоемко...


    ----------
    AutoPlay Media Studio по-русски!
    Русский хелп AutoPlay Media Studio

    Всего записей: 903 | Зарегистр. 17-10-2001 | Отправлено: 21:19 21-06-2003
    vladmir

    Silver Member
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    GOOSE

    Цитата:
    Потому и нормально все, что как ты не меняй размер, хоть 40px поставь, все равно он будет выглядеть так, как его придумали!

    В Интернет Ехплорере именно так: написано в CSS 12px - из меню не поменяешь - на экране будет 12 px. А Мозилла тем и хороша, что имеет массу настроек. Шрифты в пикселях меняются также, как и любые другие из меню (удобнее Ctrl +), а установка минимального шрифта означает, что все шрифты на всех страницах будут выводиться или минимальным шрифтом или бОльшим. У меня мин шрифт - 16px, в CSS этой страницы - 12px, в результате я вижу шрифт 16px т.е. это именно тот случай, о котором ты писал:

    Цитата:
    А если страница сверстана так, что изменение отображаемого размера шрифта пользователем, полностью ее "порушит"???
    Попробуй изменить на этой странице... Как было, так практически и осталось Интервалы межстрочные кое где увеличились - и все!
    А будь тут по другому, боюсь, что результат был бы кошмарным!

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

    Всего записей: 2232 | Зарегистр. 22-01-2003 | Отправлено: 14:21 22-06-2003
    nuToH



    Advanced Member
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

    Цитата:
    a:link,a:active,a:visited {  
    background-color: blue;  
    width: 100%;  
    height: 100%  
    }  
    a:hover {  
    background-color: red;  
    width: 100%;  
    height: 100%  
    }

     
    естественно задаются и другие параметры - color, text-decoration, font-weight, font-family и т.д.

    ----------
    ~ отец

    Всего записей: 627 | Зарегистр. 28-06-2001 | Отправлено: 17:10 21-08-2003
    DenisStrelok

    Junior Member
    Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
    Как сделать эффект подчеркивания фломастером? (картинку вставить не получается, потому что никак не подогнать ее под нужные слова)

    Всего записей: 129 | Зарегистр. 30-12-2005 | Отправлено: 21:56 09-05-2006
    Cheery



    .:МордератоР:.
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    DenisStrelok

    Цитата:
    Как сделать эффект подчеркивания фломастером?

    подчеркивания или выделения? берешь и делаешь линию подчеркивания более толстой и желтой, к примеру.. если интересует волнистая и так далее.. пока с помощью css такое не делается.

    ----------
    Away/DND

    Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:58 09-05-2006
    DenisStrelok

    Junior Member
    Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
    Как сделать эффект подчеркивания фломастером? (картинку вставить не получается, потому что никак не подогнать ее под нужные слова)
     
    Добавлено:

    Цитата:
    подчеркивания или выделения? берешь и делаешь линию подчеркивания более толстой и желтой, к примеру.. если интересует волнистая и так далее.. пока с помощью css такое не делается.

     
    это я уже понял ) пришлось сиэсэс читать...(заставили таки ) вот мне и интересно, как это сделать без него...




    Хватит refresh жать в браузере /Cheery/

    Всего записей: 129 | Зарегистр. 30-12-2005 | Отправлено: 22:00 09-05-2006 | Исправлено: Cheery, 22:01 09-05-2006
    Cheery



    .:МордератоР:.
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    DenisStrelok

    Цитата:
    вот мне и интересно, как это сделать без него...

    пока никак.. может и делается с помощью js, но это лишние проблемы.

    ----------
    Away/DND

    Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 22:04 09-05-2006
    SerCe

    Newbie
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    Ребята, а подскажите, что нужно прописать в CSS.  чтобы менялся текст ссылки
    Например
    Изначально  -  "Назад"
    А при наведении курсора на ссылку - "Вернуться назад"
    А когда курсор убираеться - "Назад"
     
     
    Как сделать гиперссылку на  страницу текст которой, при наведении курсора должен меняться на другой, а при отведении курсора - на первоначальный

    Всего записей: 1 | Зарегистр. 14-05-2006 | Отправлено: 10:08 14-05-2006
    Brodyaga



    Silver Member
    Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
    это не с CSS делается,

    Код:
     
    <a href='back.php' onmouseover='this.innerHTML="Вернуться назад"' onmouseout='this.innerHTML="Назад"'>Назад</a>
     


    ----------
    Damn Metal

    Всего записей: 2713 | Зарегистр. 07-01-2006 | Отправлено: 11:57 14-05-2006
    ShafMAN

    Junior Member
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    Если в CSS, то можно ещё так:

    Код:
     
    a:hover:before{content:'Вернуться ';}
    <a href='back.php'>Назад</a>
     

    Всего записей: 125 | Зарегистр. 09-01-2005 | Отправлено: 13:16 14-05-2006
    DenisStrelok

    Junior Member
    Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

    Цитата:
    a:link {text-decoration:none; color: #0000FF;}    
    a:hover { text-decoration:underline}    
    a:active {text-decoration:none;  color:  #0000FF;}    
    a:visited {text-decoration:none; color: #000099;}

     
    почему при наведении не подчеркиваются посещенные ссылки? :-\ они что...не ссылки что-ли?
     
    ------(после экспериментов)-----------
    фигасе!!!!!!!!!!, смотрите прикол!
    а вот так

    Цитата:
    a:link {text-decoration:none; color: #0000FF;}    
    a:active {text-decoration:none;  color:  #0000FF;}    
    a:visited {text-decoration:none; color: #000099;}
    a:hover { text-decoration:underline}

    подчеркиваются!!
    вот это номер

    Всего записей: 129 | Зарегистр. 30-12-2005 | Отправлено: 17:55 14-08-2006 | Исправлено: DenisStrelok, 18:03 14-08-2006
    Cheery



    .:МордератоР:.
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    DenisStrelok
    потому что hover это глобальное свойство ссылок и применение свойств идет сверху вниз. во втором случае оно устанавливается последним и переопределяет предыдущие настройки

    ----------
    Away/DND

    Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:23 14-08-2006
    okkervil

    BANNED
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    DenisStrelok
    Cheery

    Цитата:
    a:visited {text-decoration:none; color: #000099;}  
    a:hover { text-decoration:underline}  

    В этом суть. Ссылка у тебя не только hover, но и уже visited. Поэтому к ней применимы два правила.

    Всего записей: 401 | Зарегистр. 01-02-2006 | Отправлено: 22:42 14-08-2006
    Jason_Bourne

    Newbie
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    Как сделать, чтобы ссылки подчеркивались пунктиром? Решение с border-bottom-style: dashed работает, но только если ссылка умещается на одной строке. А если она занимает несколько строк?

    Всего записей: 9 | Зарегистр. 05-04-2008 | Отправлено: 07:53 11-04-2008
    Открыть новую тему     Написать ответ в эту тему

    Страницы: 1 2 3

    Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » FAQ по оформлению ссылок (линки, links)


    Реклама на форуме Ru.Board.

    Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
    Modified by Ru.B0ard
    © Ru.B0ard 2000-2024

    BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

    Рейтинг.ru