HTML「form」标签补充及CSS引入CSS基础选择器选择器权重

最新推荐文章于 2024-09-05 14:01:36 发布

Hermioneee_

最新推荐文章于 2024-09-05 14:01:36 发布

阅读量148

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/qq_36936831/article/details/107070582

版权

html标签补充及css基础选择器选择器权重

html标签补充
<input type="radio" name="fruit" value="apple">单选 radio
<input type="checkbox" name="fruit" value="apple">多选 checkbox
单选块是圆形
多选块是方形

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>		   
</head>
<body>
<form method="get" action="">
	<h1>
		Choose your sex
	</h1>
	male:<input type="radio" name="sex" value="male" checked="checked"><!--checked=”checked“使选项默认在一开始选择此选项-->
	female:<input type="radio" name="sex" value="female">

	<br>
	<input type="submit">
</form>
</body>		       
</html>

在这里插入图片描述
select+option组成下拉菜单

<select>
	<option> </option>
</select>

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>		   
</head>
<body>
<form method="get" action="">
	<h1>
		Province
	</h1>
	<select name="Province"><!--数据名直接在select中写一个就行-->
		<option>河北</option><!--数据值（value）就是是<option>内的内容-->
		<option>北京</option><!--如果给option强加value 按value来定义数据值-->
		<option>天津</option>
	</select>

	<br>
	<input type="submit">
</form>
</body>		       
</html>

在这里插入图片描述

CSS引入
CSS = cascading style sheet 层叠样式表
1.行间样式

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>		   
</head>
<body>
<div style="
	width: 100px;
	height: 100px;
	background-color: red;">
</div>
</body>		       
</html>

在这里插入图片描述
2.页面级CSS

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>	
	<style type="text/css">   <!--告诉系统要用CSS-->
		div{
			width: 100px;
			height: 100px;
			background-color: green;
		}
	</style>   
</head>
<body>
<div></div>
</body>		       
</html>

在这里插入图片描述

3.外部引入CSS
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	 <!--herf中写CSS的地址-->
</head>
<body>
	<div></div>
</body>		       
</html>

CSS:

div{
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 圆角*/
    background-color: black;
}

CSS基础选择器选择器权重
1.选择器
①id选择器
根据在HTML里命名的id，在CSS里输入#名字，就可以对他定义
每个id 只能一一对应

HTML:

 <!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div id="only">123</div>
	<div id="only1">234</div>
</body>		       
</html>

CSS:

#only{
    background-color: red;
}
#only1{
    background-color: green;
}

在这里插入图片描述
②class选择器
一个class值可以对应多个元素,一个元素也可以对应多个class
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div class="demo demo1">123</div> <!--用两个class，直接空格加另一个-->
	<div class="demo">234</div>

</body>		       
</html>

CSS:

在这里插入图片描述
③标签选择器
直接在CSS开头输入标签，所有的标签都会改变
不管套了多少层都会改变

div{
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 圆角*/
    background-color: black;
}

④通配符选择器

*{							/*所有标识符都会改变*/
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 圆角*/
    background-color: black;
}

id优先级比class高 class比标签选择器高 通配符最低

⑤属性选择器
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div id="only" class="demo">123</div>
	<div id="only1" class="demo">234</div>
	

</body>		       
</html>

CSS:

[id]{  			/*[]nn内写class，id  单独特只一个id时可以用 id="名字"*/
    background-color: red;
}

在这里插入图片描述
在属性后写!important 优先级直接变最高

[id]{
    background-color: red !important;
}

1.id优先级比class高
2.class比标签选择器高
3.class选择器与属性选择器并值，谁在前优先
4.通配符最低

CSS权重：
256进制
!important Infinity +∞
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0

Hermioneee_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML「form」标签补充及CSS引入CSS基础选择器选择器权重

html标签补充及css基础选择器选择器权重html标签补充<input type="radio" name="fruit" value="apple">单选 radio<input type="checkbox" name="fruit" value="apple">多选 checkbox单选块是圆形多选块是方形<!DOCTYPE html> <html lang="en"> <head> <meta charset=
复制链接

扫一扫