Bây giờ các quy tắc CSS được hiển thị, bạn có thể thực sự nhìn thấy những gì mã điều khiển nút Reload. Hai dòng đầu tiên trong cửa sổ CSS Rules Phong cách không thích hợp. Các chi tiết mục thứ ba phong cách áp dụng cho tất cả các nút. Điều này giao dịch với lợi nhuận, đệm, biên giới, và màu sắc văn bản. | 388 Part VI Creating Extensions and Themes Figure 18-5 DOM Inspector Figure 18-6 Reload button CSS Style Rules Now that the CSS rules are shown you can actually see what code controls the Reload button. The first two lines in the CSS Style Rules pane are irrelevant. The third item details the styles applied to all buttons. This deals with margins padding borders and text colors. The fourth fifth and sixth items .toolbarbutton-1 are general properties that deal with the main toolbar buttons only. The following buttons are part of the .toolbarbutton-1 group Back Forward Reload Stop Chapter 18 Creating Themes 389 Print Downloads History Mail Bookmarks New Tab New Window Cut Copy Paste The last line reload-button details properties that are specific to the Reload button. Understanding CSS Because the entire user interface is defined through Cascading Style Sheets you ll need to know something about CSS to create a Firefox theme. I had never heard of CSS when I started creating Mozilla themes and that made the process unnecessarily difficult. I still don t know all that much about CSS but I know enough to get around. If you don t know any CSS now might be a good time for a bit of research. A Google search for CSS Tutorial will bring up lots of useful sites to get you started. If you re interested in a quick tutorial visit the following sites http reference css http css Creating Needed Graphics To make your theme truly unique you ll need to replace the graphics associated with the default theme. A great majority of the buttons are found in the files browser and browser . PNG is an extensible file format for the lossless portable well-compressed storage of raster images. PNG is a replacement for GIF because PNG allows for true color 24-bit images with alpha transparency as opposed to GIF which allows for 256-color images with indexed transparency. Indexed-color grayscale and true-color images are supported .
