Html 我可以把<；风格>；将信息转换成CSS？_Html_Css

Html 我可以把<；风格>；将信息转换成CSS？

html css

Html 我可以把<；风格>；将信息转换成CSS？,html,css,Html,Css,我想知道是否有办法缩短我的代码并将样式组件中的信息放入CSS文件中？我正在创建一个网站，有几个像这样的页面，我不希望每个页面的代码都很长，因为我重复使用了许多相同的颜色和照片。我试图把它变成CSS，然而，它似乎只是把我的网站搞砸了 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"

我想知道是否有办法缩短我的代码并将样式组件中的信息放入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>


正文，html{
身高：100%；
保证金：0；
字体：400 15px/1.8“拉托”，无衬线；
颜色：#777；
}
.bgimg-1、.bgimg-2、.bgimg-3{
位置：相对位置；
不透明度：0.65；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
.bgimg-1{
背景图片：url（“img_parallax.jpg”）；
最小高度：100%；
}
.bgimg-2{
背景图片：url（“img_parallax2.jpg”）；
最小高度：400px；
}
.bgimg-3{
背景图片：url（“img_parallax3.jpg”）；
最小高度：400px；
}
.标题{
位置：绝对位置；
左：0；
最高：50%；
宽度：100%；
文本对齐：居中；
颜色：#000；
}
.标题span.边框{
背景色：#111；
颜色：#fff；
填充：18px；
字体大小：25px；
字母间距：10px；
}
h3{
字母间距：5px；
文本转换：大写；
字体：20px“拉托”，无衬线；
颜色：#111；
}
/*关闭平板电脑和手机的视差滚动*/
@仅介质屏幕和（最大设备宽度：1024px）{
.bgimg-1、.bgimg-2、.bgimg-3{
背景附件：滚动条；
}
}
向下滚动
视差演示
视差滚动是一种网站趋势，其中背景内容在滚动时以不同于前景内容的速度移动。根据国家选举委员会（nec）的规定，选举委员会（lectus nec LIBER turpis nunc at）、选举委员会（sed posuere mollis ullamcorper LIBER ANT lectus）、布朗迪特·佩伦茨克（blandit pellentesque a）、大法官（magna turpis est sapien duis blandit Dignessim）。维韦拉·英特杜姆·麦格纳·米，社会病号。调味品是在同一天吃的，它是一种很好的调味品。无痣多洛葡萄品种，位于前庭的无痣葡萄品种，位于奥迪奥葡萄园的无痣葡萄品种，位于奥迪奥葡萄园的无痣葡萄品种。在eleifend的quibusdam Socia，Aenea maecenas，非身份车辆lorem mattis，社会内部的理性。在大规模、非静态平台、8月前、8月前和8月前、港口和港口的支持项目
低高度
上下滚动，真正感受视差滚动的工作原理
向上滚动
上下滚动，真正感受视差滚动的工作原理
酷！

将所有css放在外部

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> **// External CSS**
<style>
p {
  color: red; **// Internal CSS**
}
</style>
</head>
<body style="background-color: lightcyan">  // Inline CSS

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>


**//外部CSS**
p{
颜色：红色；**//内部CSS**
}
//内联CSS
这是一个标题
这是一段
这是另一段

是的，你可以。下面是使用外部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文件中，您应该这样链接：

，链接进入

标记确实可以，只需创建一个.css文件，把你所有的样式都放在那里，然后像这样在你所有的页面中调用它。

我只想说和Ramonde Vries说的一样的话。顺便说一句，把它转换成css不是一件事，样式标签中的代码已经是css代码了：P

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;
  }
}