2016-04-27 9 views
0

Da ich Bootstrap und Schrift awesome meine HTML-Datei hinzugefügt, erledigt die meisten der CSS vor nur (Hintergrund-Farbe, Schriftart google) verschwundenHinzufügen Bootstrap & Font awesome Ruinen css-warum?

<head> 
    <meta charset="utf-8"> 
    <title>Games</title> 
    <link rel="stylesheet" href="main.css"> 
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

    <link href='https://fonts.googleapis.com/css?family=Orbitron:400,500' rel='stylesheet' type='text/css'>  
    <link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'> 
</head> 

jemand tut, warum? Vielen Dank!!

+0

Sie versuchen, die Reihenfolge zu ändern? – aldanux

Antwort

0

Verschieben Sie Ihre main.css Dateideklaration zu nach Ihre Bootstrap und font-awesome Deklarationen. Da CSS Cascading ist, überschreiben die späteren Stile Ihre benutzerdefinierten Stile.

<head> 
    <meta charset="utf-8"> 
    <title>Games</title> 
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

    <link href='https://fonts.googleapis.com/css?family=Orbitron:400,500' rel='stylesheet' type='text/css'>  
    <link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'> 

    <link rel="stylesheet" href="main.css"> 
</head> 
+0

Wenn der Bootstrap CSS eine höhere Spezifität hat, hilft eine Änderung der Reihenfolge nicht ein wenig. – GolezTrol

+0

@GolezTrol Im Allgemeinen verwendet Bootstrap aus diesem Grund '! Wichtig' nicht. – Steve

+1

Ich rede nicht darüber. Ich sagte [Spezifität] (https://css-tricks.com/specifics-on-css-specificity/), was viel mehr ist, als nur "! Wichtig" hinzuzufügen. (Und du solltest niemals '! Wichtig' trotzdem verwenden) – GolezTrol