1.lession3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
<!-- 有下面这个link语句,所有的背景就是圆的,注释掉变成方的 -->
<link rel="stylesheet" type="text/css" href="lession3.css">
</head>
<body>
<form method="get" action="">
<h1>
FF-----------------------------------
</h1>
1.apple<input type="radio" name="f" value="apple">
2.ornege<input type="radio" name="f" value="orenge">
<input type="submit">
1.apple<input type="checkbox" name="f" value="apple">
2.ornege<input type="checkbox" name="f" value="orenge">
<input type="submit">
<h1>
choose you sex
</h1>
male:<input type="radio" name="sex" value="male" checked="checked">
female:<input type="radio" name="sex" value="female">
<input type="submit">
<h1>
Procince
</h1>
<select name="province">
<option>23</option>
<option>26</option>
</select>
<input type="submit">
<h1>
Procince
</h1>
<select name="province">
<option value="23">23</option>
<option value="23">26</option>
</select>
<input type="submit">
</form>
<!-- 引入css -->
方法1.行间样式
<div style="width: 100px;
height: 100px;
background-color:darkred ;
"></div>
方法2.页面级css,写进head
<div></div>
方法3.外部引入css文件
使用link,在head里面
<hr><hr>
<!-- 选择器 -->
<!-- 1.id选择器 1对1关系-->
<div id="on">123</div>
<div id="oy">456</div>
<!-- 2.clacss选择器:抓特点 多对多关系-->
<div class="demo">789</div>
<div class="demo demo1">756</div>
<!-- 3.标签选择器 -->
<div>159</div>
<span>1269</span>
<div>
<span>1485</span>
</div>
<!-- 4.通配符选择器 -->
全部都变
<!-- 优先级id > class > 标签选择器 > 通配符 -->
<div id="on" class="demo1">15746231</div>
<!-- 行间样式 > id -->
<div id="on" style="background-color: darkred;">124726</div>
<div class="demo" id="on">class和属性优先级相同,谁在前面谁优先</div>
<!-- !important是老大 -->
<div>是老大吗?
css权重
!important infinity 256进制
style行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
</div>
</body>
</html>
2.`div{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
#on{
background-color: gray;
}
#oy{
background-color: rebeccapurple;
}
.demo{
background-color: palegoldenrod;
}
.demo1{
color: #f50;
}
div{
background-color: blackPink;!important
}
span{
color: #F40;
font-weight: bolder;
}
*{
background-color: golden rod;//把这个单词合起来就会有背景变化效果
}
/只要有class就会被选中/
[class]{
background-color: pink;
}
[id=“on”]{
font-weight: bold;
}
`
3.页面效果截图