2. 程式人生 > 其它 >P18-前端基礎-CSS樣式的繼承

P18-前端基礎-CSS樣式的繼承

阿新 • • 發佈：2021-02-05

技術標籤：最美前端# 前端【H5+Css3】

P18-前端基礎-CSS樣式的繼承

1.概述

樣式的繼承，我們為一個元素設定的樣式同時也會應用到它的後代元素上
繼承是發生在祖先後後代之間的
繼承的設計是為了方便我們的開發，

  • 利用繼承我們可以將一些通用的樣式統一設定到共同的祖先元素上，
  • 這樣只需設定一次即可讓所有的元素都具有該樣式

注意：並不是所有的樣式都會被繼承：
比如 背景相關的，佈局相關等的這些樣式都不會被繼承

2.CSS樣式的繼承案例

<!DOCTYPE html>
<html>

<head>
  <meta charset="
 
UTF-8">
  <title>樣式的繼承</title>

  <style>
    /* 
            樣式的繼承，我們為一個元素設定的樣式同時也會應用到它的後代元素上

            繼承是發生在祖先後後代之間的

            繼承的設計是為了方便我們的開發，
                利用繼承我們可以將一些通用的樣式統一設定到共同的祖先元素上，
                    這樣只需設定一次即可讓所有的元素都具有該樣式

            注意：並不是所有的樣式都會被繼承：
                比如 背景相關的，佈局相關等的這些樣式都不會被繼承。
         */
 



    /* 將一些通用的樣式統一設定到共同的祖先元素上 */
    body {
      font-size: 20px;
    }

    /* span繼承了p元素的樣式 */
    p {
      color: springgreen;
    }

    /* span和em分別繼承了div元素的樣式 */
    div {
      color: steelblue;
    }
  </style>
</head>

<body>
  <p>
    我是一個p元素
    <span>我是p元素中的span</
 
span>
  </p>

  <span>我是p元素外的span</span>

  <div>
    我是div
    <span>
      我是div中的span
      <em>我是span中的em</em>
    </span>
  </div>
</body>

</html>

3.預覽效果

在這裡插入圖片描述

相關推薦

P18-前端基礎-CSS樣式的繼承

技術標籤：最美前端# 前端【H5+Css3】 P18-前端基礎-CSS樣式的繼承 1.概述 樣式的繼承，我們為一個元素設定的樣式同時也會應用到它的後代元素上 繼承是發生在祖先後後代之間的 繼承的設計是為了方便我們的開發，

2020年12月-第01階段-前端基礎-CSS字型樣式

CSS字型樣式屬性除錯工具 應用 使用css字型樣式完成對字型的設定 使用css外觀屬性給頁面元素新增樣式

前端基礎HTML---樣式的繼承

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title>樣式的繼承</title>

前端基礎-CSS層疊樣式表

CSS CSS被用來同時控制多重網頁的樣式和佈局。 通過使用 CSS，所有的格式化均可從 HTML 中剝離出來，並存儲於一個獨立的檔案中。

前端基礎 | CSS

1. 為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆分開,CSS由此思想而誕生.

CSS樣式繼承和樣式權重

樣式的繼承 樣式的繼承：為一個元素設定的樣式，同時也會應用到它的後代元素上去。

2020年12月-第01階段-前端基礎-CSS初識

CSS層疊樣式表 理解 css的目的作用 css的三種引入方式 1.HTML的侷限性 說起HTML，這其實是個非常單純的傢伙， 他只關注內容的語義，

2020年12月-第01階段-前端基礎-CSS Day02

CSS Day02 複合選擇器 後代選擇器 並集選擇器 1. CSS複合選擇器 理解 理解css複合選擇器分別的應用場景

2020年12月-第01階段-前端基礎-CSS Day03

CSS Day03 盒子模型（CSS重點） css學習三大重點： css 盒子模型、浮動、定位 主題思路：

P9-前端基礎-CSS簡介

技術標籤：最美前端# 前端【H5+Css3】 P9-前端基礎-CSS簡介 1.概述 網頁分成三個部分：

P63-前端基礎CSS-電影卡片練習圖文佈局

技術標籤：最美前端# 前端【H5+Css3】 P63-前端基礎CSS-電影卡片練習圖文佈局 1.概述

P62-前端基礎CSS-背景圖片位移之雪碧圖效果

技術標籤：最美前端# 前端【H5+Css3】 P62-前端基礎CSS-背景圖片位移之雪碧圖效果

P53-前端基礎CSS-行高設定

技術標籤：最美前端# 前端【H5+Css3】 P53-前端基礎CSS-行高設定 1.概述 行高（line height）

P21-前端基礎-CSS顏色四種表示方式

技術標籤：最美前端# 前端【H5+Css3】 P21-前端基礎-CSS顏色四種表示方式 1.概述 顏色單位： 在CSS中可以直接使用顏色名來設定各種顏色 比如：red、orange、yellow、blue、green … … 但是在css中直接使用顏色

P17-前端基礎-CSS偽元素選擇器

技術標籤：最美前端# 前端【H5+Css3】 P17-前端基礎-CSS偽元素選擇器 1.概述 偽元素，表示頁面中一些特殊的並不真實的存在的元素（特殊的位置） 偽元素使用 :: 開頭

P23-前端基礎-CSS盒子模型

技術標籤：最美前端# 前端【H5+Css3】 P23-前端基礎-CSS盒子模型 1.概述 盒模型、盒子模型、框模型（box model）

css樣式繼承、覆蓋

技術標籤：csshtmlweb 首先我們梳理一下。哪屬性會被繼承。 文字 color,顏色a元素除外direction，方向-font 字型 font-Family. 字體系列font-style 字型風格font-size 字型大小font-weight 字型粗細letter-spanc

前端基礎---文字樣式

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title>文字樣式</title>

前端頁面css樣式載入不出來

最近在工作中遇到了個特別奇怪的問題，同一個專案有個頁面樣式可以完全加載出來，另外一個頁面也載入不出來。剛開始沒有找到問題所在，就覺得很玄幻。最後發現，在測試伺服器上沒又問題。同樣的程式碼放到客戶伺服器

前端基礎HTML---css簡介(內聯樣式)

1. 層疊樣式表(Cascading Style Sheets)2. Css可以用來為網頁建立樣式表,通過樣式表可以對網頁進行裝飾。3. 所謂層疊，可以將整個網頁想象成是一-層一層的結構,層次高的將會覆蓋層次低的。而css就可以分別為網頁的各