Не отображается CSS код

128

04 сентября 2019, 17:50

попытался сверстать header для макета и столкнулся с проблемой, что в моем css коде, а именно в .btn не хочет работать padding и border-radius, как только эти стили я прописал в style у HTML они сразу же заработали.

Подскажите пожалуйста как сделать так, чтобы мой код писался именно через css, использую так же препроцессор LESS, но не думаю что это как то влияет на это.

/*Colors */ 
/* Basic setting */ 
html { 
  font-size: 10px; 
} 
/* Typography */ 
section { 
  padding: 10rem 0; 
} 
/*main*/ 
main { 
  padding: 3rem 0; 
} 
.btn { 
  background-color: #fcb303; 
  color: #ffffff; 
  border-radius: 8px; 
  padding: 1rem 3rem; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Verstka maketa</title> 
 
	<link rel="stylesheet" href="style.css"> 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
 
</head> 
<body> 
	<main> 
		<div class="container"> 
			<div class="header"> 
				<div class="row"> 
					<div class="col-3"> 
						<div class="logo"> 
						<img src="#" alt="Gipsolit logo"> 
					</div> 
					</div> 
					<div class="col-2 offset-4"> 
						<a href="#">+7 495 771 05 08</a> 
					</div> 
					<div class="col-3"> 
						<button class="btn header-btn" style="padding: 10px 30px"> 
							Получить консультацию 
						</button> 
					</div> 
				</div> 
			</div> 
		</div> 
	</main> 
</body> 
</html>

Answer 1

Код читается сверху вниз и поэтому сначала применяются стили написанные вами в файле style.css, а потом эти стили перебивают те, что написаны в подключенном вами файле бутстрапа.
А в теге style стили заработали, потому что у них приоритет выше, чем у подключенных отдельным файлом.
Ознакомьтесь с какой либо статьей про приоритеты и каскадность стилей CSS, а то довольно часто будете попадаться на такие вещи и не понимать что, да как.
Так же если вы зайдете в веб-инспектор вашего браузера и выберете ваш элемент, то увидите какие стили и из какого файла перебили нужные вам.