爲什麼我的外部CSS沒有被應用？

我想和標籤w3school的例子，我的問題是，當我將css部分移動到另一個文件（與擴展.ccs）這不起作用。爲什麼我的外部CSS沒有被應用？

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>

（名爲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; 
}

很抱歉的基本問題，我想了解我自己的外部CSS

來源

2017-05-04 Santiago Center

瀏覽器控制檯中是否有任何錯誤？ 'link'標籤傳統上屬於'head'。 –

你的css文件在html的同一目錄下嗎？ – Eineki

- 將其移至。 - 是的，它在同一目錄 –

似乎爲我工作，嘗試添加以下文本到您的CSS，你會看到它的作品

#London{ font-size: 4.5em; }

來源

2017-05-04 17:39:52

爲什麼我的外部CSS沒有被應用？

回答

相關問題