iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
0

今天會講一些CSS常見、我自己使用率高的屬性。
但是這邊要先來提供大家一些資源 如果有興趣可以去看看 畢竟我覺得CSS就是一個很難學完的東西 我也不想學完 可以了解基本語法 有需要用到什麼屬性再去google就好

一些推薦的網站跟教學

鐵人賽其實蠻多人寫CSS的:
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎
[30 道難解的 CSS 排版] 第 1 道:認識對齊 I
(這一篇已經斷賽了,甚至只寫了兩天,我本來看到的時候很期待地說,畢竟我的CSS排版真的是不怎麼行QQ)

FreeCodeCamp
(他也有YT頻道,有很多好影片,我很多東西都在那學的。)
W3school
(之前提過的,算是某種官方網站了吧。)
HTML Dog
(可以同時學HTML跟CSS的好地方。)

常見的CSS屬性(1)

好那我們可以進入正題了!

color

color: [color];
顧名思義他就是設定顏色用的。後面的color有很多種表示法,如:

  1. 直接打顏色名稱,如lightblueredgreen等等。
  2. 十六進位制色碼,跟上面的顏色名稱是可以對照的。對照表。對真的超級多XD
  3. 看上面那個文件的時候會看到可以用RGB、RGBA等等來表示,但是那個是有點細部的調整我不太常用。轉換器

background-color

background-color: [color];
設定背景顏色,跟剛剛設color的方法一樣,就不贅述了。

text-align

text-align: [center];
這邊不一定是center,只是通常比較常用它。還有rightleft等等可以用。它的效果是文字置中(置左、置右),看你用什麼而定。
但是這邊要注意一點是<span>看起來用不出來,這是因為他的寬度就是你文字打多少的寬度(不會換行也是同樣的道理),不懂的話可以看一下附圖:
https://ithelp.ithome.com.tw/upload/images/20191003/20120263sQLAR2tvJX.png
他的寬度就是剛剛好可以容納文字所需的寬度,不多不少剛剛好。
那如果要用它來做置中的話就需要下一個講的東西了!

width

width: 10px;
顯然是用來設定寬度。請注意,他有單位(px,像素),請要記得加。
那來說說剛剛提到的span問題,你就只需要把他的width調大(如果是要整個頁面置中可能是1400px之類的,但如果要不如直接用div)就可以了。

height

height: 10px;
設定高度。跟剛剛的width很像,就不再重複。

text-decoration

text-decoration: none black soild;
他是關於字的線會用到的屬性。是text-decoration-linetext-decoration-colortext-decoration-style組合起來的,所以當然也可以分開去設置。當要同時設定的時候,就用空白隔開即可(像上面的範例)。以下分開講他們三個的用途:
text-decoration-line
設定線的位置,有none(預設的不顯示)、overline(上面加線)、underline(下底線)、line-through(刪除線)。所以之前講HTML的<a>的時候有提到說可以用CSS把底線弄掉,就是用這個,但是要弄可能需要試一下,優先順序有點複雜。
text-decoration-color
線的顏色。剛剛說過這麼多顏色的東西我就不再說一次了。
text-decoration-style
線的樣式,有soild(一般實心線)、double(雙底線)、dotted(點點線)、dashed(虛線)、wavy(波浪線)。
可以去這裡玩玩看。

border

設定邊界(邊框)。他跟剛剛的很像,也是集合而成的。它是由border-widthborder-styleborder-color組成的。那就一樣分開講:
border-width
邊框的寬度。單位一樣是px,要記得加。
然後他是不會因為太粗而蓋掉字的,如果想確定可以去試試,調成100px之類的XD
border-style
跟剛剛的也很像,選項有none(預設的無)、dotted(點點邊框)、dashed(虛線邊框)、solid(實線邊框)、double(兩條線邊框)。
他也有這裡可以玩玩看,有一些我沒提到,但是蠻炫的(?)
border-color
邊框顏色。一樣啦上面講太多次了不需要再說了。

然後在最後要附一篇文章,一次搞懂 CSS 字體單位,上面有提到px,其實還有很多其他的單位,這潘文章講得蠻清楚的,可以去看看。

今日小結

今天看了很多CSS屬性,也不用特別去背啦,稍微有點印象,需要的時候再去查就好了,這就是我的CSS哲學(?)
明天還有一些CSS的屬性要講,看起來比我想像中的耗篇幅。


上一篇
【Day19】CSS(1)
下一篇
【Day21】CSS(3)
系列文
30天學會用FreeBSD & Apache架網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言