目录
在本篇文章之前,我有写过CSS样式表中的内联式与外链式的样式设置,需要了解的可以点进专栏里面学习。本篇文章主要是写id选择器、class类选择器以及元素选择器的用法介绍。
id选择器
首先我们在input这边设置一个id(id="ww")。
<input id="ww" type="text" name="username" ><br>
其次在<head>里面将格式写出来,这边id引用的话需要在前面加上#字符。
#ww{
background-color: aqua;
}
class选择器
首先也是选着想要调整的文本框,定义class(我这边是随意定义了一下class="class_w")
<input class="class_w" type="number" name="age"><br>
其次在<head>里面将格式写出来,这边claa引用的话需要在前面加上英文格式的点(.)。
.class_w{
background-color: bisque;
}
元素选择器
元素选择器不用再做设定,直接引用文章中的元素做设置。在这边我们以input为例做个简单文本框背景颜色设定,代码如下。
input{
background-color: blueviolet;
}
完整代码
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>表单</title>
<head>
<style type="text/css">
label{
cursor: pointer;
display: inline-block;
padding: 3px 6px;
text-align: right;
width: 150px;
vertical-align: top;
}
#ww{
background-color: aqua;
}
.class_w{
background-color: bisque;
}
input{
background-color: blueviolet;
}
</style>
</head>
<body>
<div>
<h1>Zoo Keeper Application Form</h1>
<h4>Please complete the form Mandatory fields are marked with a</h4>
<form action="/test/url/">
<fieldset >
<legend>CONTACT DETAILS</legend>
<label for="username">Name*</label>
<input id="ww" type="text" name="username" ><br>
<label >Telephone* </label>
<input type="number" name="number" ><br>
<label> Email*</label>
<input type="text" name="Email" ><br>
</fieldset>
<fieldset >
<legend>PERSONAL INFORMATION</legend>
<label> age</label>
<input class="class_w" type="number" name="age"><br>
<label> Gender </label>
<select >
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</select><br>
<label>When did you fist know you wanted to be a zoo_keeper</label>
<textarea cols="60" rows="6"></textarea>
</fieldset><br>
<fieldset >
<legend>PICK YOUR FAVORITE ANIMALS</legend>
<input type="checkbox" name="ANIMAL" value="Zebra">Zebra
<input type="checkbox"name="ANIMAL" value="Cat">Cat
<input type="checkbox"name="ANIMAL" value="Anaconda">Anaconda
<input type="checkbox"name="ANIMAL" value="Human">Human<br>
<input type="checkbox"name="ANIMAL" value="Elephant">Elephant
<input type="checkbox"name="ANIMAL" value="Wildebeest">Wildebeest
<input type="checkbox"name="ANIMAL" value="Pigeon">Pigeon
<input type="checkbox"name="ANIMAL" value="Crab" >Crab<br>
</fieldset>
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
运行结果如下:
看到这里啦,如过觉得有用,点赞收藏再走,不然下回找不到啦。 比心