Tham khảo tài liệu 'creating applications with mozilla-chapter 4. css in mozilla applications-p3', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | Chapter 4. CSS in Mozilla Applications-P3 Figure 4-4. Composite styles for the reload button p r i iii a r y t o o 1 b a r b ut t o n s t o o 1 b a r b ut t o n -1 1ist-style-image ur1 chrone navigat or skin icons f J iii i n - w i d t h 0 p x b a c k - b u 11 o n -iiio z - image - r e gi on r e ct 0 41 p x 3 8p x 0 . Menu Skinning As an example of using CSS in applications Example 4-5 combines many common selectors described in this chapter in a set of rules for defining the look and basic behavior of menus. The CSS handles the basic look of the menus their color and style the look of the menu items when they are hovered over and the look when they are selected. Example 4-5. Mixing CSS and XUL menu id sample menupopup menuitem class m label File menuitem class m label Edit menuitem class m id q label Quit menupopup menu .m background-color lightgray font-size 9pt .m hover border 1px .m active background-color gray color white q active background-color black When you hover over any of the items in the menu generated by the code in Example 4-5 they display a border. When you select the item it appears momentarily with a dark gray background and white lettering like reverse video. The Quit menu item unlike others appears with a black background. Note that it also picks up the same white lettering as the other items of the m class since this style information is inherited. . Mozilla Skins At an earlier point in Mozilla s history all interface files -- the XUL the CSS and the images -- were stored in directories named after the main Mozilla packages in the application chrome directory. The best way to look at a skin was just to poke around in those directories change things in the CSS files you found and reload to see what had changed in the browser. The CSS files are no longer stored in regular directories. To organize things better and make a smaller footprint for Mozilla all chrome is stored in special compressed archives in the chrome directory. .
