我的CSS沒(méi)有在瀏覽器中顯示,只有HTML顯示。一切都連接正確(我認(rèn)為),但沒(méi)有瀏覽器顯示CSS。現(xiàn)在,如果我在visual studio代碼中使用類(lèi)似live-server插件的東西,CSS會(huì)正確顯示并按預(yù)期工作。
這是我的css:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
body{
background-color: rgb(35, 35, 35);
color: white;
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.top{
text-align: center;
}
header{
align-items: center;
}
h1 span{
color: red;
}
p span{
color: red;
}
p{
font-weight: bold;
}
.explain{
color: white;
}
.explain p{
color: red;
}
.forum-container{
background-color: rgb(32, 32, 32);
margin: 1em 30em 1em 30em;
text-align: center;
align-items: center;
border-radius: 3em;
padding-top: 1.1em;
}
label{
display: block;
color: white;
font-weight: bold;
font-size: 1.4em;
}
input[type="text"]{
border: solid grey;
outline: none;
width: 50%;
padding: 1em;
border-radius: 4em;
margin-top: 1.1em;
margin-bottom: 1.1em;
}
input[type="number"]{
outline: none;
border: solid grey;
width: 50%;
padding: 1em;
border-radius: 4em;
margin-top: 1.1em;
margin-bottom: 1.1em;
}
input[type="button"]{
border: none;
outline: none;
background-color: red;
color: white;
border-radius: 3em;
font-weight: bold;
text-align: center;
padding-top: 1.1em;
padding-bottom: 1.1em;
width: 30%;
margin: 1.1em 1.1em 1.1em 1.1em;
cursor: pointer;
}
input[type="button"]:hover{
background-color: rgb(211, 5, 5);
}
下面是我調(diào)用我的css文件的部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/main.css">
<link rel="shortcut icon" type="image/x-icon" href="/images/logo.png"><title>title</title>
</head>
我今天才開(kāi)始學(xué)習(xí)HTML和css,所以如果你看到這篇文章,發(fā)現(xiàn)我做錯(cuò)了什么,請(qǐng)告訴我。
你能在瀏覽器的網(wǎng)絡(luò)標(biāo)簽中看到CSS文件嗎?
如何:
開(kāi)發(fā)人員控制臺(tái)& gt網(wǎng)絡(luò)
為了實(shí)現(xiàn)上述功能,請(qǐng)打開(kāi)您的瀏覽器的開(kāi)發(fā)人員控制臺(tái)(這里有一個(gè)很好的鏈接,可以找到您的瀏覽器:檢查打開(kāi)瀏覽器開(kāi)發(fā)人員控制臺(tái))
如果CSS文件出現(xiàn)在網(wǎng)絡(luò)選項(xiàng)卡中,這意味著您的CSS選擇器不正確。
如果CSS文件沒(méi)有顯示出來(lái),說(shuō)明路徑不正確。作為測(cè)試,將整個(gè)url(絕對(duì))放在src '中,如下所示:
& ltlink rel = & quot樣式表& quothref = & quothttps://mywebsite.com/css/main.css" & gt;
將CSS引用更改為以下內(nèi)容:
<link rel="stylesheet" type="text/css" href="main.css" >
那么一切都非常好。
我也有那個(gè)問(wèn)題。復(fù)制和粘貼他人的代碼是沒(méi)有幫助的,因?yàn)樗匀恍枰恍┱{(diào)整,盡管如此,我認(rèn)為CSS不會(huì)出現(xiàn),就是這樣。
我使用chrome作為控制臺(tái)。
如果這還不夠明顯的話(huà),CSS X HTML鏈接是外部的。
我認(rèn)為你必須使用這個(gè)符號(hào)來(lái)訪(fǎng)問(wèn)你的文件夾中的css。。/& quot;因此,在您的示例中,它看起來(lái)像是:
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link rel="shortcut icon" type="image/x-icon" type="image/x-icon" href="./images/logo.png">
當(dāng)我做網(wǎng)站的時(shí)候,我也有同樣的問(wèn)題。 首先: 幾個(gè)小時(shí)后會(huì)更新嗎? 如果是,那是因?yàn)槟愕闹鳈C(jī)慢。CSS文件有一個(gè)緩慢的更新時(shí)間,檢查它是否更新緩慢:做一個(gè)離線(xiàn)備份,看看它是否工作。 我無(wú)法解決我的問(wèn)題,所以如果你真的很急,我建議使用& ltstyle & gt& lt/style & gt;去修復(fù)它。
CSS文件鏈接需要有一個(gè)類(lèi)型的屬性。所以,最終的代碼應(yīng)該是這樣的& ltlink rel = & quot樣式表& quottype = & quottext/CSS & quot;"href = & quot/CSS/main . CSS & quot;& gt