提前抱歉英语不好。
这是我的情况。 我有两个HTML文档,其中样式,大小,颜色,对齐存储在CSS文件中。 我检查了,一切都正确链接,但字体只在第一个文档中正确显示,在第二个看起来似乎没有字体设置(显示默认字体)。 奇怪的是,当我在CSS文件中更改大小时,它会在两个HTML文档中更改它。(但不是字体)。
哪里可能出错?
编辑:
我在chrome中使用了dev工具,它告诉我CSS文件和HTML之间的连接是可以的。
这里是代码:
1.HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Список завдань</title>
<link rel="stylesheet" type="text/css" href="https://pizzamaker.github.io/css/theme.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab&subset=cyrillic-ext,latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
<link rel="SHORTCUT ICON" href="https://pizzamaker.github.io/images/mark.png"/>
</head>
<body background="https://pizzamaker.github.io/images/linedpaper.png">
<div id="nazwa">Tasks</div>
<center>
<div id="middle">
<table border="1">
<tr>
<td>1</td>
<td><a href="https://pizzamaker.github.io/tasks/1.html">Додайте всі натуральні числа до тисячі, які кратні 3 або 5.</a></td></tr>
<tr>
<td>2</td>
<td><a href="https://pizzamaker.github.io/tasks/2.html">Знайдіть суму всіх парних елементів ряду Фібоначчі, не більших чотирьох мільйонів.</a></td>
</tr>
<tr>
<td>3</td>
<td><a href="https://pizzamaker.github.io/tasks/3.html">Знайдіть найбільший дільник складеного числа, який є простим числом.</a></td></tr>
<tr>
<td>4</td>
<td><a href="https://pizzamaker.github.io/tasks/4.html">Знайдіть найбільший паліндром, отриманий сумою двох трьохзначних чисел.</a>
</td></tr>
<tr>
<td>5</td>
<td><a href="https://pizzamaker.github.io/tasks/5.html">Яке найменше число ділиться без остачі на всі числа від 1 до 20?
<tr>
<td>6</td>
<td><a href="https://pizzamaker.github.io/tasks/6.html">Яка різниця між сумою квадратів та квадратом суми?
</tr>
<tr>
<td>7</td>
<td>
<a href="https://pizzamaker.github.io/tasks/7.html">Знайдіть 10001-ше просте число.</a>
</td></tr>
<tr>
<td>8</td>
<td>
<a href="https://pizzamaker.github.io/tasks/8.html">Знайдіть найбільшу суму з послідовності п'яти цифр в 1000-значному числі.</a>
</td>
</tr>
<tr>
<td>9</td>
<td><a href="https://pizzamaker.github.io/tasks/9.html">Здайдіть єдину трійку Піфагора {a, b, c}, для котрої a + b + c = 1000.</a></td>
</tr>
<tr>
<td>10</td>
<td><a href="https://pizzamaker.github.io/tasks/10.html">Порахуйте суму всіх простих чисел меньше двох мільйонів.</a></td>
</tr>
<tr>
<td>11</td>
<td><a href="https://pizzamaker.github.io/tasks/11.html">Найбільша множина чотирьох чисел в лінії таблиці 20х20?</a></td>
</tr>
<tr>
<td>12</td>
<td><a href="https://pizzamaker.github.io/tasks/12.html">Яке перше трикутне число, у якого більше п'ятиста дільників?</a></td>
</tr>
<tr>
<td>13</td>
<td><a href="https://pizzamaker.github.io/tasks/13.html">Знайдіть перші десять чесел суми наступних ста 50-значних чисел.</a></td>
</tr>
<tr>
<td>14</td>
<td><a href="https://pizzamaker.github.io/tasks/14.html">Знайдіть найдовшу послідовність з початковим елементом меньше мільйона.
</a></td>
</tr>
<tr>
<td>15</td>
<td><a href="https://pizzamaker.github.io/tasks/15.html">Як багато маршрутів існує в таблиці 20х20, починаючи з лівого верхнього кута та закінчуючи правим нижнім?</a></td>
</tr>
<tr>
<td>16</td>
<td><a href="https://pizzamaker.github.io/tasks/16.html">Яка сума цифр числа 2<img src="" style="display:none;" alt="^(" /><sup>1000</sup><img src="" style="display:none;" alt=")" />?</a></td>
</tr>
<tr>
<td>17</td>
<td><a href="https://pizzamaker.github.io/tasks/17.html">Скільки літер потрібно для написання усіх чисел від 1 до 1000 словами?</a></td>
</tr>
<tr>
<td>18</td>
<td><a href="https://pizzamaker.github.io/tasks/18.html">Знайдіть максимальну суму шляху з вершини трикутника до його основи.</a></td>
</tr>
<tr>
<td>19</td>
<td><a href="https://pizzamaker.github.io/tasks/19.html">Скільки неділь випадають на перше число місяця в двадцатому столітті?</a></td>
</tr>
<tr>
<td>20</td>
<td><a href="https://pizzamaker.github.io/tasks/20.html">Знайдіть суму цифр в числі 100!.</a></td>
</tr>
</table>
</div></center>
</body>
</html>
2.HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Завдання 1</title>
<link rel="stylesheet" type="text/css" href="https://pizzamaker.github.io/css/theme.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab&subset=cyrillic-ext,latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
<link rel="SHORTCUT ICON" href="https://pizzamaker.github.io/images/mark.png"/>
</head>
<body background="https://pizzamaker.github.io/images/linedpaper.png">
<div id="nazwa">1</div>
<div id="middle">
<p>Якщо написати усі натуральні числа меньше 10, які є кратні 3 або 5, то отримаємо 3, 5, 6 і 9. Сума цих чисел - 23.</p>
<p>Додайте всі натуральні числа до тисячі, які кратні 3 або 5.</p>
</div>
</body>
</html>
3.CSS
#nazwa {
font-family:'Fredericka the Great',cursive;
font-size:4.4em;
text-align:center;
}
#middle {
font-family:'Roboto Slab',serif;
color:#000;
margin-left:12em;
margin-right:12em
}
strong {
text-decoration:underline
}
#numbers {
font-family:'Droid Serif',serif
}
h2 {
font-family:'Roboto Slab',serif;
color:#000;
text-align:center
}
#header {
position:absolute;
top:0;
right:0;
left:0;
height:150px;
background-color:#fff;
border-bottom-style:solid;
background-image:url(https://pizzamaker.github.io/images/linedpaper.png)
}
#button {
display:inline-block;
padding:10px
}
#euler {
margin-top:14em;
padding:1px;
}
a:link {
color:#000
}
a:visited {
color:#000
}
a:hover {
color:#000
}
a:active {
color:#000
}
table {
border-collapse:collapse
}
答案 0 :(得分:0)
您的字体未应用于第一个HTMl文件,因为它没有#middle
功能,这意味着CSS工作正常。
要解决此问题,您只需将相应的id
添加到第一个HTML文件中,如下所示:
<body background="https://pizzamaker.github.io/images/linedpaper.png">
<div id="nazwa">Tasks</div>
<div id="middle">
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
</div>
</body>
在相关说明中,您的第一个HTML文件在主文本周围没有标记。您将需要使用<p>
或类似文本包装文本,就像在第二个HTML文件中一样。一致性将为您节省90%的错误,并加快解决它们的速度!
最后,您不需要<body >
标记上的内嵌样式来应用背景,您可以像这样在CSS中执行所有操作:
body {
background-image: url(https://pizzamaker.github.io/images/linedpaper.png);
}