004CSS基础

最新推荐文章于 2021-09-25 13:27:06 发布

易择365

最新推荐文章于 2021-09-25 13:27:06 发布

阅读量111

点赞数

分类专栏： 01测试基础

本文链接：https://blog.csdn.net/u013638465/article/details/103270664

版权

01测试基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS基础</title>
	</head>
	<body>
		<!--
        	作者：yize365
        	时间：2019-11-27
        	描述：表单以及相关标签
        -->
		<form action="" method="post">
			昵称:<input type="haha" id="hehe" placeholder="请输入昵称" /><br />
			密码:<input type="password" /><br />
			性别:<input type="radio" name="xb" id="nan" checked="checked" /><label for="nan">男</label>
			<input type="radio" name="xb" id="nv" /><label for="nan">女</label>
			<input type="radio" name="xb" id="bm" /><label for="bm">保密</label><br />
			地址:<select name="">
				<option >郑州市</option>
				<option >天津市</option>
				<option selected="selected">深圳市</option>
				<option >444</option>
				<option >555</option>
				<option >666</option>
			</select>
			<select name="">
				<optgroup label="郑州市">
					<option>二七区</option>
					<option>金水区</option>
					<option>中原区</option>
					<option>管城区</option>
					<option>经开区</option>
				</optgroup>
				<optgroup label="天津市">
					<option>和平区</option>
					<option>滨海新区</option>
					<option>河北区</option>
					<option>河东区</option>
					<option>河西区</option>
				</optgroup>
				<optgroup label="深圳市">
					<option>福田区</option>
					<option selected="selected">宝山区</option>
					<option>罗湖区</option>
					<option>管城区</option>
					<option>经开区</option>
				</optgroup>
												
			</select><br />
			
			<!-- 文本域不能设置rows cols 需要设置 width hight
            -->
			介绍:<textarea name="dizhi" rows="15" cols="30" placeholder="请输入文字"></textarea><br />
			你的爱好:<input type="checkbox" checked="checked" id="cs"/><label for="cs">测试</label>
			<input type="checkbox" id="cf"/><label for="cf">吃饭</label>
			<input type="checkbox" id="sj"/><label for="sj">睡觉</label><br />
			<input type="submit" value="提交" />
			<input type="reset" value="重置" />
			<button>按钮</button>
		</form>
		
	</body>
</html>

二.CSS样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style type="text/css">
			.p0{color: red;background-color: aquamarine; font-size: 35px; font-family: "微软雅黑";text-align: left;text-indent: 3em;}
			#p1{color: #0000FF;}
			#div1{color: red;}
			#sp1{color: blue;}
			
			#div3{
				font-size: 100px;
			}
			.a-001{color: blue;}
			.a-002{color: #cc3300;}
			.a-003{color: orange;}
			.a-004{color: green;}
			.a-005{color: yellow;}
			
			
		</style>
	</head>
	
	<body>
		<p class="p0" id="p0">你好世界<br />你好中国</p>
		<p class="p1" id="p1">你好世界<br />你好中国</p>
		<p class="p2">你好世界<br />你好中国</p>
		<p>你好世界<br />你好中国</p>
		<div id="div1">
			div大盒子
		</div>
		<span id="sp1">
			小盒子
		</span>
		<br />
		
		<div id="div3">
			<span class="a-001">B</span>
			<span class="a-002">a</span>
			<span class="a-003">i</span>
			<span class="a-004">D</span>
			<span class="a-005">u</span>
		</div>
		
		
	</body>
</html>

三.CSS的引入方式

1.内嵌式:style标签放在head中

优点:加载速度快

缺点:html和css 不分离,不便于修改

2.外链式

通过link放在head标签中,把外部的css文件引入到html

优点:实现代码分离,便于修改管理

缺点:运行速度慢些

3.行内式

不建议使用,使得代码臃肿不便于修改

四.选择器权重

id>class>标签

易择365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
004CSS基础

一.表单<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>CSS基础</title> </head> <body> <!-- 作者：yize365 时间：2019-...
复制链接

扫一扫