CSS學習: 編寫CSS檔案

來源:互聯網
上載者:User
根據在HTML檔案中CSS樣式表的位置, 將CSS檔案分為: 頭部CSS, 主體CSS, 外部CSS
1. 編寫頭部CSShead
<html>
<head>
<style type="text/css">
<!--
h3{color:black; font-size:35px; font-family:黑體}
p{background:yellow; color:red; font-family:宋體}
-->
</style>
<title>編寫頭部CSS檔案</title>
</head>
<body>
<h3 align="center">編寫頭部CSS檔案</h3>
<hr>
<p>
在HTML檔案的頭部應用內部樣式表方法添加CSS.
</p>
</body>
</html>

2. 編寫主體的CSSbody
<html>
<head>
<title>編寫主體CSS檔案</title>
</head>
<body>
<center>
<h1 style="color:green;font-size:35px;font-family:黑體">編寫主體CSS檔案</h1>
</center>
<hr>
<p style="background:cyan;color:red;font-size:25px;font-family:隸書">
在HTML檔案的主體應用嵌入式樣表方法添加CSS.
</p>
</body>
</html>

3. 編寫外部的CSS
(1). 應用鏈入外部樣式表方法在HTML檔案內調用外部定義的CSS檔案
CSS代碼:<!CSS檔案的代碼>
<style type="text/css">
<!--
h3{color:black;font-size:35px;font-family:黑體}
p{background:orange;color:blue;font-size:25px;font-family:隸書}
-->
</style>

HTML代碼:Html
<html>
<head>
<title>編寫外部CSS檔案</title>
<link rel=stylesheet type="text/css" href="niuniu1.css">
</head>
<body>
<h3 align="center">編寫外部CSS檔案</h3>
<hr>
<p>在HTML檔案應用鏈入外部樣式表方法調用外部CSS.</p>
</body>
</html>

(2). 應用匯入外部樣式表方法在HTML檔案內調用外部定義的CSS檔案

字型的設定
font-family: 字型  可以一次定義多個字型.
font-size:字型大小
font-style:字型樣式  normal,italic, oblique(正常,斜體,歪斜體)
font-weight:字型加粗 normal,bold,bolder,lighter,number
font-variant:字型變體 normal,small-caps(英文字型顯示為小型的大寫字母)

font:組合設定字型屬性
font屬性是一種複合屬性, 可以同時對文字設定多個屬性.
基本文法:
font: font-family|font-size|font-style|font-weight|font-variant
如: p{font: italic bold small-caps 15pt/18pt 宋體;} 屬性之間要用空格間隔開.
執行個體:Code
<html>
<head>
<title>綜合設定字型執行個體</title>
<style type="text/css">
<!--
h3{font-family:黑體;font-size:25px;font-weight:bolder}
.p1{font:italic samll-caps 15pt/20pt 宋體;}
-->
</style>
</head>
<body>
<center>
<h3>CSS基本概念</h3>
</center>
<hr>
CSS(Cascading Style Sheet)即層疊樣式表, 簡稱樣式表.<br>
<p class=p1>CSS(Cascading Style Sheet)即層疊樣式表, 簡稱樣式表. </p>
</body>
</html>

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。