CSS
目录
1. form表单
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<!--from 的属性设置 action 是提交地址，method是提交方式，也叫请求方式
如果是传图片：enctype="multipart/form-data-->
<form action="" method="">
<div>
<!--text:单行输入文本-->
用户名：<input type="text" name="user" value="123">
</div>
<div>
<!--password:密码输入框-->
密码：<input type="password" name="pwd">
</div>
<div>
<!--radio:单选框-->
性别：<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0" checked>女
</div>
<div>
<!--checkbox:复选框-->
爱好：<input type="checkbox" name="hobbies" value="bsk">篮球
<input type="checkbox" name="hobbies" value="sing">唱
<input type="checkbox" name="hobbies" value="jump">跳
<input type="checkbox" name="hobbies" value="rap">rap
</div>
<div>
<!--file:文本选择框-->
头像：<input type="file" name="photo">
</div>
<div>
<!--select标签
multiple: 布尔属性，设置后为多选，否则默认单选
disabled: 禁用
selected: 默认选中该项
value: 定义提交时的选项值
-->
<select name="city" id="city"multiple>
<option value="1" selected="selected">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</div>
<div>
<!--textarea: 多行文本-->
<textarea name="memo" id="" cols="30" rows="10">hello world!</textarea>
</div>
<!--submit:提交按钮-->
<input type="submit" value="登录">
<!--reset:重置按钮-->
<input type="reset" value="重置">
<!--button:普通按钮-->
<input type="button" value="我是按钮">
</form>
</body>
</html>
<!--
name: 表单提交时的“键”，注意和id的区别
value: 表单提交时对应项的值
check: radio和checkbox默认被选中的项
readonly: text和password设置只读
disabled: 所有input均适用
-->
2. 属性的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性的引入方式</title>
<!--内部样式表: 将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中-->
<style>
.a{
width: 10px;
height: 20px;
background-color: yellow;
}
</style>
<!--外部样式: 将css写在一个单独的文件中，然后在页面进行引入-->
<link rel="stylesheet" href="b.css">
</head>
<body>
<!--行内样式: 在标记的style属性中设定CSS样式-->
<div style="width: 10px;height: 20px;background-color: blue"></div>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
3. 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<!--标签选择器，只要是这个标签都会被选中-->
<div>111
<div>222</div>
</div>
<div>333</div>
</body>
</html>
4. 标签的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的嵌套</title>
</head>
<body>
<!--关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。-->
<div>123
<div>123123</div>
</div>
<!--p标签不能包含块级标签，p标签也不能包含p标签-->
<p>asdasd<p>我是p</p> <div>asdasd</div></p>
</body>
</html>
5. id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#a{
color: orange;
}
</style>
</head>
<body>
<div id="a">123</div>
<div>456</div>
</body>
</html>
6. 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.p{
color: orange;
}
.a{
font-size: 36px;
}
</style>
</head>
<body>
<div class="p a">
mnmnmn
</div>
<div class="a">zxczxc</div>
</body>
</html>
7. 通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用选择器</title>
<style>
*{
color: orange;
}
</style>
</head>
<body>
<div>zcxxxxzc</div>
<span>sdafsff</span>
<p>cxvfbgf</p>
</body>
</html>
8. 后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*div .a{*/
/* color: orange;*/
/*}*/
/*#b .a{*/
/* color: orange;*/
/*}*/
div div{
color: orange;
}
</style>
</head>
<body>
<div id="b" class="c">
<div>大儿子</div>
<div class="a">二儿子
<div>孙子</div>
</div>
</div>
</body>
</html>
9. 儿子选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>儿子选择器</title>
<style>
.a>div{
color: orange;
}
</style>
</head>
<body>
<div class="a">爸爸
<div class="b">儿子
<p class="c">孙子</p>
</div>
</div>
</body>
</html>
10. 毗邻选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>毗邻选择器</title>
<style>
div+p{
color: orange;
}
</style>
</head>
<body>
<div>zxcz
</div>
<p>vvvvv</p>
<p>bbbbb</p>
</body>
</html>
11. 兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟选择器</title>
<style>
span~.a{
color: orange;
}
</style>
</head>
<body>
<div>
<span>span</span>
<h1 class="a">h1</h1>
<h2 class="a">h2</h2>
<p>p</p>
<h3 class="a">h3</h3>
</div>
<p class="a">pppppppp</p>
</body>
</html>
12. 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*div[name]{*/
/* color: orange;*/
/*}*/
div[name="123"]{
color: orange;
}
</style>
</head>
<body>
<div name="123">div</div>
<div name="456">divdiv</div>
<div>dddd</div>
</body>
</html>
13. 组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
/*div,p{*/
/* color: orange;*/
/*}*/
/*p{*/
/* color: orange;*/
/*}*/
div .b .a,p,.c{
color: orange;
}
</style>
</head>
<body>
<div>div
<div class="b">111
<div class="a">222</div>
</div>
<div class="a">
333
</div>
</div>
<p>ppp</p>
<div class="c">444</div>
</body>
</html>
14. 伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
a:link{
color: orange;
}
a:hover{
color: blue;
}
a:active{
color: red;
}
/*a:visited{*/
/* color: purple;*/
/*}*/
</style>
</head>
<body>
<a href="14%20伪类选择器.html">here</a>
</body>
</html>
15. 伪类元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类元素选择器</title>
<style>
p:first-letter{font-size: 48px; color: red}
body{
font-size: 16px; color: red
}
span{
color: purple;
}
</style>
</head>
<body>
<p>你<span style="color: gold">好</span>呀</p></body>
</html>
<!--
before: 在每个<p>元素之前插入内容
p:before {}
after: 在每个<p>元素之后插入内容
p:after {}
-->
16. 设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置宽高</title>
<style>
div{
width: 20%;
height: 200px;
background: orange;
}
span{
width: 20%;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>
17. 字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style>
/*字体：font-family可以把多个字体名称作为一个“回退”系统来保存
如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值*/
body{
font-family: "Microsoft Yahei","微软雅黑","Arial", serif;
}
/*字体大小*/
span{
font-size: 36px;
}
/*字体粗细*/
span{
font-weight: normal;
}
/*字体的颜色*/
span{
/*color: orange;*/
/*color: #252;*/
/*color: rgb(255,0,255);*/
color: rgba(255,0,255,0.5);
}
</style>
</head>
<body>
<span>我是span</span>
</body>
</html>
