iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
自我挑戰組

從HTML到Python爬蟲的30天之旅系列 第 5

Day 05:專案01 - 超簡單個人履歷04 | CSS文字、區塊屬性

大家早安~昨天介紹完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上,後續會持續的更新,如果喜歡也麻煩幫我按個星星吧~

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


上一篇
Day 04:專案01 - 超簡單個人履歷03 | CSS簡介
下一篇
Day 06:專案01 - 超簡單個人履歷05 | CSS版面佈局、Flex
系列文
從HTML到Python爬蟲的30天之旅30

尚未有邦友留言

立即登入留言