如何設計父元素和文本元素之間的級聯字體樣式關係

這是一件非常基本的事情，但對我來說總是顯得很奇怪。我開發內容管理系統的網站，我不能總是可靠地期望內容作者使用正確的標記。很多時候，他們甚至不知道p標籤是什麼。如何設計父元素和文本元素之間的級聯字體樣式關係

所以我們假設我有一個描述元素應該以某種方式進行樣式化，與我的全局段落樣式分開。它的內部將是文本，理想情況下是段落標記，但是誰知道，也許它不會。要解決這個問題，我的風格同時添加到父和段落標記：

.description { 
     font-family: $LatoLight; 
     color: white; 
     font-size: 16px; 
     line-height: 1.25; 

     p { 
      font-family: $LatoLight; 
      color: white; 
      font-size: 16px; 
      line-height: 1.25; 
     } 
    }

這似乎是但卻難免重複，矯枉過正，但如果我只是樣式添加到p，筆者不得使用AP標記，如果我只將樣式應用於父項，全局或其他段落樣式將超過父項的樣式。我通常也會用錨標記顏色做同樣的事情。有時我可以用後端代碼強制執行標籤，但我真的對純粹造型架構的解決方案更感興趣。

其他人做什麼？這是一個糟糕的策略嗎？迄今爲止，上述造型對我來說是最可靠的。

來源

2017-09-14 Russell Strauss

你可以用這個嘗試：

.description { 
    font-family: $LatoLight; 
    color: white; 
    font-size: 16px; 
    line-height: 1.25; 

    *{ 
     font-family: inherit; 
     color: inherit; 
     font-size: inherit; 
     line-height: inherit; 
    } 
}

來源

2017-09-14 15:46:46

你能安全地假設（或正在使用的任何WYSIWYG）的作者將在所有插入一個元素？不管是p還是div, span, blockquote, article, main, section基本上是最常用的包含文字的元素。

有幾個選項是：

確保輸出總是進入一個容器ID和/或類（使它的樣式很難重寫）。
確保什麼都所見即所得的編輯器（如果使用一個）將只輸出可控元件少數
請作者只使用元素

真的沒有很多HTML元素一小撮無論如何選擇。

的CSS：

.description, 
.description p, 
.description span, 
.description td, 
.description article, 
.description main, 
.description blockquote, 
.description section, 
.description any_selector_here, 
.description div { 
    font-family: $LatoLight; 
    color: white; 
    font-size: 16px; 
    line-height: 1.25; 
}

這樣，你只寫你的風格的一次。

來源

2017-09-14 21:05:32

如何設計父元素和文本元素之間的級聯字體樣式關係

回答

相關問題