search

博客列表 >CSS基础与选择器（第三章1030作业）-PHP培训九期线上班

CSS基础与选择器（第三章1030作业）-PHP培训九期线上班

yany
yany原创
2019年12月04日 18:33:53627浏览

1、元素按显示方式分为哪几种，并举例，正确描述他们

分为块级框和行内框，块级框显示的内容为块级元素，行内框内显示的内容为行内元素；块级框的宽高由内部的子元素决定，行内框的宽高由内部的内容决定；如页面导航的子项目就为块级元素，当没有子项目时，该区域内子项目框重叠，没有内容，但框架依然存在；块级宽内可以嵌套行内框。

2、CSS是什么？他的主要作用是什么？

CSS是层叠样式表；用来设置HTML元素在文档中的布局与显示方式。

3、什么是CSS选择器，他的样式声明是哪二部分组成？

CSS选择器是在页面中选择某一个或某一组标签，一般选择某一组标签，除ID外，返回一组元素；
样式声明是由键值对组成，键为属性的名称，值为属性的对应的值，可以为字符串或数值。

4、举例演示CSS简单选择器（全部）

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>举例演示CSS简单选择器</title>
  6.     <style>
  7.         p{
  8.             color:cadetblue;
  9.         }          /*元素选择器*/
  10.         p[class]{
  11.             color:cyan;   /*属性选择器*/
  12.         }
  13.         .orange{
  14.             background-color: darkgray;
  15.         }                 /*类选择器*/
  16.         #black{
  17.             color: darkseagreen;
  18.         }        /*ID选择器*/
  19.         .gray,h2{
  20.             background-color: deeppink;
  21.         }        /*群组选择器*/
  22.         html{
  23.             font-size: 20px;
  24.         }
  25.         body*{
  26.             font-size: 1000rem;
  27.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <h2>季节特征</h2>
  34.     <p>花开的季节</p>
  35.     <p class='gray'>蝉鸣的季节</p>
  36.     <p class='orange'>落叶的季节</p>
  37.     <p id="black">飘雪的季节</p>
  38. </body>
  39. </html>

5、举例演示CSS上下文选择器（全部）

html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>上下文选择器</title>
  6.     <link rel="stylesheet" href="css/style3.css"
  7. </head>
  8. <body>
  9.     <section>
  10.         <div>
  11.             <h2>精油</h2>
  12.             <h2 id="item">纯露</h2>
  13.             <h2>植物油</h2>
  14.             <h2>香脂</h2>
  15.         </div>
  16.         <h2>复方</h2>
  17.         <h2>日化</h2>
  18.     </section>
  20. </body>
  21. </html>`

css代码：

  1. section h2{
  2.     color: indianred;
  3. }                       /*后代选择器*/
  4. /*爷>父>子*/
  5. section>h2{
  6.     color: lawngreen;
  7. }                     /*父子选择器*/
  8. section>div{
  9.     background-color: lightblue;
  10. }                    /*父子选择器*/
  11. #item+*{
  12.     background-color: magenta;
  13. }                    /*同级相邻选择器*/
  14. #item~*{
  15.     background-color: mediumaquamarine;
  16. }                    /*同级所有选择器*/`

6、举例演示常用CSS结构伪类选择器（不少于四种）

非限定性类型的结构伪类选择器：
html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>常用CSS结构伪类选择器</title>
  6.     <link rel="stylesheet" href='css/style4.css'
  7. </head>
  8. <body>
  9.     <ul>
  10.         <li>
  11.             <h2>采购订单</h2>
  12.             <ul>
  13.                 <li>苹果1000kg</li>
  14.                 <li>香蕉300kg</li>
  15.                 <li>西瓜50kg</li>
  16.             </ul>
  17.         </li>
  18.         <li>
  19.             <h2>到货通知</h2>
  20.             <p>2019-11-01到货明细</p>
  21.             <ul>
  22.                 <li>榴莲100kg</li>
  23.                 <li>柿子50kg</li>
  24.                 <li>奇异果800kg</li>
  25.             </ul>
  26.             <p>请各部门同事做好相关收货准备！</p>
  27.         </li>
  28.         <li>
  29.             <h2>工作计划</h2>
  30.             <ul>
  31.                 <li>销售发货打包</li>
  32.                 <li>与快递公司确认取货时间</li>
  33.                 <li>联系供应商</li>
  34.             </ul>
  35.         </li>
  36.     </ul>
  37.     <ul>
  38.         <li>
  39.             <h2>研发产品市场调研</h2>
  40.             <ul>
  41.                 <li>护手霜</li>
  42.                 <li>唇膏</li>
  43.                 <li>润肤乳</li>
  44.             </ul>
  45.         </li>
  46.         <li>
  47.             <h2>预计研发产品</h2>
  48.             <p>市场部推荐冬季较为受欢迎产品</p>
  49.             <ul>
  50.                 <li>滋润保湿效果较好的护手霜</li>
  51.                 <li>薄荷味唇膏</li>
  52.                 <li>植物香气的润肤乳</li>
  53.             </ul>
  54.         </li>
  55.     </ul>
  58. </body>
  59. </html>

css代码：

  1. /*非限定性结构伪类:只关注html元素的位置，不限定类型*/
  3. ul>:nth-child(2){
  4.     color: mediumturquoise;
  5. }         /*选定所有ul下的第二个子元素*/
  6. ul>:first-child{
  7.     color: mediumvioletred;
  8. }          /*选定所有ul下的第一个子元素*/
  9. ul>:last-child{
  10.     color: orange;
  11. }         /*选定所有ul下的最后一个子元素*/
  12. ul:nth-child(2)>:first-child{
  13.     background-color: paleturquoise;
  14. }
  15. ul:first-child>:nth-child(2){
  16.     background-color: palevioletred;
  17. }
  18. ul:last-child>:first-child{
  19.     background-color: peru;
  20. }
  21. ul:first-child>:nth-child(2)>p:nth-child(n+1){
  22.     background-color: pink;
  23. }
  24. ul:last-child>:last-child li:nth-child(n+1){
  25.     background-color: powderblue;
  26. }               /*最后一个ul的最后一个子元素下的所有li元素*/`
  27. /*限定类型的结构伪类选择器：
  28. 将非限定型结构的伪类选择器中的child改为of-type即为限定性结构伪类选择器。
  29. 小结：
  30. ：nth-child():非限定类型；关注点在于元素的位置上
  31. ：nth-of-type():限定类型；关注点：一、类型；二、位置；*/

7、举例演示常用CSS表单伪类选择器（不少于三种）

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>常用表单伪类选择器</title>
  6.     <link rel="stylesheet" href="css/style5.css">
  7. </head>
  8. <body>
  9. <h2>用户登录</h2>
  10. <form action="" method="POST">
  11.     <p>
  12.         <label for="email">邮箱：</label>
  13.         <input type='email' id='email' required placeholder="example@email.com">
  14.     </p>
  15.     <p>
  16.         <label for='password'>密码：</label>
  17.         <input type='password' id='password' required placeholder="不得少于6位">
  18.     </p>
  19.     <p>
  20.         <label for='save'>保存密码：</label>
  21.         <input type='checkbox' id='save' name='save' checked readonly>
  22.     </p>
  23.     <p>
  24.         <label for='save_time'>保存期限：</label>
  25.         <select name='save_time' id='save_time'>
  26.             <option value='7' selected>7天</option>
  27.             <option value='30'>30天</option>
  28.         </select>
  29.     </p>
  30.     <p>
  31.         <input type='hidden' name='login_time' value='登录时间'>
  32.     </p>
  33.     <p>
  34.         <label for="warning">警告：</label>
  35.         <input type='text' id='warning' value='一天内仅允许登录三次' style='border:none' disabled>
  36.     </p>
  37.     <script>
  38.         Document.querySelector('[type="hidden"]').value=new Data().getTime()
  39.     </script>
  40. </form>
  41. </body>
  42. </html>

css代码：

  1. input:enabled{
  2.         background-color: salmon;
  3.     }
  4.  input:disabled{
  5.         background-color: springgreen;
  6.     }
  7.   input:required{
  8.         background-color: violet;
  9.     }
上一条：创建类与构造函数，Trait方法，接口与抽象类 - 第九期线上班 20191204下一条：12月03日类与对象复习-九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多