今天會講一些CSS常見、我自己使用率高的屬性。
但是這邊要先來提供大家一些資源 如果有興趣可以去看看 畢竟我覺得CSS就是一個很難學完的東西 我也不想學完 可以了解基本語法 有需要用到什麼屬性再去google就好
鐵人賽其實蠻多人寫CSS的:
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎
[30 道難解的 CSS 排版] 第 1 道:認識對齊 I
(這一篇已經斷賽了,甚至只寫了兩天,我本來看到的時候很期待地說,畢竟我的CSS排版真的是不怎麼行QQ)
FreeCodeCamp
(他也有YT頻道,有很多好影片,我很多東西都在那學的。)
W3school
(之前提過的,算是某種官方網站了吧。)
HTML Dog
(可以同時學HTML跟CSS的好地方。)
好那我們可以進入正題了!
color: [color];
顧名思義他就是設定顏色用的。後面的color有很多種表示法,如:
lightblue
、red
、green
等等。background-color: [color];
設定背景顏色,跟剛剛設color
的方法一樣,就不贅述了。
text-align: [center];
這邊不一定是center
,只是通常比較常用它。還有right
、left
等等可以用。它的效果是文字置中(置左、置右),看你用什麼而定。
但是這邊要注意一點是<span>
會看起來用不出來,這是因為他的寬度就是你文字打多少的寬度(不會換行也是同樣的道理),不懂的話可以看一下附圖:
他的寬度就是剛剛好可以容納文字所需的寬度,不多不少剛剛好。
那如果要用它來做置中的話就需要下一個講的東西了!
width: 10px;
顯然是用來設定寬度。請注意,他有單位(px
,像素),請要記得加。
那來說說剛剛提到的span
問題,你就只需要把他的width
調大(如果是要整個頁面置中可能是1400px之類的,但如果要不如直接用div
)就可以了。
height: 10px;
設定高度。跟剛剛的width
很像,就不再重複。
text-decoration: none black soild;
他是關於字的線會用到的屬性。是text-decoration-line
、text-decoration-color
、text-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-width
、border-style
、border-color
組成的。那就一樣分開講:border-width
邊框的寬度。單位一樣是px
,要記得加。
然後他是不會因為太粗而蓋掉字的,如果想確定可以去試試,調成100px之類的XDborder-style
跟剛剛的也很像,選項有none
(預設的無)、dotted
(點點邊框)、dashed
(虛線邊框)、solid
(實線邊框)、double
(兩條線邊框)。
他也有這裡可以玩玩看,有一些我沒提到,但是蠻炫的(?)border-color
邊框顏色。一樣啦上面講太多次了不需要再說了。
然後在最後要附一篇文章,一次搞懂 CSS 字體單位,上面有提到px,其實還有很多其他的單位,這潘文章講得蠻清楚的,可以去看看。
今天看了很多CSS屬性,也不用特別去背啦,稍微有點印象,需要的時候再去查就好了,這就是我的CSS哲學(?)
明天還有一些CSS的屬性要講,看起來比我想像中的耗篇幅。