Основной CSS для вопроса с текстовой ссылкой? - PullRequest
1 голос
/ 29 августа 2009

Ниже приведена css для текстовой ссылки в 4 различных состояниях - ссылка, посещение, наведение и активность.

Нужно ли делать этот CSS-код для каждого типа ссылочного класса, который есть у меня, некоторые классы даже не меняют внешний вид. (ссылка, посещение, при наведении, активный) Если бы только изменение текстовой ссылки для наведения и ссылки изменилось, мне понадобились бы только классы, указанные ниже, для этих 2, или я все еще должен использовать все 4?

<style>
a.comment_mod:link {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}
a.comment_mod:visited {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}
a.comment_mod:hover {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    border-bottom:1px dotted #000000;
}
a.comment_mod:active {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}
</style>

Ответы [ 3 ]

3 голосов
/ 29 августа 2009

Если между :link и :visited нет изменений, вы можете пропустить последнее. То же самое, если :hover и :active одинаковы. Затем просто определите запятые части в :link и переопределите то, что вы хотите изменить в :hover:

a.comment_mod:link {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}

a.comment_mod:hover {
    color: #000000;
    border-bottom:1px dotted #000000;
}

Редактировать: , если вы хотите, чтобы :active (это стиль, когда кнопка мыши нажата на ссылке) был похож на :link, а затем укажите оба вместе. Если вы не укажете его, он будет выглядеть как :hover. Итак, чтобы соответствовать вашему оригинальному стилю:

a.comment_mod:link,
a.comment_mod:active
{
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}

a.comment_mod:hover {
    color: #000000;
    border-bottom:1px dotted #000000;
}
2 голосов
/ 29 августа 2009

Прежде всего, если все ваши штаты имеют общий стиль, вы можете просто объявить этот стиль следующим образом:

a.comment_mod 
{
 font-family: arial;
 font-size: 14px;
 font-weight: bold;
 text-decoration: none;
}

Если состояние изменяет стиль от нормы, то вы объявляете его.

a.comment_mod:hover
{
 color: #000;
 border-bottom:1px dotted #000000;
}

Вы можете объявить стили для нескольких элементов одновременно, если они имеют общие стили:

a.comment_mod:hover, a.other_mod:hover
{
 color: #000;
}
1 голос
/ 29 августа 2009

Вы можете использовать:

a.comment_mod {
   ... defaults ...
}

a.comment_mod:active {
  ... only things that change ...
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...