Although the size of a web page file measured in K is really insignificant for today's bandwidth, how to streamline the web page file measured in K to the minimum is still one of the issues that web designers should consider.
As we all know, without affecting the structure and functions of the entire web page, the smaller the web page file, the better, because smaller web page files help the browser shorten the interpretation time of the web page, and natural visitors do not have to face The irritation of waiting for web pages to appear slowly is even more obvious for users with low bandwidth and slow Internet speeds. Just imagine, would you like to have the entire site appear in front of you immediately when you open a website? Or do you prefer to spend more than ten seconds or even a few minutes watching the entire site being interpreted by the browser bit by bit?
In the era of table layout, the code was repeated countless times along with the table on the page, causing the entire web page file to become extremely bloated, the readability of the code was also reduced to the minimum, and the browser's interpretation time naturally increased a lot. Since the DIV+CSS layout replaced the Table layout, everything has been greatly improved, allowing the Table to return to its original position for displaying data, and the layout is left to DIV+CSS, so the code The readability and reusability have been improved, and the more important point of DIV+CSS is to distinguish the performance and structure of the web page file, so that there is no need to change the structure of the entire web page file for performance.
Even though the DIV+CSS layout method has minimized the bloated code in the previous Table layout, for web designers, how to control the size of web page files to a minimum is a question that is always worth exploring and pursuing.
Look at the following piece of code:
#header { |
Such a piece of CSS code is very clear in structure, clear in structure, and highly readable. However, such a piece of code has not been streamlined, which means that it is the most original CSS code. Let’s look at the simplified code below. :
| #header { margin:10px 15px; backgroung:#333 url(Images/header.jpg); } |
There is the term composite attribute in CSS, which means that many attribute parameters can be integrated together. For example, the above "margin-top; margin-right; margin-bottom; margin-left;" can be integrated into one " margin" property, and then provide parameters for it.
Through this, we can further streamline the code based on the original CSS code. Moreover, the structure written in this way is also reasonable and the readability is equally strong. But this is not enough for streamlining to the extreme. In order to make the structure of this CSS code clear, we use spaces, line breaks and other things that take up space. What if we remove these things that take up space?
| #header{margin:10px 15px;background:#333 url(Images/header.jpg);} |