Fatal编程技术网
  • html/
  • css文件与html的耦合

css文件与html的耦合

html css

css文件与html的耦合,html,css,Html,Css,我有下面一段按钮的html代码： <!DOCTYPE html> <html> <body> <link rel="stylesheet" href="css/style2.css" /> Passengers: <input type="number" id="myNumber"> <button onclick="myFunction2()">-</button> <button onclick="m

我有下面一段按钮的html代码：

<!DOCTYPE html>
<html>
<body>

<link rel="stylesheet" href="css/style2.css" />
Passengers: <input type="number" id="myNumber">
<button onclick="myFunction2()">-</button>
<button onclick="myFunction()">+</button>

<script>
function myFunction() {
    document.getElementById("myNumber").stepUp(1);
}
function myFunction2() {
    document.getElementById("myNumber").stepDown(1);
}
</script>

</body>
</html>


乘客：
-
+
函数myFunction（）{
document.getElementById（“myNumber”）.steppup（1）；
}
函数myFunction2（）{
document.getElementById（“myNumber”）.steppdown（1）；
}
我想使用css文件（style2.css）来更改此按钮的外观（颜色、大小等）。我该怎么办？我已经创建了一个css文件，但我不知道如何进行更改

非常感谢您的帮助

打开您选择的文本编辑器或您当前使用的任何编辑器。请确保将其保存为与html文档“style2.css”中的名称相同的内容。然后，您可以在该文件中编写CSS，HTML将根据CSS文件中的任何内容进行样式设置，这就是
所做的。我建议你去看看CSS教程的基础知识，他们有一个完整的教程，你可以单独在CSS上做

如果您想特别更改按钮（这将更改所有按钮），可以编写：

button {
    background-color: #4CAF50; /* Green */
    border: none; /* No border */
    color: white; /* White text */
    padding: 15px 32px; /* Changes the padding (inside space) of button */
    text-align: center; 
    text-decoration: none; 
    display: inline-block;
    font-size: 16px; 
}
您必须为按钮定义一个ID或类，并在html文件中实现它

<button onclick="myFunction()" id="button">+</button>
这只是一个例子

要了解更多关于如何设计按钮样式（例如圆形按钮）的想法，可以搜索stackoverflow或google。它总是非常有用。

打开文件style2.css并添加

button {
  background-color: #000;
  border: solid 2px #222;
  font-size: 15px;
  border-radius: 5px;
  padding: 5px 10px;
}
等等。。。css查找手册

您要查找的是css选择器：

您可以为不同的元素指定不同的类或id，也可以选择一种类型的所有元素和许多其他内容

只要检查一下上面的链接就可以很容易理解了。当我开始学习时，我发现学习这些选择器是非常有用的。这是一种通过小游戏学习选择器的简单方法。

试试以下方法：

<!DOCTYPE html>
<html>
<body>

<link rel="stylesheet" href="css/style2.css" />
Passengers: <input type="number" id="myNumber">
<button id="btn1" onclick="myFunction2()">-</button>
<button id="btn2" onclick="myFunction()">+</button>

<script>
function myFunction() {
    document.getElementById("myNumber").stepUp(1);
}
function myFunction2() {
    document.getElementById("myNumber").stepDown(1);
}
</script>

</body>
</html>
你的css代码是什么？我没有用css写任何东西，因为我不知道从哪里开始（例如，我应该在css文件中使用的按钮的名称）谢谢！这是非常有用的。但是，如何将每个按钮的id与css文件中的相应规范耦合？id应该以
#
开头，而不是
如果您有许多按钮，希望它们看起来相同，则可以引用相同的样式。这些样式可以根据需要随时使用<代码>-+。这两个按钮现在看起来是一样的。id在html中不应该出现多次。如果发生这种情况，则应该是class.id用于单个实例，而类用于多个实例，而不管优先级如何。在html的哪个位置提到了
class=“button”
？你是说
按钮{…}
？谢谢你的链接；）谢谢，我会查一查；）@谢谢 
<!DOCTYPE html>
<html>
<body>

<link rel="stylesheet" href="css/style2.css" />
Passengers: <input type="number" id="myNumber">
<button id="btn1" onclick="myFunction2()">-</button>
<button id="btn2" onclick="myFunction()">+</button>

<script>
function myFunction() {
    document.getElementById("myNumber").stepUp(1);
}
function myFunction2() {
    document.getElementById("myNumber").stepDown(1);
}
</script>

</body>
</html>

#btn1{background-color:orange;height:50px}
#btn2{background-color:green;width:200px}