Member 13586598 Ответов: 2

Как сделать так, чтобы эта таблица стилей CSS работала на HTML?

Привет!! Я новичок на форуме.(извините за мой плохой английский)

У меня проблема. Я не могу заставить работать что-то в html с внешней таблицей стилей

Вот таблица стилей 


body {
    background-color: Red;
	
	.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 25px;
  background: #d99c34;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #b37e29;
  text-decoration: none;
}


}



<html>

<head>

<link rel="stylesheet" type="text/css" href="CSS.css">

</head>


<body>

<a href="#" class="btn FixedSize" >Home</a>



</body>




</html>


Что я уже пробовал:

Я попытался поместить коды стилей css в html-код и работает нормально, но мне нужно, чтобы лист css был внешним для большего понимания кодирования, а не все html и css вместе в одном блокноте. Итак, проблема в том, что css-код не работает, когда он является внешним, и я не понимаю, почему. (единственный код, который работает, это 
background-color: Red;
(во внешнем css-листе.

Спасибо за вашу помощь!

2 Ответов

Рейтинг:
2

Jochen Arndt

Это происходит потому, что только красный цвет фона применяется к телу (и так ко всем элементам, которые не имели своего собственного стиля цвета фона). Остальные настройки применяются только к элементам, использующим btn класс, который никогда не используется в вашем HTML-источнике.

Попробуйте что-нибудь вроде

<span class="btn">Using btn style</span>

Рейтинг:
0

Member 13586598

Я просто понял, что мне нужно написать код btn из "тела"

body {
    background-color: Red;
	
}

	.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 25px;
  background: #d99c34;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #b37e29;
  text-decoration: none;
}