誤區特異性基金會5

我有關於一個嚴重的問題（可能會變成是我完全不瞭解，但！）壓倒一切的使用基礎5.誤區特異性基金會5

目前我有當文字顏色此代碼：

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
     <meta charset="utf-8"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
     <title>Foundation | Welcome</title> 
     <link rel="stylesheet" href="css/foundation.css"/> 
     <script src="js/vendor/modernizr.js"></script> 
     <link href="http://fonts.googleapis.com/css?family=Oswald|Lato:300,400,300italic,400italic" rel="stylesheet" type="text/css"> 
     <link href="styles.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <section class=""> 
      <div class="row text-center"> 
       <div class="columns medium-12"> 
        <h1>Heading 1</h1> 
        <h2>Heading 2</h2> 
        <h3>Column title</h3> 
        <h4>Heading 4</h4> 
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       </div> 
      </div> 
     </section> 
     <section> 
      <div class="row text-right"> 
       <div class="columns medium-12"> 
        <h1>Heading 1</h1> 
        <h3>Column title</h3> 
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       </div> 
      </div> 
     </section> 
     <section style="background-color: #ff9900;"> 
      <div class="row"> 
       <div class="columns medium-12"> 
        <h1>Powerful Distribution<br>Networks</h1> 
        <h3>Road, Air, Rail or Sea<br>We've got it covered!</h3> 
        <p>Providing 1st class logistics services worldwide. This is trucking powerful niche template which will show your users what they can get from some very simple classes and typography styling!</p> 
       </div> 
      </div> 
     </section> 
     <section class=""> 
      <div class="row"> 
       <div class="columns medium-12"> 
        <h3>Column title</h3> 
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       </div> 
      </div> 
     </section> 
     <script src="js/vendor/jquery.js"></script> 
     <script src="js/foundation.min.js"></script> 
     <script> 
     $(document).foundation(); 
    </script> 
    </body> 
</html>

所有非常標準爲止。

現在我想要做的是爲不同的部分使用不同的彩色背景，然後在那些部分中的任何文本中我應該能夠設置它的顏色。

在其中一個部分放置一個類，並給它一個背景顏色說＃ff9900工作正常，但如果我嘗試然後找到一種方法將這些部分內的文本設置爲一種顏色，然後我繼續停止因爲標準的基礎框架已經設置了這種顏色。

我需要能夠製作不同的部分不同的顏色，然後還有任何內部的文本也有一定的顏色，但目前我嘗試的大多數東西都不起作用。我知道這是一個特殊問題，但似乎無法讓任何事情順利進行。我可以很容易地更改唯一的東西是p標籤，但是我希望能夠輕鬆地更改節中的所有文本。

如果我拿出基礎CSS樣式表，以便頁面只是使用標準的HTML代碼而沒有從外部設置的CSS然後如果我說增加了一個類到一個部分說class =「black」（壞我知道;-)），然後在頁面中放置一個css樣式標籤，該樣式聲明爲可以一次性設置背景顏色和該部分的文本顏色。將基礎樣式表放在那裏意味着如果我這樣做，它只會覆蓋該節中的p標籤，而我希望能夠設置該節中的所有文本。

這在標準的HTML將工作：

<style type="text/css"> 
<!-- 
.black { 
background: #000; 
color: #fff; 
} 
--> 
</style> 

<section class="black"> 
      <div class="row text-center"> 
       <div class="columns medium-12"> 
        <h1>Heading 1</h1> 
        <h2>Heading 2</h2> 
        <h3>Column title</h3> 
        <h4>Heading 4</h4> 
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       </div> 
      </div> 
     </section>

如果我這樣做與添加到網頁雖然那麼只有p標籤將被置爲白色，沒有任何標題標籤的基礎樣式。

我相信這是與基金會已設置顏色的事實有關：＃222;到其樣式表中的所有標題，並且這是超越我所做的任何事情。

因此，我是否可以安心地從基金會那裏拿出這種風格的聲明，還是會讓我更加頭疼？

任何幫助，這將不勝感激。

非常感謝，

馬克

來源

2015-06-17 Mark Bowen

一件也許有助於說明我的意思是，一個標準的HTML文檔中，如果我是一類添加到一個的部分標籤，然後我可以僅僅使用這一個類來設置該部分中文本的背景顏色和顏色。使用Foundation我無法做到這一點，就好像Foundation完全接管了大部分文本標籤，特別是標題標籤。 –

你能向我們展示你的CSS或製作小提琴嗎？ –

對不起。我已經更新了我的原始問題，希望能夠展示我的意思是更好一點。非常感謝你看看這個。 –

這是因爲ZURB基金會已明確定義字體顏色爲頭條新聞，但不是段 - 色段是從身體繼承。

如果您通常爲該部分定義了字體顏色，那麼您將更改段落的顏色，因爲它比body更具體，並且會被段落繼承。儘管爲標題準確定義的顏色比標題所在的部分的顏色更具體，並且不會被繼承和重寫。

如果你想改變標題的顏色，你必須專門做標題。如何實現這一點還有更多的方法。

1）您使用的ZURB基金會分佈CSS文件只

在這種情況下，你沒有任何其他的可能性比你的CSS直接改變它。

CSS

.black { 
    background: black; 
    color: white; 
} 

.black h1, .black h2, .black h3, .black h4, .black h5, .black h6 { 
    color: white; 
}

CodePen Example

2）您使用的ZURB基金會項目與SCSS文件

在這裏，你有兩個posibilities。如果您使用的是_settings.scss文件，則可以將變量$header-font-color重新定義爲任何您想要的。如果您使用繼承值，則標題行爲與段落的行爲完全相同 - 顏色從爲整個部分定義的顏色繼承。

如果你不想使用設置文件，你可以在你想要的樣式定義的任何地方放置redefiniton，但是這個文件是變量重定義的標準位置。

SCSS

$header-font-color: inherit; 

.black { 
    background: black; 
    color: white; 
}

另一種方案是，當然，自己寫SCSS風格來實現這一行爲。

SCSS

@each $color, $bg-color in (white, black), 
          (silver, green), 
          (yellow, blue) { 

    .#{$bg-color} { 
    background: $bg-color; 
    color: $color; 

    h1, h2, h3, h4, h5, h6 { 
     color: $color; 
    } 
    } 
}

編譯CSS

.black { 
    background: black; 
    color: white; 
} 

.black h1, .black h2, .black h3, .black h4, .black h5, .black h6 { 
    color: white; 
} 

.green { 
    background: green; 
    color: silver; 
} 

.green h1, .green h2, .green h3, .green h4, .green h5, .green h6 { 
    color: silver; 
} 

.blue { 
    background: blue; 
    color: yellow; 
} 

.blue h1, .blue h2, .blue h3, .blue h4, .blue h5, .blue h6 { 
    color: yellow; 
}

CodePen example

來源

2015-06-18 08:59:32

如果只使用.css文件，我認爲你的意思是.black h1，黑色h2等等。 – Neps

@Neps當然你是對的，謝謝你的糾正。很長一段時間沒有寫簡單的CSS :-) –

誤區特異性基金會5

回答

相關問題