【牛腩新聞】——CSS（一）

張文慧-Mirabelle發表於2019-01-23
CSS

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告:

每條宣告由一個屬性和一個值組成。

屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

CSS宣告總是以分號(;)結束，宣告組以大括號({})括起來:

p
{
	color:red;
	text-align:center;
} 


<body>
<p>Hello World!</p>
<p>這個段落採用CSS樣式化。</p>
</body>

CSS註釋以 "/*" 開始, 以 "*/" 結束, 例項如下:

/*這是個註釋*/
p
{
text-align:center;
/*這是另一個註釋*/
color:black;
font-family:arial;
}

【id和class選擇器】

HTML元素以id屬性來設定id選擇器,CSS 中 id 選擇器以 "#" 來定義。

#para1
{
	text-align:center;
	color:red;
} 



<body>
<p id="para1">Hello World!</p>
<p>這個段落不受該樣式的影響。</p>
</body>

class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：

.center
{
	text-align:center;
}


<body>
<h1 class="center">標題居中</h1>
<p class="center">段落居中。</p> 
</body>
p.center
{
	text-align:center;
}


<body>
<h1 class="center">這個標題不受影響</h1>
<p class="center">這個段落居中對齊。</p> 
</body>

【建立樣式表】

外部樣式表(External style sheet)

當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個檔案來改變整個站點的外觀。每個頁面使用 <link> 標籤連結到樣式表。 <link> 標籤在（文件的）頭部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

瀏覽器會從檔案 mystyle.css 中讀到樣式宣告，並根據它來格式文件。

外部樣式表可以在任何文字編輯器中進行編輯。檔案不能包含任何的 html 標籤。樣式表應該以 .css 副檔名進行儲存。下面是一個樣式表檔案的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

內部樣式表(Internal style sheet)

當單個文件需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文件頭部定義內部樣式表，就像這樣:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

內聯樣式(Inline style)

由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。

要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：

<p style="color:sienna;margin-left:20px">這是一個段落。</p>

多重樣式

如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。 

例如，外部樣式表擁有針對 h3 選擇器的三個屬性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而內部樣式表擁有針對 h3 選擇器的兩個屬性：

h3
{
    text-align:right;
    font-size:20pt;
}

假如擁有內部樣式表的這個頁面同時與外部樣式錶連結，那麼 h3 得到的樣式是：

color:red;
text-align:right;
font-size:20pt;

 

內聯樣式）Inline style > （內部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器預設樣式

背景
background-color  元素的背景顏色 body {background-color:#b0c4de;}
background-image 元素的背景影象（平鋪）

body {background-image:url('paper.gif');}

background-position

 設定背景影象的起始位置。  

background-repeat

 設定背景影象是否及如何重複。 background-repeat:no-repeat;

background-attachment

 背景影象是否固定或者隨著頁面的其餘部分滾動。  

 

 

【連結】

a:link - 正常，未訪問過的連結

a:visited - 使用者已訪問過的連結

a:hover - 當使用者滑鼠放在連結上時

a:active - 連結被點選的那一刻

a:link {color:#000000;}      /* 未訪問連結*/
a:visited {color:#00FF00;}  /* 已訪問連結 */
a:hover {color:#FF00FF;}  /* 滑鼠移動到連結上 */
a:active {color:#0000FF;}  /* 滑鼠點選時 */

未完待續……

相關文章