三、css2.0以及选择器

叶宁夏昕

已于 2022-02-07 22:03:25 修改

阅读量264

点赞数

文章标签： css

于 2021-11-09 17:37:59 首次发布

本文链接：https://blog.youkuaiyun.com/come_bn/article/details/121232445

版权

一、表单域介绍：

表单基本介绍：表单就是在web网页上用来收集用户数据，并且将数据提交到后台的一个html模块，在html中专门定义了一个叫form的标签，称之为表单域；
在HTML当中通过form标签来定义表单域，它只相当于一张白纸，用户在它上面填写数据。
当用户填写完成数据之后点击提交按钮，数据就会自动的提交到目标地址，这个地址就是写在action属性值里
Method属性值里填写的就是数据提交的方法，最常见的有get、post两种方法。注意：
action里可以为空或者#来用于数据提交测试。
get方法提交的数据会显示在url地址的后面，有数据大小的限制；
post方法提交的数据会写在http协议请求中，没有数据大小的限制（后期可以抓包查看）

二、常见表单元素

1、用户名和密码框的书写：

代码示例：

		<!-- form标签就是作为表单数据的跟标签 ，action属性的值就是要把所有表单的内容传递给哪一个后台来解决-->
		<!-- method代表传输数据时候的方法 ，get代表明文传送，post代表简单的加密传送-->
		<form action="某一个后台程序的路径" method="get">
			<!--type="text"代表普通的输入框，placeholder属性中可以设置用户的提醒文字 -->
		用户名：<input type="text" placeholder="请输入用户名 ">	
		<br>
		<!--密码框 ：type="password" -->
		密码框：<input type="password">

2、单选框：

Type类型为radio，要想使男、女、保密只能选一个需要用同一个name，如xb；label实现选文字的时候也可以选择性别，扩大选择范围在name后面要加一个id，id名字可以随意取，但是必须和label中for的名字一样

		<!-- 关注点击的时候是否为单选效果，点击文字也可以实现切换效果会提升用户体验 -->
		性别：<input type="radio" name="xb" id="nan" checked="checked"><label for="nan">男 </label><input type="radio" name="xb" id="nv"><label for="nv">女</label>

注意：这里input、label、等都是写完之后按tab键

3、复选框；

复选框用checkbox

		<!-- 复选框也叫多选框，可以全部点选也可以点击一部分，为了提升用户体验，也要和单选框一样，点击文字也可以实现联动效果 -->
		爱好：<input type="checkbox" id="cf" checked="checked"><label for="cf">吃饭</label><input type="checkbox" id="sj"><label for="sj">睡觉</label><input type="checkbox" id="yx"><label for="yx">玩游戏</label>

4、下拉菜单

用select实现

		<!-- 下拉菜单：要注意默认选项是否符合要求，总共的下拉可选数也要符合要求 -->
		你来自：
		<select name="" id="">
			<option value ="">北京</option>
			<option value ="">上海</option>
			<option value ="" selected="selected">深圳</option>
			<option value ="">广州</option>
		</select>

5、文本域：

textarea是文本域，placeholder是提示文字，cols是列，rows是行；

		<!-- 文本域：cols和rows分别代表列和行，程序员一般不用这个属性，因为有兼容性问题，使用css来解决 ,右下角按钮要关闭，不允许用户自行改变大小-->
		建议：<textarea name="" id="" cols="10" rows="10" placeholder="请填写您的建议"></textarea>

6、普通按钮：不具有提交功能，就是一个按钮；type="button"

7、重置按钮：可以清空当前表单中已经填写的内容，重新填写；type="reset"

8、提交按钮：具有提交功能，将数据提交到相应的目标页面；type="submit"

代码示例：

		普通按钮：<input type="button" value="按钮">
		<!-- type="reset"是重置按钮，value属性也要设置，因为如果不设置，浏览器会自己写一个默认值，此按钮的效果是点击后重置页面中的表单数据，而不是清空 -->
		重置按钮：<input type="reset" value="重置">
		<!-- 此按钮点击后会把表单中的数据上传到form标签中action里面的值所对应的后台程序，value要自己设置，否则会有兼容性问题 -->
		提交按钮：<input type="submit" value="提交">

9、默认选中

单选框和复选框在id后面加一个checked="checked"可以默认选中，下拉菜单要在value=""后面加selected="selected"来实现默认

代码示例：

<input type="radio" name="xb" id="nan" checked="checked">

<option value ="" selected="selected">深圳</option>

10、列表标签

ul+li为无序列表；ol+li代表有序列表；

代码示例：

	<body>
		<ul>
			<li>新闻1</li>
			<li>新闻2</li>
			<li>新闻3</li>
		</ul>
		<!-- ol li有序列表，标签要使用的准确才能保证标签的语义化得到更好的体现 -->
		<ol>
			<li>排行1</li>
			<li>排行2</li>
			<li>排行3</li>
			
		</ol>
	</body>

三、css基本介绍：

css使用介绍

网页是利用html来书写的，css负责美化修饰HTML，核心就是找到相应的元素，然后给他设置想要的样式，其中，找元素用的就是css选择器，设置样式就是按着css语法来书写css代码。

基础语法：

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 此处写css代码，type="text/css"此句代码可有可无 */
			/* px代表像素，是一种计算机中的计量单位 */
			/* color代表颜色，font-size代表字体颜色 */
			div{color: chartreuse;font-size: 100px;}
		</style>
	</head>

2.css选择器介绍

习惯将css选择器分为简单选择器和复合选择器；

简单选择器:

标签名选择器：通过标签名称来选中元素。

用style来实现，style放在head标签中的最后一行，然后写div｛｝或p｛｝…

代码示例：

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{color: #7FFF00;}
			div{color: brown;font-size: 100px;}
			h1{color: blueviolet;}
		</style>
	</head>
	<body>
		<p>我是p</p>
		<p>我是p2</p>
		<div>我是div</div>
		<h1>我是h1</h1>
	</body>

2.id选择器：

若想让不同的p标签内容中拥有不同的属性值，如颜色…，需要在p标签中加一个id属性值，然后在style中用#p｛｝来实现。

注意：

1）id的值一定不能出现重复，就好比身份证号一样；

2）id中可以出现数字，但是不允许出现在开头；

3）id中不推荐使用中文

4）id不允许使用除了_和-之外的符号

代码示例：

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* p{color: #7FFF00;} */
			/* #id的属性值叫做id选择器，id的值一定不能重复，就像身份证号一样  */
			/* id命名不可以数字开头，id不推荐使用中文,id不允许使用符号，除了下划线和中划线 */
			#zs{color: #8A2BE2;}
			#xs{color: #7FFF00;}
			#wq{color: #A52A2A;}
			#中文{color: aquamarine;}
			#he!cv{color: bisque;}
			#c-j{color:blueviolet;}
		</style>
	</head>
	<body>
		<p id="zs">恢复</p>
		<p id="xs">分别是为何</p>
		<p id="wq">分别为韩剧</p>
		<p id="中文">中文</p>
		<p id="he!cv">符号</p>
		<p id="c-j">下划线，中划线</p>
	</body>

3.类名选择器：

在标签中加入class来实现，，class中可以设置多个类名，然后在style中用 .类名来设置不同的属性，比如颜色，字体大小，但是要注意在同一个标签中设置多个类名时，style中要设置不同的属性值，比如不能全部设置为颜色等；

代码示例：

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 类选择器使用.类名，类名可以重复使用 */
		/* 同一个标签可以设置多个类名，使用空格来进行分割就可以，id选择器只允许每个标签有一个id名 */
		/* class不允许数字开头命名，不允许符号命名，除了下划线和中划线，class不推荐使用中文命名 */
		/* 命名的时候要做到见名知意 */
		/* 给同一个标签设置两个不同的类名时要注意设置不同的属性，如不能全是颜色 */
			.bz{color: #7FFF00;}
			.xz{font-size: 100px;}
			.bz!{color: #8A2BE2;}
			.v-a_{color: #FFE4C4;}
			.只能{color: aqua;}
		</style>
	</head>
	<body>
		<p class="bz xz">呵呵</p>
		<div class="bz">服务</div>
		<h1 class="bz">v就去吧</h1>
		<h2 class="bz!">把叉烧包</h2>
		<h3 class="v-a_">不都是v</h3>
		<h4 class="只能">hsa</h4>
	</body>

3.css特性：

css特性指的是css在使用过程中存在一些默认现象或者需要遵循一些细节；

css继承性：子元素可以继承父元素的css样式（可以继承不代表一定继承或者全部继承）

代码示例：呵呵最后会显示红色

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 只要给祖先标签设置的css文字属性都可以继承给后代 */
			div{color: red;}
		</style>
	</head>
	<body>
		<!-- 大盒子可以嵌套小盒子，反之不可以 -->
		<div>
			<span>和任何人s</span>
		</div>
	</body>

2.覆盖性：同一个元素的相同css属性，如果存在多个属性值，那么后写的会覆盖先写的（权重相同的前提下）

代码示例：最后显示是blue

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 权重相同的时候，先写的样式会被后写的覆盖 */
			div{color: #7FFF00;}
			div{color: blue;}
		</style>
	</head>
	<body>
	   <div>呵呵</div>
	</body>

3.css优先级：同一个元素若同时被多个不同类型的选择器操作，那么会存在操作能力强弱的现象；