0 0 2 2 - CSS的'继承'

不二如是 · 发表于 2017-1-14 16:39:56

购买主题 已有 28 人购买 本主题需向作者支付 2 鱼币 才能浏览

shishunfu · 发表于 2017-4-21 09:37:17

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>CSS继承</title>
        <style type="text/css">
                html, body {
                        height: 100%;
                        font-family: sans-serif, serif, cursive, fantasy, monospace;
                }

                body {
                        background-color: #f5f5dc;
                        margin: 0;
                        padding: 0;
                        text-align: center;
                        color: #FF4488;
                }

                #first {
                        color: #FF0088;
                }

                #second {
                        color: #FF0066;
                }

                #third {
                        color: #FF0044;
                }

                #forth {
                        color: #ff0022;
                }

                #fifth {
                        color: #ff0000;
                }

        </style>
</head>
<body>
<header>
        <h4>《热爱生命》</h4>
        <p style="margin-left: 100px;">汪国真</p>
</header>
<div id="first">
        <section>
                <p>
                我不去想,<br/>
                是否能够成功;<br/>
                既然选择了远方,<br/>
                便只顾风雨兼程。<br/>
                </p>
        </section>
        <div id="second">
                <section>
                        <p>
                        我不去想, <br/>
                        能否赢得爱情;<br/>
                        既然钟情于玫瑰,<br/>
                        就勇敢地吐露真诚。</p>
                </section>

                <div id="third">
                        <section>
                                <p>
                                我不去想, <br/>
                                身后会不会袭来寒风冷雨;<br/>
                                既然目标是地平线,<br/>
                                留给世界的只能是背影。</p>
                        </section>
                        <div id="forth">
                                <section>
                                        我不去想, <br/>
                                        未来是平坦还是泥泞;<br/>
                                        只要热爱生命,<br/>
                                </section>
                                <div id="fifth">
                                        <section>
                                                一切，都在意料之中
                                        </section>

                                </div>
                        </div>
                </div>
        </div>
</div>
</body>
</html>

781318059 · 发表于 2017-1-15 10:34:58

我来看看.....这是做网页用的吗？

不二如是 · 发表于 2017-1-15 10:38:50

781318059 发表于 2017-1-15 10:34
我来看看.....这是做网页用的吗？

是的，前端开发。

可以这么理解，就是做网页的～

781318059 · 发表于 2017-1-15 12:03:22

不二如是发表于 2017-1-15 10:38
是的，前端开发。

可以这么理解，就是做网页的～

涨知识了

joker11111 · 发表于 2017-2-22 15:35:52

本帖最后由 joker11111 于 2017-2-22 15:37 编辑

SonOmiga · 发表于 2017-3-4 16:28:50

get !

SonOmiga · 发表于 2017-3-4 16:36:28

想知道  body{
                     color: #FF0088;  这段不加加上 #first 什么的  为什么没有起到作用.
            }

会魔法的魔法 · 发表于 2017-3-17 16:45:26

吸血鬼 and 颜色好评

晓月56 · 发表于 2017-6-26 22:38:11

shishunfu 发表于 2017-4-21 09:37
交作业

font-size:30px;添加到body{}的选择器里

MSK · 发表于 2017-7-14 16:54:47

交！作！业！

<!DOCTYPE html>
<html>
        <head>
                <title>继承</title>
                <style type='text/css'>
                        #first{
                        color: #FF88C2;
                        font-size:15px;
                        text-align:center;
                        font-family:宋体;
                  }
           #second{
                        color: #FF0088;
                        font-size:16px;
                }
           #third{
                        color: #C10066;
                        font-size:17px;
                }
                </style>
        </head>
        <body>
                <div id='first'>
                        <p>从明天起，做一个幸福的人</p>
                        <p>喂马，劈柴，周游世界</p>
                        <p>从明天起，关心粮食和蔬菜</p>
                        <p>我有一所房子，面朝大海，春暖花开</p>
                        <br />
                        <div id='second'>
                                <p>从明天起，和每一个亲人通信</p>
                                <p>告诉他们我的幸福</p>
                                <p>那幸福的闪电告诉我</p>
                                <p>我将告诉每一个人</p>
                                <br />
                                <div id='third'>
                                        <p>给每一条河每一座山取一个温暖的名字</p>
                                        <p>陌生人，我也为你祝福</p>
                                        <p>愿你有一个灿烂的前程</p>
                                        <p>愿你有情人终成眷属</p>
                                        <p>愿你在尘世获得幸福</p>
                                        <p>我只愿面朝大海，春暖花开</p>
                                </div>
                        </div>
                </div>
        </body>
</html>

aswyamato1989 · 发表于 2017-7-14 23:56:42

交作业！
《Loveless》

rock5442107 · 发表于 2018-6-5 21:33:30

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title>021-汪國真</title>
        <style type="text/css">
        body{
                text-align:center;
        }
        #zero{
                color:#FF00FF;
        }
        #first{
                color:#FF88C2;
        }
        #second{
                color:#FF44AA;
        }
        #third{
                color:#FF0088;
        }
        #forth{
                color:#C10066;
        }
        #fifth{
                font-weight:bold;
                color:#A20055;
        }
        </style>
</head>
        <body>
                <div id="zero">
                        <p>《熱情的詩》</p>
                </div>
        <div id="first">
                <p>我不去想是否能够成功 既然选择了远方 便只顾风雨兼程</p>
                <div id="second">
                        <p>我不去想能否赢得爱情 既然钟情于玫瑰 就勇敢地吐露真诚 
                        </p>
                        <div id="third">
                                <p>我不去想身后会不会袭来寒风冷雨 既然目标是地平线 留给世界的只能是背影 
                                </p>
                                <div id="forth">
                                        <p>我不去想未来是平坦还是泥泞 只要热爱生命 
                                </p>
                                <div id="fifth"><p>一切，都在意料之中
                                </p>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
        </body>
</html>

STmove · 发表于 2018-7-15 17:45:03

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>lesson 0022</title>
    <style type="text/css">
        body
        {
            color:#6ff;
        }
        #second             /* '#'for id*/
        {
            color:#6dd;
        }
        #third
        {
            color:#5aa;
        }
        #forth
        {
            color:#270;
        }
        /*貌似用id规定格式的话比用class优先级高一点？*/
/*        #fifth   
        {
            color:#999;
        }  */
        
        .test               /*  '.' for class  */
        {
            color:#c0c;
        }
    </style>
</head>

<body>
        <div id="first">
                <p>我不去想是否能够成功 既然选择了远方 便只顾风雨兼程</p>
                <div id="second">
                        <p>我不去想能否赢得爱情 既然钟情于玫瑰 就勇敢地吐露真诚 
                        </p>
                        <div id="third">
                                <p>我不去想身后会不会袭来寒风冷雨 既然目标是地平线 留给世界的只能是背影 
                                </p>
                                <div id="forth">
                                        <p>我不去想未来是平坦还是泥泞 只要热爱生命 
                                </p>
                                <div id="fifth" class="test"><p>一切，都在意料之中
                                </p>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</body>
</html>

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

船到桥头自然沉 · 发表于 2018-9-5 23:06:34

soulwyb · 发表于 2018-10-16 23:54:23

<!doctype html>
<html>

<head>
    <title>
        汪国真
    </title>
    <style type="text/css">
        body {
            color: #ff0088;
        }
        
        #first {
            color: #ff88c2;
        }
        
        #second {
            color: #ff44aa;
        }
        
        #third {
            color: #ff0088;
        }
        
        #forth {
            color: #c10066;
        }
        
        #fifth {
            color: #a20055;
        }
    </style>
</head>

<body>
    <div id="first">
        <p>我不去想是否成功 既然选择了远方 便只顾风雨兼程</p>
        <div id="second">
            <p>
                我不去想是否能够赢得爱情 既然钟情于玫瑰 就勇敢地吐露真诚
            </p>
            <div id="third">
                <p>
                    我不去想身后会不会袭来行风冷遇 既然目标是地平线 留给世界的只能是背影
                </p>
                <div id="forth">
                    <p>
                        我不去想未来是平坦还是泥泞 只要热爱生命
                    </p>
                    <div id="fifth">
                        <p>
                            一切，都在意料之中
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

QiaoaiMen · 发表于 2018-11-15 20:18:08

交作业啦。
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>读首诗再睡觉181114</title>
        <style type="text/css">
                body{
                        text-align: center;
                }
                #first{
                        color: #FF88C2
                }
                #third{
                        color: #FF44AA
                }
                #forth{
                        color: #ff0088
                }
                #fifth{
                        color: #C10066
                }
                #sixth{
                        color: #A20055
                }
        </style>
</head>
<body>
        <div id="first">
                <h1>适得其所（节选）</h1>
                <div id="second">
                        <p>愿月光为这块石头洗礼命名。<br>愿月光祝福大大小小的众多石头</p>
                        <div id="third">
                                <p>愿这隔着一座山仿佛在下雨的<br>遗忘的山谷，月光重新亲吻它。</p>
                                <div id="forth">
                                        <p>愿那些高高在上的人，他们眼睛里的荒杂地<br>虽不是伊甸园却也是乐园。</p>
                                        <div id="fifth">
                                                <p>愿月光偏爱他们。愿我们都要在上面建立家园<br>的那两块岩石高耸，一百年后仍在它们原来所在。</p>
                                                <div id="sixth">
                                                        <p>愿他们的恐惧消失</p>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</body>
</html>
<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">

542624047 · 发表于 2019-1-16 16:50:47

最后一句总结很通俗易懂啊。

支持

星海雪的钟爱 · 发表于 2019-2-21 17:52:51

get,mark一下，这个理解了

你在意在便在 · 发表于 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>

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 58370 狗仔卡	发表于 2017-1-14 16:39:56 \| 显示全部楼层 \|阅读模式购买主题已有 28 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 37
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

点评

评分

点评

评分

点评

评分

点评

评分

评分