杰基尔的内联CSS-css教程-PHP中文网

钥匙要点

首页

web前端

css教程

杰基尔的内联CSS

Christopher Nolan

Feb 21, 2025 am 10:57 AM

杰基尔的内联CSS

钥匙要点

对于具有足够小CSS的站点的有价值的工具，因为它允许您在第一个服务器往返中发送所有样式，从而消除了对外部样式表的需求。这对于交付塑造页面顶部和主要内容区域外观的关键样式特别有效。> 在Jekyll中，可以将样式直接包含在_的文件夹中，然后在文档头部内导入。如果使用SASS，则可以使用SCSSIFY过滤器将SASS格式的字符串转换为CSS，即使在插入样式时也可以使用SASS。
我长期以来一直是Jekyll的粉丝。它有一些缺陷，并不总是是工作的最佳工具，但是，它可能是某些情况的绝佳工具。我已经失去了我与之建立的网站的数量。

>最近，我与Jekyll一起制作了另一个网站，这次是简化的JavaScript术语，我发现自己面临着一个不太非典型的问题 - 将样式包裹在。

需要

您可能听说过关键CSS。该概念背后的想法是尽快提供关键样式（负责页面顶部和主要内容区域外观的样式），以便浏览器在访问内容之前没有延迟。

>有一个共同的规则说，可以发送以下14KB以下页面顶部所需的内容，因为这大约是服务器在一个往返中可以处理的程度。 Google PagesPeed Insights在他们的文档中提供了有关此信息的更多信息，因此，如果您想知道为什么它有效，请随时查看。

>

在某种程度上，如果您的CSS足够小（就像SJSJ一样），则可以将其全部嵌入到>中，并在第一个往返中将其全部发送在一起，而无需使用外部样式表。那不是超级常见的，但是当它是相当的

时，

回到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中文网其他相关文章！