我怎样才能使这个悬停代码更短?以及如何创建一个实现多个按钮设置的 css 文件?-php问题

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

本文介绍了我怎样才能使这个悬停代码更短?以及如何创建一个实现多个按钮设置的 css 文件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有人为我编写了这段代码，我认为其中有一些不必要的部分.

这是代码:

这也是它引用的 CSS 文件:
 .myButton {背景:url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif)无重复；边框:1；光标:指针；显示:块；高度:22px；宽度:22px；左边距:5px；} .myButton:悬停 {背景:url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif)无重复；}
现在我有两个问题:
第一段代码可以缩短吗?
如何创建一个 CSS 文件来实现多个这些设置的设置.就像我在我的 CSS 文件中对链接所做的那样:
<块引用>
#userbar #bp-nav li.current a{颜色:#000;字体粗细:粗体；}#userbar #bp-nav li a:hover {颜色:#3193c7；文字装饰:无；}
 解决方案 
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) 无重复；...背景:url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif)无重复；
使用相对 URL:
background: url(../images/see.gif) no-repeat;...背景:url(../images/too.gif) 不重复；
<块引用>
2 如何创建一个 CSS 文件来实现多个这些设置的设置.就像我在我的 CSS 文件中对链接所做的那样:
如果您不想将 CSS 类添加到每个元素，则必须将它们包装在其他元素中<代码>...</头><身体><div 类="按钮"><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></身体></html>
还有 CSS
.buttons a {背景:url(../images/see.gif) 不重复；边框:1；光标:指针；显示:块；高度:22px；宽度:22px；左边距:5px；}.按钮一个:悬停{背景:url(../images/too.gif) 不重复；}
cursor 通常在 href 属性未设置时使用.
Someone made this piece of code for me and I think there's some unnecessary bits in it. 

This is the code:
<!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>
And this is the CSS file it refers too:
   .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;
    }
Now I have two questions: 

Can the first piece of code shortened?
How can I create a CSS file that implements settings to more than one of these settings. Just like this one does in my CSS file to links:



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


 解决方案 

  1 Can the first piece of code shortened?
If you are so concerned about the size than remove the <!-- button --> html comment.
./wp-content/themes/cosmicbuddy/_inc/css/screen.css
is equivelent to:
wp-content/themes/cosmicbuddy/_inc/css/screen.css
Saving 2 characters :)

As it seems to me in the CSS file you can shorten the path to the images. Instead:
background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat;
...
background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;
use relative URLs:
background: url(../images/see.gif) no-repeat;
...
background: url(../images/too.gif) no-repeat;



  2 How can I create a CSS file that implements settings to more than one of these settings. Just like this one does in my CSS file to links:
If you don't want to add the CSS class to every element you have to wrap them in some other element
...
</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>
And the 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;
}
The cursor is usually used if the href attribute is not set.

                        这篇关于我怎样才能使这个悬停代码更短?以及如何创建一个实现多个按钮设置的 css 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

基础教程推荐