CSS基础知识介绍——通过CSS设置各元素的外观

最新推荐文章于 2023-02-15 08:18:11 发布

混吃混喝的废物

最新推荐文章于 2023-02-15 08:18:11 发布

阅读量231

点赞数

分类专栏： DIV+CSS 文章标签：表单 background-color 参考代码

本文链接：https://blog.csdn.net/qq_37196494/article/details/98470363

版权

DIV+CSS 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1. 用CSS修饰表单元素的背景色

<!DOCTYPE html>
<html>
<head>
	<title>CSS</title>
	<style type="text/css">
	select{width: 200px;}
	.one{background-color: #FF0000;color: #66CC66;}
	.two{background-color: #FF9900;color: #006699;}
	.three{background-color: #FFFF00;color: #FF0000;}
	.four{background-color: #009900;color: #FFFF00;}
	.five{background-color: #00FFFF;color: CC6633;}
	.six{background-color: #0000FF;color: #FFFFFF;}
	.seven{background-color: #9900FF;color: #FFFFFF;}
	</style>
</head>
<body>
<form>
<select name="">
<option class="one">红色</option>
<option class="two">橙色</option>
<option class="three">黄色</option>
<option class="four">绿色</option>
<option class="five">青色</option>
<option class="six">蓝色</option>
<option class="seven">紫色</option>
</select>
</form>
</body>
</html>

2. 用CSS改变表单元素的边框样式

<!DOCTYPE html>
<html>
<head>
	<title>CSS</title>
	<style type="text/css">
	#cs{
		border-color: red;
		border-width: 8px;
		border-style: solid;
	}
	</style>
</head>
<body>
默认样式：<input type="text" name=""><br>
通过CSS改变的样式：<input id="cs" type="text" name="">
</body>
</html>

3. 通过CSS修改表单文字的样式

<!DOCTYPE html>
<html>
<head>
	<title>CSS</title>
	<style type="text/css">
	#cs{
		font-size: 20px;
		color: #FFDD33;
		font-weight: bold;
		font-family: 黑体;
	}
	</style>
</head>
<body>
默认样式：<textarea type="text">我的默认样式</textarea><br>
通过CSS改变的样式：<textarea id="cs" type="text">改变后的样式</textarea>
</body>
</html>

综合版example：

<!DOCTYPE html>
<html>
<head>
	<title>CSS</title>
	<style type="text/css">
	body{
		font-family: 宋体;
		font-size: 12px;
	}
	.big{
		width: 300px;
		border: #CCCCCC 2px solid;
		margin: 0 auto 0 auto;
	}
	p{margin: 5px 0 5px 10px;}
	textarea{
		width: 250px;
		height: 80px;
		color: #00FF8B;
		background-color: #ADD8E6;
		border: 1px solid #FFCC00;
	}
	input{background-color: #99CC99;}
	select{
		width: 80px;
		color: #00008B;
		background-color: #99999;
	}
	</style>
</head>
<body>
<form class="big">
<p>请输入姓名：<br><input type="text" name=""></p>
<p>年龄：<br><input type="text" name=""></p>
<p>性别：<select><option>男</option><option>女</option></select></p>
<p>志愿：<input type="radio" name="onw">入伍<input type="radio" name="onw">工作</p>
<p>兴趣爱好：<input type="checkbox" name="">上网<input type="checkbox" name="">游戏<input type="checkbox" name="">睡觉</p>
<p>我要留言：<br><textarea></textarea></p>
<p><input type="submit" name="submit" value="提交"></p>
</form>
</body>
</html>

混吃混喝的废物

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识介绍——通过CSS设置各元素的外观

1. 用CSS修饰表单元素的背景色<!DOCTYPE html><html><head> <title>CSS</title> <style type="text/css"> select{width: 200px;} .one{background-color: #FF0000;color: #66CC66...
复制链接

扫一扫