時(shí)間：2023-10-02 14:24:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-10-02 14:24:01 來源：網(wǎng)站運(yùn)營
CSS 進(jìn)階——字體 顏色 多列布局：
在線咨詢
<br> 元素。color 屬性。嚴(yán)格來講，color 設(shè)置的是前景內(nèi)容，設(shè)置元素背景顏色要用 background-color。p { color: red;}這段用來設(shè)置<p>中的字體顏色為紅色。p { font-family: arial;}這段語句使所有在頁面上的段落都采用 arial 字體，這個(gè)字體可在任何電腦上找到。| 字體名稱 | 泛型 | 注意 |
|---|
serif, sans-serif, monospace, cursive,和 fantasy. 這些都是非常通用的，當(dāng)使用這些通用名稱時(shí)，使用的字體完全取決于每個(gè)瀏覽器，而且它們所運(yùn)行的每個(gè)操作系統(tǒng)也會(huì)有所不同。這是一種糟糕的情況，瀏覽器會(huì)盡力提供一個(gè)看上去合適的字體。 serif, sans-serif 和 monospace 是比較好預(yù)測(cè)的，默認(rèn)的情況應(yīng)該比較合理，另一方面，cursive 和 fantasy 是不太好預(yù)測(cè)的，我們建議使用它們的時(shí)候應(yīng)該稍微注意一些，多多測(cè)試。| 名稱 | 定義 |
|---|
<html> 指定字體的方式來網(wǎng)指定字體,這樣頁面上的所有文字都繼這個(gè)屬性，然后整個(gè)頁面的字體都會(huì)同時(shí)設(shè)置。html { font-family: "Noto Sans SC", "Source Han Sans CN", "MicroSoft YaHei", sans-serif; /*前兩個(gè)思源黑體，第三個(gè)微軟雅黑，最后是無襯線類。*/}px 將像素的值賦予給你的文本。這是一個(gè)絕對(duì)單位， 它導(dǎo)致了在任何情況下，頁面上的文本所計(jì)算出來的像素值都是一樣的。一般不推薦使用。em 設(shè)置相對(duì)父元素的字節(jié)大小，推薦使用。注意這不是直接相對(duì)瀏覽器本身的字節(jié)大小，而是自己的父元素。也就是如果你給一個(gè)段落設(shè)置成了 1.2em ，它的子元素設(shè)置 1em 就是相對(duì) 1.2em 而言的。rem 相對(duì)根元素大小。這個(gè)可以避免上面提到的嵌套問題，而是直接相對(duì)瀏覽器本身的字節(jié)大小。font-style: 用來打開和關(guān)閉文本 italic (斜體)。 可能的值如下： normal : 將文本設(shè)置為普通字體 (將存在的斜體關(guān)閉) ，italic: 如果當(dāng)前字體的斜體版本可用，那么文本設(shè)置為斜體版本；如果不可用，那么會(huì)將文字傾斜來模擬 italics 。你很少會(huì)用到這個(gè)屬性，除非你因?yàn)橐恍├碛上雽⑿斌w文字關(guān)閉斜體狀態(tài)。font-weight: 設(shè)置文字的粗體大小。這里有很多值可選 (比如 light, normal, bold, extrabold, black, 等等), 不過事實(shí)上你很少會(huì)用到 normal 和 bold 以外的值。其中 normal 設(shè)置正常字體，bold 設(shè)置粗體。text-decoration: 設(shè)置/取消字體上的文本裝飾 (你將主要使用此方法在設(shè)置鏈接時(shí)取消設(shè)置鏈接上的默認(rèn)下劃線。) 可用值為： none （取消已經(jīng)存在的任何文本裝飾），underline（文本下劃線），overline（文本上劃線） ，line-through（刪除線）。left: 左對(duì)齊文本。right: 右對(duì)齊文本。center: 居中文字justify: 使文本展開，改變單詞之間的差距，使所有文本行的寬度相同。你需要仔細(xì)使用，它可以看起來很可怕。特別是當(dāng)應(yīng)用于其中有很多長單詞的段落時(shí)。如果你要使用這個(gè)，你也應(yīng)該考慮一起使用別的東西，比如 hyphens ，打破一些更長的詞語。text-align: center; 到一個(gè)頁面的 <h1> 元素中，結(jié)果如下：line-height 屬性設(shè)置文本每行之間的高，可以接受大多數(shù)單位，不過也可以設(shè)置一個(gè)無單位的值，作為乘數(shù)，通常這種是比較好的做法。無單位的值乘以 font-size (字體大小)來獲得 line-height 行高）。當(dāng)行與行之間拉開空間，正文文本通常看起來更好更容易閱讀。推薦的行高大約是 1.5–2 (雙倍間距。) 所以要把我們的文本行高設(shè)置為字體高度的 1.5 倍，你可以使用這個(gè):line-height: 1.5;letter-spacing 和 word-spacing 屬性允許你設(shè)置你的文本中的字母與字母之間的間距、或是單詞與單詞之間的間距。你不會(huì)經(jīng)常使用它們，尤其是中文的網(wǎng)站下面，但是可能可以通過它們，來獲得一個(gè)特定的外觀，或者讓較為密集的文字更加可讀。它們可以接受大多數(shù)單位。<p> 段落的第一行：p::first-line { letter-spacing: 2px; word-spacing: 4px;}color）和背景色( background-color )。前景色通常用來指定文本的顏色，背景色通常用來指定塊元素的背景顏色。下面是一個(gè)例子，形成了黑底灰字。p { color: grey; background-color: black;}<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>color: red;color: orange;# 打頭的十六進(jìn)制數(shù)字設(shè)置，符號(hào)由紅色、綠色和藍(lán)色的值組成，就是把 RGB 直接寫成一個(gè)數(shù)字。color: #090;color: #009900;color: rgb(34, 12, 64);color: rgb(34, 12, 64, 0.6);color: rgba(34, 12, 64, 0.6);color: hsl(30, 100%, 50%, 0.6);color: hsla(30, 100%, 50%, 0.6);background-image 屬性用于為一個(gè)元素設(shè)置一個(gè)或者多個(gè)背景圖像。接受一個(gè)圖片的 URL 作為參數(shù)。例如下面：background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");<div> 里面，它帶有一個(gè)container 類。我們會(huì)將它作為一個(gè)放置文本的容器，來進(jìn)行一個(gè)展示。column-count 被設(shè)置成 3 意思是三列。.container { column-count: 3;}<div class="container"> <h1>Simple multicol example</h1> <p>節(jié)約紙張</p> <p>同上</p></div>除了列數(shù)，還可以通過指定每列的寬度。之前為了方便都是用 px 當(dāng)作單位。這里也可以換成 em （一般情況下，1em 等于 16px，具體換算由瀏覽器決定），兩者之中 em 更適合移植。.container { column-width: 12.5em; /*相當(dāng)于 200px*/}瀏覽器將按照你指定的寬度盡可能多的創(chuàng)建列；任何剩余的空間之后會(huì)被現(xiàn)有的列平分。 這意味著你可能無法期望得到你指定寬度，除非容器的寬度剛好可以被你指定的寬度除盡。column-gap 改變列間間隙。column-rule 在列間加入一條分割線。column-gap 屬性可以更改列間間隙：.container { column-width: 200px; column-gap: 20px;}你可以嘗試不同的值 — 該屬性接受任何長度單位?，F(xiàn)在再加入 column-rule。和你之前遇到的 border 屬性類似， column-rule 是 column-rule-color 和 column-rule-style 的縮寫，接受同 border 一樣的單位。然后就得到了下面的效果.container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227);}本文按照 Mozilla 貢獻(xiàn)者基于 CC-BY-SA 2.5 協(xié)議發(fā)布的以下文章改編:
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals
本文按照 CC-BY-SA 4.0 協(xié)議發(fā)布
本文也在：https://yjzxclub.github.io/929cb01d3315/
本人也是：尼澤·莫伯斯
關(guān)鍵詞：布局,顏色,字體
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
