在頁面樣式標籤中加載CSS，但不是從外部樣式表中加載

Question

我使用CSS-tricks的這種幻燈片效果。它部分使用可見插件，並通過CSS完成動畫。

http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

當CSS加載的頁面風格標籤內它的工作原理，但是當我從一個外部的樣式表加載它沒有。我已經檢查過樣式表正在加載並且是。我想要在外部加載它以保持我的CSS在一個文件中。我試着讓這個工作在HTML和wordpress中，但得到相同的結果。我使用HTML5重置文件。謝謝，蒂姆。

我試過在樣式標籤中使用：@import url("slidein.css");，但沒有奏效。

在Wordpress中，我在外部文件中加載了javascript，即。

<script src="js/index.js"></script> 

在WordPress中CSS：

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/slidein.css" /> 

和HTML：

<link rel="stylesheet" type="text/css "href="assets/css/slidein.css" /> 

JavaScript的index.js中：

<script src="<?php echo get_template_directory_uri(); ?>/js/index.js"></script> 

HTML內

$.fn.offScreen = function(distance){ 

     var $t    = $(this), 
      $w    = $(window), 
      viewTop   = $w.scrollTop(), 
      viewBottom  = viewTop + $w.height(), 
      _top   = $t.offset().top - distance, 
      _bottom  = $t.offset().top + $t.height() + distance; 

    return { 
    top: _bottom <= viewTop, 
    bottom: _top >= viewBottom 
    } 

}; 

var win = $(window); 

var allMods = $(".module"); 

allMods.each(function(i, el) { 
    var el = $(el); 
    if (!el.offScreen(150).bottom) { 
    el.addClass("already-visible"); 
    } 
}); 

win.on("scroll resize",function(event) 
{ 

    allMods.each(function(i, el) { 
    var el = $(el); 
    if (!el.offScreen(150).top && !el.offScreen(150).bottom) 
    { 
     el.removeClass("already-visible off-screen-top off-screen-bottom"); 
     el.addClass("come-in"); 
    } 
    else 
    { 

     if(el.offScreen(150).top) 
     { 
      el.addClass("off-screen-top"); 
     } 
     else 
     { 
      el.addClass("off-screen-bottom"); 
     } 
    } 
    });//allMods.each() 

});//win.scroll() 

win.trigger("scroll"); 

的CSS：

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

section { 
    background: #eee; 
    max-width: 600px; 
    margin: 0 auto; 
    padding: 20px; 
    overflow: hidden; 
} 

.module { 
    width: 48%; 
    min-height: 200px; 
    background: white; 
    position: relative; 
    float: left; 
    padding: 20px; 
    margin-right: 4%; 
    margin-bottom: 4%; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
    transform-origin: center center; 
} 
.module:nth-child(even) { 
    margin-right: 0; 
} 
.module.off-screen-top { 
    transform: translateY(-150px); 
} 
.module.off-screen-bottom { 
    transform: translateY(150px); 
} 

body { 
    background: url(http://s.cdpn.io/3/blurry-blue.jpg); 
    background-size: cover; 
    padding: 30px; 
} 

.come-in { 
    transform: translateY(0); 
    transition: transform 0.8s ease-out; 
} 

.come-in:nth-child(odd) { 
    transition-duration: 0.5s; 
} 

.already-visible { 
    transform: translateY(0); 
    transition: none; 
} 
@keyframes come-in { 
    to { 
    transform: translateY(0); 
    } 
} 

Answer 1

在WordPress中，你應該使用wp_enqueue_style()入隊外部樣式表，確保勾wp_enqueue_scripts。例如：

function my_enqueue_scripts() { 
    wp_enqueue_style('style-name', get_stylesheet_uri()); 
} 

add_action('wp_enqueue_scripts', 'my_enqueue_scripts'); 

編號：http://codex.wordpress.org/Function_Reference/wp_enqueue_style