iT邦幫忙

2

[鼠年全馬鐵人挑戰] Week10 - 超新手入門:CSS - 文字的不同變化

  • 分享至 

  • xImage
  •  

Hi~~大家這週的過的好嗎?
現在最好防疫就是待在家別亂跑吧~/images/emoticon/emoticon13.gif
當然我也好好待在家好好寫文啦~雖然好燒腦(大誤XDD
上星期介紹完 CSS 的基本語法後,今天來寫寫 CSS 在文字上的應用吧:)

改變文字的大小

<html>

 <head>

  <title> </title>
  
   <link rel="stylesheet" href="css/123.css"> 

 </head>

 <body>
 
    <div class ="abc" >
        <p>外面下了好大的雨</p>
    </div>


 </body>

</html>

在這裡先隨便寫一段 HTML 以方便呈現 CSS的效果 (真的超隨便der~XDD)
呈現的畫面如下:

https://ithelp.ithome.com.tw/upload/images/20200411/20120789DfmJX3HSEK.png

我們會看到「 外面下了好大的雨 」的文字出來,那要如何改變文字的大小呢?
這時候我們會用 font-size 這個語法,接下來我們來到了 CSS 語法的部份:

.abc p {
  font-size: 36px;
}

font-size就是可以改變文字大小的語法,px 是單位,寫上 36px 之後會發現字變大了

https://ithelp.ithome.com.tw/upload/images/20200411/20120789y44H86YYKx.png

很明顯的字變大了,用這個語法我們就依照網頁不同的需求去改變不同的文字大小了

改變文字的顏色

我們了解到如果修改文字大小後,會想著如果文字能有顏色增加不同的風采那就太好惹~~~
接下來,就要開始改變字的顏色,這裡使用到的是 color 這個語法:

.abc p {
  font-size: 36px;
  color: brown;
}

加上了 color: brown; 的語法後會發現文字會變成咖啡色的了

https://ithelp.ithome.com.tw/upload/images/20200412/20120789oziTtMsxiU.png

用這語法可以寫出你想要的文字顏色,但新手可能會問這麼多顏色的語法我怎麼記的起來呀><
這個問題很簡單,google 一下 CSS 色碼表就有提供很多色碼可以用囉!!!
以下這個網址就是其中一個網站,大家可以在 去goole 一下囉:)

CSS 色碼表https://www.ginifab.com.tw/tools/colors/html_color_names.html

改變字型

就像 wrod 一樣,網頁的文字可以隨著專案的不同而改變字型,這時候我們要使用的是 font-family這個語法,這裡附上字型網站可供查閱使用:

字型參考網站

1.https://www.oxxostudio.tw/articles/201811/css-font-family.html
2.https://wcc723.github.io/css/2014/01/01/font-family/

粗體斜體的應用

斜體

font-style是可以讓我們改變字體成斜體的語法,以下是寫法:

  font-size: 36px;
  color: brown;
  font-style: italic;
 )

https://ithelp.ithome.com.tw/upload/images/20200412/20120789ZdKzZbbmAr.png

這樣子斜體就出來啦~~:)

粗體

font-weight 是可以讓字體變成粗體的語法,寫法如下:

.abc p {
  font-size: 36px;
  color: brown;
  font-weight: bold;
 }

https://ithelp.ithome.com.tw/upload/images/20200412/20120789Ykv21thQya.png

這樣子,就有粗體的效果出來了~

這週的文章就分享到這裡,希望能對新手有所幫助,下周見啦:)


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言