Member 13778649 Ответов: 1

Мой CSS не будет связываться с моим HTML?

<!DOCTYPE html>

             <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <meta charset="utf-8">
  <title>ottergram
  
    <h1 class="logo-text">ottergram</h1>
  
  <ul class="thumbnail-list">
    <li class="thumbnail-item">      <a href="#">
          
        <span class="thumbnail-title">Barry</span>
      </a>
    </li>    <li class="thumbnail-item">      <a href="#">
          
        <span class="thumbnail-title"> Robin</span>
      </a>
    </li>    <li class="thumbnail-item">      <a href="#">
        
        <span class="thumbnail-title">Maurice</span>
      </a>
    </li>    <li class="thumbnail-item">      <a href="#">
          
        <span class="thumbnail-title">Lesley</span>
      </a>
    </li>    <li class="thumbnail-item">      <a href="#">
      
        <span class="thumbnail-title">Barbara</span>
      </a>
    </li>  </ul>

body {
  background: rgb(149, 194, 215);
  font-size: 10px;
}

a {
  text-decoration: none;
}
thumbnail-item + .thumbnail-item {
  margin-top: 10px;}

.thumbnail-item {

  border: 1px solid rgb(100%, 100%, 100%);
  border: 1px solid rgba(100%, 100%, 100%, 0.8);
    display: block;
}

.thumbnail-list {
  display: block;

  list-style: none;

  width: 100%;


}

.thumbnail-title {
  background: rgb(96, 125, 139);
  color: rgb(202, 238, 139);
  display: block;
  font-size: 18px;
  margin: 0;
  padding: 4px 10px;
}


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

Мой html находится в той же папке, что и мой css, не знаю, почему он не связывается.

Member 13778649

я попробовал добавить цвет к фону .thumbnail-item { border: 1px solid rgb(100%, 100%, 100%); граница: 1px solid rgba(100%, 100%, 100%, 0.8); }
но он не будет показывать его в браузере

1 Ответов

Рейтинг:
0

Member 13778649 

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>

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

  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <meta charset="utf-8">
  <title>ottergram</title>

</head>

<body>

  <header>
    <h1 class="logo-text">ottergram</h1>
  </header>
  <ul class="thumbnail-list">
    <li class="thumbnail-item">
      <a href="#">
          <img class="thmbnail-image" src="img/otter1.jpg" alt="Barry the otter">
        <span class ="thumbnail-title">Barry</span>
      </a>
    </li>
    <li class="thumbnail-item">
      <a href="#">
          <img class="thumbnail-image" src="img/otter2.jpg" alt="Robin the otter">
        <span class ="thumbnail-title"> Robin</span>
      </a>
    </li>
    <li class="thumbnail-item" >
      <a href="#">
        <img class="thumbnail-image" src="img/otter3.jpg" alt="Maurice the otter">
        <span class ="thumbnail-title" >Maurice</span>
      </a>
    </li>
    <li class="thumbnail-item">
      <a href="#">
          <img class="thmbnail-image" src="img/otter4.jpg" alt="Lesley the otter">
        <span class="thumbnail-title" >Lesley</span>
      </a>
    </li>
    <li class="thumbnail-item">
      <a href="#">
      <img class="thumbnail-image" src="img/otter5.jpg" alt="Barbara the otter">
        <span class="thumbnail-title">Barbara</span>
      </a>
    </li>
  </ul>


</body>

</html>