Hi~~大家這週的過的好嗎?
現在最好防疫就是待在家別亂跑吧~
當然我也好好待在家好好寫文啦~雖然好燒腦(大誤XDD
上星期介紹完 CSS 的基本語法後，今天來寫寫 CSS 在文字上的應用吧:)
a841722
<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)
呈現的畫面如下：
我們會看到「 外面下了好大的雨 」的文字出來，那要如何改變文字的大小呢?
這時候我們會用 font-size 這個語法，接下來我們來到了 CSS 語法的部份：
.abc p {
font-size: 36px;
}
font-size就是可以改變文字大小的語法，px 是單位，寫上 36px 之後會發現字變大了
很明顯的字變大了，用這個語法我們就依照網頁不同的需求去改變不同的文字大小了
我們了解到如果修改文字大小後，會想著如果文字能有顏色增加不同的風采那就太好惹~~~
接下來，就要開始改變字的顏色，這裡使用到的是 color 這個語法：
.abc p {
font-size: 36px;
color: brown;
}
加上了 color: brown; 的語法後會發現文字會變成咖啡色的了
用這語法可以寫出你想要的文字顏色，但新手可能會問這麼多顏色的語法我怎麼記的起來呀><
這個問題很簡單，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;
)
這樣子斜體就出來啦~~:)
粗體
font-weight 是可以讓字體變成粗體的語法，寫法如下：
.abc p {
font-size: 36px;
color: brown;
font-weight: bold;
}
這樣子，就有粗體的效果出來了~
這週的文章就分享到這裡，希望能對新手有所幫助，下周見啦:)
iThome鐵人賽
看影片追技術