認真的F
@MajimeF
Fri, Nov 5, 2021 8:22 AM
2021/11/05（五）
線上課程 網頁開發 學習進度 進度紀錄 65/554。
https://www.udemy.com/...
065、Inheritance
認真的F
@MajimeF
Fri, Nov 5, 2021 8:22 AM
上一噗：
@MajimeF - 2021/11/04（四） #線上課程 #網頁開發 #學習進度 #進度紀錄 64/...
認真的F
@MajimeF
Fri, Nov 5, 2021 8:22 AM
此課程 書籤噗 ：
@MajimeF - #書籤噗 #線上課程學習紀錄 #網頁開發
認真的F
@MajimeF
Fri, Nov 5, 2021 8:24 AM
CSS Styling 有三大規則：

規則1：cascade
@MajimeF - 2021/11/03（三） #線上課程 #網頁開發 #學習進度 #進度紀錄 63/...

規則2：specificity
@MajimeF - 2021/11/04（四） #線上課程 #網頁開發 #學習進度 #進度紀錄 64/...

規則3：inheritance
認真的F
@MajimeF
Fri, Nov 5, 2021 8:26 AM
inherit (v.)
inheritance (n.)
繼承

分為兩種；
inherited 繼承自父母（parent element）的。
non-inherited 自己原先就帶有的。
認真的F
@MajimeF
Fri, Nov 5, 2021 8:26 AM
跟人一樣，錢包裡面的錢，可能是自己賺的，也可能是從父母那裡繼承來的。

CSS 屬性，可能是自己本身就有的，也可能是從 parent element 繼承來的。
認真的F
@MajimeF
Fri, Nov 5, 2021 8:28 AM
看實例比較好懂：
如果把大家長<body>做樣式設定…

body {
  color: green;
}
認真的F
@MajimeF
Fri, Nov 5, 2021 8:29 AM
網頁中，眼睛所見範圍內都是<body>。

所以<h1>、<p>等小孩都會變成綠色字。

唯一沒有變綠色的是「Anchor Tag」超連結。
認真的F
@MajimeF
Fri, Nov 5, 2021 8:31 AM
按 F12 看原始碼。

會發現<h1>本身就會把字體放大、加粗。
為瀏覽器預設的屬性。

下面有個「Inherited from body」（繼承自<body>）
<body>是<h1>的父母，<h1>繼承了父母的屬性（綠色）。
認真的F
@MajimeF
Fri, Nov 5, 2021 8:33 AM
探究為什麼連結（Anchor Tag）沒被更改顏色。
<a> anchor tag 的 inherited from body
color:green ←被劃掉了！也就是不適用。

看 visited ，它自己本身就已經自己帶有顏色設定：
color: rgb(85, 26, 139);
因此不會隨父母更改顏色。
認真的F
@MajimeF
Fri, Nov 5, 2021 8:37 AM
不過要改掉也是可以，問與答有人問。
CSS :visited Selector
反正就是…要刻意去改它才會變化吧XD
認真的F
@MajimeF
Fri, Nov 5, 2021 8:38 AM
是說我倒是發現，FireFox 沒有刪除線劃掉不繼承呢…

不知道為什麼瀏覽器的原始碼顯示方式也不大一樣＠＠
認真的F
@MajimeF
Sun, Nov 7, 2021 1:01 AM
下一噗：
@MajimeF - 2021/11/06（六） #線上課程 #網頁開發 #學習進度 #進度紀錄 66/...
規則整理。
載入新的回覆