第六章 CSS的继承

时间 2019-11-12

标签第六 css 继承栏目 CSS 繁體版

原文原文链接

将各个HTML标记看做一个个容器，其中被包含的小容器会继承所包含它的大容器的风格样式。css

一、父子关系html

全部的CSS语句都是基于各个标记之间的父子关系的。spa

<html>
<head>
<title>父子关系</title>
</head>
<body>
<h1>祖国的首都<em>北京</em></h1>
<p>欢迎来到祖国的首都<em>北京</em>,这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p>
<ul>
    <li>在这里，你能够：
        <ul>
              <li>感觉大天然的美丽</li>
              <li>体验生活的节奏</li>
              <li>领略首都的激情与活力</li>
        </ul>
    </li>
    <li>你还能够：
        <ol>
               <li>去八达岭爬长城</li>
               <li>去香山看红叶</li>
               <li>去王府井逛夜市</li>
        </ol>
    </li>
</ul>
</body>
</html>

二、CSS继承的运用设计

CSS继承指的是子标记会继承父标记的全部样式风格，并能够在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格彻底不会影响父标记。code

CSS的继承一直贯穿整个CSS设计的始终，每一个标记都遵循这CSS继承的概念。htm

大大缩减代码的编写量，并提升可读性，尤为是在页面内容不少，父子关系庞杂的时候。blog

<html>
<head>
<title>父子关系</title>
<style type="text/css">
<!--
h1{
    color:red;
    text-decoration:underline;
}
h1 em{
    color:#004400;
    font-size:40px;
}
.li1{
    color:red;
}
.li2{
    color:blue;
}
ul li ol{
    font-weight:bold;
    text-decoration:underline;
}
-->
</style>
</head>
<body>
<h1>祖国的首都<em>北京</em></h1>
<p>欢迎来到祖国的首都<em>北京</em>,这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p>
<ul>
    <li class="li1">在这里，你能够：
        <ul>
              <li>感觉大天然的美丽</li>
              <li>体验生活的节奏</li>
              <li>领略首都的激情与活力</li>
         </ul>
    </li>
    <li class="li2">你还能够：
        <ol>
             <li>去八达岭爬长城</li>
             <li>去香山看红叶</li>
             <li>去王府井逛夜市</li>
        </ol>
    </li>
</ul>
</body>
</html>