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

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

Это код:

<!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; }

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

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

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

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

Если вы так обеспокоены размером, чем удалите комментарий  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 не установлен.

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 вещей:

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

Первая часть «кода» – полная 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 { ... }

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

 .myButton {
 background-image: url (/wp-content/themes/cosmicbuddy/_inc/images/see.gif);
 display: block;
 высота: 22px;
 ширина: 22px;
 } 
 .myButton: hover {
 background-position: xy;
 }

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

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

Вы можете использовать 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, я могу добавить немного к антитоксическим и gutierrezalex комментариям об использовании относительных URL-адресов и спрайтов CSS, за исключением того, что вы также можете запустить окончательный код с помощью минификатора. ( Компрессор CSS Robson может сбрить несколько байтов, удалив такие вещи, как пробелы и конечную точку с запятой в блоке свойств.)