CSS 1. form表单 2. 属性的引入方式 3. 标签选择器 4. 标签的嵌套 5. id选择器 6. 类选择器 7. 通用选择器 8. 后代选择器 9. 儿子选择器 10. 毗邻选择器 11. 兄弟选择器 12. 属性选择器 13. 组合选择器 14. 伪类选择器 15. 伪类元素选择器 16. 设置宽高 17. 字体属性
目录
功能：
表单用于向服务器传输数据，从而实现用户与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" 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" >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{
10px;
height: 20px;
background-color: yellow;
}
</style>
<!--外部样式: 将css写在一个单独的文件中，然后在页面进行引入-->
<link rel="stylesheet" href="b.css">
</head>
<body>
<!--行内样式: 在标记的style属性中设定CSS样式-->
<div style=" 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 >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 >
<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{
20%;
height: 200px;
background: orange;
}
span{
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>