CSS 文字詳解

第一部分:簡(jiǎn)介

前言:

現(xiàn)下大部分網(wǎng)頁都是由 文字 和 圖片 構(gòu)成.
所以 文字 在 網(wǎng)頁視覺方面 是基本的一大構(gòu)成.
下面我們來介紹在CSS中 控制文字的一些 基本操作:

分析:
我們首先分析. 文字 這個(gè)東西到底是個(gè)什么?
說道 分析一個(gè) 事物的第一步就是分析 事物自帶的屬性
在顯示器終端上, 文字 能顯示出來,本質(zhì)是 它 點(diǎn)陣了視窗的某一部分像素.
對(duì)計(jì)算機(jī)而言, 它們只是不同 點(diǎn)陣的像素而已
對(duì)我們?nèi)祟惗? 是約定俗成的 視覺認(rèn)知.

\color{red}{由此得出: 文字是一堆 像素的集合 }

像素集合的本質(zhì)就決定了 它有 大小(font-size) 和 顏色(color) 的最基本的兩個(gè)屬性.
再加上 我們生活中常見的 文字修飾. 就有了 文字方向(writing-mode) 縮進(jìn)(text-indent), 斜體(font-style),標(biāo)識(shí)(text-decoration)等等.

如下列表:

格式 定義 值 用法
color 文字顏色. 顏色單詞/ 十六進(jìn)制 / rgba()等.... color: red / #ffeedd / rgba(100,20,150,.5) ...;
font-family 字體大小. 常用有: "Arial","Microsoft Yahei","黑體","宋體",sans-serif font-family: "Arial","Microsoft Yahei","黑體","宋體",sans-serif
font-size 字體系列. 數(shù)值+px / 百分比,smaller.larger(相對(duì)父元素) font-size: 30px / 150% / smaller;
font-weight 字體粗細(xì). 100~900 / normal(400), blod(700) / bloder / lighter/ inherit font-weight: bold / 700;
font-style 字體的風(fēng)格 normal / italic / oblique / inherit font-style: italic / oblique;
font 字體屬性集合簡(jiǎn)寫 順序依次是: font-style font-variant font-weight font-size/line-height font-family font:italic bold 12px/20px arial,sans-serif;
text-shadow 文字陰影 h-shadow v-shadow blur color text-shadow: 4px 5px 6px rgba(,250,250,.6);
text-decoration 文本修飾 none(default) / underline / overline / line-through / inherit text-decoration: underline;
text-transform 文本大小寫 none(default) / capitalize / uppercase / lowercase / inherit text-transform: uppercase;
text-indent 文本縮進(jìn) 數(shù)值+em text-indent: 2em;
text-align 水平對(duì)齊方式 left(default) / right / center / justify / inherit text-align: center;
letter-spacing 字符間距 數(shù)值+px (允許使用負(fù)值) letter-spacing: 2px / -3px;
line-height 行高 數(shù)字 / 百分比 / 數(shù)值+px line-height: 1.5 / 150% / 20px;
word-wrap 換行 normal / break-word word-wrap: normal / break-word;
writing-mode 方向 horizontal-tb / vertical-rl / vertical-lr / sideways-rl / sideways-lr writing-mode: horizontal-tb;

另外還有常用的 文字省略:

  • 單行文字省略
white-space: no-wrap;
text-overflow: ellipsis;
overflow: hidden;
  • 多行文字省略 注意: 不要給文本父容器設(shè)置高度. 
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*多余的文字在第三行后省略掉 */
overflow: hidden;

第二部分: 實(shí)例展示與擴(kuò)展

  • color

.box .span1 {
  color: red;
}
.box .span2 {
  color: #5566ee;
}
.box .span3 {
  color: rgba(100,200,150,.6);
}

效果

css-color.png

color拓展:

既然能給文字填充顏色. 那 可不可以 填充漸變顏色呢? 答案是: 可以的.
如下:

.box p {
  padding: 20px;
  width: 400px;
  border: 1px solid red;
  font-size: 50px;
  
  background-image: -webkit-linear-gradient(bottom left,red,yellow,green,cyan); /* 為文本元素提供漸變背景 */
/* background: linear-gradient(to bottom left,red,yellow,green,cyan); */
  -webkit-background-clip:text; /* 用文本剪輯背景，用漸變背景作為顏色填充文本。 */
  -webkit-text-fill-color:transparent;   /* 使用透明顏色填充文本。 */
   color:transparent;  /* 使用透明顏色填充文本。 */
}

效果

css文字漸變.png

再來,
既然能文字能填充顏色. 那能不能填充其他的東西呢? 比如 圖片...
答案還是 可定的 .
如下

.box {
  border: 1px solid red;
  text-align: center;
  width: 400px;
  font-size: 150px;
  font-weight: 900;
  
  /* 核心代碼 */
  background: url(http://thumbs.dreamstime.com/b/%E7%A7%8B%E5%A4%A9%EF%BC%8C%E4%B8%8E%E6%A0%91%E7%9A%84%E7%A7%8B%E5%A4%A9%E9%A3%8E%E6%99%AF-%E5%A4%AA%E9%98%B3%E5%8F%91%E5%85%89-46805832.jpg) center center no-repeat; /* 圖片填充 */
  -webkit-background-clip: text;  /* 以文字為剪切蒙版 */
  -webkit-text-fill-color:transparent; /* 設(shè)置文字透明 */
  color: transparent; /* 設(shè)置文字透明 */
}

效果

css-圖片填充文字.png

  • font-size

字體的大小 因?yàn)橛欣^承性,所以可以從兩個(gè)方面來設(shè)置它.

一 設(shè)置固定大小: number+px;
二 相對(duì)父容器的字體大小: 百分比 或 smaller, larger

如下

.father {
  font-size: 20px;
}
.son1 {
  font-size: 30px; /* 最常用 */
}
.son2 {
  font-size: 200%; /* 在不知道父元素字體大時(shí),可以用 */
}
.son3 {
  font-size: smaller;
}

效果

css-font-size.png

font-size拓展

  • 拓展(一)
    計(jì)算機(jī)邏輯是非常嚴(yán)謹(jǐn)?shù)? 就算我們看不到的空格它也會(huì)把她計(jì)算進(jìn)來.
    這種情況就會(huì)出現(xiàn)一種情況: 想要兩個(gè)元素緊挨在一起,結(jié)果卻又一道縫隙在中間.
    這時(shí)候.font-size就是解決這個(gè)問題的方法之一.

如下圖:

標(biāo)簽之間空格.png

實(shí)例:

.father {
  font-size: 0; /* 父容器字體大小設(shè)置為零 */
}
.father span {
  border: 1px solid red;
  font-size: 20px; /* 在子元素里恢復(fù)大小 */
}

效果

縫隙消失.png

  • 拓展(二)
    在瀏覽器中.特別是在chrome瀏覽器中.有默認(rèn)最小字體大小的設(shè)置.一般為8px.
    意思就是 font-size: 6px, 也是顯示8px的大小.
    問題來了: 怎么才能把文字小于8px顯示在屏幕上呢?
    那就要 用到transform: scale(0.0<參數(shù)<1.0>);
    實(shí)例: 
.fatherBox .normal {
  font-size: 6px; /* 這里設(shè)置了6px, 實(shí)際效果大小是8px */
}

.fatherBox .scale {
  font-size: 6px;  /* 這里設(shè)置了6px, 實(shí)際效果大小是8px */
  transform: scale(0.8); 
  -webkit-transform: scale(0.8); /* 0.8是縮放比例  */
}

效果:

css-font-scale.png

  • font

font是 字體所有字體設(shè)置的一個(gè)簡(jiǎn)寫.
可以按順序設(shè)置如下屬性：

font-style (可選)
font-variant (可選)
font-weight (可選)
font-size/line-height  /* 規(guī)定字體尺寸和行高 */
font-family

實(shí)例:

.fatherBox p {
  font: italic small-caps bold 30px/1.5 "宋體";
}

效果

css-font.png

這里需要注意的是: font-variant 這個(gè)屬性 variant : 變種; 變體; 變形;

它的值只有: small-caps 顯示小型大寫字母的字體 (normal, inherit不算的話)
它可以理解成: 小型化的大寫字母
例如:

<!-- HTML -->
  <div class="fatherBox">
    <p class="p1">CSS: font-varint</p>
    <p class="p2">CSS: normal</p>
  </div>

 /* CSS */
.fatherBox .p1 {
  font-variant: small-caps;
}

效果:

css-font-variant.png

  • text-shadow

基本用法:

text-shadow: h-shadow v-shadow blur color;
h-shadow：必需。水平陰影的位置。允許負(fù)值。
v-shadow：必需。垂直陰影的位置。允許負(fù)值。
blur:可選。模糊的距離。
color:可選。陰影的顏色。

text-shadow拓展
文字和圖片一樣, 可以產(chǎn)生陰影.
在平面設(shè)計(jì)中, 陰影有很多的妙用..
如果用好陰影, 不僅可以提高文字美感,還可以產(chǎn)生一些酷炫的效果. 如 閃爍,浮雕.3D立體字....

實(shí)例

.father .p1 {  /* 一般陰影 */
  text-shadow: 4px 5px 5px green; 
}
.father .p2 { /* 閃爍效果 */
  text-shadow: 0 0 .1em,
               0 0 .3em;
}
.father .p3 { /* 浮雕效果 */
  text-shadow: 2px 2px green,
              -2px -2px green,
               2px -2px green,
              -2px 2px green;
}
.father .p4 { /* 3D立體效果 */
  text-shadow: 0 1px hsl(0,0%,85%),
               0 2px hsl(0,0%,80%),
               0 3px hsl(0,0%,75%),
               0 4px hsl(0,0%,70%),
               0 5px hsl(0,0%,65%),
               0 5px 10px black;
}

[注] hsl() 是顏色的 一種 色彩表達(dá)模式.
HSL即[色相]、[飽和度]、[亮度]（英語：Hue, Saturation, Lightness）
具體詳情點(diǎn)擊:
https://baijiahao.baidu.com/s?id=1639770452743689307&wfr=spider&for=pc

效果

css陰影效果.png

  • text-decoration

在很多情況下,為了 突然, 標(biāo)記, 注釋 一些文本內(nèi)容.
我們經(jīng)常要給 這些文字 來修飾一下,以別其他文字.
那我們就要用到 text-decoration.

案例

.father .p1 {
  text-decoration: underline ; /* 下劃線在文字下方 */
}
.father .p2 {
  text-decoration: overline;  /* 下劃線在文字上方 */
}
.father .p3 {
  text-decoration: line-through;  /* 下劃線穿過文字 */
}

效果:

css-text-decoration.png

text-decoration拓展
從上面例子可以做到. text-decoration確實(shí)起到了標(biāo)識(shí)一些想要注意的文字.
但是問題又隨之而來: 我要的下劃線是要有 顏色的..
就想我們小時(shí)候讀書用紅筆把重點(diǎn)內(nèi)容標(biāo)出來一樣,既美觀又醒目.
同樣, css設(shè)計(jì)者同樣考慮到這個(gè)小細(xì)節(jié)...
實(shí)例:

.father .p1 {
  text-decoration: underline red; /* 顏色屬性可選,默認(rèn)跟字體設(shè)置的color顏色一樣 */
}

效果

css-text-decoration.-red.png

還有一個(gè) 算半個(gè) 文字 修飾的 偽類: text::selection {}
網(wǎng)頁通常默認(rèn)選中的文字 底色為 藍(lán)色,字體顏色為 白色
通過應(yīng)用text::selection {}偽類 我們可以 修改 被選中 文字的 底色和字體顏色
實(shí)例:

.text::selection {
  background: green;
  color: red;
}

效果:

css-selection.png

  • letter-spacing

這個(gè)命名控制 元素內(nèi)所有字符之間的空隙距離
在英文里, 因?yàn)橛袉卧~的存在,
所以還有一個(gè) word-spacing 的命名.它只負(fù)責(zé)控制 單詞與單詞之間空隙.
word-spacing 對(duì)中文 不起作用的
所以,在中文調(diào)整字間距的時(shí)候,只有使用 letter-spacing.
(當(dāng)然, 在元素里面使用&nbsp; 也是可以的,但是太土味了.)

實(shí)例:

.fatherBox .p1 { /* 我對(duì)所有字符之間間隔起作用 */
  letter-spacing: 5px;
}
.fatherBox .p2 { /* 我是對(duì)單詞之間空隙間隔起作用 */
  word-spacing: 5px;
}

.fatherBox .p3 {/*  letter-spacing對(duì)中文起作用 */
  letter-spacing: 5px;
}
.fatherBox .p4 { /* word-spacing對(duì)中文不起作用 */
  word-spacing: 5px;
}

效果

css-letter-word-spacing.png

writing-mode

現(xiàn)代書本上的文字都是從左到右的順序排列，但是古時(shí)候不同，文字都是從右至左排列的，現(xiàn)在在很多古籍、牌坊、石碑等上面依舊可以看到從右至左的文字。

css也可以調(diào)整文本排版方向，是通過什么屬性控制的呢？
writing-mode 屬性定義了文本在水平或垂直方向上如何排布。

writing-mode 值 描述 示意
horizontal-tb (正常書寫) 水平方向自上而下的書寫方式。即 left-right-top-bottom
111.png
vertical-rl 垂直方向自右而左的書寫方式。即 top-bottom-right-left
222.png
vertical-lr 垂直方向內(nèi)內(nèi)容從上到下，水平方向從左到右
333.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素；行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,211評(píng)論 1贊 4
  • CSS要點(diǎn)記錄 CSS 指層疊樣式表 (Cascading Style Sheets) 多種樣式時(shí)的優(yōu)先級(jí)問題 數(shù)...
    Tony__Hu閱讀 1,329評(píng)論 0贊 0
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,189評(píng)論 0贊 1
  • 1 前言CSS 作為網(wǎng)頁樣式的描述語言，一直有著廣泛的應(yīng)用。本文檔的目標(biāo)是使 CSS 代碼風(fēng)格保持一致，容易被理解...
    LikySis閱讀 424評(píng)論 0贊 0
  • 1 字體屬性：(font) 大小 {font-size: x-large;}(特大) xx-small;(極小) ...
    厝弧閱讀 373評(píng)論 0贊 0

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