CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)
一. 表单标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 表单标签的根标签： action：指定提交的URL地址 注意：表单只会提交有name属性的表单项数据(注意下面的这些标签很多用了name属性) 所有表单标签都有name属性 如果没有指定method属性，默认就是get请求 get请求的请求参数是显示在地址栏上面 一般表单提交方式使用post方式 get和post的区别？ 1）get请求的参数会显示在浏览器地址栏上，而post请求不会把请求参数显示在地址栏； 2）Post请求的安全性比get高； 3）get请求参数的长度有限制，而Post请求的参数大小没有限制； 4）get请求有缓存，而post请求没有缓存； --> <!--form里的action是指提交到指定的地方--> <form action="http://www.baidu.com" method="post"> <!--placeholder算是一种提示--> 用户名：<input type="text" id="username" name="username" title="请输入用户名" placeholder="请输入用户名" value=""/><br/> 密码：<input type="password" name="userpass"/><br/> <!-- 同一组单选框的name属性必须相同 --> <!--checked默认选择--> 性别：男<input type="radio" name="gender" value="male" checked/> 女<input type="radio" name="gender" value="female"/><br/> <!-- 同一组的复选框的name属性必须相同 --> 兴趣爱好：吃<input type="checkbox" name="hobby" value="eat"/> 喝<input type="checkbox" name="hobby" value="drink"/> 玩<input type="checkbox" name="hobby" value="play"/><br/> 居住地： <select> <option>请选择省份</option> <option>广东省</option> <option>湖南省</option> </select> <select name="city"> <option>请选择城市</option> <option>深圳</option> <option>广州</option> <option>惠州</option> </select><br/> 大头照：<input type="file"/><br/> 自我介绍：<textarea name="introduce" cols="30" rows="5"></textarea><br/> <!-- submit: 提交按钮 button: 普通按钮 --> <input type="submit" value="注册"/> </form><br/> <!--title当鼠标在图片上静止不动时会有title对应的值的提示信息--> <img src="images/tv01.jpg" title="这是电视机"/> </body> </html>
二. 事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 如果要点击按钮的时候执行一些javascript代码，就可以给该按钮绑定事件。 --> <input type="button" value="click me" onclick="alert('Hello JS')"/> </body> </html>
三. CSS介绍
1. HTML文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<style> /* CSS样式 */ span { color: green; font-size: 20px; } </style>--> <!-- 引入CSS文件 --> <link rel="stylesheet" href="css/1.css"/> </head> <body> <span style="color:green;font-size:32px;">苹果</span> <span>苹果</span> <span>苹果</span> <span class="fruit">苹果</span> <span id="banana" class="fruit">香蕉</span> </body> </html>
2. CSS文件
/* 标签选择器 */ span { color: red; /* 字体颜色 */ font-size: 20px; /* 字体大小 */ } /* 类选择器: 根据元素的class属性名进行样式化 */ .fruit { color: blue; font-size: 14px; } /* ID选择器: 根据元素ID属性值进行样式化 */ #banana { color: yellow; font-size: 14px; }
四. 选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 交集选择器：只会对选择1中的选择2进行样式化 tbody input { font-size: 28px; }*/ /* 并集选择器：同时对多个选择器进行样式化 tbody, input { font-size: 28px; }*/ /* 通用选择器* */ * { font-size: 20px; } /* 伪类选择器：对元素的不同状态进行样式化 */ a:link { font-size: 14px; color: red; } a:hover { font-size: 22px; } a:active { font-size: 22px; color: blue; } a:visited { color: grey; } </style> </head> <body> <table> <tbody> <tr> <td>用户名：</td> <td><input type="text" value="小宝"/></td> </tr> </tbody> <tfoot> <tr> <td colspan="2"> <input type="button" value="提交"/> </td> </tr> </tfoot> </table> <a href="http://www.baidu.com">百度</a> </body> </html>
五. 伪类选择器案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> /* 对tbody中的tr的鼠标滑过的状态进行样式化 */ tbody tr:hover { background-color: yellow; } </style> </head> <body> <table border="1" width="300" align="center" cellspacing="0"> <thead> <tr> <th>书名</th> <th>作者</th> <th>价格</th> </tr> </thead> <tbody align="center"> <tr> <td>三国演义</td> <td>罗贯中</td> <td>99</td> </tr> <tr> <td>红楼梦 </td> <td>曹雪芹</td> <td>89</td> </tr> <tr> <td>西游记 </td> <td>吴承恩</td> <td>109</td> </tr> <tr> <td>水浒传 </td> <td>施耐庵</td> <td>79</td> </tr> </tbody> </table> </body> </html>
六. 背景样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 2000px; background-color: yellow; /* 设置背景颜色 */ background-image: url("images/time1.jpg");/* 设置背景图片 */ background-repeat: no-repeat; /* 设置背景图片不重复 */ background-position: 50% 50%; /* 设置背景图片的位置 */ background-attachment: fixed; /* 设置背景图不滚动 */ } </style> </head> <body> </body> </html>
七. 字体样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { font-size: 18px; } span { color: red; font-weight: bolder; /* 字体加粗 */ } p { text-indent: 2em; /* 字体缩进(1个em代表1个字体大小) */ text-align: left; /* 文本对齐方式 */ letter-spacing: 5px; /* 设置文本距离 */ text-transform: capitalize; /* 转换大小写 */ } a { text-decoration: none; /* 去掉下划线 */ } </style> </head> <body> <p> <!-- 行内标签 --> 设置字体的重量，例如：字体加粗<span>bold border</span> </p> <a href="">老男孩</a> </body> </html>
八. 表格样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table { /*border-collapse: collapse; 合并单元格边框 */ border-spacing: 10px; /* 设置单元格边框的距离 */ } </style> </head> <body> <table border="1" width="500" height="200" align="left"> <!-- 表格标题 --> <caption align="bottom">学员成绩表</caption> <thead> <tr align="left"> <th>姓名</th> <th>性别</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td align="center">小宝</td> <td rowspan="3">男</td> <td>100</td> </tr> <tr> <td>大宝</td> <!--<td>男</td>--> <td>90</td> </tr> <tr> <td>大大宝</td> <!--<td>男</td>--> <td>95</td> </tr> <tr> <td>平均成绩:</td> <td colspan="2">95</td> <!--<td></td>--> </tr> </tbody> </table> </body> </html>
九. 边框样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*span { border-width: 3px; !* 边框的宽度 *! border-color: red; !* 边框颜色 *! border-style: double; !* 边框风格 *! }*/ span { /*border: 1px solid red;*/ border-left: 1px solid red; border-top: 1px dotted blue; border-right: 1px dashed green; border-bottom: 3px double yellow; } </style> </head> <body> <span>老男孩</span> </body> </html>
十. 盒子模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 180px; height: 180px; border: 1px solid red; /*padding-left: 10px; 设置左内边距 */ /*padding-top: 10px; 设置上内边距 */ /*padding: 20px 0px 0px 20px; 设置四条边内边距(上右下左) */ padding: 10px 10px; /* 设置上下和左右内边距 */ } </style> </head> <body> <!-- 块标签 --> <div>Python</div> <div style="margin-top:10px;margin-left:10px;">Java</div> </body> </html>
十一. 定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; } div { width: 150px; height: 150px; border: 1px solid gray; } .red { background-color: red; } .green { background-color: green; /* position: relative; 相对定位 */ position: absolute; /*绝对定位 */ left: 20px; top: 20px; } .blue { background-color: blue; } </style> </head> <body> <div class="red"></div> <div class="green"></div> <div class="blue"></div> </body> </html>
十二. 固定定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 2000px; } img { position: fixed; /* 固定定位 */ top: 250px; left: 980px; } </style> </head> <body> <img src="images/dialog.png"/> </body> </html>
十三. 浮动定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; } div { width: 150px; height: 150px; border: 1px solid gray; } .red { background-color: red; float: left; /* 左浮动 */ height: 200px; } .green { background-color: green; float: left; /* 左浮动 */ } .blue { background-color: blue; float: left; /* 左浮动 */ } </style> </head> <body> <div class="red"></div> <div class="green"></div> <div class="blue"></div> <div>我是老男孩</div> </body> </html>
