Question

我目前正致力于css。我有一个示例表单和一个CSS但它不工作它只与标签一起使用但我在CSS初学者的设计部分没有变化，所以我不确定这里的问题是什么

html代码：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>

    <form action="" method="post" class="STYLE-NAME">
<h1>Contact Form 
    <span>Please fill all the texts in the fields.</span>
</h1>
<label>
    <span>Your Name :</span>
    <input id="name" type="text" name="name" placeholder="Your Full Name" />
</label>
<p>
<label>
    <span>Your Email :</span>
    <input id="email" type="email" name="email" placeholder="Valid Email Address" />
</label>
<p>
<label>
    <span>Message :</span>
    <textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
</label>
  <p>  
 <label>
    <span>Subject :</span><select name="selection">
    <option value="Job Inquiry">Job Inquiry</option>
    <option value="General Question">General Question</option>
    </select>
</label>
   <p>   
 <label>
    <span>&nbsp;</span> 
    <input type="button" class="button" value="Send" /> 
</label>    
</form>

</body>
</html>

我已将此代码与外部样式表相关联，我只是为了练习而从网上下载，但它无效

CSS文件：

.basic-grey {
margin-left:auto;
margin-right:auto;
max-width: 500px;
background: #F7F7F7;
padding: 25px 15px 25px 10px;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #888;
text-shadow: 1px 1px 1px #FFF;
border:1px solid #E4E4E4;
}
.basic-grey h1 {
font-size: 25px;
padding: 0px 0px 10px 40px;
display: block;
border-bottom:1px solid #E4E4E4;
margin: -10px -15px 30px -10px;;
color: #888;
}
.basic-grey h1>span {
display: block;
font-size: 11px;
}
.basic-grey label {
display: block;
margin: 0px;
}
.basic-grey label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"],.basic-grey textarea,       

.basic-grey select {
border: 1px solid #DADADA;
color: #888;
height: 30px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 70%;
font-size: 12px;
line-height:15px;
box-shadow: inset 0px 1px 4px #ECECEC;
-moz-box-shadow: inset 0px 1px 4px #ECECEC;
-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
padding: 5px 3px 3px 5px;
}
.basic-grey select {
background: #FFF url(arrowhead.png) no-repeat right;
background: #FFF url(arrowhead.png) no-repeat right;
appearance:none;
-webkit-appearance:none; 
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
line-height: 25px;
}
.basic-grey textarea{
height:100px;
}
.basic-grey .button {
background: #E27575;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
box-shadow: 1px 1px 5px #B6B6B6;
border-radius: 3px;
text-shadow: 1px 1px 1px #9E3F3F;
cursor: pointer;
}
.basic-grey .button:hover {
background: #CF7A7A
}

Answer 1

您必须在HTML中将STYLE-NAME替换为basic-grey。请参阅此jsfiddle。

CSS使用选择器.basic-grey，这意味着“class属性至少包含basic-grey”的元素。您的HTML中没有此类的任何属性。因此，您需要将CSS选择器更改为form之类的内容，或者在HTML元素上添加类。在这种情况下，将basic-grey类添加到表单中会修复整个事情。

Answer 2

HTML中的所有项目都没有类.basic-X。

要使CSS正常工作，您需要执行此操作或更改HTML / CSS。

请重新阅读有关选择器的章节

Answer 3

首先，您有不平衡的<p>标签，即

<p>  
  <label>
    <span>Subject :</span>
      <select name="selection">
        <option value="Job Inquiry">Job Inquiry</option>
        <option value="General Question">General Question</option>
      </select>
  </label>
<!-- this last one should be a closing tag </p> -->
<p>

其次，你有

<form action="" method="post" class="STYLE-NAME">

你确定STYLE-NAME可以解决你想要的问题吗？也许你的模板引擎正在吐出其他东西？

无法将css应用于表单

3 个答案: