整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
技術(shù)等級】初級
【承接文章】《強(qiáng)大的CSS選擇器，CSS的核心技術(shù)，前端小白必備功底》
本文重點(diǎn)講解CSS技術(shù)中有關(guān)字體樣式的屬性以及這些屬性的取值。本文屬于前端開發(fā)的初級教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。
從本文開始，小海老師將帶領(lǐng)大家認(rèn)識CSS技術(shù)中的所有屬性。我把CSS技術(shù)中的各個(gè)屬性進(jìn)行了分類，首先我們從與字體樣式有關(guān)的屬性開始。
CSS中與字體有關(guān)的屬性包括以下六個(gè)：
font-family
font-size
font-weight
font-style
font-variant
color
一、字體樣式屬性：
CSS利用font-family屬性來設(shè)置字體或字體列表。
1、設(shè)置字體：
.sty01{font-family:黑體;}
上述代碼定義了用戶自定義類sty01，該樣式設(shè)置字體為“黑體”。利用class屬性取值為sty01樣式的HTML標(biāo)記對中的文字將以“黑體”的字體顯示。
2、設(shè)置字體列表：
.sty02{font-family:漢儀綜藝體簡,微軟雅黑,黑體;}
上述代碼定義了用戶自定義類sty02，該樣式設(shè)置了一個(gè)字體列表。利用class屬性取值為sty02樣式的HTML標(biāo)記對中的文字，首先以“漢儀綜藝體簡”的字體顯示，目標(biāo)瀏覽器所在的設(shè)備若沒有安裝該字體，則自動(dòng)以“微軟雅黑”的字體顯示；目標(biāo)瀏覽器所在的設(shè)備若也沒有安裝“微軟雅黑”字體，則自動(dòng)以“黑體”的字體顯示。
注意：為了防止CSS文件的中文字體名稱不符合字符集的要求，所以習(xí)慣上都是用中文字體的外文名稱來書寫font-family屬性的取值，下面我就為大家羅列幾個(gè)常用的字體名稱。
設(shè)置字體為 微軟雅黑：.style1{font-family:Microsoft YaHei;}
設(shè)置字體為 宋體：.style2{font-family:SimSun;}
設(shè)置字體為 幼圓：.style3{font-family:YouYuan;}
設(shè)置字體為 黑體：.style4{font-family:SimHei;}
設(shè)置字體為 楷體：.style5{font-family:KaiTi;}
更多中文字體的西文名稱，小海老師會(huì)在后續(xù)的文章中詳細(xì)羅列。
二、字號大小屬性：
CSS利用font-size屬性來設(shè)置文本的字號效果
1、絕對大小：
xx-small
x-small
small
medium
large
x-large
xx-large
上述取值中：medium為默認(rèn)值，medium以上的取值越來越小，medium以下的取值越來越大。
2、相對大小：
smaller，比上一級元素的字體大小小一號。
larger，比上一級元素的字體大小大一號。
代碼實(shí)例：
<div style=“font-size:14px;”>
<span style=“font-size:larger;”>段落文字內(nèi)容</span>
</div>
上述代碼中“段落文字內(nèi)容”的字體大小顯示為比14px字號大一號的外觀。
3、帶有單位的長度值：
代碼實(shí)例：.s1{font-size:16px;}
上述代碼定義了用戶自定義類s1，該樣式設(shè)置字號為16px大小。
4、百分比：
設(shè)置字體字號為上一級元素的百分比大小。
代碼實(shí)例：.s2{font-size:10%;}
上述代碼定義了用戶自定義類s2，該樣式設(shè)置字號是上一級元素的字體大小的20%。
三、字體粗細(xì)屬性
CSS利用font-weight屬性來設(shè)置文本的粗細(xì)效果
normal，普通粗細(xì)，粗細(xì)度約為400。
bold，粗體，粗細(xì)度約為700。
bolder，更粗體，粗細(xì)度約為900。
lighter，更細(xì)體，粗細(xì)度約為500。
100、200、300、400、500、600、700、800、900：9個(gè)粗細(xì)等級。
但是現(xiàn)在的瀏覽器都無法將字體的粗細(xì)渲染的如此細(xì)膩，也就是說這9個(gè)等級的粗細(xì)度并沒有明顯的差異。
四、字體斜體屬性
CSS利用font-style屬性來設(shè)置文本的斜體效果
normal，普通，字體顯示為不斜體。
italic，斜體，設(shè)置字體為斜體。
oblique，傾斜體，當(dāng)特殊字體沒有斜體效果時(shí)，可以使用該取值將字體傾斜。
五、設(shè)置字體是否為小型大寫字母
CSS技術(shù)利用font-variant屬性來設(shè)置是否為小型大寫字母
normal，普通，字體顯示為正常。
small-caps，小型大寫字母。
六、設(shè)置字體的顏色
CSS技術(shù)利用color屬性來設(shè)置文本顏色
十六進(jìn)制顏色代碼。
實(shí)例：h1{color:#ff0000;}
含義：重定義HTML中的h1標(biāo)記對為紅色。
十進(jìn)制顏色代碼。
實(shí)例：h2{color:rgb(0,255,0);}
含義：重定義HTML中的h2標(biāo)記對為綠色。
顏色英文單詞。
實(shí)例：h3{color:blue;}
含義：重定義HTML中的h3標(biāo)記對為藍(lán)色。
下一次小海老師會(huì)為大家講解CSS中有關(guān)文本段落的屬性，結(jié)合前面HTML的內(nèi)容，可以對頁面中的段落進(jìn)行更為細(xì)致的調(diào)整。千萬不要錯(cuò)過哦。
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會(huì)免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
天是劉小愛自學(xué)Java的第78天。
感謝你的觀看，謝謝你。
話不多說，繼續(xù)前端之CSS的學(xué)習(xí)：
其中在頭條搜索中也有很多關(guān)于CSS的干貨教程，專業(yè)又詳細(xì)，點(diǎn)擊下方卡片搜索“CSS”了解更多
CSS，全稱是Cascading Style Sheet，翻譯過來就是層疊樣式表。
它有一個(gè)非常厲害的功能，就是美化網(wǎng)頁。
本質(zhì)上HTML也可以美化網(wǎng)頁，但是CSS更加地強(qiáng)大，可以實(shí)現(xiàn)很多HTML不能實(shí)現(xiàn)的功能。
CSS有一個(gè)核心標(biāo)簽叫style，也就是樣式的意思，CSS本身也就是可以設(shè)定各種各樣的樣式。
用一個(gè)例子來說明：
<style>標(biāo)簽，放在<head></head>標(biāo)簽里面。
①h1的美化
如果純用HTML，是沒法對標(biāo)題進(jìn)行顏色設(shè)置的。
但使用CSS，就可以對標(biāo)題進(jìn)行各種樣式的設(shè)置，上圖只舉了顏色這個(gè)例子。
②字體的美化
字體是可以在HTML中設(shè)置屬性的，比如顏色（color），比如大小（size）…
而CSS等于是將這些屬性抽取出去了，專門放在<style>標(biāo)簽中了。
這樣有什么好處？
降低耦合度，分工更加地明確，CSS專門用來美化，HTML專門用于結(jié)構(gòu)搭建，如果想設(shè)定格式，指定CSS就好了。
這個(gè)就有點(diǎn)類似于Java中方法的封裝，或者說經(jīng)典三層架構(gòu)。
Service層專門負(fù)責(zé)具體的業(yè)務(wù)邏輯，Dao層專門負(fù)責(zé)數(shù)據(jù)庫的查詢，Service想訪問數(shù)據(jù)庫，調(diào)用Dao層就好了。
CSS一共有三種引入方式。用例子說明：
①行內(nèi)樣式
直接在標(biāo)簽中添加style屬性，也能起到引入CSS的效果。
但是為了降低耦合度，一般在HTML主干中只搭建結(jié)構(gòu)，設(shè)定樣式專門交給CSS來做。
②內(nèi)部引入
也就是一開始的那個(gè)例子，sytle標(biāo)簽是放在head標(biāo)簽中的。
除了這兩種，還有一種外部引入方式：
③外部引入（一）
可以自定義一個(gè)CSS文件，在里面寫自定義的樣式。
然后在HTML文件中使用style標(biāo)簽引入該CSS文件即可，其中引入格式如下：
@import+CSS文件路徑。
和Java中的導(dǎo)包很類似，文件路徑中的“..”表示回到上一層。
④外部引入（二）
除了使用style外，還可以使用link標(biāo)簽外部引入：
關(guān)于這三種引入方式的優(yōu)先級：
行內(nèi)引入是最優(yōu)先的。
內(nèi)部引入和外部引入，就看哪個(gè)離HTML文件主體近（就近原則）
選擇器的作用在于：可以幫我們從頁面上獲得對應(yīng)的標(biāo)簽。
其中有最基本的三種選擇器：
①id選擇器
格式為：#+id名{}
關(guān)于id我做了個(gè)測試，發(fā)現(xiàn)不能用純數(shù)字，老實(shí)說我還挺奇怪的，一般id不都是純數(shù)字么。
就當(dāng)是CSS的命名規(guī)則好了，不能是純數(shù)字，否則沒有作用。
其中id選擇器是唯一的，也就是一個(gè)id在一個(gè)HTML文件中只能有一個(gè)。
②類選擇器
格式為：.+類名{}
類是可以有多個(gè)的，比如同樣是font標(biāo)簽，相同的id只能有一個(gè)，但是相同的類可以有多個(gè)。
③標(biāo)簽選擇器
格式為：標(biāo)簽名{}
HTML中是有很多標(biāo)簽的，可以直接使用過標(biāo)簽作為選擇器，上圖例子中是font標(biāo)簽。
關(guān)于這三種選擇器的優(yōu)先級：
id選擇器最大，類選擇器次之，標(biāo)簽選擇器最小。
這其實(shí)也很好理解：
id選擇器最精準(zhǔn)，優(yōu)先級越高（例子中①哪怕也是myClass類，標(biāo)簽也是font）,但樣式還是按照id選擇器設(shè)定的來。
除了三種基本選擇器外，還有好幾種選擇器：
①層級選擇器
格式為：div+空格+標(biāo)簽名{}
標(biāo)簽與標(biāo)簽之間是用空格隔開的。
在HTML中有一個(gè)div標(biāo)簽，這個(gè)標(biāo)簽和CSS結(jié)合起來很有用。
比如上述例子中，同樣是h1標(biāo)簽，但是只渲染div標(biāo)簽中的h1標(biāo)簽。
②并集選擇器
格式為：div+逗號+標(biāo)簽名{}
標(biāo)簽與標(biāo)簽之間是用逗號隔開的，也就是相當(dāng)于將標(biāo)簽選擇器并起來了，同時(shí)修改多個(gè)標(biāo)簽的樣式。
③屬性選擇器
格式為：標(biāo)簽名[屬性名="對應(yīng)的值"]{}
font標(biāo)簽中有很多屬性，CSS可以指定其中對應(yīng)的屬性。
比如size=“3”的才修改樣式，其中哪怕font默認(rèn)字體size為3，但是沒有寫出size屬性，也不會(huì)修改其樣式。
④偽類選擇器
格式為：標(biāo)簽名+冒號+對應(yīng)的狀態(tài)
所以為什么叫偽類？
并不是修改的某個(gè)具體的類修改，而是對標(biāo)簽對應(yīng)的狀態(tài)進(jìn)行修改。
其中關(guān)于CSS選擇器真的太多太多了，可以查詢W3C官方文檔，如下圖：
這還是我截圖的一小部分，其它的截不下了，一共有幾十種。
想要完全把它學(xué)習(xí)下來真心需要花一定的時(shí)間，但我畢竟還是以學(xué)Java后臺為主，對前端只做一個(gè)基本的了解。
以后有機(jī)會(huì)再做做總結(jié)什么的，估計(jì)也沒什么機(jī)會(huì)了……
謝謝你的觀看。
如果可以的話，麻煩幫忙點(diǎn)個(gè)贊，謝謝你。
面試官：你知道移動(dòng)端適配嗎？
---
**開篇：移動(dòng)端適配的重要性**
在移動(dòng)互聯(lián)網(wǎng)飛速發(fā)展的今天，移動(dòng)端適配已成為每一位前端開發(fā)者必備的核心技能之一。面對市場上琳瑯滿目的手機(jī)型號和屏幕尺寸，如何讓同一套代碼在不同設(shè)備上呈現(xiàn)出近乎完美的視覺效果和交互體驗(yàn)，是每一位面試官都會(huì)關(guān)心的問題。本文將帶你深入探討移動(dòng)端適配的核心技術(shù)和策略，助力你從容應(yīng)對面試挑戰(zhàn)。
---
**【第一部分】理解移動(dòng)端適配的挑戰(zhàn)**
**標(biāo)題：設(shè)備碎片化與分辨率多樣化**
隨著智能手機(jī)硬件的快速發(fā)展，各品牌、各型號設(shè)備的屏幕尺寸、分辨率和像素密度差異巨大。這意味著，如果不對頁面進(jìn)行適配，可能會(huì)出現(xiàn)內(nèi)容錯(cuò)位、字體大小不一、圖片模糊等問題。
例如，iPhone 6與iPhone 13 Pro Max的物理尺寸和分辨率相差甚遠(yuǎn)，前者分辨率為750 x 1334，后者則是1284 x 2778。因此，我們必須有一套有效的適配策略來應(yīng)對這種情況。
---
**【第二部分】viewport元標(biāo)簽與設(shè)備像素比**
**標(biāo)題：viewport元標(biāo)簽與 DPR 的秘密**
適配的第一步是設(shè)置`viewport`元標(biāo)簽，以控制頁面在移動(dòng)設(shè)備上的縮放程度和布局視口的大小：
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
這里`device-width`意味著布局視口的寬度等于設(shè)備的獨(dú)立像素寬度，`initial-scale=1.0`表示初始縮放比例為1，即一個(gè)CSS像素對應(yīng)一個(gè)設(shè)備獨(dú)立像素。
同時(shí)，了解設(shè)備像素比（DPR）的概念也很關(guān)鍵，它是設(shè)備物理像素與CSS像素的比例，用于解決高清屏下的圖像模糊問題：
```javascript
// 獲取設(shè)備像素比
let dpr = window.devicePixelRatio || 1;
```
---
**【第三部分】CSS單位與適配策略**
**標(biāo)題：Flexbox、Grid布局與CSS單位REM、VW/VH**
- **Flexbox與Grid布局**：利用現(xiàn)代CSS布局模式，如Flexbox和Grid，可以更好地處理元素的彈性布局，減少因設(shè)備尺寸變化導(dǎo)致的布局混亂。
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex-basis: calc(33.33% - 20px);
}
```
- **CSS單位REM與VW/VH**：REM基于根元素字體大小，允許我們基于頁面全局字體大小進(jìn)行適配；VW/VH基于視口寬度和高度，可以很好地應(yīng)對屏幕尺寸變化。
```css
html {
font-size: 16px; /* 基準(zhǔn)字體大小 */
}
.box {
width: 80vw; /* 盒子寬度為視口寬度的80% */
height: 50vh; /* 盒子高度為視口高度的50% */
}
@media screen and (min-width: 768px) {
html {
font-size: 20px; /* 在大屏設(shè)備上增大基準(zhǔn)字體大小 */
}
}
```
---
**【第四部分】響應(yīng)式設(shè)計(jì)與媒體查詢**
**標(biāo)題：使用媒體查詢實(shí)現(xiàn)多設(shè)備適配**
媒體查詢是CSS3的一個(gè)強(qiáng)大特性，可以幫助我們根據(jù)不同設(shè)備的特性（如視口寬度、設(shè)備像素比等）應(yīng)用不同的CSS樣式：
```css
/* 為小于600px寬度的設(shè)備設(shè)置樣式 */
@media screen and (max-width: 600px) {
.header {
font-size: 18px;
}
}
/* 為大于等于600px寬度的設(shè)備設(shè)置樣式 */
@media screen and (min-width: 600px) {
.header {
font-size: 24px;
}
}
```
---
**【第五部分】CSS框架與預(yù)處理器的適配功能**
**標(biāo)題：Bootstrap、TailwindCSS與PostCSS的適配解決方案**
許多CSS框架（如Bootstrap）和預(yù)處理器（如PostCSS）都提供了便捷的適配工具和策略。例如，Bootstrap的柵格系統(tǒng)和響應(yīng)式工具類，TailwindCSS的內(nèi)置響應(yīng)式前綴，以及PostCSS的插件如postcss-pixel-to-viewport，都可以極大地簡化移動(dòng)端適配工作。
---
**結(jié)語：**
移動(dòng)端適配是一項(xiàng)涵蓋多個(gè)維度的綜合技術(shù)，包括但不限于viewport設(shè)置、CSS單位選取、布局模式、媒體查詢以及框架和預(yù)處理器的應(yīng)用。只有充分理解并掌握這些技術(shù)，才能在面臨面試官“你知道移動(dòng)端適配嗎？”這個(gè)問題時(shí)，自信滿滿地給出滿意的答案，并在實(shí)際開發(fā)中游刃有余地應(yīng)對各種設(shè)備適配挑戰(zhàn)。持續(xù)關(guān)注前沿技術(shù)，不斷積累實(shí)踐經(jīng)驗(yàn)，你將在移動(dòng)端適配領(lǐng)域攀登更高的山峰。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
