從零開始學 Web 之 CSS（二）文本、標籤、特性

時間 2019-11-17

標籤開始 web css 文本標籤特性欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公衆號，歡迎你們訂閱關注。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！css

1、文本元素

一、屬性

font-size: 50px;         /*文字大小*/
font-weight: 700;       /*值從100-900，文字粗細,700約等於Bold，不推薦使用font-weight:bold; */
font-family:微軟雅黑;    /*文本的字體*/
font-style: normal | italic;  /*normal:默認值  italic:斜體*/
line-height: 50px            /*行高*/

二、文本屬性連寫

/* 格式：font: font-style font-weight  font-size/line-height  font-family; */
font: italic 700 50px/40px  微軟雅黑;

注意：font:後邊寫屬性的值。必定按照書寫順序。
PS：文本屬性連寫中文字大小和字體爲必寫項。html

三、文字的表達方式

1. 直接寫中文名稱前端

font-family: 微軟雅黑;

2. 寫字體的英文名稱瀏覽器

font-family: microsoft yahei;

3. unicode 編碼（解析更快）學習

如何找到某一字體相對應的unicode編碼呢？字體

第一步：通常打開瀏覽器，按F12
第二步：找到console
第三步：輸入escape(「宋體」); 注意英文的括號和雙引號。編碼

2、樣式表書寫位置

內嵌式寫法

<head>
<style type="text/css">
    /*樣式表寫法*/
</style>
</head>

外鏈式寫法

<link rel="stylesheet" href="1.css"> <!--寫在head裏-->

行內樣式表

<div style="font-size: 30px; color:red;">行內樣式表</div>

三種寫法特色:
內嵌式寫法：樣式只做用於當前文件，沒有真正實現結構表現分離。
外鏈式寫法：做用範圍是當前站點，誰調用誰生效，範圍廣，真正實現結構表現分離。
行內樣式表：做用範圍僅限於當前標籤，範圍小，結構表現混在一塊兒。（不推薦使用）spa

3、標籤分類

一、塊元素

/*典型表明:*/ div, h1-h6, p, ul, li

特色:
1.獨佔一行；
2.能夠設置寬高；
3.嵌套（包含）下，子塊元素寬度（沒有定義狀況下）和父塊元素寬度默認一致。3d

二、行內元素

/*典型表明*/ span, a, strong, em, del, ins

特色：
1.在一行上顯示；
2.不能直接設置寬高（須要轉行內塊）；
3.元素的寬和高就是內容撐開的寬高。code

三、行內塊元素(內聯元素)

/*典型表明*/  input, img

特色：
1.在一行上顯示；
2.能夠設置寬高。

四、三者相互轉換

1. 塊元素轉行內元素

display:inline;

2. 行內元素轉塊元素

display:block;

3. 塊和行內元素轉行內塊元素（用的最多）

display:inline-block;

4、CSS三大特性

一、層疊性

當多個樣式做用於同一個（同一類）標籤時，樣式發生了衝突，老是執行後邊的代碼(後邊代碼層疊前邊的代碼)。和標籤調用選擇器的順序沒有關係。

二、繼承性

繼承性發生的前提是包含（嵌套關係）
★ 文字顏色能夠繼承
★ 文字大小能夠繼承
★ 字體能夠繼續
★ 字體粗細能夠繼承
★ 文字風格能夠繼承
★ 行高能夠繼承
總結：文字的全部屬性均可以繼承。

特殊狀況：

h系列不能繼承文字大小。（繼承了可是不顯示）

實際上：h1顯示的是你設置的 font-size * 2；
h2顯示的是：你設置的 font-size * 1.5
.......

a連接標籤不能繼承文字顏色（繼承了可是不顯示，連接標籤默認是藍色）

三、優先級

默認樣式 < 標籤選擇器 < 類選擇器 < id選擇器 < 行內樣式< !important  
 權重：      0         1            10        100      1000     1000以上

PS：這裏的數字不是準確的，實際上100個標籤選擇器疊加的權重也比不過一個類選擇器的權重。

特色：

1.繼承的權重爲0（當沒有本身的樣式時，聽繼承的；有本身的樣式時，繼承的權重爲0）
2.權重會疊加。

（上圖：類選擇器10+標籤選擇器1=11，因此最後14期威武顯示的是黃色）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。