铁人赛 Day11 -- 一定要知道的 CSS (八) -- 想要设定个文字而已有那麽难吗?

前言

此篇虽然不是非常专业,但基本文字设定应该是没什麽问题啦

再谈谈设定文字之前要先知道文字有哪几种,所以可以先分为

一、标题

<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见罗!!


<<:  晚上的空教室补课:名字赋予存在之变数 Variable

>>:  [Day07] - 新拟物风按钮(五) - 参数改变 & 监听变化

Day3 program, process, thread傻傻分不清楚

昨天讲完了linux的核心架构,今天就开始让我们认识重要的部分吧。 以下是三个名词,程序(progr...

透过 EventBus 解决 TransactionTooLargeException 问题

最近在 App 里面加上了纪录使用者登山轨迹的功能後,上线的第一个周末 Firebase Crash...

DAY30:Strategy Pattern,选定不同的策略来执行

什麽是 Strategy Pattern? 设计相同介面但不同实作的物件,再由使用端以此介面去选择要...

Day 3 准备Flutter开发环境(一)

由於安装步骤些许繁杂,因此我会分两天一一讲解,也有附图片及步骤供各位参考呦! 开发环境架设 (一) ...

Ruby on Rails Controller 是干嘛的

Controller 中⽂可翻译成「控制器」,顾名思义,就是⽤来控制流程⽤的。它可能需 要跟 Mod...