css案例学习之继承关系-低调大师

css案例学习之继承关系

2017-12-30 483

代码

<html>
<head>
    <title>继承关系</title>
    <style>
body{
    color:blue;                    /* 颜色 */
    text-decoration:underline;    /* 下划线 */
    }
em{
    color:red;                    /* 颜色 */
    }
</style>

</head>
<body>
    <h1><em>前沿</em>教室</h1>
    <p>欢迎来到前沿教室，这里为您提供丰富学习内容。</p>
    <ul>
        <li>在这里，你可以学习到：
            <ul>
                <li>HTML</li>
                <li>CSS
                <ul class="css">
                    <li>CSS初级</li>
                    <li>CSS中级</li>
                    <li>CSS高级</li>                
                </ul>
                </li>
                <li>Javascript</li>
            </ul>
        </li>
        <li>你还可以学习到：
            <ol>
                <li>Flash</li>
                <li>Dreamweaver</li>
                <li>Photoshop</li>
            </ol>
        </li>
    </ul>
    <p>如果您有任何问题，欢迎联系我们</p>
</body>
</html>

说明：body下面的元素都继承了body的属性。然后em中的颜色属性又会被覆盖掉。

后代选择器

代码

<html>
<head>
    <title>继承关系</title>
    <style>
h1{
    color:blue;                    /* 颜色 */
    text-decoration:underline;    /* 下划线 */
    }
em{
    color:red;                    /* 颜色 */
    }
li li{
   color:green ;
   font-weight:bold;
}

</style>

</head>
<body>
    <h1><em>前沿</em>教室</h1>
    <p>欢迎来到前沿教室，这里为您提供丰富学习内容。</p>
    <ul>
        <li>在这里，你可以学习到：
            <ul>
                <li>HTML</li>
                <li>CSS
                <ul>
                    <li>CSS初级</li>
                    <li>CSS中级</li>
                    <li>CSS高级</li>                
                </ul>
                </li>
                <li>Javascript</li>
            </ul>
        </li>
        <li>你还可以学习到：
            <ol>
                <li>Flash</li>
                <li>Dreamweaver</li>
                <li>Photoshop</li>
            </ol>
        </li>
    </ul>
    <p>如果您有任何问题，欢迎联系我们</p>
</body>
</html>

说明：li 下面的li会被添加绿色属性包括孙子，曾孙子

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/4987392.html，如需转载请自行联系原作者

微信关注我们

原文链接：https://yq.aliyun.com/articles/338953

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

使用mkdocs管理你的博客或者文档

概述其实我是想找一个文档管理的东西，无意间知道了mkdocs，感觉还不错，是使用python做的一个静态网站生成器安装安装很简单因为是使用python做的所以你要先安装python才可以，如果说安装python的最好的办法的话就是使用pyenv去安装，如果不会可以看我的这篇博客fedora安装pyenv实现python的版本管理 python的版本是python2.7以上现在我就当你安装好了python之后我们来安装mkdocs，一行命令搞定pip install mkdocs 查看下mkdocs的版本 ~ mkdocs --version mkdocs, version 0.17.2 安装完成生成自己的第一个网站项目和hexo一样，我们要使用mkdocs命令去生成自己的第一个项目，使用下面的命令就可以完成 ~ mkdocs new Yuncan-doc INFO - Creating project directory: Yuncan-doc INFO - Writing config file: Yuncan-doc/mkdocs.yml INFO - Writing ...

2017-12-31

691

2017年的小尾巴上，微信推出了小游戏，其中跳一跳火遍大江南北，咱们可爱的程序猿哥哥直接用Python写了个自动跳一跳的程序，github地址：https://github.com/wangshub/wechat_jump_game 因为跳一跳实在是太火了，在看到这个项目后不管有没有点编程基础的都想用这个黑科技来实现排行榜冠军。所以下面详细介绍如何使用这个黑科技。工具介绍 Python 3 Android 手机 Adb 驱动 Python Matplot绘图 Step1：python安装我们用到的是Python3版本，在自己的机器中可以进入命令行界面或终端界面输入Python查看版本。没有安装的去Python官网下载安装，安装Python时会自动配置环境变量，若没有自动配置好，可以手动配置环境变量，这方面的资料很多就不一一赘述，安装好之后在命令行输入Python，出现如下界面即为安装成功。 Step2：安装pip pip同样在Python官网下载，下载完成之后，解压到一个文件夹，用CMD控制台进入解压目录，输入python setup.py install，配置环境变量后，在CMD...

2018-01-01

480

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Oracle

Oracle Database，又名Oracle RDBMS，或简称Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说Oracle数据库系统是目前世界上流行的关系数据库管理系统，系统可移植性好、使用方便、功能强，适用于各类大、中、小、微机环境。它是一种高效率、可靠性好的、适应高吞吐量的数据库方案。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。