我怎样才能使这个悬停代码更短?以及如何创建一个css文件来实现多个按钮的设置 - How can I make this hover code shorter? And how can I create a css file that implements settings to more than one button?

有人为我写了这段代码，我认为其中有一些不必要的位。

这是代码:

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

如果没有设置href属性，通常使用cursor。

这个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;}

对于重用这些样式，您可以做以下两件事中的一件:

添加.myButton到其他a元素或
为规则添加更多的类，例如，.myButton, .otherClass {//css in here}在另一个a中引用.otherClass

第一段"代码"是一个完整的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 {背景图片:url (/wp-content/主题/cosmicbuddy _inc/图片/see.gif);显示:块;高度:22 px;宽度:22 px;}.myButton:{徘徊背景位置:x - y;}之前

这也将解决当你悬停链接时闪烁的问题。

希望这是有意义的

你可以使用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，我可以添加一些antitoxic和gutierrezalex关于使用相对url和CSS精灵的评论，保存您也可以通过minifier运行最终代码。(Robson的CSS压缩器可以通过删除属性块中的空白和最后的分号来节省几个字节)