Question

我想知道是否有一种方法可以缩短代码，并将样式组件中的信息放入CSS文件中？我正在创建一个包含几个这样的页面的网站，并且我不希望每个页面的代码都这么长，因为我要重复使用许多相同的颜色和照片。我试图将其转换为CSS，但是，这似乎使我的网站混乱了。

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body, html {
      height: 100%;
      margin: 0;
      font: 400 15px/1.8 "Lato", sans-serif;
      color: #777;
    }

    .bgimg-1, .bgimg-2, .bgimg-3 {
      position: relative;
      opacity: 0.65;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

    }
    .bgimg-1 {
      background-image: url("img_parallax.jpg");
      min-height: 100%;
    }

    .bgimg-2 {
      background-image: url("img_parallax2.jpg");
      min-height: 400px;
    }

    .bgimg-3 {
      background-image: url("img_parallax3.jpg");
      min-height: 400px;
    }

    .caption {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      color: #000;
    }

    .caption span.border {
      background-color: #111;
      color: #fff;
      padding: 18px;
      font-size: 25px;
      letter-spacing: 10px;
    }

    h3 {
      letter-spacing: 5px;
      text-transform: uppercase;
      font: 20px "Lato", sans-serif;
      color: #111;
    }

    /* Turn off parallax scrolling for tablets and phones */
    @media only screen and (max-device-width: 1024px) {
      .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
      }
    }
    </style>
    </head>
    <body>

    <div class="bgimg-1">
      <div class="caption">
      <span class="border">SCROLL DOWN</span>
      </div>
    </div>

    <div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
      <h3 style="text-align:center;">Parallax Demo</h3>
      <p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
    </div>

    <div class="bgimg-2">
      <div class="caption">
      <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
      </div>
    </div>

    <div style="position:relative;">
      <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
      <p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
      </div>
    </div>

    <div class="bgimg-3">
      <div class="caption">
      <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
      </div>
    </div>

    <div style="position:relative;">
      <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
      <p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
      </div>
    </div>

    <div class="bgimg-1">
      <div class="caption">
      <span class="border">COOL!</span>
      </div>
    </div>

    </body>
    </html>

Answer 1

将所有CSS放入“外部”。

<link rel="manifest" href="/manifest.json">

Answer 2

是的，您可以put your styles in an external stylesheet。以下是带有外部CSS文件的更新后的HTML。确保CSS文件的路径正确（如果位于同一目录中，则如下所示，就是style.css）。

HTML文件

<html>
    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="style.css" rel="stylesheet" type="text/css">
        </head>

        <body>

        {HTML BODY CONTENT}

        </body>
</html>

CSS文件（style.css）

body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("img_parallax.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("img_parallax2.jpg");
  min-height: 400px;
}

.bgimg-3 {
  background-image: url("img_parallax3.jpg");
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}

我可以将<style>信息放入CSS吗？

2 个答案: