Я не могу связать свои HTML-страницы с внешним листом CSS - PullRequest
Новая
       7

Я не могу связать свои HTML-страницы с внешним листом CSS

0 голосов
/ 07 декабря 2018 

body{
  background-color: black;
  margin-top: 45px;
}

.backdrop {
  background: url(../images/header.JPG) center;
  background-size: contain;
  margin: auto;
  margin-top: 185px;
  width: 85vw;
}
   
.text {
  text-shadow: 0 0 9px white;
  color: white;
  border: 4px solid;
  background: rgb(59, 2, 6);
  mix-blend-mode:multiply;
  font: bolder 10vw 'arial';
  text-align: center;
  margin:0;
  animation: glow 3s infinite;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px white;
  }
  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                 -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                 -2px -2px 4px rgba(255, 255, 255, .7);
  }
}
    
ul li {
  float: left;
  list-style: none;
  margin-right: 1em; 
}
 
li a {
  color: #544738;
  text-decoration: none;
  float: left;
  font-size: 25px;
  padding: 10px;
  padding-top: 30px;
  margin-left: 155px;
}
 
li a:hover {
  color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>


<body>  
    
<h1>About me</h1>
   
    
</body>


</html>

----------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    
<h1>Major</h1>
    
    </body>




</html>

--------------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body class="gallery">
    
<h1>Gallery</h1>
    
</body>




</html>
-------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body class="contact">
    
<h1>contact</h1>
    
</body>




</html>

Я создаю веб-сайт для школы ... но я не смог связать различные HTML-страницы с CSS (для изменения цвета фонаи т.д. ...) У меня есть 4 HTML-страницы, я не знаю, нужно ли мне добавлять div или что-то в этом роде, не могли бы вы помочь мне связать эти HTML с основным CSS?.. Я собираюсь опубликовать страницу CSS и три страницы HTML.Большое спасибо, я был бы очень рад, если бы вы могли помочь мне с этим.

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

ваш css работает, но вы установили черный цвет фона тела, а ваш текст также черный

попробуйте заменить первое правило css на 

body{
background-color: white;
margin-top: 45px;
}
0 голосов
/ 07 декабря 2018

Вам необходимо связать свои таблицы стилей CSS с каждой страницей, в вашем случае вам нужно будет загрузить свои файлы CSS на сервер и сослаться на них.

Соглашение требует, чтобы они были добавлены в <head>, т.е.: 

<head>

    <link href="PATH_TO_CSS_FILE.css" rel="stylesheet">

</head>


<body>

    ... page HTML ...

</body>

Предоставленный вами фрагмент работает должным образом. Единственный стиль CSS, который вы используете в демонстрационном HTML (который я представляю себе в качестве сокращенного примера), - это тег body.

Если стили CSS не применяются к рабочим страницам HTML, вероятно, вы неправильно связали таблицу стилей CSS.Вы можете проверить консоль в своем браузере, чтобы увидеть, есть ли какие-либо ошибки (например, если таблица стилей не загружается).

Если вы хотите, чтобы заголовки (h1) использовали эффекты, которые вы продиктовалив .text необходимо добавить класс к элементу, например: 

<h1 class="text">About Me</h1>

Ниже приведен рабочий фрагмент. 

body{
  background-color: black;
  margin-top: 45px;
}

.backdrop {
  background: url(../images/header.JPG) center;
  background-size: contain;
  margin: auto;
  margin-top: 185px;
  width: 85vw;
}
   
.text {
  text-shadow: 0 0 9px white;
  color: white;
  border: 4px solid;
  background: rgb(59, 2, 6);
  mix-blend-mode:multiply;
  font: bolder 10vw 'arial';
  text-align: center;
  margin:0;
  animation: glow 3s infinite;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px white;
  }
  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                 -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                 -2px -2px 4px rgba(255, 255, 255, .7);
  }
}
    
ul li {
  float: left;
  list-style: none;
  margin-right: 1em; 
}
 
li a {
  color: #544738;
  text-decoration: none;
  float: left;
  font-size: 25px;
  padding: 10px;
  padding-top: 30px;
  margin-left: 155px;
}
 
li a:hover {
  color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>


<body>  
    
<h1 class="text">About me</h1>
   
    
</body>


</html>

Классы должны применяться к каждому элементу, чтобы стили вступили в силу.Если вы хотите, чтобы все заголовки имели эффект свечения и т. Д., Которые вы кодировали, то вы можете подумать об изменении .text на h1 в своей таблице стилей, чтобы вам не приходилось применять класс каждый раз, когда вы создаетезаголовок.Например: 

body{
  background-color: black;
  margin-top: 45px;
}

.backdrop {
  background: url(../images/header.JPG) center;
  background-size: contain;
  margin: auto;
  margin-top: 185px;
  width: 85vw;
}
   
h1 {
  text-shadow: 0 0 9px white;
  color: white;
  border: 4px solid;
  background: rgb(59, 2, 6);
  mix-blend-mode:multiply;
  font: bolder 10vw 'arial';
  text-align: center;
  margin:0;
  animation: glow 3s infinite;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px white;
  }
  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                 -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                 -2px -2px 4px rgba(255, 255, 255, .7);
  }
}
    
ul li {
  float: left;
  list-style: none;
  margin-right: 1em; 
}
 
li a {
  color: #544738;
  text-decoration: none;
  float: left;
  font-size: 25px;
  padding: 10px;
  padding-top: 30px;
  margin-left: 155px;
}
 
li a:hover {
  color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>


<body>  
    
<h1>About me</h1>
   
    
</body>


</html>
...