1. 表单框类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >单选框 , 复选框 , 下拉框</ title > </ head > < body > < form action = "" method = "" > <!-- 单选框 radio 多选一 name名字要一致 checkedc:默认选中 --> < input type = "radio" name = "sex" value = "m" id = "sex1" /> < label for = "sex1" >男性</ label > < input type = "radio" name = "sex" value = "w" id = "sex2" checked /> < label for = "sex2" >女性</ label > < hr /> <!-- 复选框 checkbox 多选多 name名字要一致 --> < input type = "checkbox" name = "food" value = "banana" checked />香蕉 < input type = "checkbox" name = "food" value = "huanggua" />黄瓜 < input type = "checkbox" name = "food" value = "qiezi" checked />茄子 < input type = "checkbox" name = "food" value = "donggua" />冬瓜 < hr /> <!-- 下拉框 select 多选一 selected 默认选中, disabled 无法选中--> < select name = "city" > < option value = "beijing" >北京人</ option > < option value = "xian" selected>西安人</ option > < option value = "dalian" >大连人</ option > < option value = "fuzhou" >福州人</ option > < option value = "zhengzhou" disabled >郑州人</ option > </ select > < hr / > < input type = "submit" value = "点我" /> </ form > </ body > </ html > |
文件上传:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > 文件上传 </ title > </ head > < body > < form action = "" method = "post" enctype = "multipart/form-data" > <!-- 文件上传 --> 头像:< input type = "file" name = "myfile" /> < hr /> <!-- 大段文本框 --> < textarea name = "info" style = "width:100px;height:100px;background-color:tan;" >请填写相关数据</ textarea > < hr /> <!-- 隐藏的表单框 => 隐藏要修改的数据id --> < input type = "hidden" name = "sid" value = "13" /> < hr /> < input type = "submit" value = "提交" /> </ form > </ body > </ html > |
2. 表单属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >input属性</ title > </ head > < body > <!-- placeholder 灰色输入提示 required 必填 readonly 只能读不能改 可以被提交 disabled 只能读不能改 不会被提交 size 设置输入框的大小 maxlength 输入框最多可以输入多少字符 minlength 输入框最少需要输入多少字符 autofocus 自动获取焦点, 整个页面只能有一个 tabindex 设置tab的切换顺序 --> < form action = '' method = "" > 用户名:< input type = "text" name = "username" placeholder = "请输入用户名" required tabindex = 5 /> < br /> 密码: < input type = "password" name = "pwd" tabindex = 4 > < br /> 年龄: < input type = "text" name = "age" value = "18" readonly tabindex = 3 /> < br /> 邮箱: < input type = "text" name = "email" value = "123463922@qq.com" disabled /> < br /> 班级: < input type = "text" name = "classroom" size = 100 maxlength = 5 minlength = 2 tabindex = 2 /> < br /> 国籍: < input type = "text" name = "country" autofocus tabindex = 1 /> < br /> < input type = "submit" > </ form > </ body > </ html > |
3. css引入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>css学习 css的三种引入方法</title> <!-- 2 .内嵌样式 --> <style> p { color : blue ;} </style> <!-- 外部引入 --> <link href= "my.css" type= "text/css" rel= "stylesheet" /> </head> <body> <p>今天学习css</p> <!-- 1 .行内样式 --> <p style= "color:tan;" >今天学习css</p> <p>我们很开心</p> <a href= "" >我是链接</a> </body> </html> |
my.css
1
2
|
a { font-size : 100px ;} |
4. 选择器
4.1 常用选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>常用选择器</title> <style> /* 标签选择器*/ h 1 { color :cyan} /* 类选择器 */ .one { color : green ;} /* ID选择器 */ #two { color : red ;} /* 组合选择器 */ h 1 ,h 2 ,h 3 ,h 4 { color :goldenrod;} /* 越具体指定,优先级就越高 */ h 1 .one { color : gray ;} h 2 #two { color :greenyellow;} </style> </head> <body> <!-- 标签选择器 : 指定的是哪一些标签 类选择器 : 指定的是哪一类标签 ID选择器 : 指定的是哪一个标签 --> <h 1 > 1 号标签 111 </h 1 > <h 1 class= "one" > 1 号标签 222 </h 1 > <h 2 id = "two" > 2 号标签 333 </h 2 > <a href= "" class= "one" >我是连接</a> <span id = "two" >我是span</span> <h 3 >我是h 3 标签</h 3 > </body> </html> aoe |
4.2 选择器的优先级
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>选择器的优先级</title> <style> font { color :greenyellow;} .one { color : blue ;} #two { color : indigo;} font { color :greenyellow !important ;} </style> </head> <body> <!-- !important <- 行内样式 <- ID选择器 <- 类选择器 <- 标签选择器 大原则: 泛指的元素优先级低, 特指的元素优先级高 , 越具体优先级就越高 --> <font style= "color:tan;" class= "one" id= "two" > 选择器的优先级 </font> </body> </html> |
4.3 关系选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title> 关系选择器 </title> <style> /* 多行注释 */ ul li /* 包含选择器/后代选择器 */ { color :darkslateblue;} ul>li /* 父子选择器 */ { color :yellow;} ol+li /* 相邻选择器 特指下面一个*/ { color : green ;} ol~li /* 兄弟选择器 特指下面一堆*/ { color :deeppink;} </style> </head> <body> <ul> <li>动漫频道</li> <li>学习频道</li> <li>直播频道</li> <li>游戏频道</li> <ol> <li>少儿频道</li> <li>智慧树,大风车</li> <li>老年人频道</li> </ol> <li>授课直播</li> <li>亚洲捆绑</li> </ul> </body> </html> |
4.4 属性选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>属性选择器</title> <style> input[name] { background-color : dodgerblue;} input[name=username] { background-color : red ;} input[type=password] { background-color :yellow;} input[type=text] { background-color : green ;} </style> </head> <body> <form action= "" method= "" > 用户名: <input type= "text" name= "username" /> <br /> 密码: <input type= "password" name= "nickname" > <br /> 性别:<input type= "radio" name= "sex" value= "m" > 男 <input type= "radio" name= "sex" value= "w" > 女 <br /> <input type= "submit" value= "点我" > </form> </body> </html> |
4.5 伪类选择器_颜色设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>伪类选择器</title> <style> /* 鼠标悬停的时候触发 */ a:hover { color : teal ;} /* 列表中第一个元素 */ ul li:first-child { color :yellow;} /* 列表中最后一个元素 */ ul li:last-child { color : green ;} /* 列表中具体某一个元素 */ ul li:nth-child( 4 ) { color : red ;} /* 偶数个2n / even 奇数个2n-1 / odd n不可换 */ ul li:nth-child(even) { color :turquoise;} ul li:nth-child(odd) { color :violet;} /* 小练习 */ /* 1.写一个table表格,设置一个背景色 */ table { background-color : green ;} /* 2.偶数行颜色为蓝色 */ table tr:nth-child( 2 n) { background-color : blue ;} table tr td {} /* 3.第3 , 6 , 9 3倍行颜色为黄色 */ table tr:nth-child( 3 n) { background-color :yellow;} /* 4.鼠标滑过时,颜色变成红色 */ table tr:hover { background-color : red ;} </style> </head> <body> <a href= "#" > 老男孩教育 </a> <ul> <li>马春妮</li> <li>孙坚</li> <li>晓东</li> <li>文东</li> <li>王伟</li> <li>好心</li> <li>蜂拥</li> <li>倩倩</li> <li>石超</li> <li>帅帅</li> </ul> <!-- 小练习: 1 .写一个table表格,设置一个背景色 2 .偶数行颜色为蓝色 3 .第 3 , 6 , 9 3 被行颜色为黄色 4 .鼠标滑过时,颜色变成红色 --> <!-- 颜色设置: RGB: 三原色 R: red 0 ~ 255 0 ~ff G: green 0 ~ 255 0 ~ff B: blue 0 ~ 255 0 ~ff 1 .使用 rgb 方式表达颜色: rgb ( 100 , 100 , 100 ) 三原色的设置 rgba( 100 , 100 , 100 , 0 ~ 1 ) 三原色+透明度设置 2 .使用十六进制的方式表达颜色 f -> 15 1111 ff -> 255 1111 1111 纯红色: # ff 00 00 => #f00 (简写) 纯绿色: # 00 ff 00 => #0f0 (简写) 纯蓝色: # 00 00 ff => #00f (简写) --> <table border= 1 style= "width:600px;" cellspacing= 0 cellpadding= 0 > <tr> <td style= "background-color: #800000;" > 111 </td><td style= "background-color:#0f0;" > 222 </td><td style= "background-color:#00f;" > 333 </td><td> 444 </td> </tr> <tr> <td style= "background-color:rgb(100,100,100);" > 111 </td><td> 222 </td><td> 333 </td><td> 444 </td> </tr> <tr> <td style= "background-color:rgba(100,100,100,0.7);" > 111 </td><td> 222 </td><td> 333 </td><td> 444 </td> </tr> <tr> <td> 111 </td><td> 222 </td><td> 333 </td><td> 444 </td> </tr> <tr> <td> 111 </td><td> 222 </td><td> 333 </td><td> 444 </td> </tr> <tr> <td> 111 </td><td> 222 </td><td> 333 </td><td> 444 </td> </tr> <tr> <td> 111 </td><td> 222 </td><td> 333 </td><td> 444 </td> </tr> <tr> <td> 111 </td><td> 222 </td><td> 333 </td><td> 444 </td> </tr> <tr> <td> 111 </td><td> 222 </td><td> 333 </td><td> 444 </td> </tr> <tr> <td> 111 </td><td> 222 </td><td> 333 </td><td> 444 </td> </tr> </table> </body> </html> |
4.6 伪对象选择器
1
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪对象选择器</title> <style> .name {color:goldenrod;} /* 在内容之前插入 */ .name::before { content:"我问:"; color:green; } /* 在内容之后插入 */ .name::after { content:"肯定对!"; color:magenta; } /* 鼠标选中后的样式 */ .name::selection { background-color: mediumspringgreen; color: white; } </style></head><body> <span class="name">王文很帅,对不对?</span></body></html> |
5. 字体属性设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>css的相关属性: 字体属性 </title> <style> /*@符制定规则,来设置引入的自定义字体 */ @font-face { font-family : "王文" ; src : url ( "font/方正舒体.TTF" ); } /* 设置字体属性 */ .c 1 { font-style : italic ; /*字体斜体*/ font-weight : bold ; /*字体粗细*/ font-size : 32px ; /*字体大小*/ font-family : "宋体" ; /*字体种类*/ } /* 简写字体1 */ .c 2 { font : italic bold 32px "宋体" ; } /* 简写字体2 */ .c 3 { border : solid 1px red ; font : 64px / 2 "宋体" ; /* 字体大小/行高比例 字体种类 */ background-color : yellow; } /* 自定义字体 */ .c 4 { font : 64px / 2 "王文" ;} ul { /* 去掉前面的点. */ list-style : none ; /* 改变鼠标的形态 */ cursor : wait ; } </style> </head> <body> <ul> <li class= "c1" >设置字体相关的属性 1 </li> <li class= "c2" >设置字体相关的属性 2 </li> <li class= "c3" >设置字体相关的属性 3 </li> <li class= "c4" >设置字体相关的属性 4 </li> </ul> </body> </html> |
cursor属性:
6. 文本属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>css的相关属性: 文本属性 </title> <style> .p 0 { font-size : 16px ; width : 200px ; height : 200px ; background-color : red ; /* 字符间距 */ letter-spacing : 5px ; /* 文本的首行缩进 */ /* text-indent:32px; */ /* px代表像素*/ text-indent : 2em ; /* 1em = 1个元素的大小 按照字体比例缩进 */ } .p 1 /* 强制换行 纯英文不会默认换行*/ {word-wrap: break-word;} .p 2 /* 强制不换行 中文默认换行 */ { white-space : nowrap ;} .p 3 /* 设置height与line-height数值相同,可以让文字在垂直方向上居中 */ { font-size : 16px ; width : 200px ; height : 50px ; line-height : 50px ; background-color :goldenrod;} .p 4 /* text-align:left/center/right 文本水平对齐方式 */ { font-size : 16px ; width : 200px ; height : 50px ; line-height : 50px ; background-color :goldenrod; text-align : center ;} .p 5 /* text-decoration:overline/line-through/underline/none; */ { text-decoration : none ;} .p 6 img /* vertical-align:top/middle/bottom 文本垂直对齐方式[一般都是在图片排版的时候使用] */ { vertical-align : -600% ;} /* text-shadow相关设置 none: 无阴影 <length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 <length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 <color>: 设置对象的阴影的颜色。 */ .p 7 { text-shadow : 7px 4px 10px gray ;} </style> </head> <body> <p class= "p0 p1" >setwordxiangguanpropertyhahahah </p> <p class= "p0 p2" >设置文本属性 111222233 asd设置文本属性设置文本属性</p> <p class= "p3" >本属性</p> <p class= "p4" >本属性</p> <a href= "" class= "p5" >本属性</a> <del>特价取消</del> <p class= "p6" > <img src= "tupian1.png" /> <a href>点我跳转</a> </p> <p class= "p7" > 我是炫酷的阴影效果</p> </body> </html> |
7. 盒子模型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title> 盒子模型 </title> <style> #d 1 { width : 200px ; height : 200px ; /* 上 右 下 左 top right bottom left*/ border : solid 10px green ; border-top : dotted 3px red ; border-right : dashed 5px blue ; } #d 2 { width : 200px ; height : 200px ; border : solid 5px red ; /* border-radius: 100px; */ border-top-left-radius: 100px ; border-bottom-right-radius: 100px ; } #d 3 { width : 200px ; height : 200px ; border : solid 5px red ; /*上 右 下 左 padding会增大盒子的面积 内填充*/ /* padding:50px; */ /* 上下 左右*/ /* padding:10px 20px; */ /* 上 左右 下 */ padding : 10px 20px 30px ; /* 上 右 下 左 */ /* padding:10px 20px 30px 10px; */ /* padding-left:30px; */ } #d 4 { width : 200px ; height : 200px ; border : solid 5px red ; /*上 右 下 左 盒子与盒子之间的间距 外边距*/ /* margin:60px; */ /* 上下 左右 */ margin : 10px 20px ; /* 上 左右 下 */ margin : 10px 20px 30px ; /* 上 右 下 左 */ /* margin:10px 20px 30px 10px; */ /* margin-left:30px; */ } #d 5 { width : 200px ; height : 200px ; border : solid 5px red ; /* 上下0px 左右自动居中*/ margin : 0px auto ; } /* box-shadow: <length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 <length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 <length>④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 <color>: 设置对象的阴影的颜色。 */ #d 6 { width : 100px ; height : 100px ; border : solid 5px red ;box-shadow: 6px 3px 16px 6px black ;} </style> </head> <body> <div id= "d1" ></div> <div id= "d2" ></div> <div id= "d3" >我是d 3 </div> <div id= "d4" >我是d 4 </div> <div id= "d5" >我是d 5 </div> <div id= "d6" ></div> </body> </html> |
order-style:
8. 学习工具
1
2
3
4
5
6
|
学习css一般有三种工具提供给我们开发: 1. 代码编辑器本身一般自带提示或者语法提示. 2. css手册,内部提供提供了所有的样式属性和样式值的使用参考,甚至包括一些演示代码. http://css.doyoe.com 3. 浏览器也内置了一些css辅助工具给我们学习和开发. F12,或者Ctrl+shift+i,或者鼠标右键,检查代码 |
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注服务器之家的更多内容!
原文链接:https://blog.csdn.net/weixin_46818279/article/details/122272992