html – head元素中的CSS无效

我是HTML代码的新手,所以我对html编码没有太多的了解.
当我使用内联样式时,它似乎工作正常,但head元素内的css代码不会显示在网页中.代码对我来说似乎很好.我已尝试在Chrome和Firefox中运行此代码,但问题仍然存在于两者中.请检查我的代码和&给我任何建议或解决方案.谢谢.

fieldset: {
    			background: lightyellow;
    			border: 10px solid yellow;
    			margin-bottom: 10px;
    			width: 720px;
    		}
    		label: {
    			width: 180px;
    		}

<h1>Please Enter Your Details For Our Dating Website!</h1>
    	<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.PHP" method="post">
    		<fieldset>
    			<legend>Your Face</legend>
    			<label for="image">Your image:</label>
    			<input type="file" name="image" required>
    			<br>
    			Image preview:
    			<img src="" id="preview">
    		</fieldset>
    		<fieldset>
    			<legend>Your General Details</legend>
    			<label for="name">Name:</label>
    			<input type="text" name="name" required>
    			<br>
    			<label for="gender">Gender:</label>
    			<input type="radio" name="gender" required>
    			Male
    			<input type="radio" name="gender" required>
    			Female
    			<br>
    			<label for="age">Age:</label>
    			<input type="number" name="age" required>
    			<br>
    			<label for="dob">Date of birth:</label>
    			<input type="date" name="dob">
    			<br>
    			<label for="color">Favorite color:</label>
    			<input type="color" name="color">
    			<br>
    			<label for="country">Which country:</label>
    			<select name="country">
    				<option value="no"></option>
    				<option value="en">England</option>
    				<option value="in">India</option>
    				<option value="jp">Japan</option>
    				<option value="sp">Spain</option>
    				<option value="us">USA</option>
    			</select>
    		</fieldset>
    		<fieldset>
    			<legend>Your Indicators</legend>
    			<label for="height">Height:</label>
    			Short
    			<input type="range" name="height" min="0" max="100">
    			Tall
    			<br>
    			<label for="salary">Salary:</label>
    			Poor
    			<input type="range" name="salary" min="0" max="100">
    			Rich
    			<br>
    		</fieldset>
    		<fieldset>
    			<legend>Your Contact information</legend>
    			<label for="email">Email:</label>
    			<input type="email" name="email" required>
    			<br>
    			<label for="mobile">Mobile:</label>
    			<input type="tel" name="mobile">
    			<br>
    			<label for="address">Address:</label>
    			<textarea name="address"></textarea>
    			<br>
    			<label for="contact">Method to contact you:</label>
    			<input type="checkBox" name="contact">
    			Email
    			<input type="checkBox" name="contact">
    			Whatsapp
    			<input type="checkBox" name="contact">
    			in-app chat
    		</fieldset>
    		<input type="submit" name="Submit">
    	</form>

解决方法

从样式属性中删除此“冒号：”.

fieldset : {

然后其他人会工作正常.

<!DOCTYPE html>
<html>
<head>
	<title>Dating Web Site</title>
	<style>
		fieldset {
			background: lightyellow;
			border: 10px solid yellow;
			margin-bottom: 10px;
			width: 720px;
		}
		label {
			width: 180px;
		}
	</style>
</head>
<body>
	<h1>Please Enter Your Details For Our Dating Website!</h1>
	<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.PHP" method="post">
		<fieldset>
			<legend>Your Face</legend>
			<label for="image">Your image:</label>
			<input type="file" name="image" required>
			<br>
			Image preview:
			<img src="" id="preview">
		</fieldset>
		<fieldset>
			<legend>Your General Details</legend>
			<label for="name">Name:</label>
			<input type="text" name="name" required>
			<br>
			<label for="gender">Gender:</label>
			<input type="radio" name="gender" required>
			Male
			<input type="radio" name="gender" required>
			Female
			<br>
			<label for="age">Age:</label>
			<input type="number" name="age" required>
			<br>
			<label for="dob">Date of birth:</label>
			<input type="date" name="dob">
			<br>
			<label for="color">Favorite color:</label>
			<input type="color" name="color">
			<br>
			<label for="country">Which country:</label>
			<select name="country">
				<option value="no"></option>
				<option value="en">England</option>
				<option value="in">India</option>
				<option value="jp">Japan</option>
				<option value="sp">Spain</option>
				<option value="us">USA</option>
			</select>
		</fieldset>
		<fieldset>
			<legend>Your Indicators</legend>
			<label for="height">Height:</label>
			Short
			<input type="range" name="height" min="0" max="100">
			Tall
			<br>
			<label for="salary">Salary:</label>
			Poor
			<input type="range" name="salary" min="0" max="100">
			Rich
			<br>
		</fieldset>
		<fieldset>
			<legend>Your Contact information</legend>
			<label for="email">Email:</label>
			<input type="email" name="email" required>
			<br>
			<label for="mobile">Mobile:</label>
			<input type="tel" name="mobile">
			<br>
			<label for="address">Address:</label>
			<textarea name="address"></textarea>
			<br>
			<label for="contact">Method to contact you:</label>
			<input type="checkBox" name="contact">
			Email
			<input type="checkBox" name="contact">
			Whatsapp
			<input type="checkBox" name="contact">
			in-app chat
		</fieldset>
		<input type="submit" name="Submit">
	</form>
</body>
</html>

html – head元素中的CSS无效

解决方法

相关文章