CSS不会更改某些HTML文档中的字体

时间:2014-07-09 02:34:31

标签: html css fonts

提前抱歉英语不好。

这是我的情况。 我有两个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
}

1 个答案:

答案 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);    
}