时间戳

首页 > 解决方案 > 我的字体大小或文本字段大小的设置被忽略

html - 我的字体大小或文本字段大小的设置被忽略

问题描述

我制作了一个存储温度和湿度的网站。我从传感器读出这些值。我目前正在研究网站的基本设计，但我无法进一步了解。我的一个按钮滑落了，所以我试图让 textareas 更小。当这不起作用时，我尝试减小元素的字体大小。不幸的是，这也不起作用。我在 CSS 和 HTML 代码中尝试过。

.container {
  display: grid;
  grid-template-columns: 33.33% 33.3% 33.3%;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  text-align: center;
}

.cbtn {
  display: flex;
  justify-content: center;
  align-items: center;
}

#e6 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

#e7 {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

#e8 {
  grid-column: 2 / 3;
  grid-row: 9 / 10;
}

#h1Title {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  text-align: center;
  font-size: 43px;
}

#pTemperature {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  text-align: center;
  font-size: 25px;
}

#pHumidity {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  text-align: center;
  font-size: 25px;
}

#OutputTemp {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  text-align: center;
  font-size: 25px;
}

#OutputHumi {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  text-align: center;
  font-size: 25px;
}

#buttonStart {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
  text-align: center;
  font-size: 25px;
  width: 250px;
  height: 50px;
}

#buttonStop {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
  text-align: center;
  font-size: 25px;
  width: 250px;
  height: 50px;
}

#pExplemation1 {
  grid-column: 2 / 3;
  grid-row: 5 / 6;
  text-align: center;
  font-size: 25px;
}

#TempGreenMin {
  grid-column: 1 / 2;
  grid-row: 6 / 7;
  text-align: center;
  font-size: 25px;
}

#pAnd1 {
  grid-column: 2 / 3;
  grid-row: 6 / 7;
  text-align: center;
  font-size: 25px;
}

#TempGreenMax {
  grid-column: 3 / 4;
  grid-row: 6 / 7;
  text-align: center;
  font-size: 25px;
}

#pExplemation2 {
  grid-column: 2 / 3;
  grid-row: 7 / 8;
  text-align: center;
  font-size: 25px;
}

#HumiGreenMin {
  grid-column: 1 / 2;
  grid-row: 8 / 9;
  text-align: center;
  font-size: 25px;
}

#pAnd2 {
  grid-column: 2 / 3;
  grid-row: 8 / 9;
  text-align: center;
  font-size: 25px;
}

#HumiGreenMax {
  grid-column: 3 / 4;
  grid-row: 8 / 9;
  text-align: center;
  font-size: 25px;
}

#buttonSave {
  grid-column: 2 / 3;
  grid-row: 9 / 10;
  text-align: center;
  font-size: 25px;
  width: 250px;
  height: 50px;
}
<div class="container">
  <h1 id="h1Title" font="43px">Temperature und humidity</h1>
  <p id="pTemperature " font="25px">Temperature </p>
  <p id="pHumidity" font="25px">humidity</p>
  <p id="OutputTemp" font="25px">--°C</p>
  <p id="OutputHumi" font="25px">--%</p>
  <span class="cbtn" id="e6" font="25px"><button id="buttonStart">Start</button></span>
  <span class="cbtn" id="e7" font="25px"><button id="buttonStop">Stop</button></span>
  <p id="pExplemation1" font="25px">Green temperatures Range: between</p>
  <textarea id="TempGreenMin" font="25px"></textarea>
  <p id="pAnd1" font="25px">and</p>
  <textarea id="TempGreenMax" font="25px"></textarea>
  <p id="pExplemation2" font="25px">Gree humidity range: between</p>
  <textarea id="LumiGreenMin" font="25px"></textarea>
  <p id="pAnd2" font="25px">and</p>
  <textarea id="HumiGreenMax" font="25px"></textarea>
  <span class="cbtn" id="e8" font="25px"><button id="buttonSave">Save</button></span>
</div>

标签： htmlcss

解决方案

您的font-size声明是多余的。您正在声明内联以及在您的 CSS 中。我猜你正在改变一个，而另一个是压倒一切的。无需font在 HTML 中声明 inline，只需将其删除并在 css 中声明，然后您可以自由选择您想要的任何值而不受干扰。

<span class="cbtn" id="e7">...</span>

#e7 { 
   font-size:25px; // or whatever value you’d like
}

此外，由于有点不清楚你在问什么，如果你想改变buttononly 的字体，你需要定位 that button，而不仅仅是它的容器，如下所示：

.buttonStart {
   font-size:25px;
}

button此外，拥有一个内部文件并不是一个很好的做法span。无论您想通过这种方式实现什么，都有更好的方法来实现。

推荐阅读