html - 将 CSS 移动到单独的文件使其无法运行

Question

我正在使用 JSSOR 图片库:

正如您在底部看到的那样，我正在尝试从页面中删除 css。

将它放在一个 css 文件中会使它不起作用。

此外，将它放在自己独特的文件中并替换 CSS 也会使其无法运行。也就是改这个:

/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l                  (normal)
.jssora05r                  (normal)
.jssora05l:hover            (normal mouseover)
.jssora05r:hover            (normal mouseover)
.jssora05l.jssora05ldn      (mousedown)
.jssora05r.jssora05rdn      (mousedown)
*/
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 40px;
cursor: pointer;
background: url(../img/a17.png) no-repeat;
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }

  <div id="sliderb_container" style="position: relative; top: 0px; left: 0px; width: 850px;
     height: 565px; overflow: hidden; margin-bottom:25px;">
     <div u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
           background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
        <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
           top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
     </div>
     <div class="slides" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 850px; height: 565px;
        overflow: hidden;">
        <div>
           <div class="portrait" u=image style="background-image: url(../img/zachry/1.jpg">&nbsp;</div>
           <div u="thumb"></div>
        </div>
        <div>
           <img u=image src="../img/zachry/2.jpg"  />
           <div u="thumb"></div>
        </div>
        <div>
           <div class="portrait" u=image style="background-image: url(../img/zachry/3.jpg">&nbsp;</div>
           <div u="thumb"></div>
        </div>
        <div>
           <div class="portrait" u=image style="background-image: url(../img/zachry/4.jpg">&nbsp;</div>
           <div u="thumb"></div>
        </div>
        <div>
           <img u=image src="../img/zachry/5.jpg" />
           <div u="thumb"></div>
        </div>
        <div>
           <img u=image src="../img/zachry/6.jpg" />
           <div u="thumb"></div>
        </div>
        <div>
           <div class="portrait" u=image style="background-image: url(../img/zachry/7.jpg">&nbsp;</div>
           <div u="thumb"></div>
        </div>
     </div>
     <div u="thumbnavigator" style="position: absolute; bottom: 0px; left: 0px; height:45px; width:600px;">
        <div u="slides">
           <div u="prototype" >
              <div u="thumbnailtemplate" style="font-family: verdana; font-weight: normal; POSITION: absolute; WIDTH: 100%; HEIGHT: 100%; TOP: 0; LEFT: 0; color:#fff; line-height: 45px; font-size:20px; padding-left:10px;"></div>
           </div>
        </div>
     </div>
     <link rel="stylesheet" type="text/css" href="css/src/image-gallery2.css">
     <div u="navigator" class="jssorb01" style="bottom: 16px; right: 10px;">
        <!-- bullet navigator item prototype -->
        <div u="prototype"></div>
     </div>
     <link rel="stylesheet" type="text/css" href="css/src/image-gallery3.css">

     <span u="arrowleft" class="jssora05l" style="top: 123px; left: 8px;">
     </span>
     <span u="arrowright" class="jssora05r" style="top: 123px; right: 8px;">
     </span>
  </div>

对此:

<link rel="stylesheet" type="text/css" href="css/src/image-gallery3.css">

该文件包含上述 css 的位置。

但是当我这样做时它就不再起作用了。为什么会这样？我该如何解决？

Answer 1

要修复它，请遵循此 list :

1. 所有 CSS style 元素或 link 元素都必须放在 html 文档的 header 部分。
2. 如果您的 CSS 代码在外部文件中，您需要删除 和 标签。
3. 您需要确保您的相对路径设置正确。例如，如果您的 html 页面位于“www”目录中，而您的 css 文件位于“www/css/src”目录中，您的链接应该有效。但是，如果您的页面位于“www/pages”而您的 css 位于“www/css/src”，您需要相应地调整您的链接(即在本例中它将是“../css/src”而不是只是“css/src”。
4. 确保您的 css 文件的权限设置为网络服务器可读。

另外，请注意，如果您有多个样式和链接元素，如果有任何声明冲突，最后声明的元素将优先。