将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

要修复它，请按照此清单进行操作：

1. 所有CSS 样式元素或链接元素必须位于html文档的head部分。
2. 如果CSS代码位于外部文件中，则需要删除 和 标记。
3. 您需要确保正确设置相对路径。例如，如果您的html页面位于＆＃34; www＆＃34;目录和你的css文件位于＆＃34; www / css / src＆＃34;目录，你的链接应该工作。但是，如果您的页面位于＆＃34; www / pages＆＃34;你的css在＆＃34; www / css / src＆＃34;你需要相应地调整你的链接（即在这个例子中它将是＆＃34; ../ css / src＆＃34;而不仅仅是＆＃34; css / src＆＃34;。
4. 确保网络服务器将css文件的权限设置为可读。

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