跳到主要內容

[2021 IT鐵人賽] 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上,後續會持續的更新,如果喜歡也麻煩幫我按個星星吧~

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


如果喜歡這篇文章,請訂閱我並且拍五下手給予回饋(使用Google或Facebook帳號免費登入,只需要30秒),資金由LikeCoin提供,完全不會花到各位半毛錢!

因為您的支持,我才更有動力創作出更優質的文章~

留言

這個網誌中的熱門文章

[遊記] 2022/07/22 南寮漁港、香山濕地

前言: 2022年的暑假,我來到新竹的工研院實習,因此有了兩個月好好探索這座陌生城市的機會。我在來之前就計畫好了,每周五要選一個地方去旅行,目標是在兩個月內把整個新竹玩透透! 來到了第三個禮拜,今天我約了新竹在地人的大學朋友,請他騎機車載我到處逛逛😆 不過因為他早上有事情,所以我們就約中午吃飯。中午我們去吃城隍廟附近的 阿桂羊牛雜 ,我點了朋友很推的 羊肉炒麵 ,這家的炒麵很特別,醬汁很濃稠,沙茶味很香~ 我點加辣但有點太辣了,下次可能點小辣就好。另外有附飲料和冷氣這點很加分。 (只顧跟朋友聊天,就忘記拍照了😂) 阿桂羊牛雜 羊肉炒麵 $100 推薦指數:4⭐ 吃完飯後,本來想去南寮漁港,但因為今天的太陽真的太大了! 所以朋友就提議先去 新竹巨城 吹冷氣,晚點再去南寮漁港。雖然已經來過巨城一次,但跟別人一起逛就是不太一樣。我們去逛了服飾店、書局和湯姆熊,不知不覺就三點了。於是就離開巨城前往南寮漁港囉~ 本來以為 南寮漁港 很遠,但騎機車一下子就到了,果然在新竹還是要有機車比較方便阿! 我們先去南寮漁港的遊客中心,展望台的景色很不錯,室內還有溜滑梯可以玩呢! 接著我們在附近的魚市場、國際風箏場等地方邊聊邊走,最後走到 魚鱗天梯 。 魚鱗天梯看起來的確很像魚鱗,但聽說他的功能其實是消波塊,還真酷! 底下就有一小片沙灘,因為我今天穿拖鞋,就有下去踩一下海水。不過這裡的海水沒很乾淨,上來後腳上全都是沙子,幸好旁邊就有可以洗腳的地方。 其實旁邊有個滿有名的 17公里海岸自行車道 ,不過我們比較晚才到,所以就沒租腳踏車去騎了。 接著就往南到 香山濕地 ,騎機車也是一下就到了。 香山濕地就像小型的高美濕地,一旁的 賞蟹步道 可以直接走在溼地上方。 賞蟹步道兩旁真的很多螃蟹,照片裡的白點都是螃蟹哦! 當時剛好碰上漲潮,於是我們就在步道上拍起縮時攝影,從影片中可見漲潮的速度有多快! 香山濕地也是看夕陽的好景點,只是有點太早來了,於是我們走去旁邊的 綠色隧道 ,等待夕陽下山。 最後終於等到夕陽了! 加上倒影還滿漂亮的,只可惜今天海面有點雲,無緣看到夕陽落到海平面之下的景色。 最後順路繞去附近的 青青草原 ,雖然天色已經暗了下來,不過因此溜滑梯都不用排隊,可以多溜了幾趟😁 我們也去看了一眼大草原,但因為傍晚有一堆蚊蟲,所以就趕緊撤退了! 最後晚餐去吃 蛋包飯 ,這家也是朋友推薦的...

[Python] async def & await 重點整理

最近實習要用到 FastAPI ,我發現 FastAPI 的 path operation function 會使用 async def ,還會搭配使用 await ,因為對這兩個關鍵字沒很熟,所以就藉機紀錄一下,也避免之後忘記。 async def & await 使用情境 我直接利用下面這個例子來展示什麼情況下可以使用 async 和 await 。 import time def dosomething ( i ): print ( f"第 {i} 次開始" ) time.sleep( 2 ) print ( f"第 {i} 次結束" ) if __name__ == "__main__" : start = time.time() for i in range ( 5 ): dosomething(i+ 1 ) print ( f"time: {time.time() - start} (s)" ) 執行後應該會像這樣。 第 1 次開始 第 1 次結束 第 2 次開始 第 2 次結束 第 3 次開始 第 3 次結束 第 4 次開始 第 4 次結束 第 5 次開始 第 5 次結束 time: 10.048049688339233 (s) 這非常直覺,因為每次呼叫 dosomething() 時都會等待2秒,等完才會執行下一輪,所以最後執行總時間是10秒相當合理。 但仔細想想,如果那2秒是做網路請求或檔案讀寫(IO),這2秒是不需要CPU的,但CPU就只能發呆2秒,痴痴地等待回傳結果,其他什麼事都不能做,豈不是太浪費了嗎!? (學過作業系統的人就知道,絕對不能讓CPU發呆XD) 因此 Python 就有了 asyncio 這個工具,來徹底的利用(X) 榨乾(O) CPU的效能。 我把剛才的例子改成 asyncio 的版本。 import time import asy...

[2021 IT鐵人賽] Day 23:專案05 - KKBOX風雲榜02 | AJAX

昨天已經找到的KKBOX用來傳資料的API,也知道各個參數的意義了,今天就實際將資料抓下來吧! 歌曲資訊 回到昨天那個API,是用JSON格式傳遞資料,資料的格式大致如下: 我們可以發現新歌的資料都放在 “newrelease” 之下,一個element就是一首歌的資訊,另外,每首歌的資訊也以key:value的形式整理的很清楚。 接著,就用之前教過的 requests.get(url) 直接取得API回傳的資料,但回傳的型態是json字串,所以再用Python本身內建的 json.loads() 函數轉成Python的list和dict資料型態。 # KKBOX華語新歌日榜 url = "https://kma.kkbox.com/charts/api/v1/daily?category=297&lang=tc&limit=50&terr=tw&type=newrelease" # 取得歌曲資訊json檔 response = requests.get(url) # 將json字串轉為Python的字典型態 data = json.loads(response.text) 既然已經轉成list和dict的型態了,再根據剛才觀察API得知的架構,要篩選資料就非常簡單,直接來看程式碼: song_list = data[ "data" ][ "charts" ][ "newrelease" ] # 取得每首歌的排名、曲名、連結、作者、時間 for song in song_list: song_rank = song[ "rankings" ][ "this_period" ] song_name = song[ "song_name" ] song_url = song[ "song_url" ] song_artist = song[ "artist_name"...