开始编辑空间样式表

一个空间的样式表是你开始对 CSS 进行自定义编辑的好的开始。在空间样式表中，包含了你所有可以进行修改的元素。当你对空间样式表进行编辑的时候，空间样式表的修改只会对你修改的空间有效，并且会应用到所有的空间页面中。在空间样式表中创建一些样式，然后进行测试，当没有问题后，你可以将这些样式应用到整个站点上。然后你可以对Confluence 的 CSS 进行更多的自定义包括调整搜索页，主面板和其他的一些整体页面。

使用正确的工具

Confluence 的 CSS 也具有相当的复杂性，Web 开发工具将会帮助你理解页面的样式表是如何被创建的的。针对一些具体的情况，你可能需要查看页面已经存在的源代码。下面的一些免费工具将会帮助你对源代码进行调试和查看。h as the following free applications will allow you to do this.

1. Firebug
Firebug，是一个 Firefox 浏览器的插件。这个插件允许你对你页面中元素的样式表进行查看。这个工具对你对当前元素的样式表进行分析非常有效，例如仅仅应用在头部的样式表。

2. Web Developer
Web Developer 是一个针对 Firefox 的插件，这个插件允许你在页面中直接对 CSS 进行编辑和创建一个新的设计。

3. CSS Edit
CSS 编辑器是一个为 Macintosh 系统编辑使用 CSS 的独立编辑器。这个编辑器能够获取当前所有的 CSS 样式表，然后允许你对这些样式表重新进行编辑。

从简单的元素开始

你可以从一些简单的原始开始编辑，通过这些编辑来看这些修改是如何工作的。当对 CSS 进行修改后，对每一个修改你都应该查看下效果，这样有助于更好的分析和解决问题。请注意一些页面的元素可能比其他页面更适合进行编辑。例如，为页面添加一个 gradient 到工具栏相对于修改整个页面的宽度能够让 CSS 更好的工作，而不会导致页面损坏。编辑合适的静态元素，例如背景图片相对于设计整个节目或者使用 JavaScript 来进行下拉菜单展示就更加精确的表现页面情况（其实也不建议在使用 JavaScript 做过多修改） 。

https://www.cwiki.us/display/CONFLUENCEWIKI/Basic+Styling+Tutorial

Confluence 6 CSS 编辑技巧的更多相关文章

  1. Confluence 6 CSS 编辑快速入门

    希望编辑空间的 CSS 样式表: 进入空间后,然后从边栏的底部选择 空间工具(Space tools) > 外观和感觉(Look and Feel) . 然后选择 样式表(Stylesheet) ...

  2. Confluence 6 开始编辑 CSS

    希望编辑空间的样式表: 进入到空间,然后在左侧边栏中选择 空间工具 > 界面外观(Space tools > Look and Feel). 选择 样式表(Stylesheet)然后选择 ...

  3. CSS编码技巧

    前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...

  4. [css 揭秘]：CSS编码技巧

    CSS编码技巧 我的github地址:https://github.com/FannieGirl/ifannie 喜欢的给我一个星吧 尽量减少代码重复 尽量减少改动时需要编辑的地方 当某些值相互依赖时 ...

  5. VS Code：让你工作效率翻倍的23个插件和23个编辑技巧

    VS Code:让你工作效率翻倍的23个插件和23个编辑技巧 总结了一些平时常用且好用的 VS Code 的插件和编辑技巧分享出来. 文章详情可查阅我的博客:lishaoy.net ,欢迎大家访问. ...

  6. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  7. 【CSS】381- 提升你的CSS选择器技巧

    我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器. 我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情. ...

  8. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  9. CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

    原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...

随机推荐

  1. oracle查看表空间数据文件使用情况

    -- 查看表空间数据文件使用情况 select a.*, round(a.usedgb/a.maxgb*100) || '%' usedPer from ( select t.TABLESPACE_N ...

  2. Vue.component注意事项

    Vue.component前不要加 new,否则报错: Uncaught TypeError: Cannot read property '_base' of undefined

  3. Coursera Deep Learning 2 Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization - week3, Hyperparameter tuning, Batch Normalization and Programming Frameworks

    Tuning process 下图中的需要tune的parameter的先后顺序, 红色>黄色>紫色,其他基本不会tune. 先讲到怎么选hyperparameter, 需要随机选取(sa ...

  4. luogu P3241 [HNOI2015]开店

    传送门 (下面记年龄为\(a_x\))题目要求的是\[\sum_{x=1}^{n} [a_x\in [l,r]]*dis(x,u)=\sum_{x=1}^{n} [a_x\in [l,r]]*de_x ...

  5. steps/train_mono.sh

    <<单音素HMM的训练流程图.vsdx>> 定义拓扑结构.参数初始化 $ gmm-init-mono --shared-phones=$lang/phones/sets.int ...

  6. ASP.NET MVC中注册Global.asax的Application_Error事件处理全局异常

    在ASP.NET MVC中,通过应用程序生命周期中的Application_Error事件可以捕获到网站引发的所有未处理异常.本文作为学习笔记,记录了使用Global.asax文件的Applicati ...

  7. 小程序view排版

    <view class="bc"> <view> <text bc_text>demo</text> </view> & ...

  8. Maven多模块项目管理小结

    原文地址:http://blog.csdn.net/whuslei/article/details/7989102 题记 最近刚完成一个用Maven构建的Web项目,看了一些Maven方面的书,比如& ...

  9. python 三大框架之一Flask入门

    Flask轻量级框架,Flask是python中的轻量级框架. 打开终端 输入pip install Flask 命令 下载以及安装Flask框架 检查是否下载成功及能否使用 首先导入python环境 ...

  10. CentOS 7 配置Maven

    https://blog.csdn.net/wangyang163wy/article/details/75530872 CentOS 7 配置MavenMaven是一个高效的软件项目管理工具,通过M ...