CSS的三种使用方式
生活随笔
收集整理的這篇文章主要介紹了
CSS的三种使用方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、行間樣式表
?行間樣式表是指將CSS樣式編碼寫在HTML標簽中，格式如下
<h1 style="font-size:12px;color:#000FFF">
我的CSS樣式。
</h1>
行間樣式表由HTML元素的HTML元素的style支持，只需將CSS代碼用分號隔開寫在style=""之中。這是最基本的形式，但是它沒有實現表現與內容分離且不能靈活的控制多個頁面所以我們只是在調試CSS代碼的時候使用。
二、內部樣式表
?內部樣式表與行間樣式表相似都是把CSS代碼寫在HTML頁面中，稍微不同的是前者可以將樣式表放在一個固定的位置，格式如下
<html>
<head>
<title>內部樣式表</title>
<style type="text/css">
?? h1{font-size:12px;
????? color:#000FFF
????? }
</style>
</head>
<body>
<h1>我的CSS樣式。</h1>
</body>
</html>
內部樣式表編碼是初級的應用形式，不能達到跨頁面使用所以不適合使用。
三、外部樣式表
外部樣式表是CSS應用中最好的一中形式，它將CSS樣式代碼單獨放在一個外部文件中，再由網頁進行調用。多個網頁可以調用一個樣式文件表，這樣能夠實現代碼的最大限度的重用及網站文件的最優化配置，格式如下
<html>
<head>
<title>外部樣式表</title>
<link rel="stylesheet" rev="stylesheet" href="style.css">
</head>
<body>
<h1>我的CSS樣式。</h1>
</body>
</html>
在style.css中的代碼為
h1{font-size:12px;
????? color:#000FFF
????? }
我們在<head>中使用了<link>標簽來調用外部樣式表文件。將link指定為stylesheet方式，并使用了href="style.css"指明樣式表文件的路徑便可將該頁面應用到在style.css中定義的樣式。
?行間樣式表是指將CSS樣式編碼寫在HTML標簽中，格式如下
<h1 style="font-size:12px;color:#000FFF">
我的CSS樣式。
</h1>
行間樣式表由HTML元素的HTML元素的style支持，只需將CSS代碼用分號隔開寫在style=""之中。這是最基本的形式，但是它沒有實現表現與內容分離且不能靈活的控制多個頁面所以我們只是在調試CSS代碼的時候使用。
二、內部樣式表
?內部樣式表與行間樣式表相似都是把CSS代碼寫在HTML頁面中，稍微不同的是前者可以將樣式表放在一個固定的位置，格式如下
<html>
<head>
<title>內部樣式表</title>
<style type="text/css">
?? h1{font-size:12px;
????? color:#000FFF
????? }
</style>
</head>
<body>
<h1>我的CSS樣式。</h1>
</body>
</html>
內部樣式表編碼是初級的應用形式，不能達到跨頁面使用所以不適合使用。
三、外部樣式表
外部樣式表是CSS應用中最好的一中形式，它將CSS樣式代碼單獨放在一個外部文件中，再由網頁進行調用。多個網頁可以調用一個樣式文件表，這樣能夠實現代碼的最大限度的重用及網站文件的最優化配置，格式如下
<html>
<head>
<title>外部樣式表</title>
<link rel="stylesheet" rev="stylesheet" href="style.css">
</head>
<body>
<h1>我的CSS樣式。</h1>
</body>
</html>
在style.css中的代碼為
h1{font-size:12px;
????? color:#000FFF
????? }
我們在<head>中使用了<link>標簽來調用外部樣式表文件。將link指定為stylesheet方式，并使用了href="style.css"指明樣式表文件的路徑便可將該頁面應用到在style.css中定義的樣式。
總結
以上是生活随笔為你收集整理的CSS的三种使用方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML DOCTYPE 的重要性
- 下一篇： CSS属性分类