从另一个模板和关于文本区域获取字体粗细

Question

我正在尝试模拟此网站的联系我们表单：

所以我不得不让它看起来像这样：

.contact {
  color: black;
  background: #f4f4f4;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding-bottom: 39px
}

.button {
  background-color: #97a9bd;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 200px;
}

#button:hover {
  color: inherit;
  background-color: transparent;
  border-color: inherit;
  border-radius: 1px;
  border: 1px solid black
}

.heading {
  margin-bottom: 20px;
  font-size: 4rem;
}

#title {
  grid-column: 1 / 3;
  font-family: Georgia, "Times New Roman", Times, serif;
  text-align: center;
}

.font-x2 {
  font-size: 1.6rem;
}

#service {
  color: green;
  float: center;
  margin: 0 0 20px 0;
  display: inline-block;
  border: 0px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#form>* {
  padding: 0.5em;
  margin: 0 1em 1em;
}

#form input {
  font-size: 1.1em;
  border: 0;
  outline: 0;
}

#form input:focus[type=text] {
  border: 2px solid #97A9BD;
  border-radius: 4px;
  outline: none !important;
}

#form textarea:focus[type=text] {
  border: 2px solid #97A9BD;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}


/*
.grid div:nth-child(even) {
    background-color: red;
}

.grid div:nth-child(odd) {
    background-color: green;
}
*/

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<div class="grid">
  <div class="contact" id="title">
    <h6 class="heading font-x2"> Contact message </h6>
  </div>
  <div class="contact">
    <img src="01130_bigsurlighthouse_1920x1080.jpg" width="auto" height="200">
  </div>
  <div class="contact">


    <div class="contact" id="contact" style="color: steelblue">
      <form id="form">
        <p class="contact">Elementum nisi ac volutpat vestibulum enim mi tincidunt eros sed justo magna odio sed lacus ut non ante sit amet est luctus dictum ut dolor ac.

        </p>

        <input type="text" id="fname" name="fname" style="width: 400px; height: 40px" placeholder="First Name">
        <input type="text" name="lname" style="width: 400px; height: 40px" placeholder="Email">
        <textarea id="names" style="width: 400px; height: 40px" placeholder="Enter comment"> </textarea>
        <button class="button" id="button"> Submit</button>
      </form>
    </div>
  </div>
</div>

<body>
</body>

</html>

标题，和我模拟的范例里的不一样；尽管我使用了相同的字体。有什么方法或工具可以用来找到分配的重量吗？也许这就是为什么我的标题看起来很大胆的原因？或者有什么建议。这是来自模板中的 CSS 文件之一，所以我知道我使用的是正确的字体：
```
body, input, textarea, select{
  font-family: Verdana, Geneva, sans-serif;
}
h1, h2, h3, h4, h5, h6, .heading { 
 font-family: Georgia, "Times New Roman", Times, serif;
}
```
我已经包含了一个 textarea 用于注释，但它没有继承 CSS 文件中定义的输入字段的属性。你能告诉我为什么吗？我什至明确提到了用于焦点的文本字段，但即使那样也不起作用。

Answer 1

要查看 css 应用到网页元素的内容，您可以使用浏览器上的开发人员工具。

在 Chrome

Ctrl + Shift + I
单击左上角的图标（带有向内箭头的框），
单击要检查的元素。
开发人员面板将向您显示正在应用的 css 内容以及来源。

然后您可以检查源元素和您的元素之间的差异。

对于你的第二个问题，我点击了运行代码片段，你的文本区域正按预期获得焦点边框。

从另一个模板和关于文本区域获取字体粗细

Getting the font weght from another template and regarding textarea

html

css