Блог

Главная - Вопросы по программированию - Я не понимаю, почему мой код не может принять css, когда я пытаюсь

Я не понимаю, почему мой код не может принять css, когда я пытаюсь

#html #css

#HTML #css

Вопрос:

Я просто пытаюсь принять css-код из codepen, поэтому я копирую и вставляю и использую внешнюю ссылку, но это не отображается, как codepen, просто покажите мне цвет основного фона, почему это произошло?

Я ссылаюсь на код отсюда https://codepen.io/MelonBoxer/pen/eopWar

Я не понимаю, потому что каждое копирование и вставка из codepen работали, но это не

Это мой HTML-код 

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="./test.css">
  </head>
  <body>
      <div class="blog-card spring-fever">
    <div class="title-content">
      <h3>SPRING FEVER</h3>
      <hr />
      <div class="intro">Yllamco laboris nisi ut aliquip ex ea commodo.</div>
    </div><!-- /.title-content -->
    <div class="card-info">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
    </div><!-- /.card-info -->
    <div class="utility-info">
      <ul class="utility-list">
        <li class="comments">12</li>
        <li class="date">03.12.2015</li>
      </ul>
    </div><!-- /.utility-info -->
    <!-- overlays -->
    <div class="gradient-overlay"></div>
    <div class="color-overlay"></div>
  </div><!-- /.blog-card -->
  </body>
</html>

Это мой CSS

   @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
    @import url(https://fonts.googleapis.com/css?family=Droid Serif:400,700,400italic,700italic);

    // variables
    $card-width:  350px;
    $card-height: 500px;
    $h-color:     #9CC9E3;
    $yellow:      #D0BB57;
    $txt-color:   #DCE3E7;

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body{
      background: #323c41;
    }

    .blog-card{
      width: $card-width;
      height: $card-height;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -250px 0 0 -175px;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);
      text-align: center;

      amp;.spring-fever{
        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/bg-blog-card.jpg) no-repeat;
      }

      .color-overlay{
        /* Rectangle 11: */
        background: rgba(84,104,110,0.4);
        width: $card-width;
        height: $card-height;
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        transition: background .3s cubic-bezier(.33,.66,.66,1);
      }
      .gradient-overlay{
        /* bg-gradient: */
        background-image: -webkit-linear-gradient(rgba(0,0,0,0.00) 0%, rgba(0,0,0,.6) 21%);
        background-image: -moz-linear-gradient(rgba(0,0,0,0.00) 0%, rgba(0,0,0,.6) 21%);
        background-image: -o-linear-gradient(rgba(0,0,0,0.00) 0%, rgba(0,0,0,.6) 21%);
        background-image: linear-gradient(rgba(0,0,0,0.00) 0%, rgba(0,0,0,.6) 21%);
        width: $card-width;
        height: $card-height;
        position: absolute;
        top: 350px;
        left: 0;
        z-index: 15;
      }

      amp;:hover{

        .card-info{
          opacity: 1;
          bottom: 120px;
        }
        .color-overlay{
          background: rgba(84,104,110,0.8);
        }
      }
    }

    .title-content{
      text-align: center;
      margin: 70px 0 0 0;
      position: absolute;
      z-index: 20;
      width: 100%;
      top: 0;
      left: 0;
    }
    h3{
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 2px;
      color: $h-color;
      font-family: 'Roboto', sans-serif;
      margin-bottom: 0;
    }
    hr{
      width: 50px;
      height: 3px;
      margin: 20px auto;
      border: 0;
      background: $yellow;
    }
    .intro{
      width: 170px;
      margin: 0 auto;
      color: $txt-color;
      font-family: 'Droid Serif', serif;
      font-size: 13px;
      font-style: italic;
      line-height: 18px;
    }
    .card-info{
      width: 100%;
      position: absolute;
      bottom: 100px;
      left: 0;
      margin: 0 auto;
      padding: 0 50px;
      color: $txt-color;
      font-family: 'Droid Serif', serif;
      font-style: 16px;
      line-height: 24px;
      z-index: 20;
      opacity: 0;
      transition: bottom .3s, opacity .3s cubic-bezier(.33,.66,.66,1);
    }

    .utility-info{
      position: absolute;
      bottom: 0px;
      left: 0;
      z-index: 20;
    }
    .utility-list{
      list-style-type: none;
      margin: 0 0 30px 20px;
      padding: 0;
      width: 100%;

      li{
        margin: 0 15px 0 0;
        padding: 0 0 0 22px;
        display: inline-block;
        color: $txt-color;
        font-family: 'Roboto', sans-serif;

        amp;.comments{
          background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/icon-chat.svg) no-repeat 0 .1em;
        }
        amp;.date{
          background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/icon-calendar.svg) no-repeat 0 .1em;
        }
      }
    }

я хочу видеть только в моем локальном месте, например, из codepen

Ответ №1:

Человек, создавший codepen, использовал SCSS (или Sass). Вам нужно было скомпилировать этот код в css. Это можно сделать в codepen, нажав на выпадающий список в окне css и выбрав «Просмотреть скомпилированный CSS». Я скопировал и вставил скомпилированные css и html ниже:

 @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
@import url(https://fonts.googleapis.com/css?family=Droid Serif:400,700,400italic,700italic);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #323c41;
}

.blog-card {
  width: 350px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -250px 0 0 -175px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.blog-card.spring-fever {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/bg-blog-card.jpg) no-repeat;
}
.blog-card .color-overlay {
  /* Rectangle 11: */
  background: rgba(84, 104, 110, 0.4);
  width: 350px;
  height: 500px;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}
.blog-card .gradient-overlay {
  /* bg-gradient: */
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
  background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
  width: 350px;
  height: 500px;
  position: absolute;
  top: 350px;
  left: 0;
  z-index: 15;
}
.blog-card:hover .card-info {
  opacity: 1;
  bottom: 120px;
}
.blog-card:hover .color-overlay {
  background: rgba(84, 104, 110, 0.8);
}

.title-content {
  text-align: center;
  margin: 70px 0 0 0;
  position: absolute;
  z-index: 20;
  width: 100%;
  top: 0;
  left: 0;
}

h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #9CC9E3;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 0;
}

hr {
  width: 50px;
  height: 3px;
  margin: 20px auto;
  border: 0;
  background: #D0BB57;
}

.intro {
  width: 170px;
  margin: 0 auto;
  color: #DCE3E7;
  font-family: 'Droid Serif', serif;
  font-size: 13px;
  font-style: italic;
  line-height: 18px;
}

.card-info {
  width: 100%;
  position: absolute;
  bottom: 100px;
  left: 0;
  margin: 0 auto;
  padding: 0 50px;
  color: #DCE3E7;
  font-family: 'Droid Serif', serif;
  font-style: 16px;
  line-height: 24px;
  z-index: 20;
  opacity: 0;
  transition: bottom 0.3s, opacity 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.utility-info {
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: 20;
}

.utility-list {
  list-style-type: none;
  margin: 0 0 30px 20px;
  padding: 0;
  width: 100%;
}
.utility-list li {
  margin: 0 15px 0 0;
  padding: 0 0 0 22px;
  display: inline-block;
  color: #DCE3E7;
  font-family: 'Roboto', sans-serif;
}
.utility-list li.comments {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/icon-chat.svg) no-repeat 0 0.1em;
}
.utility-list li.date {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/icon-calendar.svg) no-repeat 0 0.1em;
}  
 <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="./test.css">
      </head>
      <body>
          <div class="blog-card spring-fever">
        <div class="title-content">
          <h3>SPRING FEVER</h3>
          <hr />
          <div class="intro">Yllamco laboris nisi ut aliquip ex ea commodo.</div>
        </div><!-- /.title-content -->
        <div class="card-info">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
        </div><!-- /.card-info -->
        <div class="utility-info">
          <ul class="utility-list">
            <li class="comments">12</li>
            <li class="date">03.12.2015</li>
          </ul>
        </div><!-- /.utility-info -->
        <!-- overlays -->
        <div class="gradient-overlay"></div>
        <div class="color-overlay"></div>
      </div><!-- /.blog-card -->
      </body>
    </html>