使用CSS在html页面中设置基本样式

首先，我想说，这个网站是我的教授极力推荐的，是为了帮助“我们自己学习”。我的问题可能非常简单，如果它看起来像是“浪费空间”，我道歉。我正在做一项作业，要求在vim中使用HTML和CSS在课程服务器上创建一个可提交的正确功能表单

我已经按原样安排好了，但是，我在正文中有多个标签（“名字”/“姓氏”、“班级年份选择框”/“地址”/“城市”/”和“电子邮件”。名字、姓氏和电子邮件都是我试图设计为“红色文本”的内容，以表示这些是必填字段

为了提交表单，我已经将et设置到了需要的位置，但是我不知道如何在标题中设置它的样式，以便区分哪些标签需要使用“红色”。就像现在一样，当我插入“Label{color:red；}在标题中，它会将所有文本变为红色。是否有方法将特定标签表示为红色，而不需要的标签保持为黑色文本颜色？我曾尝试在标签输入中插入数字，以表示需要红色文本颜色的不同标签，但它会将其应用于表单上的所有文本

是否有适当的方法将识别特征添加到标签中，只允许所选标签为红色

我感谢任何反馈，如果这对于经验丰富的程序员/开发人员来说是浪费时间来回答这个问题，我再次表示歉意。任何意见都非常感谢

---

在您的HTML文件中，为每个要单独定位的标签添加一个类，例如

<span class="label firstName">Joe</span>

---

这将以firstName类作为标签的目标，并将文本涂成红色。

有多种方法可以实现这一点。如果只允许使用HTML和CSS，您可以尝试在HTML文件中创建多个div，并在CSS文件中创建一个CSS属性来“设置”所需字段的样式

HTML

<div class="forms-box">
      <h2>My Forms</h2>
      <form>
        <div class="user-box">
          <input type="text" name="" required="" />
          <label>First Name</label>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" />
          <label>Last Name</label>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" />
          <label>Last Name</label>
        </div>
        <div class="user-box3">
          <label>Class year</label>
          <select type="checked" required="" name="class-year">
            <option value="2021">2021</option>
          </select>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" />
          <label>Address</label>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" />
          <label>City</label>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" />
          <label>Email</label>
        </div>
      </form>
    </div>

我已经创建了一个模型，其中列出了提交前需要填写的所有必填字段

---

这里是我的

链接，澄清一下，课程服务器是由教授运行的GitHub服务器。不确定这是否相关，我只是对所有这一切都非常陌生，迫切想自己弄清楚这一点，我在这个网站和类似网站上的所有潜伏让我感到困惑，不确定其他帖子上的反馈是否正是我想要的例如。不确定教授是否允许我们使用插件或vscode，因为我认为他正试图让我们学习常规vim的基础知识。你能发布你的代码吗？编辑你的问题并使用“代码片段”“按钮。这个问题不太适合StackOverflow，因为它在本质上有点太基本了。可以说，一个好的起点是：，具体看看CSS类，鼓励更多的“自己学习”您有需求“表示特定标签为红色[因为它们是必填字段]”。您有一个与必填字段关联的

类

，您希望设置这些标签的样式。向标签添加一个

必填

Cals，然后适当设置样式。我上面评论中的链接将帮助您找到这条路。谢谢。我想这正是我应该做的。谢谢您的链接。谢谢。让我快速尝试一下。很抱歉，我没有发布代码的屏幕截图，但我认为“类”目标是我做错的。谢谢你的洞察力。

<div class="forms-box">
      <h2>My Forms</h2>
      <form>
        <div class="user-box">
          <input type="text" name="" required="" />
          <label>First Name</label>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" />
          <label>Last Name</label>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" />
          <label>Last Name</label>
        </div>
        <div class="user-box3">
          <label>Class year</label>
          <select type="checked" required="" name="class-year">
            <option value="2021">2021</option>
          </select>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" />
          <label>Address</label>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" />
          <label>City</label>
        </div>
        <div class="user-box">
          <input type="password" name="" required="" />
          <label>Email</label>
        </div>
      </form>
    </div>

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: linear-gradient(#141e30, #243b55);
}

.forms-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}

.forms-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.forms-box .user-box {
  position: relative;
}

.forms-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.forms-box .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: 0.5s;
}

.forms-box .user-box3 label {
  color: #fff;
  font-size: 16px;
  margin-bottom: 10px;
  margin-right: 40px;
}

.forms-box .user-box3 select {
  color: #000;
  margin-bottom: 20px;
}

.forms-box .user-box input:focus ~ label,
.forms-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #ff0000;
  font-size: 12px;
}