2016-09-04 16 views
1

引用ジェネレータのWebサイトで作業しています。私はブートストラップを追加し、CSSコードでは、HTML要素の背景色を青緑のミックスシェードに設定する部分があります。ブートストラップはCSSコードをオーバーライドすることを決定し、コンテンツの背景色を持つページの部分を白に設定します。 あなたのCSSがbootstrap.cssファイルをロードされていることを確認してください:なぜ、どのように私はそれが背景色を変更するブートストラップ

var quotes = [ 
 
    [ 
 
     "To be prepared for war is one of the most effectual means of preserving peace.", 
 
     "George Washington" 
 
    ], 
 
    [ 
 
     "One man with courage is a majority.", 
 
     "Thomas Jefferson" 
 
    ], 
 
    [ 
 
     "National honor is a national property of the highest value.", 
 
     "James Monroe" 
 
    ], 
 
    [ 
 
     "The only thing we have to fear is fear itself.", 
 
     "Theodore D. Roosevelt" 
 
    ], 
 
    [ 
 
     "Ask not what your country can do for you, but what you can do for your country.", 
 
     "John F. Kennedy" 
 
    ] 
 
    
 
]; 
 
var currentQuote = 0; 
 
function showNewQuote() { 
 
\t if (currentQuote >= 5) { 
 
\t \t currentQuote = 0; \t 
 
\t } 
 
\t var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]]; 
 
\t document.getElementById("header").innerHTML = "\"" + Quote[0] + "\""; 
 
\t document.getElementById("paragraph").innerHTML = Quote[1]; 
 
\t currentQuote++; 
 
}
html { 
 
\t background-color: #33cccc; 
 
} 
 

 
#header, #paragraph { 
 
\t font-family: sans-serif; 
 
\t 
 
} 
 

 
#header { 
 
\t padding-top: 10%; 
 
\t font-size: 60px; 
 
} 
 

 
#paragraph { 
 
\t padding-left: 80%; 
 
\t font-size: 20px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Random Quote Generator</title> 
 
    <script src = "script.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
\t <div class = "container"> 
 
    <h1 id="header">Click the button to generate a quote!</h1> 
 
\t <p id="paragraph"></p> 
 
\t <button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button> 
 
\t </div> 
 
</body> 
 
</html>

答えて

1

オプション1になりたいものに私の背景色を保つことができます。

var quotes = [ 
 
    [ 
 
     "To be prepared for war is one of the most effectual means of preserving peace.", 
 
     "George Washington" 
 
    ], 
 
    [ 
 
     "One man with courage is a majority.", 
 
     "Thomas Jefferson" 
 
    ], 
 
    [ 
 
     "National honor is a national property of the highest value.", 
 
     "James Monroe" 
 
    ], 
 
    [ 
 
     "The only thing we have to fear is fear itself.", 
 
     "Theodore D. Roosevelt" 
 
    ], 
 
    [ 
 
     "Ask not what your country can do for you, but what you can do for your country.", 
 
     "John F. Kennedy" 
 
    ] 
 
    
 
]; 
 
var currentQuote = 0; 
 
function showNewQuote() { 
 
\t if (currentQuote >= 5) { 
 
\t \t currentQuote = 0; \t 
 
\t } 
 
\t var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]]; 
 
\t document.getElementById("header").innerHTML = "\"" + Quote[0] + "\""; 
 
\t document.getElementById("paragraph").innerHTML = Quote[1]; 
 
\t currentQuote++; 
 
}
<script src = "script.js"></script> 
 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<style> 
 
body { 
 
\t background-color: #33cccc; 
 
} 
 

 
#header, #paragraph { 
 
\t font-family: sans-serif; 
 
\t 
 
} 
 

 
#header { 
 
\t padding-top: 10%; 
 
\t font-size: 60px; 
 
} 
 

 
#paragraph { 
 
\t padding-left: 80%; 
 
\t font-size: 20px; 
 
} 
 
    </style> 
 
<body> 
 
\t <div class = "container"> 
 
    <h1 id="header">Click the button to generate a quote!</h1> 
 
\t <p id="paragraph"></p> 
 
\t <button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button> 
 
\t </div> 
 
</body> 
 
</html>

オプション2:

var quotes = [ 
 
    [ 
 
     "To be prepared for war is one of the most effectual means of preserving peace.", 
 
     "George Washington" 
 
    ], 
 
    [ 
 
     "One man with courage is a majority.", 
 
     "Thomas Jefferson" 
 
    ], 
 
    [ 
 
     "National honor is a national property of the highest value.", 
 
     "James Monroe" 
 
    ], 
 
    [ 
 
     "The only thing we have to fear is fear itself.", 
 
     "Theodore D. Roosevelt" 
 
    ], 
 
    [ 
 
     "Ask not what your country can do for you, but what you can do for your country.", 
 
     "John F. Kennedy" 
 
    ] 
 
    
 
]; 
 
var currentQuote = 0; 
 
function showNewQuote() { 
 
\t if (currentQuote >= 5) { 
 
\t \t currentQuote = 0; \t 
 
\t } 
 
\t var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]]; 
 
\t document.getElementById("header").innerHTML = "\"" + Quote[0] + "\""; 
 
\t document.getElementById("paragraph").innerHTML = Quote[1]; 
 
\t currentQuote++; 
 
}
body { 
 
\t background-color: #33cccc !important; 
 
} 
 

 
#header, #paragraph { 
 
\t font-family: sans-serif; 
 
\t 
 
} 
 

 
#header { 
 
\t padding-top: 10%; 
 
\t font-size: 60px; 
 
} 
 

 
#paragraph { 
 
\t padding-left: 80%; 
 
\t font-size: 20px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Random Quote Generator</title> 
 
    <script src = "script.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
\t <div class = "container"> 
 
    <h1 id="header">Click the button to generate a quote!</h1> 
 
\t <p id="paragraph"></p> 
 
\t <button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button> 
 
\t </div> 
 
</body> 
 
</html>

(私もあなたのCSSにhtmlからbodyに変更を加えたことに注意してください: !importantキーワードを使用します)

+0

感謝を。 5分が経過するまで、これを答えとしてマークすることはできませんが、クールダウンが終了したらマークします。それは今完全に動作します –

+0

確かに:)あなたは歓迎です – Dekel

0

上記のように、最初にブートストラップをロードしてからCSSをロードします。 !importantを使用する代わりに、ブラウザのdev-tools(Chromesをお勧めします)を使用して、ブートストラップの背景色のセレクタを探すことができます。 その特異性はほとんどの場合非常に隠れており、あなたのスタイルにはより高い特異性を加えなければなりません。

詳細については、MDNでこの記事を読む:それは働いた MDN CSS Specificity