雖然我們沒有直接文件證明，把 CSS 寫好會對 SEO 有利，但是透過我們寫 CSS 的方式，而 HTML 頁面裡基本上就只會有文字或圖片信息，而把樣式放在 CSS 裡面，讓搜索引擎在搜的時候，就會專注收集 HTML 裡的內容，少了這些複雜資訊干擾，爬到資料的速度加快，自然也會提升排名。
昨天學會了字的顏色，今天我們來瞭解怎麼用 CSS 調整文字的大小和粗細還有對齊方式吧！
##字體的大小
基本語法架構如下：
p{
font-size: 10px;
}
這個 px 其實就是字體大小的單位，前面接的數字越大，代表字體越大。
在前一篇的介紹，表達顏色的寫法就有 RGB 或是色碼兩種，那麼字體一定也不是只有一種寫法吧！
那就來認識不同的字體單位和寫法囉
px 還能用以下單位替換：
cm，絕對單位，字體的大小以 cm 為單位。large,medium等屬性
xx-small：對應 h6 的標籤文字大小，為 medium 字體的 0.6 倍。x-small：沒有對應的標籤文字大小，為 medium 字體的 0.75 倍。small：對應 h5 的標籤文字大小，medium：預設值大小，為 16 px 為基礎。large：對應 h3 的標籤文字大小。x-large：對應 h2 的標籤文字大小。xx-large：對應 h1 的標籤文字大小。我們會使用font-weight來做粗細變化，基本語法架構如下：
p{
font-weight:bold;
}
我們在編輯器試看看不同的粗細搭配不同的大小，了解一下之間的細節變化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
P{
font-size:bolder;
font-weight: 25px;
color:red;
}
</style>
</head>
<body>
<p>這是鐵人賽第十三篇 </p>
</body>
</html>
在瀏覽器的畫面如下
我們會使用 test-align的語法還寫，基本架構如下：
P{
text-align:left;
}
test-align後接方向，可以接center,left, right就可以調配網頁上的文字位置。
想特別跟大家介紹，如果你今天是用英文寫文章區塊的話，很有可能因為每個單字的長度不一樣，導致文字段落無法對齊，這時候有個好用的語法：
text-align:justify;
這樣子可以讓英文單字為主的文章區塊，可以左右對齊。
如果你想要讓文字字型有所變化，可以參考以下架構：
P{
font-style:italic;
}
字體的變化可分為：
italic：斜體oblique：正體我們來試著在編輯器操作看看以上這些語法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
p{
color:red;
font-size:20px;
font-weight:bolder;
font-style: italic;
text-align: center;
}
</style>
</head>
<body>
<p>pfirefiurehfjhLoremeiijfjefj fioewjfqijefeq efjio fiwqjef qwfi jfieoqefj qewif jieqowf wieqojfw</p>
</body>
</html>
透過 CSS 選擇器可以簡潔快速的幫你的網頁做變化，回到老話一句，生命就該浪費在讓畫面美好的事物上啊！
iThome鐵人賽
看影片追技術