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