Html 从单独的css文件设置按钮样式_Html_Css

Html 从单独的css文件设置按钮样式

html css

Html 从单独的css文件设置按钮样式,html,css,Html,Css,我想在一些链接到css文件的html代码中设置按钮的样式。按钮的样式在css文件中其他一切都可以工作，但是当我尝试获取样式化按钮时，它会变成一个普通的html按钮，除非在html文件中定义了样式 HTML文件： <html> <head> <link rel="stylesheet" type="text/css" href="/static/css/main.css" /> </head> <body> <in

我想在一些链接到css文件的html代码中设置按钮的样式。按钮的样式在css文件中

其他一切都可以工作，但是当我尝试获取样式化按钮时，它会变成一个普通的html按钮，除非在html文件中定义了样式

HTML文件：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css" />
</head>
<body>
    <input type='button' id='button' class="button" value='Button' onclick='AddOne()'>
    (function defined here, works correctly)
</body>
</html>

如果我在html文件本身中添加带有样式标记的样式，它就会工作。但我不想每次需要按钮时都将一块样式代码粘贴到文件中，否则为什么还要麻烦使用css呢？

欢迎使用Stack Overflow_

您的CSS没有“按钮”作为类，代码应该如下所示

.button {
    background-color: #CCCCCC;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.button:hover {
  background-color: #535362;
}

以下是片段>>>

。按钮{
背景色：#中交；
边界：无；
颜色：白色；
填充：15px 25px；
文本对齐：居中；
字体大小：16px；
光标：指针；
}
.按钮：悬停{
背景色：#535362；
}


（此处定义的函数工作正常）

感谢您的欢迎和快速回复！我添加了点以使按钮成为一个类，但是按钮仍然显示为一个普通的html按钮：（这对我来说很好。您是否检查过是否正确链接到该文件（即是“/static/css/main.css”）正确吗？我同意@AdamK uu代码对我也有效uu因此问题可能是由指向CSSY的链接引起的。你是对的，似乎有问题。我已重命名css文件以查看站点是否会更改，它不会更改。我找不到它正在使用的文件。：/尝试将

main.css

文件放在与你相同的文件夹中r

html

文件，并将链接重定向到

这似乎是提供css文件wrt.html文件的正确位置的问题。在将css移动到与html相同的文件夹后，您能否提供正在使用的位置？

.button {
    background-color: #CCCCCC;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.button:hover {
  background-color: #535362;
}