Essential tools for web design: Firefox Web Developer plugin CSS tool set tutorial

The plugin is installed in the Firefox browser. The powerful functions of the Web Developer plug-in are beyond your imagination. Being used for CSS web page layout development and debugging is only part of its powerful functions. It also provides very powerful auxiliary design functions for the development of network programs. We will not discuss it in full, we will only understand it for CSS web page layout development and debugging. Friends who are interested can study its powerful functions in detail.

CSS tools are the key points we need to understand. They provide many functions to assist us in viewing web pages. Without further ado, let's go deeper and look at the pictures first:

1. Disable Style　　Can be used to disable the display of some or all styles for the current page.

All Style　　Disable all styles, no styles will be applied to the page.

· Browser Default Styles applies the browser default style, which is a function of little significance.

Embedded Styles disables placement in the page The internal style sheet of , has no effect on others.

Inline Styles disables inline style sheets, that is, those in the style="" format will not be displayed.

Linked Style Sheets Disable linking external style sheets with the link tag.

Print Sytles Disable print style sheets.

Individual Style Sheet: Set whether the linked external style sheet is displayed or not. For example: the current page links to three external style sheets, 1.css, 2.css, and 3.css. We can use this function to disable a certain style sheet. Please note that this feature is actually very useful. It can help us find where the problem is when debugging. We disable a certain style to see if the problem still exists. If the problem disappears when you disable a certain style, then there is a problem with some settings in the disabled style sheet file.

2. Display CSS By Media Type　Display styles by media type. This function is similar to this one. However, only two media types are currently supported: handheld devices and printing.

3. View CSS　Used to view CSS file code . Clicking this command will open a new FF tab and display the CSS of the current page. If the current page Link has multiple CSS files, the URL of the file will be given, or it will be displayed as an inline style or internal style. As shown below:

4. View Style Information　View style information. A very practical learning and auxiliary design function. After clicking to turn on this option, the FF status bar will show me the style information of the current mouse position. When the mouse stays on an element, the element's hierarchy in the current CSS style sheet will also be displayed. This function can be very convenient for learning other people's CSS web page layout design. When we are browsing other people's works and don't know how to achieve a certain effect, we can use this function to immediately find the applied style, know its hierarchical relationship, and find the corresponding code in the CSS file. The effect of this function is as follows:

5. Add User Style Sheet　Add user styles. We can set the style of the current page when we browse, and the current page of the website can be displayed according to the style we write. When we study the work of others, we can make improvements based on what we have learned or perform other optimizations. When we are designing our own pages, this also allows us to make temporary modifications to the files and see the effects immediately. Fine-tune and design the details.

6. Edit CSS　Edit the CSS. This is one of the biggest highlights of the Web Developer plug-in and is the function we use most often. Click this command, and an editing window will open on the left side of FF, in which the existing CSS styles will be placed. If there are N CSS files, tabbed tabs will be listed and we can switch at will. In the CSS editor displayed, we can change and edit it at will in this window, and the web page on the right will be displayed in real time according to the modified style. If we change the style of h1, we can immediately see the editing effect in the web page window on the right! As shown below:

I don't need to say much about this function of the Web Developer plug-in, you can understand what it can do. When developing a website, we can use this function to directly open the CSS file for editing while viewing the effect, and keep track of the results of the modification at any time. When we are satisfied with the modification, click the Save button at the top of the window to save the current style sheet to the specified location. Truly realize convenient auxiliary design and development. We can learn from other people's works and use it to view the CSS files on the web pages, view other people's codes, try to modify other people's codes and immediately view the effects of the changes, and think about why others wrote it this way, why they set it up this way, and what the reason is. By learning in this way, we can more conveniently learn the application of CSS technology on excellent websites.

7. Use Border Box Model　Use the border box model . This is a rarely used feature. You can click this command to see the changes on the page.