需要
您可能聽說過關鍵CSS。該概念背後的想法是盡快提供關鍵樣式（負責頁面頂部和主要內容區域外觀的樣式），以便瀏覽器在訪問內容之前沒有延遲。
>有一個共同的規則說，可以發送以下14KB以下頁面頂部所需的內容，因為這大約是服務器在一個往返中可以處理的程度。 Google PagesPeed Insights在他們的文檔中提供了有關此信息的更多信息，因此，如果您想知道為什麼它有效，請隨時查看。時，
回到jekyll>因此，我的想法是在文檔頭部中包含
tada！它給了我們我們想要的東西：
sass呢？
好吧，您可能會在想：“是的，但這意味著我們不能再使用Sass了。”是，否。基本上，我們已經完全從Jekyll拿出了整個Sass管道，但是仍然有一種方法。
>如果您從Jekyll閱讀了文檔，則可能已經註意到有一個SCSSIFY和一個sassify濾鏡。文檔說這使我們可以：
>將SASS-或SCSS格式的字符串轉換為CSS。
好。這意味著我們仍然可以通過將整個文件輸送到此內容中來使用SASS。唯一的問題是我們不能在塊上應用過濾器，例如{％include％}。訣竅是在變量中捕獲文件的內容（要歸功於{％capture％}），然後在輸出時將我們的過濾器應用於此變量。
> tada（再次）！
{% capture styles %}
{% include styles.css %}
{% endcapture %}
<> <>>
>此SCSSIFY過濾器的好處是，它尊重您從_config.yml尊重您的SASS配置。因此，如果將輸出樣式設置為在配置文件中壓縮，則過濾器將SASS編譯為壓縮CSS。
> tada（再一次）！
>
# _config.yml
sass:
style: compressed
最終想法
如您所見，本文沒有什麼開創性的。但是，我必須說，我從來沒有真正想到，我可以直接在_的文件夾中寫下我的樣式，然後再花時間思考這個問題。 >
當然，當處理大於14KB的樣式表時，整個想法將不足，在這裡您需要使用某些工具來提取關鍵的CSS。但是對於小頁和站點來說，它非常方便！
>
如果您想查看其在真實項目上的工作原理，則可以檢查SJSJ存儲庫上的文件：>
_includes/styles.css
_includes/head.html
希望它有幫助，並且愉快的編碼！ -
jekyll中的有關內聯CSS的經常詢問的問題
-
內聯CSS和外部CSS？
內聯CSS是什麼區別，是一種使用“樣式”屬性直接在HTML標籤中應用CSS的方法。此方法對於將獨特樣式應用於頁面上的特定元素很有用。另一方面，外部CSS涉及從HTML文檔鏈接到外部.CSS文件。當您想在多個頁面上應用相同的樣式時，此方法是有益的，因為它可以促進可重複性並降低冗餘性。
>>如何在jekyll中使用內聯CSS？例如，如果您想將段落的顏色更改為紅色，則將寫：
這是一個紅色段落。 。還記得，在Jekyll中使用內聯CSS時，CSS屬性應寫在駱駝中。 >
>為什麼我要在jekyll中使用內聯CSS？單個頁面上特定元素的樣式。它覆蓋了外部或內部CSS中的任何衝突樣式，使您可以更多地控製網頁的外觀。但是，最好謹慎使用內聯CSS，因為它可能會使您的HTML文檔混亂且難以維護。 ，您可以在Jekyll中使用內聯CS和外部CSS。但是，請記住，Inline CSS比外部CSS具有更高的特異性。這意味著，如果存在衝突的樣式，則直列CSS將覆蓋外部CSS。
>我如何覆蓋jekyll中的內聯CSS？高特異性。但是，您可以在外部或內部CSS中使用“！重要”規則來覆蓋內聯CSS。例如，如果您具有將段落顏色設置為紅色的內聯樣式，則可以在這樣的外部CS中覆蓋它：p {color：blue！ jekyll中的內聯CSS？
> jekyll中的Inline CSS對單個元素提供了高度的控制，但它具有其局限性。它可能會使您的HTML文檔雜亂無章，並且很難維護。它也不會促進可重複使用性，因為您必須手動將樣式應用於每個元素。 >
>內聯CSS如何影響我的jekyll站點的加載速度？ jekyll站點的加載速度是因為瀏覽器不必提出其他HTTP請求來獲取外部CSS文件。但是，如果您有很多CSS，則最好使用外部CSS保持HTML文檔清潔易於維護。
我可以在Jekyll中使用inline CSS嗎？ 🎜>不，您不能使用Jekyll中的Inline CSS使用CSS類和ID。內聯CSS使用“樣式”屬性直接應用於HTML元素，並且不支持類或ID。如果要使用類或ID，則應使用外部或內部CS。 CSS在Jekyll。媒體查詢用於外部或內部CSS中，以將不同的樣式應用於不同的設備或屏幕尺寸。如果您需要使用媒體查詢，則應使用外部或內部CSS。 >
>我可以在jekyll中使用偽級和偽元素嗎？偽級和偽元素用於外部或內部CSS，以設計元素的特定部分或添加特殊效果。如果要使用偽級或偽元素，則應使用外部或內部CSS。
以上是傑基爾的內聯CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！
