2016-05-20 3 views
1

私はCSSとHTMLを学習しています。テンプレートをローカルに作成していましたが、別のローカルCSSファイルを初めて作成しました。このファイルにはボディはスタイルされませんがdivはありました。 HTML本体ではなく、別のCSSファイルで動作し、すべて正常に動作しました。別のCSSファイルを使用しても、コードの実行に影響はありますか?

初めて、div要素をスタイリングしましたが、体がnot.when個別のCSSファイルを作成した:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Quote Machine</title> 
    <script src="scripting.js"></script> 
    <link href="style.css" rel="stylesheet" type="text/css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
</head> 
<body> 
<div>hello</div> 
<style> 
</style> 
</body> 
</html> 

<!-- separate CSS file--> 
    body { 
     background-color:black; 
    } 


div { 
    background-color:yellow; 
} 

第二の時間を必要に応じてCSSをHTMLファイルの中にあったとき、すべてがスタイリングされました

<!DOCTYPE html> 
<html> 
<head> 
    <title>Quote Machine</title>   
    <script src="scripting.js"></script> 
    <link href="style.css" rel="stylesheet" type="text/css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
</head> 

<body> 
<div>hello</div> 

<style> 

body { 
    background-color:black; 
} 

div { 
    background-color:yellow; 
} 

</style> 

</body> 
</html> 

答えて

6

は、あなたはそれがデフォルトのブートストラップのスタイルを上書きするためブートストラップの後に、あなたのスタイルシートを含める必要があります。

最初の例では、スタイルシートをロードしてから、ブートストラップスタイルシートをロードしています。

2番目の例では、スタイルシートをロードしてからブートストラップスタイルシートを読み込み、ブートストラップスタイルシートをhtmlで宣言したスタイリングで上書きします。

+0

@M Pありがとう – Adam

1

Mさんの回答に加えて、2番目の例では、要素をタグの子タグとして使用することは適切なhtmlではありません。それらの要素はセクションに属します。

1

あなたのブートストラップファイルの前にstyle.cssがcomimgです。 これは逆のである必要があります。あなたのスタイルが内部的に動いているのは、domが最後にコンパイルされ、重要ではない外部スタイルを上書きするからです。

4RD優先

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

3優先

<link href="style.css" rel="stylesheet" type="text/css"> 

2優先

<head> 
<style></style> 
</head> 

第一優先

<div style="color:red;"></div> 

この順序ですべての作業。

希望します。

関連する問題