3.2 Using the Custom CSS field 3.2 使用自定义CSS

This is the best way to make changes to a specific section on your store.

如果我们想改变主题的某一个具体的区块,那么使用自定义CSS就是最好的方法。

There are two main advantages to using this:

下面是使用自定义CSS的两大优势:

  1. CSS here is scoped to the current section. That means you can use very generic selectors like p {} and they will only affect the paragraph inside that section, and not any other p elements on your page. This makes it very safe to use, and you don’t have to worry about breaking other parts of your store.

    对某一个区块自定义CSS只对当前的区块起作用。这意味着我们可以使用更加具体的CSS选择器例如p {}来精准控制更细致的位置外观显示,而且这些修改也不会对其它位置带来改变。因此使用自定义CSS修改主题是非常安全的。

  2. CSS that is added here is also saved in JSON files as theme settings. This means this CSS will also be carried across to your new theme when you do an automatic update.

    利用自定义CSS修改后的CSS也会作为主题设置存储在JSON文件夹里。这也意味着我们主题自动更新的时候,自定义修改的CSS也会自动同步到新主题里。

Section CSS vs Global CSS

区块CSS和全局CSS

The changes you make in the Custom CSS field inside a section will not affect anything else in your website. Not even the same type of section if that section is used in a different template.

在主题区块上修改的自定义CSS,不会对主题的其它位置产生任何影响。如果我们修改了某一个区块的CSS,虽然与被修改的区块是同一种区块,这些同一类型的区块在不同的模板位置如果没有被自定义CSS的话,也不会对主题产生任何影响。

For example, imagine you use the ‘Image Slider’ section on your home page, and also on your product page.

比如我们在首页或者产品页面上使用了“图像滑块(Image Slider)”,

You can use the Custom CSS field to modify the appearance of the image slider on the product page. It will also affect all products using the same product template, but it won’t affect the image slider section on the home page, or on an alternate product template.

我们可以使用自定义CSS来改变产品页面的图像滑块的外观,这一改动会对使用同一个产品模板的产品页面带来影响。但不会影响主页上的图像滑块部分或其他产品模板上的图像滑块的外观。

If you wanted to do the opposite – to make a permanent change to a certain type of section whenever it is used throughout the store, then you will need to write your CSS in the global Custom CSS field.

如果我们想对应用于整个网站的某一种类型的区块外观做永久性的修改,我们就得在全局自定义CSS里进行修改。

You can find this field in global theme settings in the customizer. This is where you edit the logo, colors, typography and other settings that affect the entire theme.

我们可以在主题编辑器里设置主题的全局样式。我们可以编辑logo、颜色、字体等,这些都会对整个主题带来影响。

上一篇 3.1 Custom Liquid Blocks & Sections 模块和区块的自定义Liquid
下一篇 3.3 Using a custom CSS file 3.3 如何使用自定义CSS文件
AeroCore图片
AeroCore图片
AeroCore图片
AeroCore图片
AeroCore图片
最新评论
暂无评论