Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

CSS常用样式(id/class/元素选择器 用法)

五彩大铁猿 2022-08-06 10:14:30 阅读数:2 评论数:0 点赞数:0 收藏数:0

目录

id选择器

 class选择器

元素选择器

完整代码


       在本篇文章之前,我有写过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>

 运行结果如下:

 

看到这里啦,如过觉得有用,点赞收藏再走,不然下回找不到啦。 比心

版权声明
本文为[五彩大铁猿]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_47314602/article/details/126186628

支付宝红包,每日可领(支付宝免费1-2元支付红包)