03_CSS繼承效果

03_CSS繼承效果

03_CSS繼承效果

 

這使 HTML 文件裡的各個元素 (element) 有上下的繼承 (inheritance) 關係,例如我們將 <body> 的樣式 (style) 設定成黑底白字,因此 <body> 內的各種元素都會以黑底白字呈現,除非各元件有重複定義,就會以各元件優先[PS就像C語言區域變數優先於全域變數]

 

css file

body {
color: white;
background-color: black;
}
div {
color: gray;
background-color: white;
}
blockquote {
color: yellow;
}

 

html file

<html>
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css" href="demo01.css">
</head>
<body>
<p>You ever have that feeling where you're not sure if  you're awake or still dreaming?</p>
<p>A prison for your mind.</p>
<p>Free your mind.</p>
<p>Believe the unbelievable.</p>
<div>There is no spoon.</div>
<div>I can only show you the door, you have to walk through it.</div>
<div>Choice. The problem is choice.</div>
<div>Then tomorrow we may all be dead, but how would that be different from any other day?</div>
<blockquote>I have dreamed a dream, but now that dream has gone from me.</blockquote>
<blockquote>Choice is an illusion, created between those with power, and those without.</blockquote>
<blockquote>Because I choose to.</blockquote>
<blockquote>Everything that has a beginning has an end.</blockquote>
</body>
</html>

 

 

 


發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *