文章/答案/技术大牛

发布

社区首页 >问答首页 >从单独的css文件设置按钮的样式

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

Stack Overflow用户

提问于 2019-08-04 10:48:36

回答 1查看 754关注 0票数 0

我想在一些链接到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>

样式表：

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

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

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

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-04 10:51:38

欢迎来到Stack Overflow _

你的CSS没有'button‘作为一个类，代码应该是这样的

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

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

下面是>>>的代码片段

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

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57343426

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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