跳至正文
帮助
编辑器设计与设置

如何为整个店铺或单个版块添加自定义 CSS?

在建站工具中添加您自己的 CSS:用于整个店铺的“自定义 CSS”设置标签,以及只作用于该版块的版块“自定义 CSS”标签。了解版块 CSS 的作用范围、& 选择器、媒体查询,以及 CSS 不生效时的技巧。

阅读时间 3 分钟

CSS 可以改变店铺的外观:颜色、间距、尺寸等等。您可以在建站工具中的两个地方添加自己的 CSS:作用于整个店铺,或只作用于一个版块。

整个店铺的自定义 CSS

点击齿轮图标,打开自定义 CSS标签。输入框名为CSS 代码:应用于整个店铺。您的 CSS 会在您正在编辑的市场的每个页面上加载,预览会显示效果。

它适用于必须在所有地方生效的规则,例如在所有页面上隐藏某个元素,或更改所有按钮的样式。例如,h1 { text-transform: uppercase; } 会把每个页面的主标题显示为大写字母。

单个版块的自定义 CSS

在版块标签中选择一个版块。在其设置底部,打开自定义 CSS标签。它的CSS 代码输入框显示仅应用于此版块。大多数版块都有它,包括页头、页脚、主视觉、产品信息和结账。

这是更安全的选择。Storeep 会在您的每个选择器前面加上该版块,所以您的规则不会改变版块之外的任何内容。

  • h2 { letter-spacing: 2px; } 只会改变此版块内的标题。
  • 使用 & 为版块本身设置样式:& { border-top: 1px solid #000; }。
  • @media 规则可以使用。其中的规则同样只作用于该版块。
  • @keyframes 动画会按您编写的原样保留。

版块 CSS 属于该页面上的该版块。对版块使用应用到所有页面,即可把版块连同它的 CSS 一起复制到包含它的其他页面。请参阅应用到所有页面。

使用哪一个

  • 某个版块看起来不对:使用该版块的自定义 CSS。
  • 所有地方都需要同样的更改:使用“自定义 CSS”设置标签。
  • 编写 CSS 之前,先检查是否已有设置能做到:颜色在配色方案中,字体在字体设置中,圆角和阴影来自您的主题。

CSS 不生效时

  • 检查是否缺少 } 或 ;。一个错误就可能让后面的规则失效。
  • 您的规则可能比主题规则的优先级低。请让选择器更具体。
  • 在版块 CSS 中,不要以 body 或 html 开头写选择器。它们位于版块之外,所以规则不会匹配。
  • 如果页面看起来坏了,请删除最近一次更改并发布,然后逐条把规则加回去。

小贴士

  • 自定义 CSS 属于您正在编辑的市场。请在每个需要的市场中重复添加。
  • 更换主题可能会改变类名和布局,所以更换主题后请检查您的自定义 CSS。
  • 点击发布后更改才会上线。
  • 关于页面中的 HTML 和代码,请参阅自定义代码。

仍需帮助?

给我们留言,我们会回复你。

联系我们