Warum wird meine externe CSS nicht angewendet?

Ich versuche und Beispiel von w3school mit Tabs, mein Problem ist, dass wenn ich den Css-Teil in eine andere Datei (mit Erweiterung .ccs) verschiebe dies funktioniert nicht.Warum wird meine externe CSS nicht angewendet?

HTML + Java

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <link rel="stylesheet" type="text/css" href="css.css"> 
<div class="tab"> 
    <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> 
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> 
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> 
</div> 

<div id="London" class="tabcontent"> 
    <h3>London</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Paris" class="tabcontent"> 
    <h3>Paris</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

<div id="Tokyo" class="tabcontent"> 
    <h3>Tokyo</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

<script> 
function openCity(evt, cityName) { 
    var i, tabcontent, tablinks; 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tablinks.length; i++) { 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
    } 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 

// Get the element with id="defaultOpen" and click on it 
document.getElementById("defaultOpen").click(); 
</script> 

</body> 
</html>

Externe CSS (genannt css.css)

body {font-family: "Lato", sans-serif;} 

/* Style the tab */ 
div.tab { 
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f1f1f1; 
} 

/* Style the buttons inside the tab */ 
div.tab button { 
    background-color: inherit; 
    float: left; 
    border: none; 
    outline: none; 
    cursor: pointer; 
    padding: 14px 16px; 
    transition: 0.3s; 
    font-size: 17px; 
} 

/* Change background color of buttons on hover */ 
div.tab button:hover { 
    background-color: #ddd; 
} 

/* Create an active/current tablink class */ 
div.tab button.active { 
    background-color: #ccc; 
} 

/* Style the tab content */ 
.tabcontent { 
    display: none; 
    padding: 6px 12px; 
    border: 1px solid #ccc; 
    border-top: none; 
}

Sorry für die grundlegende Frage, ich versuche, auf eigene Faust zu lernen

Quelle

2017-05-04 Santiago Center

Gibt es Fehler in Ihrer Browserkonsole? Das 'link'-Tag gehört traditionell zu' head'. –

Ist Ihre CSS-Datei im selben Verzeichnis wie die HTML-Datei? – Eineki

- Verschieben Sie es auf . - Ja, es ist in dem gleichen Verzeichnis –

Es scheint, um für mich zu arbeiten, versuche, den folgenden Text zu deinem CSS hinzuzufügen und du wirst sehen, es funktioniert

#London{ font-size: 4.5em; }

Quelle

2017-05-04 17:39:52

Warum wird meine externe CSS nicht angewendet?

Antwort

Verwandte Themen