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