首頁 > 開發者 > CSS

CSS學習: 編寫CSS檔案

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
根據在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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

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

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

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More