(2012-10-15) 數位內容導論第10講 - 李百麗的數位歷程檔

(2012-10-15) 數位內容導論第10講

2012-10-15 15:24:10, 回應(0), 人氣(826)

---CSS有3種運用方式---
．CSS必須與HTML合用
．有3種合用方式：inline, embed, linking

---CSS的embed使用方式---
--內嵌方式，先宣告再使用
-->把CSS宣告或定義在<style>與</style>之間
<html><head>
<style type="text/css">
h1{color:blue;}
p{
font-size: 18px;
font-family:'新細明體';
color: #669999;
}
</style>
</head>

<body>

<h1>這是標題</h1>
<p>文字內容一</p>
<p style="color:#ff0000">文字內容二</p>

</body></html>

<style></style>必須包含在<head></head>之間
有衝突的標籤會以inline裏的為優先

---embed的變化---
(1)直接在<style>與</style>之間，設定某一種或某一個tag的樣式。
(2)先在<style>與</style>之間，定義一個css的class，給定名稱，再設定作用在那一個tag。
-->定義時，class name之前會以 . 開頭
-->設定(運用)時，必須在HTML tag使用屬性 class="CSS的class的name"。
(3)先在<style>與</style>之間，定義一個css的identifier(識別碼)，給定名稱，再設定作用在那一個tag

。
-->定義時，indentifier name之前會以 # 開頭。
-->設定(運用 )時，必須在HTML tag使用屬性ID="CSS的identifier的name"

---Embed的class name範例---
<html><head>
<style type="text/css">
h1.setcolor{color:blue;}
p.setcolor{color:green;}
.doggy{color:red;}
</style>
</head>
<body>
<h1 class="setcolor">XHTML</h1>
<p class="setcolor">CSS</p>
<h2 class="doggy">JavaScript</h2>
<ol class="doggy">
<li>SMIL</li> <li>RSS</li>
</ol>
<p>XML</p> <p>PHP</p>
</body></html>

---CSS的identifier name的範例---
<html><head>
<style type="text/css">
h1#header{color:blue;}
p#content{color:green;}
h1#footer{color:red;}
#sidebar{color:oliver;}
</style>
</head>
<body>
<h1 id="header">XHTML</h1>
<p id="content">CSS</p>
<p id="sidebar">XML</p>
<h1 id="footer">JavaScript</h1>
</body></html>