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

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

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

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

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

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
    LelikV



    Настоящий Джедай
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    Это в CSS
     

    Код:
    a.new{
    color: #414141;
    font: 8pt Verdana;
    font-weight: bold;
    text-decoration: underline;
    }
     
    a.new:link{
    color: #414141;
    font: 8pt Verdana;
    font-weight: bold;
    text-decoration: underline;
    }
     
    a.new:hover{
    color: #FF0000;
    font: 8pt Verdana;
    font-weight: bold;
    text-decoration: underline;
    }
     
    a.new:visited{
    color: #FF0000;
    font: 8pt Verdana;
    font-weight: bold;
    text-decoration: underline;
    }
     

     
    а в ссылке пишешь <a href="porno.com" class="new">

    Всего записей: 4182 | Зарегистр. 17-12-2001 | Отправлено: 15:58 21-01-2003 | Исправлено: LelikV, 15:58 21-01-2003
    Sergeant

    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    ZiLot,
    Прописывай этой одной конкретной ссылке стиль ручками. Т.е. в тэги <a...> пиши style='...и тут все свои другие цвета и т.д...'

    ----------
    Если вы спорите с идиотом,
    Наверняка, он занимается тем же самым.

    Всего записей: 1553 | Зарегистр. 06-08-2001 | Отправлено: 16:00 21-01-2003
    LelikV



    Настоящий Джедай
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    Sergeant
     
    Для этого стили есть вообще-то

    ----------
    ушел на рыбалку

    Всего записей: 4182 | Зарегистр. 17-12-2001 | Отправлено: 16:24 21-01-2003
    The Look



    BANNED
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    Sergeant
    LelikV
    Это называется класс создать.
    Два разных класса для вух типов ссылок.
    Правда, работает иногда крвовато. особенно hover.

    Всего записей: 1263 | Зарегистр. 04-09-2002 | Отправлено: 16:29 21-01-2003
    Ausw



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

    Цитата:
    Правда, работает иногда крвовато. особенно hover.  
    какие руки, так и работает.


    ----------
    Be High.

    Всего записей: 7371 | Зарегистр. 12-07-2001 | Отправлено: 18:32 21-01-2003
    Sergeant

    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    LelikV,
    Я знаю, для чего нужны стили а как по-твоему style переводится с буржуйского? просто он попросил для одной ссылки во всем документе создать уникальный стиль. Я в таких случаях не создаю новый css-класс, а прописываю style для этой ссылки.
     
    Сколько людей - столько мнений

    ----------
    Если вы спорите с идиотом,
    Наверняка, он занимается тем же самым.

    Всего записей: 1553 | Зарегистр. 06-08-2001 | Отправлено: 01:49 22-01-2003
    kkhk



    Advanced Member
    Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
    ZiLot во первых скачай программу TopStyle? в будущем для создания стилей пригодится.
    Во вторых есть море вариантов сделать смену цвета ссылки, вот например один:
    a.link, a.link:active, a.link:visited{DISPLAY: inline; color:#7D1415; FONT-SIZE: 7pt; TEXT-TRANSFORM: uppercase; FONT-FAMILY: Tahoma, Arial, Verdana; LETTER-SPACING: 2px; text-decoration:none; }
    a.link:hover {DISPLAY: inline; color:#02283A; FONT-SIZE: 7pt; TEXT-TRANSFORM: uppercase; FONT-FAMILY: Tahoma, Arial, Verdana; LETTER-SPACING: 2px; BORDER-BOTTOM: #7D1415 1px dotted}
     


    ----------
    infix* - зашибательский weblog
    Говори кратко, проси мало, уходи борзо

    Всего записей: 930 | Зарегистр. 12-10-2001 | Отправлено: 06:05 22-01-2003
    ZiLot



    Тот еще тип
    Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
    Всем спасибо - разобрался...

    Всего записей: 936 | Зарегистр. 12-11-2002 | Отправлено: 20:24 22-01-2003
    LelikV



    Настоящий Джедай
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    ZiLot
     
    Не за что

    ----------
    ушел на рыбалку

    Всего записей: 4182 | Зарегистр. 17-12-2001 | Отправлено: 13:37 23-01-2003
    kurat



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

    Код:
    <style type="text/css">
    <!--
    A:link    {COLOR: #ffffff; FONT-FAMILY: Verdana; font-size: 11px; TEXT-DECORATION: none}
    A:active  {COLOR: #ffffff; FONT-FAMILY: Verdana; font-size: 11px; TEXT-DECORATION: none}
    A:visited {COLOR: #ffffff; FONT-FAMILY: Verdana; font-size: 11px; TEXT-DECORATION: none}
    A:hover   {COLOR: #ffff80; FONT-FAMILY: Verdana; font-size: 11px; TEXT-DECORATION: underline}
    .news {BACKGROUND: #999966; COLOR: #000000}
    -->
    </style>

     
    Чего сюда надо вставить чтобы и обычный текст был таким же шрифтом?

    Всего записей: 444 | Зарегистр. 21-02-2002 | Отправлено: 18:58 15-06-2003
    Chumka

    BANNED
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    kurat
    А что такое обычный текст? (:
    Он полюбому где-то сидит. Либо в BODY тогда пиши для  
    BODY { COLOR: #ffffff; FONT-FAMILY: Verdana; font-size: 11px; TEXT-DECORATION: none}
    чаще всего в таблице  
    TABLE {...}
    TR {...}
    TD {}  
    Некоторые броузеры прада не понимают таблицы в ЦСС
    Последнее время модно все в дивах делать
    DIV {...}

    Всего записей: 177 | Зарегистр. 07-05-2003 | Отправлено: 19:23 15-06-2003
    lynx



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

    Цитата:
    Чего сюда надо вставить чтобы и обычный текст был таким же шрифтом?

     
    Ничего.  
    Создай для обычного текста отдельный класс, например:
     
    .text {FONT-FAMILY: Verdana; font-size: 11px; color:#какой_надо}
     
    А потом пиши в коде, хотя и бы и:
     
    <body class="text">
     
    Это это кушается не во всех браузерах и не удобно, имхо, я обычно пишу так:
     
    <body...>
    <div class="text">
     
    ...
    ....
    ...
     
     
     
     
    </div>
    </body>
     
    Тогда весь текст по дефолту (если не указано иначе) будет этого класса (кроме того, что внутри таблиц).
     
    Читайте, учите:
     
    CSS стандарты, учебники, уроки

    Всего записей: 11712 | Зарегистр. 08-05-2001 | Отправлено: 19:39 15-06-2003
    kurat



    Full Member
    Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
    .news {BACKGROUND: #999966; COLOR: #000000; FONT-FAMILY: Verdana; font-size: 11px;}  
     
    А так не пойдет? Так как цвет тут задается как раз для таблицы где текст надо сделать.

    Всего записей: 444 | Зарегистр. 21-02-2002 | Отправлено: 21:02 15-06-2003 | Исправлено: kurat, 21:02 15-06-2003
    lost_cat



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

    Цитата:
    .news {BACKGROUND: #999966; COLOR: #000000; FONT-FAMILY: Verdana; font-size: 11px;}  

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

    Всего записей: 81 | Зарегистр. 21-10-2002 | Отправлено: 00:24 16-06-2003
    8AleX8



    Advanced Member
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    Каскадные Таблицы Стилей, уровень 2
    Спецификация CSS2
    Рекомендации W3C от 12 Мая 1998 года

    в оригинале http://www.w3.org/TR/REC-CSS2/
    в переводе http://loc.stack.ru/projects/CSS2/cover.html
    или
    http://pyramidin.narod.ru/css2/index.htm
     
    В гугле http://www.google.com/search?q=css%20%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8
     
    P.S.
    Пока не прочтешь ни чего не поймёшь...
     
    Добавлено
    И ешё:
    Главное W3C CSS Validation Service http://jigsaw.w3.org/css-validator/
    1. Читаешь доки.
    2. Пишешь CSS как знаешь
    3. Проверяешь на http://jigsaw.w3.org/css-validator/
    4. Анализируеш результаты.
    5. Возвращаешся в пункт 1.
     
    И вообше Русские переводы документов W3C

    Всего записей: 1813 | Зарегистр. 11-12-2001 | Отправлено: 00:40 16-06-2003 | Исправлено: 8AleX8, 00:42 16-06-2003
    Svarga

    Moderator
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    8AleX8
    Вообще-то, общая тема по CSS уже имеется...
     
    А вот за
    http://www.w3.org/2003/03/Translations/byLanguage?language=ru
    спасибо
    добавил там в шапку.

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

    Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 01:19 16-06-2003
    djelektronik

    Silver Member
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    A.menu:link {
    font-size: 14px;
    font-family:  Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    font-weight: bold;
    text-decoration: none; }
     
    A.menu:hover {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none; }
     

    A.menu:visited {
    color: #000;
    font-weight: bold;
    text-decoration: none; }
     
    почему при таком стиле посещеные сылки уже не становяца белыми когда наводиш
    в то время  как НЕпосещеные меняют цвет?

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

    Moderator
    Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
    djelektronik
    потому что
    Цитата:
    A.menu:hover
    работает только для a:link, :visited-- это уже не :link
     
    Если очень надо-- тогда скриптами придётся

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

    Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 07:27 16-06-2003
    lost_cat



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

    Цитата:
    Если очень надо-- тогда скриптами придётся
    .
    Не, не прийдется, достаточно такие стили, например, написать:
    -----------------------------
    a:link {color: #0000FF}
    a:hover {color: #FF0000}
    a:visited {color: #0000FF}
    a:visited:hover {color: #FF0000}
    ------------------------------
    , и тогда свершится чудо - посещенные ссылки будут вести себя так же как и непосещенные.  

    Всего записей: 81 | Зарегистр. 21-10-2002 | Отправлено: 09:45 16-06-2003
    Открыть новую тему     Написать ответ в эту тему

    Страницы: 1 2

    Компьютерный форум 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