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

2022-01-22 00:00:00 hover php 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)无重复；}

现在我有两个问题:

  1. 第一段代码可以缩短吗?

  2. 如何创建一个 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:

  1. Can the first piece of code shortened?

  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:

#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.

相关文章