鱼C论坛

 找回密码
 立即注册
查看: 4266|回复: 26

[庖丁解牛] 0 0 2 2 - CSS的'继承'

[复制链接]
发表于 2017-1-14 16:39:56 | 显示全部楼层 |阅读模式
购买主题 已有 28 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-4-21 09:37:17 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>CSS继承</title>
  6.         <style type="text/css">
  7.                 html, body {
  8.                         height: 100%;
  9.                         font-family: sans-serif, serif, cursive, fantasy, monospace;
  10.                 }

  11.                 body {
  12.                         background-color: #f5f5dc;
  13.                         margin: 0;
  14.                         padding: 0;
  15.                         text-align: center;
  16.                         color: #FF4488;
  17.                 }

  18.                 #first {
  19.                         color: #FF0088;
  20.                 }

  21.                 #second {
  22.                         color: #FF0066;
  23.                 }

  24.                 #third {
  25.                         color: #FF0044;
  26.                 }

  27.                 #forth {
  28.                         color: #ff0022;
  29.                 }

  30.                 #fifth {
  31.                         color: #ff0000;
  32.                 }

  33.         </style>
  34. </head>
  35. <body>
  36. <header>
  37.         <h4>《热爱生命》</h4>
  38.         <p style="margin-left: 100px;">汪国真</p>
  39. </header>
  40. <div id="first">
  41.         <section>
  42.                 <p>
  43.                 我不去想,<br/>
  44.                 是否能够成功;<br/>
  45.                 既然选择了远方,<br/>
  46.                 便只顾风雨兼程。<br/>
  47.                 </p>
  48.         </section>
  49.         <div id="second">
  50.                 <section>
  51.                         <p>
  52.                         我不去想, <br/>
  53.                         能否赢得爱情;<br/>
  54.                         既然钟情于玫瑰,<br/>
  55.                         就勇敢地吐露真诚。</p>
  56.                 </section>

  57.                 <div id="third">
  58.                         <section>
  59.                                 <p>
  60.                                 我不去想, <br/>
  61.                                 身后会不会袭来寒风冷雨;<br/>
  62.                                 既然目标是地平线,<br/>
  63.                                 留给世界的只能是背影。</p>
  64.                         </section>
  65.                         <div id="forth">
  66.                                 <section>
  67.                                         我不去想, <br/>
  68.                                         未来是平坦还是泥泞;<br/>
  69.                                         只要热爱生命,<br/>
  70.                                 </section>
  71.                                 <div id="fifth">
  72.                                         <section>
  73.                                                 一切,都在意料之中
  74.                                         </section>

  75.                                 </div>
  76.                         </div>
  77.                 </div>
  78.         </div>
  79. </div>
  80. </body>
  81. </html>
复制代码
0016CSS继承.png

点评

我很赞同!: 5.0
我很赞同!: 5
字体在大些,就更棒了!  发表于 2017-4-21 09:38
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-1-15 10:34:58 | 显示全部楼层
我来看看.....这是做网页用的吗?

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 通俗易懂

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-1-15 10:38:50 | 显示全部楼层
781318059 发表于 2017-1-15 10:34
我来看看.....这是做网页用的吗?

是的,前端开发。

可以这么理解,就是做网页的~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-1-15 12:03:22 | 显示全部楼层
不二如是 发表于 2017-1-15 10:38
是的,前端开发。

可以这么理解,就是做网页的~

涨知识了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-22 15:35:52 | 显示全部楼层
本帖最后由 joker11111 于 2017-2-22 15:37 编辑

111111.png

3333333333333333333.png

444.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-4 16:28:50 | 显示全部楼层
  get !
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-4 16:36:28 | 显示全部楼层
想知道  body{
                        color: #FF0088;  这段不加 加上 #first 什么的  为什么没有起到作用.
                }
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-17 16:45:26 | 显示全部楼层
吸血鬼 and 颜色好评
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-26 22:38:11 | 显示全部楼层

font-size:30px;添加到body{}的选择器里
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-14 16:54:47 | 显示全部楼层
交!作!业!


  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>继承</title>
  5.                 <style type='text/css'>
  6.                         #first{
  7.                         color: #FF88C2;
  8.                         font-size:15px;
  9.                         text-align:center;
  10.                         font-family:宋体;
  11.                   }
  12.            #second{
  13.                         color: #FF0088;
  14.                         font-size:16px;
  15.                 }
  16.            #third{
  17.                         color: #C10066;
  18.                         font-size:17px;
  19.                 }
  20.                 </style>
  21.         </head>
  22.         <body>
  23.                 <div id='first'>
  24.                         <p>从明天起,做一个幸福的人</p>
  25.                         <p>喂马,劈柴,周游世界</p>
  26.                         <p>从明天起,关心粮食和蔬菜</p>
  27.                         <p>我有一所房子,面朝大海,春暖花开</p>
  28.                         <br />
  29.                         <div id='second'>
  30.                                 <p>从明天起,和每一个亲人通信</p>
  31.                                 <p>告诉他们我的幸福</p>
  32.                                 <p>那幸福的闪电告诉我</p>
  33.                                 <p>我将告诉每一个人</p>
  34.                                 <br />
  35.                                 <div id='third'>
  36.                                         <p>给每一条河每一座山取一个温暖的名字</p>
  37.                                         <p>陌生人,我也为你祝福</p>
  38.                                         <p>愿你有一个灿烂的前程</p>
  39.                                         <p>愿你有情人终成眷属</p>
  40.                                         <p>愿你在尘世获得幸福</p>
  41.                                         <p>我只愿面朝大海,春暖花开</p>
  42.                                 </div>
  43.                         </div>
  44.                 </div>
  45.         </body>
  46. </html>
复制代码

捕获.PNG

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-7-15 17:49

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-14 23:56:42 | 显示全部楼层
交作业!
《Loveless》
022.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-7-15 17:49

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-6-5 21:33:30 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>021-汪國真</title>
  6.         <style type="text/css">
  7.         body{
  8.                 text-align:center;
  9.         }
  10.         #zero{
  11.                 color:#FF00FF;
  12.         }
  13.         #first{
  14.                 color:#FF88C2;
  15.         }
  16.         #second{
  17.                 color:#FF44AA;
  18.         }
  19.         #third{
  20.                 color:#FF0088;
  21.         }
  22.         #forth{
  23.                 color:#C10066;
  24.         }
  25.         #fifth{
  26.                 font-weight:bold;
  27.                 color:#A20055;
  28.         }
  29.         </style>
  30. </head>
  31.         <body>
  32.                 <div id="zero">
  33.                         <p>《熱情的詩》</p>
  34.                 </div>
  35.         <div id="first">
  36.                 <p>我不去想是否能够成功 既然选择了远方 便只顾风雨兼程</p>
  37.                 <div id="second">
  38.                         <p>我不去想能否赢得爱情 既然钟情于玫瑰 就勇敢地吐露真诚
  39.                         </p>
  40.                         <div id="third">
  41.                                 <p>我不去想身后会不会袭来寒风冷雨 既然目标是地平线 留给世界的只能是背影
  42.                                 </p>
  43.                                 <div id="forth">
  44.                                         <p>我不去想未来是平坦还是泥泞 只要热爱生命
  45.                                 </p>
  46.                                 <div id="fifth"><p>一切,都在意料之中
  47.                                 </p>
  48.                                         </div>
  49.                                 </div>
  50.                         </div>
  51.                 </div>
  52.         </div>
  53.         </body>
  54. </html>
复制代码


022.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-7-15 17:49

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-15 17:45:03 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>lesson 0022</title>
  6.     <style type="text/css">
  7.         body
  8.         {
  9.             color:#6ff;
  10.         }
  11.         #second             /* '#'for id*/
  12.         {
  13.             color:#6dd;
  14.         }
  15.         #third
  16.         {
  17.             color:#5aa;
  18.         }
  19.         #forth
  20.         {
  21.             color:#270;
  22.         }
  23.         /*貌似用id规定格式的话比用class优先级高一点?*/
  24. /*        #fifth   
  25.         {
  26.             color:#999;
  27.         }  */
  28.         
  29.         .test               /*  '.' for class  */
  30.         {
  31.             color:#c0c;
  32.         }
  33.     </style>
  34. </head>

  35. <body>
  36.         <div id="first">
  37.                 <p>我不去想是否能够成功 既然选择了远方 便只顾风雨兼程</p>
  38.                 <div id="second">
  39.                         <p>我不去想能否赢得爱情 既然钟情于玫瑰 就勇敢地吐露真诚
  40.                         </p>
  41.                         <div id="third">
  42.                                 <p>我不去想身后会不会袭来寒风冷雨 既然目标是地平线 留给世界的只能是背影
  43.                                 </p>
  44.                                 <div id="forth">
  45.                                         <p>我不去想未来是平坦还是泥泞 只要热爱生命
  46.                                 </p>
  47.                                 <div id="fifth" class="test"><p>一切,都在意料之中
  48.                                 </p>
  49.                                         </div>
  50.                                 </div>
  51.                         </div>
  52.                 </div>
  53.         </div>
  54. </body>
  55. </html>
复制代码

0022.png
话说今天好热了,出门5分钟流汗1小时,不过云挺好看的
微信图片_20180715170750.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
天好蓝~  发表于 2018-7-15 17:49

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-5 23:06:34 | 显示全部楼层
css-div.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-10-16 23:54:23 | 显示全部楼层
  1. <!doctype html>
  2. <html>

  3. <head>
  4.     <title>
  5.         汪国真
  6.     </title>
  7.     <style type="text/css">
  8.         body {
  9.             color: #ff0088;
  10.         }
  11.         
  12.         #first {
  13.             color: #ff88c2;
  14.         }
  15.         
  16.         #second {
  17.             color: #ff44aa;
  18.         }
  19.         
  20.         #third {
  21.             color: #ff0088;
  22.         }
  23.         
  24.         #forth {
  25.             color: #c10066;
  26.         }
  27.         
  28.         #fifth {
  29.             color: #a20055;
  30.         }
  31.     </style>
  32. </head>

  33. <body>
  34.     <div id="first">
  35.         <p>我不去想是否成功 既然选择了远方 便只顾风雨兼程</p>
  36.         <div id="second">
  37.             <p>
  38.                 我不去想是否能够赢得爱情 既然钟情于玫瑰 就勇敢地吐露真诚
  39.             </p>
  40.             <div id="third">
  41.                 <p>
  42.                     我不去想身后会不会袭来行风冷遇 既然目标是地平线 留给世界的只能是背影
  43.                 </p>
  44.                 <div id="forth">
  45.                     <p>
  46.                         我不去想未来是平坦还是泥泞 只要热爱生命
  47.                     </p>
  48.                     <div id="fifth">
  49.                         <p>
  50.                             一切,都在意料之中
  51.                         </p>
  52.                     </div>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </div>
  57. </body>

  58. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-11-15 20:18:08 | 显示全部楼层
  1. 交作业啦。
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.         <meta charset="utf-8">
  6.         <title>读首诗再睡觉181114</title>
  7.         <style type="text/css">
  8.                 body{
  9.                         text-align: center;
  10.                 }
  11.                 #first{
  12.                         color: #FF88C2
  13.                 }
  14.                 #third{
  15.                         color: #FF44AA
  16.                 }
  17.                 #forth{
  18.                         color: #ff0088
  19.                 }
  20.                 #fifth{
  21.                         color: #C10066
  22.                 }
  23.                 #sixth{
  24.                         color: #A20055
  25.                 }
  26.         </style>
  27. </head>
  28. <body>
  29.         <div id="first">
  30.                 <h1>适得其所(节选)</h1>
  31.                 <div id="second">
  32.                         <p>愿月光为这块石头洗礼命名。<br>愿月光祝福大大小小的众多石头</p>
  33.                         <div id="third">
  34.                                 <p>愿这隔着一座山仿佛在下雨的<br>遗忘的山谷,月光重新亲吻它。</p>
  35.                                 <div id="forth">
  36.                                         <p>愿那些高高在上的人,他们眼睛里的荒杂地<br>虽不是伊甸园却也是乐园。</p>
  37.                                         <div id="fifth">
  38.                                                 <p>愿月光偏爱他们。愿我们都要在上面建立家园<br>的那两块岩石高耸,一百年后仍在它们原来所在。</p>
  39.                                                 <div id="sixth">
  40.                                                         <p>愿他们的恐惧消失</p>
  41.                                                 </div>
  42.                                         </div>
  43.                                 </div>
  44.                         </div>
  45.                 </div>
  46.         </div>
  47. </body>
  48. </html>
  49. <img src="https://fishc.com.cn/forum.php?mod=image&aid=104820&size=300x300&key=8b6909ea3b5a2fcd&nocache=yes&type=fixnone" aid="attachimg_104820" alt="" border="0">
复制代码


022.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-16 16:50:47 | 显示全部楼层
最后一句总结很通俗易懂啊。支持
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-21 17:52:51 | 显示全部楼层
get,mark一下,这个理解了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-10-28 22:23:46 | 显示全部楼层
交作业交作业~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
  #first {
    color: #e74c3c;
  }

  #second {
    color: #e67e22;
  }

  #third {
    color: #f1c40f;
  }

  #forth {
    color: #27ae60;
  }

  #fifth {
    color: #2ecc71;
  }
</style>
</head>
<body>
  <div id="first">
    <p>我不去想是否能够成功 既然选择了编程 便只顾一路向前
    </p>
      <div id="second">
        <p>希望鱼C也越来越好~
        </p>
          <div id="third">
            <p>用编程改变世界~
            </p>
              <div id="forth">
                <p>不二如是,小甲鱼~
                </p>
                  <div id="fifth">
                    <p>你们是真爱~
                    </p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</body>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 23:03

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表