總第61篇
上一篇推送了網頁的基本構成，連結位址：網頁是怎麼構成的？，這篇來講講網頁的修飾，正如字面意思一般，本篇分享的内容是用來修飾網頁的，是讓網頁變得更加好看。本文隻是介紹一些基本的CSS，适合入門。
01|什麼是CSS：
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式是用來定義如何顯示 HTML 元素
02|CSS怎麼用：
CSS怎麼用，也就是CSS的文法。CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒号分開，聲明組以大括号({})括起來。
為了讓CSS可讀性更強，你可以每行隻描述一個屬性:
p
{color:red;
text-align:center;
} 複制
CSS注釋以 “/*“ 開始, 以 “*/“ 結束, 比如: /這是個注釋/
03|CSS屬性：
1、背景屬性，即用來設定背景的。
背景顔色設定
<style>
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
</style> 複制
背景圖檔設定
<style>
body
{
background-image:url('paper.gif');
background-color:#cccccc;
}
</style> 複制
2、尺寸屬性，用來設定元素的高度和寬度。
<style>
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">這個段落的高和寬是 100px.</p> 複制
3、字型屬性，用來設定元素的字型顯示方式。
字型樣式（font-style）
<style>
p.normal {font-style:normal;}/*浏覽器正常字型*/
p.italic {font-style:italic;}/*斜體*/
</style>
</head>
<body>
<p class="normal">這是一個段落,正常。</p>
<p class="italic">這是一個段落,斜體。</p>
</body> 複制
字型寬度（font-weight）
<style>
p.normal {font-weight:normal;}/*正常的字型*/
p.light {font-weight:lighter;}/*稍微細一點的字型*/
p.thick {font-weight:bold;}/*粗細一點的字型*/
p.thicker {font-weight:900;}/*也可以通過傳送具體的數值來設定*/
</style> 複制
字型大小（font-size）
<style>
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}
</style> 複制
4、文本屬性
文本顔色設定（color），即字型顔色
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}/*p.ex表示元素p的屬性ex,在元素p中可以直接調用*/
</style>
<body>
<h1>這是标題 1</h1>
<p>這是一個普通的段落。請注意,本文是紅色的。頁面中定義預設的文本顔色選擇器。</p>
<p class="ex">這是一個類為"ex"的段落。這個文本是藍色的。</p>
</body> 複制
文本的方向設定（direction）
<style>
div.ex1 {direction:rtl;}
</style>
</head>
<body>
<div>一些文本。預設的書寫方向。</div>
<div class="ex1">一些文本。 Right-to-left 方向。</div>
</body> 複制
ltr 為預設屬性，文本方向從左到右；rtl 文本方向從右到左。
文本對齊屬性（text-align）
<style>
h1 {text-align:center}/*居中對齊*/
h2 {text-align:left}/*左對齊*/
h3 {text-align:right}/*右對齊*/
h4 {text-align:justify}/*分散對齊*/
</style> 複制
文本字元間距（letter-spacing）
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style> 複制
字元間距值預設情況為0，即字元之間沒有間隔。也可以為負值，出現重疊的效果。