在html中使用css樣式的集中方式

一個線上應用的網站如果沒有使用css是很難想象的，在html使用css主要以下幾種方式，下面就做一下簡單介紹。

一.使用内聯樣式:

所謂的内聯樣式，就是将css代碼寫入标簽之内，代碼如下:

<code>&lt;</code><code>div</code> <code>style</code><code>=</code><code>"font-size:12px"</code><code>&gt;螞蟻部落&lt;/</code><code>div</code><code>&gt;</code>

上面的代碼可以将字型大小設定為12px。

二.使用内部樣式表:

内部樣式表就是将css代碼單獨寫在style标簽之内，而不是直接寫在要設定樣式的元素标簽之内。

通常style标簽會發在head标簽之内。

代碼如下:

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>" utf-8"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;螞蟻部落&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt; </code>

<code>div{</code>

<code>  </code><code>font-size:12px;</code>

<code>  </code><code>color:red;</code>

<code>}</code>

<code>&lt;/</code><code>style</code><code>&gt; </code>

<code>&lt;/</code><code>head</code><code>&gt; </code>

<code>&lt;</code><code>body</code><code>&gt; </code>

<code>&lt;</code><code>div</code><code>&gt;螞蟻部落&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt; </code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

以上代碼可以div的字型大小設定為12px，字型顔色設定為紅色。

三.引入外部樣式表:

更多的時候，我們通常将css代碼單獨放入一個css檔案中，然後通過link标簽将其引入.

link标簽通常放在head标簽之内。

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>href</code><code>=</code><code>"style.css"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>&gt;  </code>

原文釋出時間為：2017-2-13

本文作者：admin

本文來自雲栖社群合作夥伴“螞蟻部落”，了解相關資訊可以關注螞蟻部落