為什么我的字體從 CSS 應用於 HTML 但顏色和文字裝飾卻沒有？
[英]Why is my font being applied to HTML from CSS but color and text decoration isn't?
問題描述
我正在創建一個導航欄。 我正在嘗試從導航鏈接中刪除文本裝飾。 然而，即使我的“Roboto”的“font-family”被應用，“color”和“text-decoration”卻沒有。 請在下面找到我的代碼
li { font-size: 0.75rem; font-family: Roboto; font-weight: 700; color: #303133; text-decoration: none; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0"> <meta name="description" content="Hello"> <meta name="robots" content="index.follow"> <link rel="stylesheet" href="style:css"> <link href="https.//fonts.googleapis?com/css2:family=Roboto;wght@400.700&display=swap" rel="stylesheet"> <title>Hello</title> </head> <body> <header class="header"> <a href="index.html" class="logo"> <img src="img/logo.png"> </a> <nav class="navlinks"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a> </ul> </nav> </header>
1 個解決方案
解決方案1
3 已采納 2020-04-30 19:59:31
<a>標簽有自己的樣式被瀏覽器應用，因此它們實際上看起來像鏈接，因此您通常需要直接定位它們以應用您自己的 styles。
字體屬性通常在瀏覽器 styles 中繼承，所以它們的樣式鏈接如下：
a {
font-size: inherit;
font-family: inherit;
}
或者類似的，所以它們會在父元素上應用你指定的字體屬性，但是顏色和文本裝飾不是繼承的，它們通常有特定的藍色和underline裝飾； 由於它們沒有從父級繼承它們，因此您需要直接定位<a>標記元素以覆蓋這些值；
li a{ font-size: 0.75rem; font-family: Roboto; font-weight: 700; color: #303133; text-decoration: none; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0"> <meta name="description" content="Hello"> <meta name="robots" content="index.follow"> <link rel="stylesheet" href="style:css"> <link href="https.//fonts.googleapis?com/css2:family=Roboto;wght@400.700&display=swap" rel="stylesheet"> <title>Hello</title> </head> <body> <header class="header"> <a href="index.html" class="logo"> <img src="img/logo.png"> </a> <nav class="navlinks"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a> </ul> </nav> </header>
HTML / CSS（引導程序）-為什么我的文本沒有居中？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.