第六章 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。