gpt4 book ai didi

html - 从单独的 css 文件中设计按钮样式

转载 作者:太空宇宙 更新时间:2023-11-04 06:00:28 27 4
gpt4 key购买 nike

我想在链接到 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 文件本身中添加带有样式标签的样式,它就可以工作。但是我不想每次需要一个按钮时都将一段样式代码粘贴到文件中,否则为什么还要用 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;
}

这是片段>>>

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

关于html - 从单独的 css 文件中设计按钮样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57343426/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com