Блог

Главная - Вопросы по программированию - почему мой стиль my css не применяется к элементам html

почему мой стиль my css не применяется к элементам html

#html #css

#HTML #css

Вопрос:

Я скопировал HTML-код из codepen. Когда я запускаю код, он работает нормально, за исключением того, что некоторые стили css не применяются.Когда я проверяю элементы, я замечаю, что некоторые стили css пересекаются (имеют горизонталь на них). когда я наводлю на него курсор, появляется надпись «недопустимое значение свойства».

 html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: #212121;

  amp;:visited {
    color: #212121;
  }
}

h1, h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: bold;
}

h1 {
  font-size: 38px;
  margin-bottom: 40px;
}

h2 {
  font-size: 22px;
  margin-bottom: 10px;
}

img {
  max-width: 100%;
}

.text-center {
  text-align: center;
}

.container {
  max-width: 1200px;
  margin: auto;
}
header {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/cssgrid_triangles.svg');
  background-size: cover;
  color: white;

  .top-nav {
    display: flex;
    justify-content: space-between;
    padding: 40px 0;
    
  }
}
.button {
  border: 1px solid #212121;
  padding: 12px 40px;

  amp;:hover {
    color: #e9e9e9;
    background: #212121;
  }
}

.button-white {
  border: 1px solid #e9e9e9;
  color: #e9e9e9 !important;

  amp;:hover {
    color: #212121 !important;
    background: #e9e9e9;
  }
}

.section-description {
  width: 80%;
  margin: auto;
}

.button-container {
  margin: 80px 0;
}



.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  padding-top: 20px;
  padding-bottom: 84px;

  .hero-image {
    padding-left: 60px;
  }

  h1 {
    font-size: 52px;
    margin-top: 50px;
  }

  p {
    margin: 40px 0 68px;
  }

  .button {
    margin-right: 14px;
  }
}  
 <header>
    <div class="top-nav container">
        <div class="logo">CSS Grid Example</div>
        <ul>
            <li><a href="#">Shop</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Cart</a></li>
        </ul>
    </div> <!-- end top-nav -->

    <div class="hero container">
        <div class="hero-copy">
            <h1>CSS Grid Example</h1>
            <p>A practical example of using CSS Grid for a typical website layout.</p>
            <div class="hero-buttons">
                <a href="#" class="button button-white">Button 1</a>
                <a href="#" class="button button-white">Button 2</a>
            </div>
        </div> <!-- end hero-copy -->

        <div class="hero-image">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/cssgrid_macbook-pro-laravel.png" alt="hero image">
        </div>
    </div> <!-- end hero -->
</header>

Здесь я пытаюсь переместить элементы навигационной панели (магазин, корзина, о компании и т.д.) В правую сторону. для этого используется justify-content: пробел между. Но когда я запускаю его в браузере, css для панели навигации пересекается. Может кто-нибудь любезно сказать, что здесь не так.
ссылка на codepen:https://codepen.io/drehimself/pen/GyVPgb?editors=1100

Комментарии:

1. CSS может зависеть от браузера. Пожалуйста, проверьте, совместим ли css. Его средство записи в sass- scss, которое необходимо перенести в обычный css

Ответ №1:

Это потому, что некоторые css на самом деле не являются css, они называются ‘scss‘.Сначала их нужно скомпилировать в css с помощью компилятора scss.

Ответ №2:

Способ 1 — Используйте встроенный компилятор Sass Codepen

Попробуйте использовать встроенный CSS-компилятор code-pen. Опция доступна в правом верхнем углу.

Перед компиляцией в Codepen

CSS с помощью Sass перед компиляцией

После компиляции в Codepen

Чистый CSS после компиляции

Способ 2 — Используйте компилятор Sass локально

Установите Sass глобально, используя npm

npm install -g sass

После установки просто предоставьте исходный код и назначение sass компилятору

sass source/stylesheets/index.scss build/stylesheets/index.css

Также взгляните на документацию Sass Здесь и здесь

Ответ №3:

поместите файл css и файл html в одну папку.

 <link rel ="stylesheet" css/stylesheet.css>