CSS樣式-字體

Question

我試圖將設計復制到HTML / CSS。 問題是站點內的文本在兩種不同的顏色，多種字體大小和不同的字體粗細之間變化。 文本也可以是獨立的，也可以是一行上的多種類型。

我在下面提供了一個示例。這些字體樣式在整個網站上都使用。

所以我的問題。 用CSS / HTML設置樣式的“正確”方法是什么？ 目前，我對顏色，尺寸和重量使用了多個類別。似乎遍地都是。 第二個問題是某些元素需要獨立存在。 結束一行的正確方法是什么？
或將其變成塊狀元？

提前致謝..

替代文字http://213.40.100.100/random/01.jpg

Answer 1

所以我的問題。 用CSS / HTML設置樣式的“正確”方法是什么？ 目前，我對顏色，尺寸和重量使用多個類別。

是的 不是那樣的

這種方法的問題是要更改一個元素的樣式，您必須更改標記而不是CSS。 另外，正如您已經發現的那樣，它會使您的標記快速混亂。

“正確”的方法是為每個常規塊都具有一個類，即使它在許多方面看起來與另一個塊相同。

包含“ Royal Kostas公寓，馬略卡島”的塊可能與包含“ From Manchester”的塊具有相同的字體和大小，但這並不意味着您應該嘗試從CSS中刪除重復的代碼。 許多人試圖找到創建DRY CSS文件的方法，但這只會在市場營銷/設計部門決定減小“ From Manchester”的字體大小而不是其他字體時引起痛苦。

一個比較棘手的選擇是在樣式完全相同的地方，例如“ Royal Kostas Apartments，Majorca”和“連續7晚基於4個共享的3 *自助餐”。 我仍然認為它們應該是完全相同樣式的不同類，但這是個人選擇。

我傾向於嚴格遵循該准則：如果使用相同的數據重新設計網站，需要更改標記，那么您做錯了。

Answer 2

您不想基於視覺樣式來命名CSS類。 圍繞樣式使用的功能或區域設計CSS。 在附加的視覺效果中，您可以創建TabHeader樣式，Price樣式（對於左列），Details樣式，MoreInfo樣式。 你明白了。

由於字體顯然都不同，因此您將明顯地定義font屬性，以及字體的粗細，顏色，樣式等。使其自成體系，以后就可以減少麻煩。