CSS樣式更改-字體設(shè)置Font&amp;邊框Border

篇文章主要講述了CSS樣式更改中的背景Background，這篇文章我們來(lái)談?wù)勛煮w設(shè)置Font&邊框Border的基礎(chǔ)用法。

1.字體設(shè)置Font

1).字體系列

<div style='font-family: sans-serif normal'></div>
可用字體：
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier

2).字體風(fēng)格

<div style='font-style:normal'></div>
文本傾斜:
normal   文本正常顯示
italic   文本斜體顯示
oblique  文本傾斜顯示

3).字體變形

<div style='font-variant:small-caps'></div>
normal          顯示標(biāo)準(zhǔn)字體。
small-caps      顯示小型大寫(xiě)字母的字體。

4).字體加粗

<div style='font-weight:normal'></div>
normal    標(biāo)準(zhǔn)的字符
bold      粗體字符
bolder    更粗的字符
lighter   更細(xì)的字符
也可以使用數(shù)字表示，范圍為100~900

5).字體大小

<div style='font-size:60px'></div>
smaller 變小
larger  變大
length  固定值
而且還支持百分比

2.邊框Border

首先說(shuō)一下邊框風(fēng)格，它的風(fēng)格比較多，常用的一般是實(shí)線為主：

<div style='border-style:none'></div>
hidden     隱藏邊框
dotted     點(diǎn)狀邊框
dashed     虛線邊框
solid      實(shí)線邊框
double     雙線邊框
groove     3D凹槽邊框
ridge      3D壟狀邊框
inset      3D inset邊框
outset     3D outset邊框
邊框也有四面，所以也會(huì)有上下左右
所以有時(shí)候?yàn)榱烁_定位并修改樣式可以使用：
border-top-style     上邊框樣式
border-right-style   右邊框樣式
border-bottom-style  下邊框樣式
border-left-style    左邊框樣式

先定義邊框的寬度風(fēng)格和顏色，然后定義邊框的其它屬性。

1).邊框形狀

<div style='border-radius:25px;'></div>

2).邊框陰影

<div style='box-shadow:1px 2px 2px 2px red'></div>
參數(shù)含義：
邊框各個(gè)方向的大小和顏色

3).邊框圖片

<div style='border-image:url(1.png) 30 30 10 round'></div>
參數(shù)含義：
邊框圖片的路徑
圖片邊框向內(nèi)偏移
圖片邊框的寬度
邊框圖像區(qū)域超出邊框的量
圖像邊框是否應(yīng)平鋪(repeated)、鋪滿(mǎn)(rounded)或拉伸(stretched)。

總結(jié)

這篇文章主要介紹了CSS樣式更改篇中的字體設(shè)置Font&邊框Border設(shè)置，希望讓大家對(duì)CSS選擇器有個(gè)簡(jiǎn)單的認(rèn)識(shí)和了解。
****看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人****

IT共享之家

想要學(xué)習(xí)更多，請(qǐng)前往Python爬蟲(chóng)與數(shù)據(jù)挖掘?qū)Ｓ镁W(wǎng)站：http://pdcfighting.com/

ont 屬性可以用來(lái)作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡(jiǎn)寫(xiě)，或?qū)⒃氐淖煮w設(shè)置為系統(tǒng)字體。

字體修改

font-family 屬性：設(shè)置HTML頁(yè)面中的字體
font-size 屬性：設(shè)置字體大小
font-weight 屬性：設(shè)置字體的粗細(xì)程度
font-style 屬性：設(shè)置指定字體樣式

font-family寫(xiě)法示例：

 <style>
         p{
             font-family: "幼圓";
         }
     </style>
 </head>
 <body>
     <p>19級(jí)啟嘉班</p>
 </body>

效果：

字是網(wǎng)頁(yè)展示的重要內(nèi)容之一，所以對(duì)文字的修飾也是CSS重點(diǎn)關(guān)注的一部分， CSS提供了以下常用的樣式屬性來(lái)修飾文字。

color 屬性

color 用來(lái)設(shè)置文字顏色。

設(shè)置方式支持以下幾種格式

英語(yǔ)顏色單詞形式，如: red（紅）、black（黑）、orange（橙色）等。

<style>
  .box {
    color: red;
  }
</style>


<div class="box">文字顏色</div>

十六進(jìn)制表示法，設(shè)計(jì)軟件中通用的表示方法。
例如：ff00000; ff 即為十進(jìn)制255；每種顏色分為 0~255的數(shù)字。
如果表示顏色值重復(fù) 例如：#ffaabb 可以簡(jiǎn)寫(xiě)為#fab.。
黑色為 #000 ，白色為 #fff。
以#ff0000為例，兩兩分組，分別表示三原色：紅、綠、藍(lán)。

<style>
  .box {
    color: #ff0000;
  }
  .box1 {
    color: #f00;
  }
</style>


<div class="box">文字顏色</div>
<div class="box1">簡(jiǎn)寫(xiě)形式</div>

RGB 表示法
例如: color: rgb(255,0,0); rgb 內(nèi)部的三個(gè)值，依次代表三原色紅、綠、藍(lán)。
其中 rgb(0,0,0) 代表黑色， rgb(255,255,255) 表示白色。

<style>
  .box {
    color: rgb(255, 0, 0);
  }
</style>
<div class="box">文字顏色</div>

RGBA 表示法，在RGB的表示方法的基礎(chǔ)上增加了透明度（最后一個(gè)參數(shù)代表透明度）。0-表示透明 1-表示實(shí)心。透明度是介于[0,1]之間的值。
RGBA 從 IE9開(kāi)始兼容。

<style>
.box {
  color: rgba(255, 0, 0, 0.5);
}
</style>




<div class="box">文字顏色</div>

font-size 屬性

font-size 屬性用來(lái)設(shè)置字體大小，單位通常為px 也可以為em,rem

單位的解釋

px：像素
em: 相對(duì)元素字體的倍數(shù)
rem：相對(duì)html字體的倍數(shù)，例如：html標(biāo)簽設(shè)置為font-size為100px ， div 設(shè)置font-size為1.5 rem 實(shí)際表現(xiàn)為：150px。

<style>
  .box {
    font-size: 30px;
  }
</style>


<div class="box">文字大小</div>

font-weight 屬性

設(shè)置字體的粗細(xì)程度，常用的屬性有 normal 和 bold 兩個(gè)值。

可以用以下值表示，也可以用數(shù)字表示。

值	意義
normal	正常粗細(xì)，和400值相等
bold	加粗，與700數(shù)值相等
lighter	比正常粗細(xì)還細(xì)，不常用
bolder	比加粗還粗，不常用
100 200 300 400 500 600 700 800 900	使用數(shù)字定義字體粗細(xì)
inherit	從父元素繼承字體粗細(xì)

<style>
.box_normal {
  font-weight: normal;
}
.box_bold {
  font-weight: bold;
}


.box_lighter {
  font-weight: lighter;
}


.box_bolder {
  font-weight: bolder;
}


.box_number {
  font-weight: 600;
}
</style>


<body>
  <div class="box_normal">font-weight演示：正常粗細(xì)</div>
  <div class="box_bold">font-weight演示，加粗</div>
  <div class="box_lighter">font-weight演示，更細(xì)</div>
  <div class="box_bolder">font-weight演示， 更粗</div>
  <div class="box_number">font-weight演示， 數(shù)字</div>
</body>

font-style 屬性

設(shè)置字體的傾斜程度

值	意義
normal	正常字體，不帶傾斜效果
italic	傾斜字體（常用，使用傾斜字體）
oblique	傾斜字體（用常規(guī)字體模擬傾斜，不常用）

<style>
  .box1 {
    font-style: normal;
  }
  .box2 {
    font-style: italic;
  }
  .box3 {
    font-style: oblique;
  }
</style>
<body>
  <div class="box1">正常字體</div>
  <div class="box2">傾斜字體</div>
  <div class="box3">傾斜字體2</div>
</body>

text-decoration 屬性

設(shè)置文本的修飾線的樣式

示例	意義
none	無(wú)線(a標(biāo)簽去除下劃線會(huì)用到)
underline;	下劃線
line-through;	刪除線
…等等	還有很多，可自行百度

<style>
  .decoration-none {
    text-decoration: none;
  }
  .decoration-underline {
    text-decoration: underline;
  }
  .decoration-line-through {
    text-decoration: line-through;
  }
</style>
<body>
  <div class="decoration-none">無(wú)線修飾</div>
  <div class="decoration-underline">下劃線</div>
  <div class="decoration-line-through">刪除線</div>
</body>

font-family 屬性

指定使用的字體族，操作系統(tǒng)一般自帶很多字體；

例如：window操作系統(tǒng)中的 ‘微軟雅黑’ ，黑體等。

字體文件的格式有很多，比如 eot,woff2,woff,ttf,svg等。

font-family 可以一次指定多個(gè)字體，后面的字體屬于后備字體，只有前面的字體沒(méi)有找到，才會(huì)使用后面的字體。

<style>
  div {
      font-family: serif, "Time New Roman", "微軟雅黑"
  }
</style>
<body>
  <div>字體</div>
</body>

自定義字體

某些時(shí)候，我們的字體比較個(gè)性化，或者我們的字體是一個(gè)圖標(biāo)字體（一種用符號(hào)表示圖片的方式）。那么此時(shí)，需要我們使用 @font-face 自定義字體

自定義的字體一般是隨著網(wǎng)頁(yè)發(fā)布在服務(wù)器端，操作系統(tǒng)中并沒(méi)有。

推薦一個(gè)比較好用的字體庫(kù)網(wǎng)站：https://www.iconfont.cn/（具體使用方式請(qǐng)自行百度）。

在線咨詢(xún)

上一篇：HTML5基礎(chǔ)學(xué)習(xí) 13-拖拽
下一篇：HTML、CSS 和 JavaScript等前端開(kāi)發(fā)技術(shù)，必備入門(mén)級(jí)學(xué)習(xí)書(shū)單

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS樣式更改-字體設(shè)置Font&amp;amp;邊框Border