整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
篇文章主要講述了CSS樣式更改中的背景Background，這篇文章我們來(lái)談?wù)勛煮w設(shè)置Font&邊框Border的基礎(chǔ)用法。
<div style='font-family: sans-serif normal'></div>
可用字體：
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier<div style='font-style:normal'></div>
文本傾斜:
normal 文本正常顯示
italic 文本斜體顯示
oblique 文本傾斜顯示<div style='font-variant:small-caps'></div>
normal 顯示標(biāo)準(zhǔn)字體。
small-caps 顯示小型大寫(xiě)字母的字體。<div style='font-weight:normal'></div>
normal 標(biāo)準(zhǔn)的字符
bold 粗體字符
bolder 更粗的字符
lighter 更細(xì)的字符
也可以使用數(shù)字表示，范圍為100~900<div style='font-size:60px'></div>
smaller 變小
larger 變大
length 固定值
而且還支持百分比首先說(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)格和顏色，然后定義邊框的其它屬性。
<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)。這篇文章主要介紹了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/
這里是云端源想IT，幫你輕松學(xué)IT”
嗨~ 今天的你過(guò)得還好嗎？
天不言而四時(shí)行，
地不語(yǔ)而百物生。
- 2024.03.11 -
在數(shù)字世界的構(gòu)建中，字體不僅僅是文字的外衣，更是情感和風(fēng)格的傳遞者。作為網(wǎng)頁(yè)設(shè)計(jì)師和前端開(kāi)發(fā)者，掌握HTML中的字體標(biāo)簽，能夠讓我們創(chuàng)造出更加豐富和吸引人的用戶(hù)體驗(yàn)。
今天，就讓我們一起走進(jìn)HTML字體標(biāo)簽的世界，探索它們?nèi)绾巫尵W(wǎng)頁(yè)變得生動(dòng)有趣。
語(yǔ)法結(jié)構(gòu)：<標(biāo)簽 屬性=“值”> 內(nèi)容 </標(biāo)簽>
1、標(biāo)題標(biāo)簽< h1> - < h6>
標(biāo)題標(biāo)簽的默認(rèn)樣式是自動(dòng)加粗的，字體一級(jí)標(biāo)題最大，六級(jí)標(biāo)題最小，每個(gè)標(biāo)題標(biāo)簽獨(dú)占一行。
示例：
<h1>一級(jí)</h1>
<h2>二級(jí)</h2>
<h3>三級(jí)</h3>
<h4>四級(jí)</h4>
<h5>五級(jí)</h5>
<h6>六級(jí)</h6>2、字體標(biāo)簽<font>
在HTML中，最常用的字體標(biāo)簽非<font>莫屬，雖然現(xiàn)代開(kāi)發(fā)中更推薦使用CSS來(lái)控制字體樣式，但了解它的歷史仍然有其必要性。<font>標(biāo)簽允許我們通過(guò)color、size和face屬性來(lái)改變字體的顏色、大小和類(lèi)型。
例如，如果我們想要顯示紅色Arial字體的文字，我們可以這樣寫(xiě)：
<font color="red" size="5" face="Arial">這是紅色Arial字體的文字</font>這行代碼的意思是：
注意：雖然標(biāo)簽在HTML4.01中是有效的，但在HTML5中已經(jīng)被廢棄，建議使用CSS來(lái)進(jìn)行樣式定義。
3、字號(hào)大?。?lt;font size="n">
字號(hào)大小在網(wǎng)頁(yè)設(shè)計(jì)中同樣重要，它直接影響著閱讀體驗(yàn)。HTML允許我們通過(guò)<font size="n">來(lái)調(diào)整字體的大小，其中“n”可以是1到7的數(shù)字。
例如：
<!DOCTYPE html>
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<p><font size="5">This is a paragraph with font size 5.</font></p>
<p><font size="10">This is a paragraph with font size 10.</font></p>
<p><font size="15">This is a paragraph with font size 15.</font></p>
</body>
</html>運(yùn)行結(jié)果：
不過(guò)，現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)更傾向于使用CSS來(lái)控制字號(hào)，以便更精細(xì)地調(diào)整字體大小。
4、粗體標(biāo)簽
<b>：這個(gè)標(biāo)簽用于將文本加粗顯示，相當(dāng)于英文中的bold。它不會(huì)改變字體，只是使文本看起來(lái)更粗體。
<p><b>這是加粗的文本</b></p><strong>：與<b>標(biāo)簽類(lèi)似，<strong>標(biāo)簽也用于表示加粗的文本。
<p><strong>這是重要的文本</strong></p>但在HTML5中，<strong>標(biāo)簽被賦予了語(yǔ)義，用來(lái)表示重要的文本內(nèi)容。
5、斜體字標(biāo)簽
<i>：這個(gè)標(biāo)簽用于將文本設(shè)置為斜體，相當(dāng)于英文中的italic。
<p><i>這是斜體的文本</i></p><em>：與<i>標(biāo)簽類(lèi)似，<em>標(biāo)簽也用于表示斜體文本。
<p><em>這是強(qiáng)調(diào)的文本</em></p>但在HTML5中，<em>標(biāo)簽被賦予了語(yǔ)義，用來(lái)表示強(qiáng)調(diào)的文本內(nèi)容。
6、刪除字標(biāo)簽
<del>：這個(gè)標(biāo)簽用于表示刪除的文本，常用于表示不再準(zhǔn)確或已過(guò)時(shí)的內(nèi)容。比如原價(jià)與現(xiàn)價(jià)。
<p>原價(jià)：<del>100元</del></p>
<p>現(xiàn)價(jià)：80元</p>運(yùn)行之后是這樣子的：
在上述示例中，原價(jià)為100元，但已被刪除，因此使用標(biāo)簽將其包圍起來(lái)。這樣，瀏覽器會(huì)顯示刪除線來(lái)表示該文本已被刪除。
7、文本格式化標(biāo)簽 < div> < span>
< div> 標(biāo)簽用來(lái)布局，但是一行只能放一個(gè)< div> //大盒子，塊元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>這是一個(gè)div</div>
<div>這是一個(gè)div</div>
<div>
<p>這是一個(gè)div</p>
</div>
<p>
<div>云端源想</div>
</p>
</body>
</html>如上圖控制臺(tái)所示（打開(kāi)控制臺(tái)的方式：F12）：<div>標(biāo)簽里面可以包含<p>標(biāo)簽，<p>標(biāo)簽，里面不可以放<div>標(biāo)簽。
< span> 標(biāo)簽用來(lái)布局，一行上可以多個(gè) < span>//小盒子，行元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>1234</span>
<span>5678</span>
</body>
</html>8、其它字體標(biāo)簽
<mark>：這個(gè)標(biāo)簽用于突出顯示文本，通常用于表示高亮的部分。
<small>：這個(gè)標(biāo)簽用于表示小號(hào)文本，通常用于表示版權(quán)聲明或法律條款等次要信息。
<ins>：這個(gè)標(biāo)簽用于表示插入的文本，常用于表示新增的內(nèi)容。
<sub> 和 <sup>：這兩個(gè)標(biāo)簽分別用于表示下標(biāo)和上標(biāo)文本，常用于數(shù)學(xué)公式或化學(xué)方程式中。
盡管上述標(biāo)簽可以直接在HTML中使用，但現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越傾向于使用CSS來(lái)控制文本的樣式，因?yàn)镃SS提供了更多靈活性和控制能力。
使用CSS類(lèi)和樣式規(guī)則可以更有效地管理網(wǎng)站的整體樣式，并且可以更容易地適應(yīng)不同設(shè)備和屏幕尺寸。
因此，如果您正在學(xué)習(xí)或更新您的網(wǎng)頁(yè)設(shè)計(jì)知識(shí)，建議學(xué)習(xí)和使用CSS來(lái)控制字體和其他文本樣式，關(guān)于HTML的這些標(biāo)簽了解一下就可以了。
總之，字體是網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的元素，它們就像是網(wǎng)頁(yè)的語(yǔ)言，傳遞著信息和情感。通過(guò)HTML字體標(biāo)簽的學(xué)習(xí)和應(yīng)用，我們可以讓我們的網(wǎng)頁(yè)“字”得其樂(lè)，讓每一位訪問(wèn)者都能享受到更加美妙的網(wǎng)絡(luò)體驗(yàn)。不斷探索和實(shí)踐，讓我們的網(wǎng)頁(yè)在字體的世界里綻放光彩吧！
今天就先講到這里了，
更多前端開(kāi)發(fā)基礎(chǔ)知識(shí)點(diǎn)擊文末閱讀原文查看哦！
記得關(guān)注【云端源想IT】一起學(xué)編程！
我們下期再見(jiàn)！
END
文案編輯|云端學(xué)長(zhǎng)
文案配圖|云端學(xué)長(zhǎng)
內(nèi)容由：云端源想分享
簽屬性命名規(guī)范
下劃線連接符命名法“hello_world”
中杠 連接符命名法“hello-world”
駱駝式命名法“helloWorld”
內(nèi)容：content/container 導(dǎo)航：nav 側(cè)欄：sidebar
欄目：column 標(biāo)志：logo 頁(yè)面主體：main
廣告：banner 熱點(diǎn)：hot 新聞：news
下載：download 子導(dǎo)航：subnav 菜單：menu
搜索：search 頁(yè)腳：footer 滾動(dòng)：scroll
版權(quán)：copyright 友情鏈接：friendlink 子菜單：submenu
內(nèi)容：content 標(biāo)簽頁(yè)：tab 文章列表：list
注冊(cè)：regsiter 提示信息：msg 小技巧：tips
加入：joinus 欄目標(biāo)題：title 指南：guild
服務(wù)：service 狀態(tài)：status 投票：vote
尾：footer 合作伙伴：partner 登錄條：loginbar
頁(yè)面外圍控制整體布局寬度：wrapper 左右中：left right center
(二)注釋的寫(xiě)法:
/* Footer */
內(nèi)容區(qū)
/* End Footer */
(三)id(具有唯一性)的命名:
(1)頁(yè)面結(jié)構(gòu)
容器: container 頁(yè)頭：header 內(nèi)容：content/container
頁(yè)面主體：main 頁(yè)尾：footer 導(dǎo)航：nav
側(cè)欄：sidebar 欄目：column 左右中：left right center
頁(yè)面外圍控制整體布局寬度：wrapper
(2)導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainbav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary
(3)功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊(cè)：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動(dòng)：scroll
標(biāo)簽頁(yè)：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標(biāo): icon
注釋?zhuān)簄ote
指南：guild
服務(wù)：service
熱點(diǎn)：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
(四)class的命名:
(1)顏色:使用顏色的名稱(chēng)或者16進(jìn)制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字體大小,直接使用"font+字體大小"作為名稱(chēng),如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱(chēng),如
.left { float:left; }
.bottom { float:bottom; }
(4)標(biāo)題欄樣式,使用"類(lèi)別+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事項(xiàng):
1.一律小寫(xiě);
2.盡量用英文;
3.不加中杠和下劃線; （我倒是經(jīng)常加）
4.盡量不縮寫(xiě)，除非一看就明白的單詞. （偷懶經(jīng)?？s寫(xiě)）
主要的 master.css 模塊 module.css 基本共用 base.css
主題 themes.css 專(zhuān)欄 columns.css 打印 print.css
文字 font.css 表單 forms.css 補(bǔ)丁 mend.css
布局，版面 layout.css
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
