color
color 前景色，通常用來設定字體的顏色
顏色單位
在CSS中可以直接使用顏色名來設定各種顏色
比如：red、orange、yellow、blue、green ... ...
但是在css中直接使用顏色名是非常的不方便
RGB值
RGB通過三種顏色的不同濃度來調配出不同的顏色
R red，G green ，B blue
每一種顏色的范圍在 0 - 255 (0% - 100%) 之間
語法：RGB(紅色,綠色,藍色)
e.g. color: rgb(250,80,100);
Hello World!
RGBA
就是在rgb的基礎上增加了一個a表示不透明度
需要四個值，前三個和rgb一樣，第四個表示不透明度
1表示完全不透明 0表示完全透明 .5半透明
e.g. color: rgba(250,80,100,.5);
Hello World!
十六進制的RGB值
語法：#紅色綠色藍色
顏色濃度通過 00-ff
如果顏色兩位兩位重復可以進行簡寫
#bbffaa --> #bfa
e.g. color: #bfa 護眼豆沙綠
Hello World!
HSL值 HSLA值
H 色相(0 - 360)
S 飽和度，顏色的濃度 0% - 100%
L 亮度，顏色的亮度 0% - 100%
A 不透明度
e.g. color: hsla(98,48%,40%,0.658);
Hello World!
font-size
font-size 設定字體的大小
字體大小單位
像素
螢屏（顯示幕）實際上是由一個一個的小點點構成的
不同螢屏的像素大小是不同的，像素越小的螢屏顯示的效果越清晰
所以同樣的20px在不同的設備下顯示效果不一樣
而網頁字體默認的大小為 16px
e.g. font-size: 25px;
Hello World!
em
em 是相對于元素的字體大小來計算的
1em = 1*font-size
em 相當于當前元素的一個font-size
rem
rem 是相對于根元素的字體大小來計算
rem 相對于根元素的一個 font-size（16px）
font-family
font-family 字體族（字體的格式）
可選值：
-
serif 襯線字體類
你好世界 Hello World
-
sans-serif 非襯線字體類
你好世界 Hello World
-
monospace 等寬字體類
你好世界 Hello World
除了這些，還有像 cursive fantasy 之類不常用的字體類
上面這些值是指定字體的類別，瀏覽器會自動使用該類別下的字體
font-family 可以同時指定多個字體，多個字體間使用 , 隔開
字體生效時優先使用第一個，第一個無法使用則使用第二個 以此類推
@font-face
可以將服務器中的字體直接提供給用戶去使用
@font-face {
/* 指定字體的名字 */
font-family:'myfont' ;
/* 服務器中字體的路徑 */
src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
/* format 指定字體檔案格式，一般都不用寫 */
}
p {
font-family: myfont;
}
可能會有些問題：
- 加載速度
- 著作權
- 字體格式
.ttf woff 之類的
圖示字體（iconfont）
在網頁中經常需要使用一些圖示，可以通過圖片來引入圖示
但是圖片大小本身比較大，并且非常的不靈活
所以在使用圖示時，我們還可以將圖示直接設定為字體，然后通過font-face的形式來對字體進行引入
這樣我們就可以通過使用字體的形式來使用圖示
參考圖示有3中方式：（下面會講到）
- 參考類
- 物體
- 設定偽元素
fontawesome
fontawesome 使用步驟
- 下載 https://fontawesome.com/
- 解壓
- 將 css 和 webfonts 移動到專案中，必須在同一級目錄下
- 將 all.css (或 all.min.css) 引入到網頁中
- 使用圖示字體
直接通過類名來使用圖示字體
fas 和 fab 是設定字體格式，后面的就是詳細的那種圖示
注意：fas 和 fab 是免費的
<!-- 通常用 i 標簽來創建圖示元素 -->
<!-- 可以根據需要，來調整圖示的大小，顏色等樣式 -->
<i style="font-size:80px; color:red;"></i>
<i ></i>
<i ></i> <!-- otto -->
<i style="font-size: 160px; color:green;"></i>
其他參考方式
<head>
<link rel="stylesheet" href="https://www.cnblogs.com/Liwker/p/fa/css/all.css">
<style>
li{
list-style: none;
}
/* 通過設定偽類的方式使用圖示 */
li::before{
content: '\f1b0';
/*font-family: 'Font Awesome 5 Brands'; */ /* fab */
font-family: 'Font Awesome 5 Free';
font-weight: 900; /* fas */
color: blue;
margin-right: 10px;
}
</style>
</head>
<body>
<!-- <i ></i> -->
<ul>
<li>鋤禾日當午</li>
<li>汗滴禾下土</li>
<li>誰知盤中餐</li>
<li>粒粒皆辛苦</li>
</ul>
<!--
<span ></span>
除了參考類的方式
還可以通過物體來使用圖示字體：
格式： &#x圖示的編碼;
-->
<span ></span>
</body>
阿里圖示庫
阿里圖示庫里面有很多圖示，使用方式和上面的 fontawesome 差不多
https://www.iconfont.cn/
打開主頁，搜索或者查看需要的圖示，加至購物車，然后匯入專案，查看此專案，可以下載到本地，也可以使用在線的 css（推薦）
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://www.cnblogs.com//at.alicdn.com/t/font_2280834_a3jjthi2f8.css"/>
<style>
.iconfont {
font-size: 50px;
color: red;
}
p::before {
content: "\e600";
font-family: "iconfont";
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<i ></i> <!-- 參考類 -->
<i ></i> <!-- 物體 -->
<p>LOVE</p> <!-- 設定偽元素 -->
</body>
效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/237512.html
標籤：Html/Css
上一篇：定位 position