CSS入門筆記 － 初識CSS


＊＊＊＊＊＊＊＊＊＊ 未經(jīng)本人允許，嚴(yán)禁轉(zhuǎn)載任何網(wǎng)站 ＊＊＊＊＊＊＊＊＊＊

引言

本人在慕課網(wǎng)學(xué)習(xí)HTML+CSS基礎(chǔ)課程，記錄一些文字，方便自己回憶，也希望對大家有所幫助

上次給大家?guī)砹薶tml部分的筆記，大家的反饋?zhàn)屛曳浅ｉ_心??。

這次給大家?guī)韈ss部分的第一篇筆記，由于本人比較蠢，學(xué)的很慢，而且css部分內(nèi)容非常的細(xì)、廣，需要不斷code，才能體會其中細(xì)節(jié)，因此這次暫時只能帶來本人已經(jīng)整理好一部分，以供大家一同進(jìn)步。

另外有一個求助，Atom中Toc插件生成頁面，無法在Github或者簡書中使用，希望有知道解決方法的高手，能夠給予幫助

CSS入門筆記 － 初識CSS

1 - 認(rèn)識CSS樣式

CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等用于設(shè)置頁面的表現(xiàn)。CSS3 并不是一個完整的獨(dú)立版本而是將不同的功能拆分成獨(dú)立模塊（例如，選擇器模塊，盒模型模塊），這有利于不同功能的及時更新與發(fā)布也利于瀏覽器廠商的實(shí)際使用。

2 - 為何使用CSS？

CSS幫助您將文檔信息的內(nèi)容 和如何展現(xiàn)它的細(xì)節(jié)相分離。眾所周知，如何展現(xiàn)文檔的細(xì)節(jié)即為樣式(style)。您可以將樣式從它的內(nèi)容分離出來，以便您能夠：

  • 避免重復(fù)
  • 更容易維護(hù)
  • 為不同的目的，使用不同的樣式而內(nèi)容相同

例如:
您的網(wǎng)站可能有成千上萬的頁面外觀相似。使用CSS，您可以將樣式信息存儲在公共的文件中以供所有的頁面共用。

當(dāng)用戶顯示頁面時，用戶的瀏覽器將樣式信息和頁面內(nèi)容一同加載。

當(dāng)用戶打印頁面時，您可以提供不同的樣式信息，以便于打印出來的頁面更易于閱讀。

總之，在HTML中，您使用標(biāo)記語言來描述文檔的內(nèi)容而不是它的樣式。您可以使用CSS來指定它的樣式而不是它的內(nèi)容。

3 - CSS語法

CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明:

選擇器：指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素，如本例中是網(wǎng)頁中所有的段（p）的文字將變成紅色，而其他的元素（如ol）不會受到影響。

聲明：在英文大括號“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當(dāng)有多條聲明時，中間可以英文分號“;”分隔，如下所示：

p {
    color:red;
    text-align:center;
}

CSS 注釋
注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它。
CSS注釋以 /* 開始, 以 */ 結(jié)束, 實(shí)例如下:

/* p標(biāo)簽的樣式 */
p {
    text-align:center; /* 文本居中 */
    color:black;
    font-family:arial;
}

4 - CSS樣式引入

CSS樣式可以寫在哪些地方呢？從CSS 樣式代碼插入的形式來看基本可以分為以下3種：

  • 內(nèi)聯(lián)式css樣式
  • 嵌入式CSS樣式
  • 外部式CSS樣式

4.1 - 內(nèi)聯(lián)式css樣式

內(nèi)聯(lián)式css樣式表就是把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中，如下面代碼：
<p style="color:red">這里文字是紅色。</p>
注意要寫在元素的開始標(biāo)簽里，下面這種寫法是錯誤的：
<p>這里文字是紅色。</p style="color:red">
并且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設(shè)置可以寫在一起，中間用分號隔開。如下代碼：
<p style="color:red;font-size:12px">這里文字是紅色。</p>

4.2 - 嵌入式css樣式

嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標(biāo)簽之間。如下面代碼實(shí)現(xiàn)把三個<span>標(biāo)簽中的文字設(shè)置為紅色：

<style type="text/css">
span {
    color:red;
}
</style>

嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間。

4.3 - 外部式css樣式

外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個單獨(dú)的外部文件中，這個css樣式文件以“.css”為擴(kuò)展名，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />

注意：

  1. css樣式文件名稱以有意義的英文字母命名，如 main.css.
  2. rel="stylesheet" type="text/css" 是固定寫法不可修改。
  3. <link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)。

4.4 - 三種方法的優(yōu)先級

內(nèi)聯(lián)式 > 嵌入式 > 外部式
但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面,<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面（實(shí)際開發(fā)中也是這么寫的）

5 － css選擇器

什么是選擇器？
每一條css樣式聲明（定義）由兩部分組成，形式如下：

選擇器{
    樣式;
}

在{}之前的部分就是“選擇器”，“選擇器”指明了{(lán)}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素。比如右側(cè)代碼編輯器中第7行代碼中的“body”就是選擇器。

5.1 － 簡單選擇器

簡單選擇器可組合使用。

5.1.1 － 標(biāo)簽選擇器

標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽。如右側(cè)代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下面代碼：

p{font-size:12px;line-height:1.6em;}

上面的css樣式代碼的作用：為p標(biāo)簽設(shè)置12px字號，行間距設(shè)置1.6em的樣式。

5.1.2 － 類選擇器

類選擇器在css樣式編碼中是最常用到的
.className 以 . 開頭，名稱可包含字母，數(shù)字，-，_，但必須以字母開頭。它區(qū)分大小寫并可出現(xiàn)多次。
語法：
.類選器名稱{css樣式代碼;}

注意：

  1. 英文圓點(diǎn)開頭
  2. 其中類選器名稱可以任意起名（但不要起中文噢）

使用方法：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來，如下：
<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"為標(biāo)簽設(shè)置一個類，如下：
<span class="stress">膽小如鼠</span>
第三步：設(shè)置類選器css樣式，如下：

/*類前面要加入一個英文圓點(diǎn)*/
.stress {
    color:red;
}

5.1.3 － ID選擇器

#idName以 # 開頭且只可出現(xiàn)一次，其命名要求于 .className 相同。在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區(qū)別：

  1. 為標(biāo)簽設(shè)置id="ID名稱"，而不是class="類名稱"。
  2. ID選擇符的前面是井號（#）號，而不是英文圓點(diǎn)（.）。
  3. ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
  4. 可以使用類選擇器詞列表方法為一個元素同時設(shè)置多個樣式。我們可以為一個元素同時設(shè)多個樣式，但只可以用類選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。

栗子：

<div>
  <p id="special">Sample Paragraph</p>
</div>

<style type="text/css">
  #special {
    color: red;
  }
</style>

5.1.4 － 通配符選擇器

通用選擇器是功能最強(qiáng)大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標(biāo)簽元素，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：
* {color:red;}

5.1.5 － 屬性選擇器

對帶有指定屬性的 HTML 元素設(shè)置樣式。
可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。
注釋：只有在規(guī)定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。

  • [attr] 或 [attr=val] 來選擇相應(yīng)的元素。#nav{...} 既等同于 [id=nav]{...}。IE7+
  • [attr~=val] 可選用與選擇包含 val 屬性值的元素，像class="title sports" 與 class="sports"。.sports{...} 既等同于 [class~=sports]{...} IE7+
  • [attr|=val] 可以選擇val開頭及開頭緊接-的屬性值。IE7+
  • [attr^=val] 可選擇以val開頭的屬性值對應(yīng)的元素，如果值為符號或空格則需要使用引號 ""。IE7+
  • [attr$=val] 可選擇以val結(jié)尾的屬性值對應(yīng)的元素。IE7+
  • [attr*=val] 可選擇以包含val屬性值對應(yīng)的元素。IE7+

下面的選擇器，強(qiáng)烈建議寫代碼嘗試，效果更加直觀，或者查看w3school的屬性選擇器部分進(jìn)行學(xué)習(xí)

1 屬性選擇器
下面的例子為帶有 title 屬性的所有元素設(shè)置樣式：

[title] {
    color:red;
}

2 屬性和值選擇器
下面的例子為 title="MyBlog" 的所有元素設(shè)置樣式：

[title=MyBlog] {
    border:5px solid blue;
}

3 屬性和值選擇器 - 多個值
下面的例子為包含指定值的 title 屬性的所有元素設(shè)置樣式。適用于由空格分隔的屬性值：

[title~=hello] {
    color:red;
}

下面的例子為帶有包含指定值的 lang 屬性的所有元素設(shè)置樣式。適用于由連字符分隔的屬性值：

[lang|=en] { color:red; }

4 設(shè)置表單的樣式
屬性選擇器在為不帶有 class 或 id 的表單設(shè)置樣式時特別有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

5.1.6 － 偽類選擇符

更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色：
a:hover{color:red;}
上面一行代碼就是為 a 標(biāo)簽鼠標(biāo)滑過的狀態(tài)設(shè)置字體顏色變紅。這樣就會使第一段文字內(nèi)容中的“膽小如鼠”文字加入 鼠標(biāo)滑過字體 顏色變?yōu)榧t色特效。
常用偽類選擇器：

  • :link IE6+
  • :visited IE7+
  • :hover IE6中僅可用于鏈接
  • :active IE6/7中僅可用于鏈接
  • :enabled IE9+
  • :disabled IE9+
  • :checked IE9+
  • :first-child IE8+
  • :last-child IE9+
  • :nth-child(even) 可為 odd even 或數(shù)字 IE9+
  • :nth-last-child(n) n從 0 開始計算 IE9+
  • :only-child 僅選擇唯一的元素 IE9+
  • :only-of-type IE9+
  • :first-of-type IE9+
  • :last-of-type IE9+
  • :nth-of-type(even) IE9+
  • :nth-last-of-type(2n) IE9+

不常用偽類選擇器：

  • :empty 選中頁面中無子元素的標(biāo)簽 IE9+
  • :root 選擇 HTML 根標(biāo)簽 IE9+
  • :not() 參數(shù)為一般選擇器 IE9+
  • :target 被錨點(diǎn)選中的目標(biāo)元素 IE9+
  • :lang() 選中語言值為某類特殊值的元素 IE7+

注意：
element:nth-of-type(n) 指父元素下第 n 個 element 元素，element:nth-child(n) 指父元素下第 n 個元素且元素為 element，若不是，選擇失敗。具體細(xì)節(jié)請在使用時查找文檔。

/* 偽類屬性定義有順序要求！ */
  a:link {
    color: gray;
  }
  a:visited {
    color:red;
  }
  a:hover {
    color: green;
    /* 鼠標(biāo)懸停 */
  }
  a:active {
    color: orange;
    /* 鼠標(biāo)點(diǎn)擊 */
  }

5.2 － 其他選擇器

5.2.1 - 組合選擇器

  • 后代選擇器 .main h2 {...}，使用 表示 IE6+
  • 子選擇器 .main>h2 {...}，使用>表示 IE7+
  • 兄弟選擇器 h2+p {...}，使用+表示 IE7+
  • h2~p {...}，使用~表示（此標(biāo)簽無需緊鄰）IE7+

5.2.2 - 選擇器分組

你想為html中多個標(biāo)簽元素設(shè)置同一個樣式時，可以使用分組選擇符（，）

/* 下面兩組樣式聲明效果一致 */
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}

h1, h2, h3 {color: red;}

6 - CSS中的繼承、優(yōu)先、層級

6.1 - 繼承

CSS的某些樣式是具有繼承性的，那么什么是繼承呢？繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個特定html標(biāo)簽元素，而且應(yīng)用于其后代。比如下面代碼：如某種顏色應(yīng)用于p標(biāo)簽，這個顏色設(shè)置不僅應(yīng)用p標(biāo)簽，還應(yīng)用于p標(biāo)簽中的所有子元素文本，這里子元素為span標(biāo)簽。

p{color:red;}

<p>想當(dāng)年，我是一個<span>強(qiáng)壯</span>的男人。</p>

輸入上面代碼，p中的文本與span中的文本都設(shè)置為了紅色。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;

子元素繼承父元素的樣式，但并不是所有屬性都是默認(rèn)繼承的。通過文檔中的 inherited: yes 來判斷屬性是否可以自動繼承。

自動繼承屬性：

  • color
  • font
  • text-align
  • list-style
  • ...

非繼承屬性：

  • background
  • border
  • position
  • ...

6.2 - 優(yōu)先

有的時候我們?yōu)橥粋€元素設(shè)置了不同的CSS樣式代碼，那么元素會啟用哪一個CSS樣式呢?我們來看一下面的代碼：

p{color:red;}
.first{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

p和.first都匹配到了p這個標(biāo)簽上，那么會顯示哪種顏色呢？green是正確的顏色，那么為什么呢？是因?yàn)闉g覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，權(quán)值高的就使用哪種css樣式。

CSS Specificity Calculator 可以在這里找到。更多關(guān)于 CSS 優(yōu)先級別的信息可以在這里（英文）找到。

計算方法：

  • a = 行內(nèi)樣式
  • b = id 選擇器的數(shù)量
  • c = 類、偽類的屬性選擇器的數(shù)量
  • d = 標(biāo)簽選擇器和偽元素選擇器的數(shù)量
    注意：從上到下優(yōu)先級一次降低，且優(yōu)先級高的樣式會將優(yōu)先級低的樣式覆蓋。大致公式（并不準(zhǔn)確）如下。
    value = a * 1000 + b * 100 + c * 10 + d

例如下面的代碼：

p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
a,#footer .note p{color:yellow;} /*權(quán)值為100+10+1+1=112*/

注意：還有一個權(quán)值比較特殊--繼承也有權(quán)值但很低，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低。

改變優(yōu)先級方法:

  • 改變樣式聲明先后順序
  • 提升選擇器優(yōu)先級
  • !important（慎用）!important優(yōu)先級樣式是個例外，權(quán)值高于用戶自己設(shè)置的樣式。

6.3 - 層疊

我們來思考一個問題：如果在html文件中對于同一個元素可以有多個css樣式存在并且這多個css樣式具有 相同權(quán)重值 怎么辦？

層疊就是在html文件中對于同一個元素可以有多個css樣式存在，當(dāng)有相同權(quán)重的樣式存在時，會根據(jù)這些css樣式的前后順序來決定，處于最后面的css樣式會被應(yīng)用。

如下面代碼:

p{color:red;}
p{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

最后 p 中的文本會設(shè)置為green，這個層疊很好理解，理解為后面的樣式會覆蓋前面的樣式。

所以前面的css樣式優(yōu)先級就不難理解了：

內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）。

7 - CSS文本

7.1 - 字體

7.1.1 － 改變字號
font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit
<absolute-size>有 small large medium
<relative-size>有 smaller larger
示范：

  font-size 12px
  p#sample0
    font-size 16px
  p#sample1
    font-size 2em
  p#sample2
    font-size 200%

以上兩值在開發(fā)中并不常用。2em 與 200% 都為父元素默認(rèn)大小的兩倍（參照物為父元素的字體大小 12px）。

7.1.2 - 改變字體
font-family: [ <family-name> | <generic-family> ]
<generic-family>可選選項，但具體使用字體由瀏覽器決定

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

示范：
font-family: arial, Verdana, sans-serif;
注意：優(yōu)先使用靠前的字體

通用字體系列
一直存在混亂的字體命名問題，實(shí)際上相同的字體可能有很多不同的稱呼，不過 CSS 邁出了勇敢的一步，力圖幫助用戶代理把這種混亂狀況理清楚。

我們所認(rèn)為的“字體”可能有許多字體變形組成，分別用來描述粗體、斜體文本，等等。例如，你可能已經(jīng)對字體 Times 很熟悉。不過，Times 實(shí)際上是多種變形的一個組合，包括 TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldItalic、TimesBoldOblique，等等。Times 的每種變形都是一個具體的字體風(fēng)格（font face），而我們通常認(rèn)為的 Times 是所有這些變形字體的一個組合。換句話說，Times 實(shí)際上是一個字體系列（font family），而不只是單個的字體，盡管我們大多數(shù)人都認(rèn)為字體就是某一種字體。

除了各種特定字體系列外（如 Times、Verdana、Helvetica 或 Arial），CSS 還定義了 5 種通用字體系列：

  • Serif 字體
    這些字體成比例，而且有襯線。如果字體中的所有字符根據(jù)其不同大小有不同的寬度，則成該字符是成比例的。例如，小寫 i 和小寫 m 的寬度就不同。
    襯線是每個字符筆劃末端的裝飾，比如小寫 l 頂部和底部的短線，或大寫 A 兩條腿底部的短線 
Serif 字體的例子包括
- Times
- Georgia
- New Century Schoolbook
- ...
  • Sans-serif 字體
    這些字體是成比例的，而且沒有上下短線，這種字體系列在計算機(jī)屏幕上更容易識讀.
Sans-serif 字體的例子包括
- Helvetica
- Geneva
- Verdana
- Arial
- Univers
- ...
  • Monospace 字體
    Monospace 字體并不是成比例的。它們通常用于模擬打字機(jī)打出的文本、老式點(diǎn)陣打印機(jī)的輸出，甚至更老式的視頻顯示終端。采用這些字體，每個字符的寬度都必須完全相同，所以小寫的 i 和小寫的 m 有相同的寬度。這些字體可能有上下短線，也可能沒有。如果一個字體的字符寬度完全相同，則歸類為 Monospace 字體，而不論是否有上下短線。
Monospace 字體的例子包括 :
- Courier
- Courier New
- Andale Mono
- ...
  • Cursive 字體
    這些字體試圖模仿人的手寫體。通常，它們主要由曲線和 Serif 字體中沒有的筆劃裝飾組成。例如，大寫 A 再其左腿底部可能有一個小彎，或者完全由花體部分和小的彎曲部分組成。
Cursive 字體的例子包括:
- Zapf Chancery
- Author
- Comic Sans
- ...
  • Fantasy 字體
    這些字體無法用任何特征來定義，只有一點(diǎn)是確定的，那就是我們無法很容易地將其規(guī)劃到任何一種其他的字體系列當(dāng)中。
這樣的字體包括 :
- Western
- Woodblock
- Klingon
- ...

7.1.3 - 加粗字體
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
示范：

font-weight: normal;
font-weight: bold;

7.1.4 - 傾斜字體
font-style: normal | italic | oblique | inherit
italic 使用字體中的斜體，而 oblique 在沒有斜體字體時強(qiáng)制傾斜字體。

7.1.5 - 更改行距
line-height: normal | <number> | <length> | <percentage>
normal 值為瀏覽器決定，在1.1至1.2之間（通常設(shè)置值為1.14左右）
示范：

/* length 類型 */
line-height: 40px;
line-height: 3em;
/* percentage 類型 */
line-height: 300%;
/* number 類型 */
line-height: 3;

注意：當(dāng)line-height為 number 類型時，子類直接繼承其數(shù)值（不計算直接繼承）。 而當(dāng)為 percentage 類型時，子類則會先計算再顯示（先計算后繼承）。

7.1.6 - 字間距（字母間距）
letter-spacing: normal | <length>
其用于設(shè)置字間距或者字母間距，此屬性適用于中文或西文中的字母。 如果需要設(shè)置西文中詞與詞的間距或標(biāo)簽直接的距離則需要使用 word-spacing。word-spacing: normal | <length>

7.1.7 - 改變文字顏色
color: <color>
示范：

element { color: red; }
element { color: #f00; }
element { color: #ff0000; }
element { color: rgb(255,0,0); }
element { color: rgb(100%, 0%, 0%); }
element { color: hsl(0, 100%, 50%); }

/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5); }
element { color: hsla(0, 100%, 50%, 0.5); }

/* 全透明 */
element { color: transparent' }
element { color: rgba(0, 0, 0, 0); }

7.2 - 對齊方式

7.2.1 - 文字居中

text-align: start | end | left | right | center | justify | match-parent | start end
注意：默認(rèn)為文本左對齊。

7.2.2 - 文本垂直對齊
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
注意：<percentage>的參照物為line-height

7.2.3- 文本縮進(jìn)
text-indent: <length> | <percentage> && [ hanging || each-line ]
注意：縮進(jìn)兩個字可使用 text-indent: 2em;

7.3 - 格式處理

7.3.1 - 保留空格格式
white-space: normal | pre | nowrap | pre-wrap | pre-line
注意：pre行為同 <pre> 一致。

New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
nowrap Collapse Collapse No wrap
pre Preserve Preserve No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap

7.3.2 - 文字換行
word-wrap: normal | break-word
注意：允許長單詞自動換行。
word-break: normal | break-all | keep-all
注意：break-all 單詞中的任意字母間都可以換行。

7.4 - 文本裝飾

7.4.1 - 文字陰影
text-shadow:none | <shadow-t>#或 text-shadow:none | [<length>{2,3}&&<color>?]#

p {
  text-shadow: 1px 1px 1px #000,
               3px 3px 5px blue;
}
  • value = The X-coordinate X 軸偏移像素
  • value = The Y-coordinate Y 軸偏移像素
  • value = The blur radius 陰影模糊半徑
  • value = The color of the shadow 陰影顏色（默認(rèn)為文字顏色）

7.4.2 - 文本裝飾（下劃線等）
text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

7.5 － 高級設(shè)置

7.5.1 - 省略字符
text-overflow: [ clip | ellipsis | <string> ]{1,2}

/* 常用配合 */
text-overflow: ellipsis;
overflow: hidden; /* 溢出截取 */
white-space: nowrap; /* 禁止換行 */

7.5.2 - 更換鼠標(biāo)形狀

cursor: [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit+

常用屬性
cursor: [<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]

  • <uri> 圖片資源地址代替鼠標(biāo)默認(rèn)形狀
  • <default> 默認(rèn)光標(biāo)
  • <none> 隱藏光標(biāo)
  • <pointer> 手型光標(biāo)
  • <zoom-in>
  • <zoom-out>
  • <move>

示范：

cursor: pointer;
cursor: url(image-name.cur), pointer;
/* 當(dāng) uri 失效時或者則會起作用 */

7.5.3 - 強(qiáng)制繼承
inherit 會強(qiáng)制繼承父元素的屬性值。

font-size: inherit;
font-family: inherit;
font-weight: inherit;
...
word-wrap: inherit;
work-break: inherit
text-showdow: inherit
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容