Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css层叠样式表学习进阶（伪类选择器是重点）
Blogger Information
Blog 5
fans 0
comment 1
visits 3323
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css层叠样式表学习进阶（伪类选择器是重点）
hg199
Original
658 people have browsed it

css层叠样式表进阶与总结

知识点

1、简单选择器 元素选择器、属性选择器、类选择器、ID选择器

2、上下文选择器 祖先元素、父辈元素、后代元素、子辈元素

3、伪类选择器 结构选择器、表单选择器、其他伪类选择器

简单应用

应用效果：http://118.24.239.163/cssrepeat.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>层叠样式表练习</title>
  7.     <style>
  8.       * {
  9.         margin: 0px;
  10.       }
  11.       .rongqi {
  12.         margin: 50px 20% 100% 20%;
  13.         width: 650px;
  14.         height: 100%;
  15.         background-color: bisque;
  16.       }
  17.       .biaoti {
  18.         margin: 50px 20% 10px 20%;
  19.       }
  20.       .biaotou {
  21.         margin: 0px 9% 0px;
  22.       }
  23.       table {
  24.         margin: 3px;
  25.         border: red solid 1px;
  26.         width：400px;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="rongqi">
  32.       <h2 class="biaoti">成都XXX有限责任公司专用收款收据</h2>
  33.       <div class="biaotou">
  34.         <span>客户名称：</span>
  35.         <span>房号：</span>
  36.         <span>No:</span>
  37.       </div>
  38.       <table>
  39.         <tr>
  40.           <th>费用项目</th>
  41.           <th>摘要</th>
  42.           <th>金额</th>
  43.         </tr>
  44.         <tr>
  45.           <td>1</td>
  46.           <td>1</td>
  47.           <td>1</td>
  48.         </tr>
  49.         <tr>
  50.           <td>1</td>
  51.           <td>1</td>
  52.           <td>1</td>
  53.         </tr>
  54.         <tr>
  55.           <td>1</td>
  56.           <td>1</td>
  57.           <td>1</td>
  58.         </tr>
  59.         <tr>
  60.           <td>1</td>
  61.           <td>1</td>
  62.           <td>1</td>
  63.         </tr>
  64.         <tr>
  65.           <td>1</td>
  66.           <td>1</td>
  67.           <td>1</td>
  68.         </tr>
  69.         <tr>
  70.           <td>1</td>
  71.           <td>1</td>
  72.           <td>1</td>
  73.         </tr>
  74.       </table>
  75.       <div>
  76.         <span>收款单位（盖章）</span>
  77.         <span>收款人：</span>
  78.         <span>交款人：</span>
  79.       </div>
  80.     </div>
  81.   </body>
  82. </html>

学习总结

1、看十篇听十篇不如敲一次；

2、层叠样式表实质就是如何渲染网页内容；

3、网页内容是通过html元素及其属性加以规范；

4、CSS样式表是通过选择器来实现网页渲染或布局；

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：一定要动手写, 以为懂了, 一写全错, 对不?
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post