Как я могу сделать этот код наведения короче? И как я могу создать файл CSS, который реализует настройки более чем на одну кнопку? - PullRequest
Новая
       19

Как я могу сделать этот код наведения короче? И как я могу создать файл CSS, который реализует настройки более чем на одну кнопку?

1 голос
/ 25 июля 2011

Кто-то сделал этот кусок кода для меня, и я думаю, что есть некоторые ненужные биты в нем.

Это код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html 
xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" 
/> <title>IS THIS THING ON?</title> <link rel="stylesheet" 
href="./wp-content/themes/cosmicbuddy/_inc/css/screen.css" 
type="text/css" />
</style>
</head> <body>
<a href="<?php bp_send_public_message_link() ?>" class="myButton"><!-- 
button --></a>
</body> </html>

И это CSS-файл, на который он ссылается: 

   .myButton {
    background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat;
    border: 1;
    cursor: pointer;
    display: block;
    height: 22px;
    width: 22px;
    margin-left: 5px;
    } .myButton:hover {
    background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;
    }

Теперь у меня два вопроса:

  1. Можно ли сократить первый фрагмент кода?

  2. Как создать файл CSS, который реализует настройки для нескольких из этих настроек. Так же, как это делает в моем CSS-файле ссылки: 

#userbar #bp-nav li.current a{
   color:#000;
   font-weight:bold;
}
   #userbar #bp-nav li a:hover {
   color: #3193c7; text-decoration: none; 
}

Ответы [ 5 ]

3 голосов
/ 25 июля 2011

1 Можно ли сократить первый фрагмент кода?

Если вас так беспокоит размер, чем удалить комментарий <!-- button --> html. 

./wp-content/themes/cosmicbuddy/_inc/css/screen.css

эквивалентно: 

wp-content/themes/cosmicbuddy/_inc/css/screen.css

Сохранение 2 символов:)

Как мне кажется, в файле CSS вы можете сократить путь к изображениям.Вместо этого: 

background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat;
...
background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;

используйте относительные URL: 

background: url(../images/see.gif) no-repeat;
...
background: url(../images/too.gif) no-repeat;

2 Как создать файл CSS, который реализует настройки для нескольких из этихнастройки.Точно так же, как это делается в моем файле CSS для ссылок:

Если вы не хотите добавлять класс CSS к каждому элементу, вам нужно обернуть их в какой-то другой элемент 

...
</head> <body>
<div class="buttons">
<a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
</div>
</body> </html>

И CSS 

.buttons a {
    background: url(../images/see.gif) no-repeat;
    border: 1;
    cursor: pointer;
    display: block;
    height: 22px;
    width: 22px;
    margin-left: 5px;
} 
.buttons a:hover {
    background: url(../images/too.gif) no-repeat;
}

Обычно используется cursor, если атрибут href не установлен.

1 голос
/ 26 июля 2011

Мои два цента: создайте одно изображение с обоими состояниями кнопок (спрайт), затем: 

.myButton {
background-image: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif);
display: block;
height: 22px;
width: 22px;
} 
.myButton:hover {
background-position: x y;
}

Это также решит проблему мерцания при наведении ссылки.

Надеюсь, что это имеет смысл

1 голос
/ 25 июля 2011

Первый фрагмент кода представляет собой полную HTML-страницу.Если вам нужно только добавить кнопку на страницу, эта часть будет делать: 

<a href="<?php bp_send_public_message_link() ?>" class="myButton"><!--button--></a>

Часть между комментариями, которая теоретически все еще может пойти хорошо.Не забудьте добавить информацию CSS в файл CSS этой страницы!

-

Если вы хотите, чтобы в качестве кнопки отображалось больше ссылок, вы можете добавить class = "myButton"на A-тег, который вы хотите изменить.Если вы хотите, чтобы несколько классов превратились в кнопки, вы можете добавить их в CSS, как и в другом примере, который вы дали: 

.myButton .myOtherButton { ... }
.myButton:hover .myOtherButton:hover { ... }
1 голос
/ 25 июля 2011

CSS почти такой же короткий, как он получает.

Поскольку он применяется к a, вы можете удалить cursor: pointer;.

Также, если вы используетеbackground-image, вам может не потребоваться border: 1;.

Другие стили выглядят необходимыми для рендеринга кнопки, то есть height и width и display.

Вы также можете соединить его вместе, как ваш другой пример: 

.myButton {background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat; display: block; height: 22px; width: 22px; margin-left: 5px;} 
.myButton:hover {background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;}

Что касается повторного использования этих стилей, вы можете сделать 1 из 2 вещей:

  1. добавить.myButton к другим a элементам или
  2. добавляет дополнительные классы к правилу, например, .myButton, .otherClass {//css in here} ссылается на .otherClass в другом a
0 голосов
/ 26 июля 2011

Вы можете использовать HTML5 и опустить некоторые дополнительные элементы, атрибуты и закрывающие косые черты á la Anne van Kesteren , что оставит вас с этим: 

<!doctype html>
<html lang="en">
<meta charset="utf-8"> 
<title>IS THIS THING ON?</title>
<link rel="stylesheet" href="/wp-content/themes/cosmicbuddy/_inc/css/screen.css">
<a href="<?php bp_send_public_message_link() ?>" class="myButton"></a>

Что касается CSS, я могу немного добавить к комментариям Антитоксина и Гутьеррезалекса об использовании относительных URL-адресов и спрайтов CSS, за исключением того, что вы также можете запустить финальный код через минификатор.( CSS-компрессор Робсона может сбрить несколько байтов, удалив такие вещи, как пробел и последнюю точку с запятой в блоке свойств.)

...