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

阿新 • • 發佈：2019-01-15

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、文字元素

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            /*行高*/

2、文字屬性連寫

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

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

3、文字的表達方式

1. 直接寫中文名稱

font-family: 微軟雅黑;

2. 寫字型的英文名稱

font-family: microsoft yahei;

3. unicode 編碼（解析更快）

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

第一步：一般開啟瀏覽器，按F12
第二步：找到console
第三步：輸入escape(“宋體”); 注意英文的括號和雙引號。

二、樣式表書寫位置

內嵌式寫法

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

外鏈式寫法

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

行內樣式表

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

三種寫法特點:
內嵌式寫法：樣式只作用於當前檔案，沒有真正實現結構表現分離。
外鏈式寫法：作用範圍是當前站點，誰呼叫誰生效，範圍廣，真正實現結構表現分離。
行內樣式表：

作用範圍僅限於當前標籤，範圍小，結構表現混在一起。（不推薦使用）

三、標籤分類

1、塊元素

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

特點:
1.獨佔一行；
2.可以設定寬高；
3.巢狀（包含）下，子塊元素寬度（沒有定義情況下）和父塊元素寬度預設一致。

2、行內元素

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

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

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

/*典型代表*/  input, img

特點：
1.在一行上顯示；
2.可以設定寬高。

4、三者相互轉換

1. 塊元素轉行內元素

display:inline;

2. 行內元素轉塊元素

display:block;

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

display:inline-block;

四、CSS三大特性

1、層疊性

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

2、繼承性

繼承性發生的前提是包含（巢狀關係）
★ 文字顏色可以繼承
★ 文字大小可以繼承
★ 字型可以繼續
★ 字型粗細可以繼承
★ 文字風格可以繼承
★ 行高可以繼承
總結：文字的所有屬性都可以繼承。

特殊情況：

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

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

a連結標籤不能繼承文字顏色（繼承了但是不顯示，連結標籤預設是藍色）

3、優先順序

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

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

特點：

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

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

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

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、文字元素 1、

從零開始學 Web 之 CSS（三）連結偽類、背景、行高、盒子模型、浮動

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、連結偽類 a:

從零開始學 Web 之 CSS（一）選擇器

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 W

從零開始學 Web 之 CSS（五）可見性、內容移除、精靈圖、屬性選擇器、滑動門

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、CSS可見性

從零開始學 Web 之 CSS（四）CSS初始化、定位、overflow、標籤規範

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、CSS初始化

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影

一、顏色模式顏色模式有兩種： RGBA rgba(0,0,0,0.5); //黑色，透明度0.5 HSLA（顏色(0~360)，飽和度(0%~100%)，明度(0%~100%)，透明度(0~1)）紅橙黃綠青藍紫紅：顏色從 0~360 順序，各佔30度。比如紅色為0，黃色為120，綠色為240。

從零開始學Web之HTML（二）標籤、超連結、特殊符號、列表、音樂、滾動、head等

大家好，這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、標籤 1、單標籤註釋標籤

從零開始學 Web 之 DOM（二）對樣式的操作，獲取元素的方式

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 1、對樣式的操作

從零開始學 Web 之 DOM（三）innerText與innerHTML、自定義屬性

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、相容程式碼 1

從零開始學 Web 之 Ajax（二）PHP基礎語法

一、PHP 基礎語法 1、基本結構所有PHP程式碼都要寫到 <?php ... ?> 裡面。 PHP檔案可以和 HTML 檔案結合進行使用。 PHP檔案的預設副檔名是 ".php"。 PHP程式碼必須在伺服器上執行。 2、列印語句 echo：的作用在頁面中輸入字串（只能列印字串，數字等

從零開始學 Web 之 ES6（二）ES5的一些擴充套件

一、json物件擴充套件把一個Json物件轉換成字串 JSON.stringify(js物件/陣列); 把一個json格式的字串轉換成Json物件 JSON.parse(json物件/陣列); 示例： <script type="text/javascript"> var o

從零開始學 Web 之 JavaScript（二）變數

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、變數 1、變數

從零開始學 Web 之 BOM（二）定時器

一、定時器 BOM 中有兩中方式設定定時器。 1、方式一特點：定時器可以重複使用。 // 引數有兩個： // 第一個引數：定時器定時結束處理函式 // 第二個引數：定時事件，單位毫秒。 // 返回值：定時器id值 var timeId = window.setInterval(function()

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，

從零開始學 Web 之 DOM（四）節點

def clas scrip while p標簽設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

樣式清理 java mar dde sof mov har width 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：

從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件

png 好用添加方式執行存在區別也會地址大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：http://ww

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

eval uri turn 定位 return 也會否則 ont sele 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客

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

一、文字元素

1、屬性

2、文字屬性連寫

3、文字的表達方式

二、樣式表書寫位置

三、標籤分類

1、塊元素

2、行內元素

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

4、三者相互轉換

四、CSS三大特性

1、層疊性

2、繼承性

3、優先順序

相關推薦