大家早安~昨天介紹完CSS的語法和選擇器後，今天要來實際告訴大家究竟有哪些常見屬性可以使用呢?

CSS文字

文字顏色

color屬性用於設定文字顏色，屬性值可以是顏色名稱、HEX十六進位色碼、RGB色碼或HSL色碼。

HTML：

<h1 class="name">This is colored by name</h1>
<h1 class="hex">This is colored by HEX</h1>
<h1 class="rgb">This is colored by RGB</h1>
<h1 class="hsl">This is colored by HSL</h1>

CSS：

.name {
    color: red;
}
.hex {
    color: #00946f;
}
.rgb {
    color:rgb(30, 27, 180);
}
.hsl {
    color:hsl(298, 71%, 46%)
}

顯示結果為：

想換成其他顏色只要到這個網頁挑選好顏色，再複製色碼就好了。

背景顏色

使用background-color屬性設定背景顏色，屬性值和文字顏色的屬性值一樣。

HTML：

<h1>這是一般的文字</h1>
<h1 class="c0">這是有背景顏色的文字</h1>

CSS：

.c0 {
    background-color: yellow;
}

顯示結果為：

文字透明度

使用opacity屬性設定透明度，屬性值為0~1的浮點數，數字越小越透明。

HTML：

<h1>這是一般的文字</h1>
<h1 class="c1">這是有點透明的文字</h1>

CSS：

.c1 {
    opacity: 0.5;
}

顯示結果為：

文字大小

使用font-size屬性設定字體大小，屬性值可以是像素(px)、百分比(%)...等等。

HTML：

<p>這是一般的文字</p>
<p class="c2">這是放大的文字</p>
<p class="c3">這是縮小的文字</p>

CSS：

.c2 {
    font-size: 20px;
}
.c3 {
    font-size: 50%;
}

顯示結果為：

文字粗細

使用font-weight屬性設定文字粗細，屬性值可以是文字或0~1000的數字，數字越大文字越粗，大於500是比原本粗，小於500是比原本細。

HTML：

<p>這是一般的文字</p>
<p class="c4">這是較細的文字</p>
<p class="c5">這是較粗的文字</p>

CSS：

.c4 {
    font-weight: lighter;
}
.c5 {
    font-weight: 800;
}

顯示結果為：

文字字體

使用font-family屬性設定文字字體，屬性值為字體名稱。

HTML：

<p>This is a paragraph</p>
<p class="c6">This is a paragraph</p>
<p class="c7">This is a paragraph</p>

CSS：

.c6 {
    font-family: serif
}
.c7 {
    font-family: cursive;
}

顯示結果為：

文字行高

使用line-height設定文字行高，屬性值跟文字大小一樣。

HTML：

<p>這是一般的文字</p>
<p class="c8">這是行高的文字</p>

CSS：

.c8 {
    line-height: 50px;
}

顯示結果為：

文字水平對齊方式

使用text-align設定文字水平對齊方式，屬性值left為置左(預設)、center為置中和right為置右。

HTML：

<p>這是置左的文字</p>
<p class="c9">這是置中的文字</p>
<p class="c10">這是置右的文字</p>

CSS：

.c9 {
    text-align: center;
}
.c10 {
    text-align: right;
}

顯示結果為：

CSS區塊

區塊大小

使用width和height屬性設定區塊的寬和高。屬性值可以是像素(px)或百分比(%)。

HTML：

<div class="d1">
    <p>Inside the div</p>
</div>

CSS：

.d1 {
    width: 400px;
    height: 200px;
    background-color: blue;
    color: white;
}

顯示結果為：一個寬400px，高200px，背景藍色文字白字的區塊。

區塊邊框

使用border屬性可以設定區塊的邊框，屬性值依序為寬度、樣式、顏色。

寬度和顏色的屬性值和前面一樣，而樣式的屬性值如下：

• solid：單條實線(預設)
• double：雙條實線
• dotted：點狀虛線
• dashed：線狀虛線

HTML：

<div class="d2">
    <p>Inside the div</p>
</div>

CSS：

.d2 {
    width: 400px;
    height: 200px;
    border: 5px dashed blue;
}

顯示結果為：藍色虛線，寬度給5px的邊框。

也允許你單別設定單一邊框的屬性值，語法就是-後加上top、bottom、left、right，分別對應到上、下、左、右。

HTML：

<div class="d3">
    <p>Inside the div</p>
</div>

CSS：

.d3 {
    width: 400px;
    height: 200px;
    border-top: 5px dashed blue;
    border-right: 2px solid green;
}

顯示結果為：上方為藍色線，右方為綠色線。

邊框角度

使用border-radius設定邊框的角度，屬性值和設定長寬一樣。

HTML：

<div class="d4">
    <p>Inside the div</p>
</div>

CSS：

.d4 {
    width: 400px;
    height: 200px;
    background-color: blue;
    color: white;
    border-radius: 10px;
}

顯示結果為：

這邊有個技巧，如果區塊是正方形，然後將border-radius設為50%，會得到圓形的區塊。個人履歷的頭像就是這樣做的。

HTML：

<div class="d5">
    <p>Inside the div</p>
</div>

CSS：

.d5 {
    width: 200px;
    height: 200px;
    background-color: green;
    color: white;
    border-radius: 50%;
}

顯示結果為：

小結

今天介紹了文字和區塊的屬性，有了這些屬性，我們的網頁變得更加五顏六色了!

明天我要講如何使用CSS調整版面，是非常實用的技巧，千萬別錯過了哦~

如果喜歡這系列文章麻煩幫我按Like加訂閱，你的支持是我創作最大的動力~

本系列文章以及範例程式碼都同步更新在GitHub上，後續會持續的更新，如果喜歡也麻煩幫我按個星星吧~

有任何問題或建議，都歡迎在底下留言區提出，還請大家多多指教。