css层叠样式表进阶与总结
知识点
1、简单选择器 元素选择器、属性选择器、类选择器、ID选择器
2、上下文选择器 祖先元素、父辈元素、后代元素、子辈元素
3、伪类选择器 结构选择器、表单选择器、其他伪类选择器
简单应用
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>层叠样式表练习</title> <style> * { margin: 0px; } .rongqi { margin: 50px 20% 100% 20%; width: 650px; height: 100%; background-color: bisque; } .biaoti { margin: 50px 20% 10px 20%; } .biaotou { margin: 0px 9% 0px; } table { margin: 3px; border: red solid 1px; width：400px; } </style> </head> <body> <div class="rongqi"> <h2 class="biaoti">成都XXX有限责任公司专用收款收据</h2> <div class="biaotou"> <span>客户名称：</span> <span>房号：</span> <span>No:</span> </div> <table> <tr> <th>费用项目</th> <th>摘要</th> <th>金额</th> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> </table> <div> <span>收款单位（盖章）</span> <span>收款人：</span> <span>交款人：</span> </div> </div> </body></html>
学习总结
1、看十篇听十篇不如敲一次；
2、层叠样式表实质就是如何渲染网页内容；
3、网页内容是通过html元素及其属性加以规范；
4、CSS样式表是通过选择器来实现网页渲染或布局；
