Проблемы с встраиванием CSS в мой простой HTML-штрих-код с внешними способами встраивания - PullRequest
Новая
       17

Проблемы с встраиванием CSS в мой простой HTML-штрих-код с внешними способами встраивания

0 голосов
/ 25 ноября 2018

Так что я новичок в кодировании, и мне было интересно, можно ли встраивать CSS в HTML.Я посмотрел вверх, и они сказали, чтобы использовать внешние способы.Они сказали использовать это 

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

, но когда я попытался, Это ничего не сделало.Я попытался найти это, но был смущен всеми различными способами и таким.Вот мой код. 

<header>
    <div class="container">
      <h1 class="logo"></h1>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
 </head>
   @import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
	margin: 0;
	background: #222;
	font-family: 'Work Sans', sans-serif;
	font-weight: 800;
}

.container {
	width: 80%;
	margin: 0 auto;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;

  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

Я знаю, что это кажется глупым вопросом, и, возможно, это так, но я действительно могу использовать немного конопли, потому что мне нравится кодирование, и я действительно хочу иметь возможность иметь как Javascript, так иCSS в коде HTML.Любая помощь будет принята с благодарностью.(Я почти уверен, какая часть неправильная, но я не знаю, как ее отформатировать)

1 Ответ

0 голосов
/ 25 ноября 2018

Да, есть, и он называется Inline Styling, но вы не хотите этого делать, так как это не только займет больше времени для написания кода для вашего сайта, но и усложнит внесение изменений для вашего сайта - причина, почему это не такработа заключается в том, что ваши CSS и HTML должны быть двумя отдельными файлами. 

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

^ Причина, по которой это не работает, заключается в том, что ваш CSS находится в том же файле, что и HTML, HTML и CSS должныразделить на два файла, как это

(указанный выше путь href должен ссылаться на путь к вашему файлу css, так что если он находится в том же каталоге, что и ваш html, он будет href = "mystyle".css "Если нет и находится в папке, это будет href:" / имя папки / mystyle.css "): 

<header>
    <div class="container">
      <h1 class="logo"></h1>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
 </head>

@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
	margin: 0;
	background: #222;
	font-family: 'Work Sans', sans-serif;
	font-weight: 800;
}

.container {
	width: 80%;
	margin: 0 auto;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;

  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

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

Глядя на это довольно просто исправить. 

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Website Name</title> 
</head>
<header>
    <div class="container">
      <h1 class="logo">Logo</h1>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
 </header>

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

...