最受歡迎的支持問題是:“我必須編輯哪些CSS代碼才能改變(…)的外觀”。幾年前,CSS/HTML編輯器是最有用的web開發工具?,F在,我認為更有用的是構建在每個現代瀏覽器中的web代碼調試器,例如Firefox、Safari、Chrome、Brave甚至MS Edge。代碼檢查器允許你檢查、修改(模擬更改)和調試網頁的HTML、CSS和JavaScript。如果你正在尋找有關使用瀏覽器中可用的web 開發人員工具的信息,那么你找到了正確的地方。
如何運行瀏覽器的Web開發人員工具?
首先是第一件事,使用開發人員工具的方法因瀏覽器而異。我們從谷歌瀏覽器開始。
- 對于Chrome,點擊菜單上的>開發工具或者使用相應的鍵盤快捷鍵,或者
- 選中一個元素:右鍵單擊網頁上的元素,然后選擇“檢查”
檢查器將出現在瀏覽器窗口的底部,如下面的截圖所示。

打開時,它會彈出并??康疆斍盀g覽器窗口的底部或單獨的窗口中(這取決于瀏覽器的設置)。
查看并檢查組成一個網頁的元素。所呈現的站點HTML是可見的并且在左側完整可編輯,并且關于網頁的節點、樣式和層的細節可在右側的工具條中獲得。
對于Chrome,你可以參考官方文件。繼續閱讀本文內容,以便更快地學習核心內容。
如何使用web開發人員工具?
工具欄通常位于屏幕的底部,你可以控制檢查器。選中的元素將高亮顯示,頁面上的其他元素將變暗。編輯允許你預覽帶有HTML、CSS和JavaScript代碼調整的web內容輸出。它可以幫助你檢查所有的資源使開發更高效,最重要的是,使用最常見的CSS屬性調整樣式。
你可以編輯任何HTML元素,并通過CSS塊和可視化的方式編輯CSS樣式。

如果你點擊了樣式視圖的聲明或者選擇器,你可以編輯它們,并且可以馬上看到效果。那你還可以選擇不同的現有屬性和值,并通過按Enter或鼠標單擊開始編輯它們。要向規則添加新聲明,請單擊規則的最后一行(右括號所占的行)。當你開始輸入屬性名時,你會看到一份自動補充的屬性列表。
你可以接受當前建議或在列表中移動。默認選項是以你鍵入的字母開頭的最常見屬性。例如,這里用戶鍵入了“c”,默認選項是“color”(上面的屏幕截圖)。如果在編輯屬性時輸入無效值,或者輸入未知屬性名稱或值,則該行中將顯示黃色警報圖標。Web檢查器還包括許多用于處理特定CSS功能的專用工具,例如顏色,字體和動畫。
你還可以在樣式表文件中編輯CSS規則并在腳本文件中編輯JavaScript(下面的屏幕截圖)。

你所做的任何更改都是臨時的:重新加載頁面將恢復原始樣式。
警告!開發人員工具中所做的更改不會保存在模板,組件,模塊CSS / JS文件中。你必須復制更改的代碼行并在自定義代碼文件中使用它們。
大多數瀏覽器還有內置選項來模擬瀏覽器中的移動設備(視圖)。響應式設計模式提供了一個簡單的界面,可以跨各種屏幕尺寸,方向和分辨率快速預覽你的網頁。非常方便的移動開發工具。

我需要改變頁面所更改的css樣式
如果你知道應該覆蓋哪些CSS行以實現所需的更改,則必須在模板中使用自定義代碼。如果你已安裝并設置為默認的Helix3或Helix Ultimate模板,我們建議你使用custom.css文件寫入所有主要更改并添加的新行:
templates \ shaper_NAME \ css \ custom.css
首先你必須從Joomla管理員或通過FTP創建該新文件
使用這種方法,你可以custom.css中控制整個站點的CSS樣式設計。

例如,如果所有的插件標題都應該是紅色的,你可以custom.css中更改它,而不是在每個模塊設置中單獨更改。你可以對來自SP Page Builder的插件樣式和任何其他組件執行相同的操作。主要規則是通用的。
選擇開發瀏覽器

Mozilla開發了Firefox開發者版,內置開發工具,為開發者量身定制的版本,配備了最新的Firefox功能和實驗性開發工具。它包括專門用于使用CSS網格構建和設計的工具。這些工具允許你可視化網格、顯示相關的區域名稱、在網格上預覽轉換等等。
總結
從一開始我每天都使用這個工具。無論你是新用戶還是有經驗的Joomla用戶,你都將從使用瀏覽器中內置的web開發人員工具中獲益良多。它們是免費的,非常強大,提供了一個學習、思考和試驗新風格的平臺。幾乎所有這些工具都提供了用于創建、調試和性能監視的各種工具。解釋所有的特性超出了這篇文章的范圍。但是,我們希望上述工具的介紹能夠幫助你完成日常Joomla開發工作。





