1. 程式人生 > >Confluence 6 CSS 編輯技巧

Confluence 6 CSS 編輯技巧

Confluence

開始編輯空間樣式表

一個空間的樣式表是你開始對 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 編輯技巧