iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)系列 第 11

鐵人賽 Day11 -- 一定要知道的 CSS (八) -- 想要設定個文字而已有那麼難嗎?

  • 分享至 

  • xImage
  •  

前言

此篇雖然不是非常專業,但基本文字設定應該是沒什麼問題啦

再談談設定文字之前要先知道文字有哪幾種,所以可以先分為

一、標題

<div class="banner1">
     <h2>1</h2>
</div>

二、內文

<div class="banner1">
     <p>1</p>
</div>

在知道有哪些之後,再去做設定的時候才知道今天是要對誰做設定
那就來進入今天的正題吧!!

font-size 字體大小

快捷鍵:fz+tab
假設今天要對標題做設定:

h2{
 font-size:20px;
}

font-weight 字體粗細

快捷鍵:fw+tab
假設今天要對內文做設定:

p{
 font-weight:900;
}

(這邊不需加 px 等等單位)

color 字體顏色

假設今天要對標題做設定:

h2{
 color:#000;
}

單位

px : 絕對單位,代表螢幕中每個「點」( pixel )
em : 相對單位,每個子元素透過「倍數」乘以父元素的 px 值
rem : 相對單位,每個元素透過「倍數」乘以根元素的 px 值。
% : 相對單位,每個子元素透過「百分比」乘以父元素的 px 值。

text-decoration 文字裝飾

預設值 : none --> 去除底線
我最常使用他在去除 超連結 的底線
https://ithelp.ithome.com.tw/upload/images/20210911/201411896h9j7DwQXg.jpg

結合上述的功能後,來試著修改看看
https://ithelp.ithome.com.tw/upload/images/20210911/20141189k9yeycWOlo.jpg

html

<div class="aaa">
    <nav>
        <a href="" class="text">我有底線</a>
    </nav>
</div>

css

.aaa a{
    color: #000;            
    font-size: 30px;
    font-weight: 900;
    text-decoration: none;
}

變更文字沒有很難啦~也有可能是我只會簡單的xd,沒關係
然後颱風明天就要來了,躲在家繼續寫鐵人賽好了哈哈
那我們鐵人賽Day12見囉!!


上一篇
鐵人賽 Day10 -- 一定要知道的 CSS (七) -- background:linear-gradient漸層背景
下一篇
鐵人賽 Day12 -- 一定要知道的 CSS (九) -- Position 定位 & opacity 透明度
系列文
30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言