CSS屬性控製網絡版式

鑰匙要點

• > css屬性可以精確地進行網絡版式操縱，反映了印刷版本的豐富傳統，同時適應網絡媒體的獨特方面。
CSS中的``text-transform`屬性''允許操縱字母案例，提供諸如``大寫''，``大寫''，``supercase''，'LowerCase'和``full width''之類的選項了。每個滿足不同的設計需求。 > HTML文檔中的白色空間管理可以通過```the White空道''屬性''來控制，並具有諸如`formal'，pre-pre-'，pre-wrap`，`pre-line`和nowrap'的值之類的值來處理不同格式的方案。
為了在單詞中控制線路斷裂，CSS提供了``word-wrap''或`雜種- wrap'屬性，帶有``normal''and break-word'選項，以及用於連字符控制的``連字符''屬性。
> css提供``詞式''和```字母''屬性，以調整單詞和字母之間的空間，增強文本的可讀性和審美吸引力。
• >
高級文本對齊和壓痕通過``text-align''，`text-align-last`和``text-indent''來處理屬性，從而使設計師對文本呈現進行細粒度的控制。
• >
Web排版的優勢是藉鑑了屬於印刷版本的數百年傳統的知識。同樣，這種傳統具有IT標準的最佳實踐和卓越標準，使Web版式被要求實現。
• >但是，作為交流媒介的網絡帶有其自身的特殊性。如此之多，以至於我們被認為是從印刷到網絡排版的無縫移動是一個艱難的呼籲。傑森·聖瑪麗亞（Jason Santa Maria）在他的網絡排版書中，
>

>印刷書籍是一種靜態格式。從設計師的最初佈局到新聞床，倉庫，書架和您的手之旅，該書的輸出不會改變。它完全按照設計師的構思。

涉及網絡時，根據許多因素，例如各種設備，屏幕分辨率，個性化的瀏覽器設置等，相同的網站可能會大不相同。解釋…

…可能會給我們一個印象，即類型太小，其他人可能會導致我們在屏幕外錯過一些重要的東西，而其他人則幾乎完全不可能查看該網頁。

>

>也就是說，“網絡是文字的最佳場所。”，正如蒂姆·布朗（Tim Brown）在關於通用版式的演講中所說的那樣。可以“搜索，複製，翻譯，鏈接到其他文檔，可以打印，很方便，可以訪問”。

>網絡的靈活性並不意味著放棄控制。相反，作為網頁設計師，我們仍然可以對我們投入工作的任何內容做出明智的選擇，而文字也不例外。文本元素的佈局方式，它們的顏色，大小，字體，所有這些以及更多傳達網站的核心信息和品牌。

要操縱網絡上的文本外觀，我們選擇的主要工具是CSS。 我將要在這篇文章中介紹的CSS屬性可以在CSS文本模塊規範中找到。

這個模塊描述了CSS的排版控件；也就是說，

控制源文本翻譯為

>的CSS的功能 格式化的，包裹的文本。

換句話說，CSS文本模塊使用css。

>

構成基本文本或單詞的基本單元，以及允許在給定文本中打破一個單詞的位置，這在很大程度上取決於網站中使用的語言規則。因此，重要的是在HTML文檔中聲明此信息（通常在元素的lang屬性中）。

>在這裡，我不會討論以下兩個主題：

>

字體，即字符的視覺表示，即字形及其屬性； 與文本裝飾有關的CSS的功能，例如下文，文本陰影和重點標記。

如果您很好奇，您會在CSS字體模塊3級和CSS文本裝飾模塊3級中找到有關字體和文本裝飾屬性的最新文檔。 >

>操縱字母案例
>有時可能需要以大寫字母（例如名字和姓氏）顯示文本元素。 CSS通過文本轉換屬性使我們控製字母案例。
文本轉換屬性的默認值無，也就是說，對字母案例沒有影響。 >

大寫

>如果您希望每個單詞的首字母在大寫中顯示在所有其他字母的外觀（在HTML文檔中的情況下如何），則使用該值資本化將實現這一目標：>

html：

CSS：

請注意，大寫如何不遵循標題案例約定：實際上，上面示例中的所有第一個字母都出現了大寫，包括“ in”一詞。打算遵循有關標題的文學慣例的作者將需要在源文本中手動操縱字母。

大寫值

如果您的目標是在大寫中顯示所有字母，則無論他們在HTML文檔中的情況如何

html：

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

CSS：

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

小寫值

使用值小寫將導致所有字母以小寫顯示。自然，這不會影響原始源文檔中已經小寫字母的字母的外觀。 >

html：

CSS：

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

全寬度值

>規范增加了一個新的值，全寬度。該值將字符限制為在正方形內出現的字符，就好像它是一個意識形態的字符一樣，例如日語，中文等。這有助於用意識形態字符對齊拉丁字符。

並非所有字符都具有相應的全寬表格，在這種情況下，字符不會受到全寬度值的影響。

html：

CSS：

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>

當應用全寬時，Firefox中的角色是什麼樣子：h2 { text-transform: lowercase; }

進一步說明

瀏覽器對文本轉換屬性的支持非常好。實際上，所有主要的瀏覽器都支持它。

>唯一的例外是全寬值，目前僅在Firefox中起作用。可以理解的是，考慮到全寬的可能性有可能在規格的候選推薦階段被丟棄的風險。 此外，我注意到Firefox（v.39）與其他主要瀏覽器之間存在很小的不一致性，以使詞彙上的大寫價值。

這就是Firefox中的外觀：

請注意連字符後的第一個字母如何被大寫。另一方面，下面的文本與Chrome中顯示的文本相同：

在這種情況下，連字符之後的字母也不例外。他們還在大寫字母中展示。我在所有其他主要瀏覽器的最新版本中都觀察到了同樣的行為，除了上述Firefox。 最後，請注意級聯！如果將文本轉換屬性設置在容器元素上，則其所有子元素都會繼承其值。為避免不希望的結果，請將子元素的文本轉換屬性值重置為無。

查看文本轉換屬性值的演示。

如何處理白空間

按下選項卡鍵，空格鍵或強迫某些文本折斷下一行（使用> enter鍵或
tag），您可以在源中創建空白空間文檔。

默認情況下，瀏覽器的空間崩潰序列倒入一個空間，刪除了線路斷裂，並且文本包裝線條以適合其容器。這對我們來說很方便，因為它允許我們縮進和單獨的文本塊，以使我們的源文檔可讀和可維護，而不會影響瀏覽器中的內容的顯示方式。

> 但是，如果這不是您的目標，該怎麼辦？例如，您想保留在HTML文檔中創建的空白空間。一個常見的情況是，當您編寫一些文本時，該文本旨在顯示為正確的縮進代碼段。或者，您希望將一些文本顯示在一行中，而不會破裂。 在這種情況下，當您打算覆蓋瀏覽器的默認行為時，White Space屬性提供了一些有趣的選項。

正常關鍵字將瀏覽器重置為默認行為：所有額外的空白空間都折疊成一個字符，並在到達容器邊緣時包裹著線條。

>

pre值

> PRE關鍵字允許您通過保留源文檔中存在的所有白色空間和強制新線條來顯示文本。在溢出容器時，文本不會包裹成新線路。

>

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

如果使用選項卡來創建空白，則可以通過將其設置為整數值來控制其大小。

tab-size是一個具有不一致的瀏覽器支持的屬性，但是如果您確實無法忍受默認選項卡的字符長度，則這裡有一個覆蓋所有基礎的polyfill。

pre-wrap值

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

>假設您希望源文檔中的白色空間保存在瀏覽器顯示器中。但是，您還想讓線條包裹在其到達容器邊緣時。

>預包上的關鍵字將幫助您獲得所需的結果。

請注意，瀏覽器中顯示的每條線如何反映源代碼中的強制斷裂，儘管容器有足夠的空間可以安裝更多文本：

>

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

但是，

縮小瀏覽器屏幕，您會注意到包裹的線條以適合其容器。

預先線值

>對於白空間屬性的最終有趣值是預上線。在一定程度上，它將空間序列倒入一個空間並允許包裹，它的行為就像正常。但是，如果HTML文檔中存在新的線字符或
標籤，則將其保存在瀏覽器顯示中。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

>試用PER，PER-RAP和PRE-LINE關鍵字的Codepen演示。

nowrap value

Nowrap也許是最著名的白色空間價值。您的設計是否要求一塊內聯內容不應包裝？使用白色空間：nowrap;在您的元素上可以解決問題。

>

上面的

是鏈接，後跟»符號。將此字符落到下一行，例如在流體網絡佈局中，這是不可取的。

在這種情況和類似情況下（例如，想想圖標），NowRap值非常方便。

>

> Sara Soueidan在CODROPS CSS參考中帶給我們另一個有趣的用例。薩拉指出，白色空間屬性可以應用於任何內聯內容，包括圖像。 >

>通過防止圖像包裝並強迫它們在其容器內的一條線上顯示在可滾動元素中的圖像的水平列表中，它有時與值nowrap一起使用。

>我通過使用白色空間：nowrap創建基本的jQuery旋轉木製來放大了這一建議。這是演示：

>請參閱codepen上的sitepoint（@sitepoint）上的圖像旋轉曲線上的文字包裝屬性。

控制單詞內部的線路斷裂

有時，

有時會出現設計外觀，因為一個長詞無法將其包裹在下一行，從而溢出了其容器。博客評論中的長URL或一些用戶生成的長詞是常見的情況。

>以下CSS屬性旨在為我們在網絡上處理長單詞的控制量。

> wrap/Overflow-wrap屬性

如果白空間屬性允許文本包裝，則

Overflow-wrap屬性（以前稱為Word-in-trap，完全支持並在所有主要瀏覽器中工作）會生效。它可以具有兩個值之一：正常和斷開字。

>

通過使用正常值，單詞在允許的斷點，例如，空格，連字符等。

break-word值允許單詞內的任意突破點，如果該行在某些其他可接受的點上不能折斷。

下面的圖片顯示了一個溢出其容器的長詞的顯示：>

>讓我們設置Overflow-wrap屬性，以及為遺產目的，詞包屬性屬性，將其設置為brake-word值：

…現在，長詞的顯示已分為多行以適合可用空間。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

連字符屬性

分解長言都很好。但是，結果文本可能會使讀者感到困惑。一個更好的選擇是將單詞分解為下一行時的連字符。這樣，對於讀者來說，他們正在看一個單詞將多行包裹在多行上。為了實現這一目標，CSS提供了連字符屬性，您可以與Word-wrap結合使用：break-word。

更具體地說，連字符屬性的自動值使您能夠在單詞破裂到下一行的點上顯示連字符，如果文檔的語言規則允許它或HTML源中存在連字符。為此，請確保將lang屬性設置為HTML文檔中所需的語言：

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

>您還可以防止顯示連字符。在這種情況下，將連字符的屬性設置為無：

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

>此外，如果單詞在標記中和文本包裹在下一行中，則可以在單詞中的線斷裂上顯示連字符字符。這是用手冊的值來完成的：

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

在供應商前綴的幫助下，瀏覽器對連字符屬性的支持在所有主要瀏覽器上都很好，儘管並非沒有一些略有不一致。 Chrome（v.44）和Opera（V.30）的最新版本在寫作時不支持屬性值自動。

在Codepen上查看上述示例

操縱單詞和字母之間的空間

>或多或少可讀取的文本通常取決於許多因素。在某些情況下，增加或減少每個單詞之間的空間或每個字母之間的空間，即跟踪

，帶來了巨大的改進。

> CSS提供單詞間距和字母間隔屬性，以控制單詞和字母之間的間距的外觀。

>

單詞間隔屬性

以下是單詞間隔屬性的值：

• 正常
• >百分比

正常顯示字母之間的默認空間。空間的量取決於所使用的字體或瀏覽器。

>

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

除了字體或瀏覽器定義的默認間距外，

允許您添加詞間間距。

>

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

>百分比的工作方式與相同，但使用百分比值。我尚未發現任何瀏覽器實施情況，並且百分比有被從規範的未來草案中刪除的風險。

>

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

字母間隔屬性

>您可以將字母間隔屬性設置為兩個值之一：normal或。

使用普通葉在字母之間的默認字體間距。它還重置先前指定為其默認值的任何字母間隔長度。例如，如果您在父元素上指定了1em的字母間隔值，但希望在子元素上顯示默認值，則正常是您的朋友。

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

值是測量的單位，例如PX或EMS，除了字體已提供的默認間距外，您還可以增加字母之間的間距。

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>

更多詳細信息

>單詞間隔不僅適用於單詞。您可以在任何類型的內聯或內聯塊內容上使用它。

>

>另外，您也可以對單詞間隔和字母間隔進行動畫。但是，在字母間距上使用CSS過渡表明，當前版本的Firefox（V.39）未識別正常值。為了克服這一點，只需用0em替換正常。

這是一個使用單詞間隔和字母間隔的演示，其中包含動畫文本：>

>請參閱codepen上的sitepoint（@sitepoint）的CSS字母間隔和單詞間隔屬性的筆

最新的CSS文本對齊選項

>文本 - 空地屬性已經存在了一段時間。它控制在塊容器中如何對齊文本和圖像等內聯內容。 kewings左右與左右與右側的內聯內容對齊。將文本對准設置為中心將內容對齊到其容器的中心。最後，合理的關鍵字為內容合理，使每行的長度相同（除了最後一行，如果它不足以達到其容器的邊緣）。

規格添加了兩個新值，這些新值在國際化網站上使用左右（RTL）語言系統：啟動和結束。

對於從左到右（LTR）的讀取器，它們分別對應於左右與左右相對應。當網站使用RTL語言時，start對應於右和末端對應於左。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

應用文本校友：與內聯元素的匹配父母確保孩子繼承與父母相同的對準。繼承的開始或結束值是根據父語言方向計算的，導致左或向右輸出。 >

>文本align-last屬性

CSS的新

也是文本偏見的屬性。此屬性控制段落結束前或
標籤之前的>文本的最後一行的對齊。它具有與文本校友相同的關鍵字值，除了auto，這是默認值。自動值允許您根據元素的文本對齊屬性的值（設置）對齊文本的最後一行。如果沒有應用文本align屬性，則文本默認值為start的值。 > 在撰寫本文時，瀏覽器對文本式持久的支持很差。因此，我認為應該很少使用它。 >

查看一個Codepen演示，顯示這些功能 縮進文本

縮進一行文本，通常是段落中的第一行，您經常在網站上經常遇到。取而代之的是，將一個空線作為段落之間的分離的常見視覺標記。 > 儘管如此，

有時會使用段落的第一行來創建適合特定設計的經典外觀。

如果通過此技術增強了您的設計，CSS提供了文本性屬性。讓我們考慮可能的價值。

通常使用PX或EM單元設置長度的值：>

使用百分比值設置一個百分比：

每條線的值在塊容器內以及強制折疊後的每條線內的外觀，即，即通過擊中

> Enter

鍵或在HTML源中插入
標籤。但是，柔軟的包裹斷裂後的第一行的顯示，即，將其包裹到下一行以適合其容器的文本不受影響。

>

懸掛的值導致所有線路以外的第一行顯示為縮進。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

>每個線和懸掛值都是實驗值，在編寫時尚未在任何瀏覽器中實現。

查看此演示以查看“動作”中的文本

結論

> CSS在網絡文本操縱方面一直在取得巨大進展，儘管期望做更多。除了對一些最新屬性的粗略瀏覽器支持外，例如，如果CSS提供了Kerning功能，即有機會在給定單詞中操縱兩個字母之間的距離。 在這篇文章中，我深入研究了許多CSS屬性，這些屬性控制了網絡上文本的格式格式，線條包裝和對齊。可以隨意使用演示進行實驗。

我期待您的反饋！

>

>經常詢問有關CSS屬性的問題（常見問題解答）

>如何使用CSS屬性來控制Web版本？您可以調整字體尺寸，字體家族，線高，文本對齊，文本顏色等等。例如，要更改字體大小，您可以使用“字體大小”屬性並指定像素，EMS或百分比中的大小。同樣，要更改字體系列，您可以使用“字體家庭”屬性並指定字體名稱。請記住要包含後備字體，以防萬一首選在用戶的系統上不可用。

>'text-align'屬性在css？

中的作用是什麼。 'CSS中的屬性用於對齊塊元素的內聯內容。它可以採用“左”，“右”，“中心”或“正當”之類的價值。例如，“文本校友：中心”將以其包含元素的形式集中文本。當您想控制標題，段落或其他含文本的元素的文本對齊時。 CSS中的白空間屬性用於控制元素內部的白色空間如何處理。它可以採用諸如“正常”，“ nowrap”，“ pre”，“ pre-line”或“ pre-pre-trap”之類的值。例如，“白空間：nowrap”將阻止文本包裹到下一行，使所有文本出現在一行中。

>

如何使CSS中左側的列表項目對齊？

我如何使用CSS來控製文本的線高度？ 'CSS中的屬性用於控製文本行之間的空間。您可以在絕對單元中指定線高，例如像素，相對單元（例如百分比（例如百分比）或無單位數字，這些數字乘以當前字體大小以設置線路高度。例如，“線高：1.5”將線高度設置為當前字體尺寸的1.5倍。

>如何更改CSS中的文本顏色？您可以以不同的方式指定顏色，例如其名稱（例如“紅色”），十六進制值（例如'＃ff0000'），rgb值（例如'rgb（255，0，0，0）'）或HSL值（例如'HSL（0，100％，50％）'）。 CSS中的“字體重量”屬性用於使文本粗體。您可以將其值設置為“粗體”或100個倍數中的100至900個數字，其中較高的數字對應於大膽的文本。例如，'font-weight：bold'或'font-權重：700'將使文本大膽。

我如何在CSS中迭代文本？ CSS中的屬性用於斜體文本。您可以將其價值設置為“斜體”，以使文本斜體。例如，“字體風格：斜體”會斜體化文本。

>我如何在CSS？

中下劃線文本？您可以將其價值設置為“下劃線”以強調文本。例如，“文本解釋：下劃線”將下劃線。字母之間的空間。您可以以像素或EMS（例如EMS）等絕對單元（例如像素或相對單元）指定字母間距。例如，“字母間隔：0.1EM”將增加字母之間的空間的0.1倍當前字體大小。

以上是CSS屬性控製網絡版式的詳細內容。更多資訊請關注PHP中文網其他相關文章！