Learning DIV + CSS is not difficult

Is CSS really hard to learn? In fact, it is not difficult. I just lack the experience to grasp. Is there any gains if I hold a book hard? Yes! However, it may not be very effective. As a person, I think it is very difficult to learn the things that I want to remember. My experience is that I can grasp the essentials first (important attributes ), to be refined, naturally, these attributes are far from enough to meet your own needs and lead to your own desire to learn, and automatically extend other related attributes to naturally grasp and deepen your understanding of CSS. This is a method I think (unfortunately, if someone tells me this when I study it, I will take a lot of detours ). For the first time, I shared my writing experience with you. I may not have much experience in language organization. I would like to ask some netizens to include it. However, I believe that more experience will be better written in the future. The following are some of my experiences and conceptual explanations that I think are necessary. Experienced users are welcome to share comments for further discussion.

Helper house www.bkjia.com

In the current web page technology, CSS + DIV has become a mainstream website standard. We can call it a web standard ). CSS is the abbreviation of Cascading Style Sheet in English. It is a computer language used to express the format of HTML or XML files.

Before learning about CSS, we should first understand the advantages and convenience of computer language for us. I personally think it is very basic but also necessary to understand it, it helps to clarify the CSS + DIV learning purpose. I have summarized the advantages and problems of CSS + DIV website design from the perspective of network applications based on my experience of website technologies and designers as follows:

First of all, the major advantage of CSS is the concise code. For a large website, it can save a lot of bandwidth (the true significance is that it increases the proportion of effective keywords in the total code of the webpage) websites created using web standards have the advantage of Friendly search engines. From the aspect of program and webpage art, the two can be combined independently to reduce the workload and avoid heavy development workload.

Second, the website made by CSS + DIV makes the website revision relatively simple. Many problems only need to change CSS without modifying the program, which reduces the cost of the website revision and saves a lot of time. I have worked with colleagues in the development room on similar project cases. I believe that my colleagues can feel this more or less.

The last point is that at the beginning of contact, I felt that it was not easy to control. Instead, I felt that the table had better control of the orientation and there may be resistance to the mood of using DIV to write the webpage layout. In fact, this is an adaptation process. We can use a lot of practical operations and exercises to understand the key points. Then we can see that it is indeed ever-changing. Different la s of a page may have different la S. However, no matter how well the code is written, the Code follows the principle: the definition name should be as generic as possible, that is, to define more box molds with the least code I call it (more than one); the naming should be normative and composite, it is convenient for other designers to understand their names. The other one is about using ID or Class, which may be vague to many people. In fact, it is relative, but now I write a lot of habits mainly using classes. I think this is more convenient and suitable for my writing habits.

The following are common attributes that I think need to be understood and mastered first:

Important attributes that CSS must understand and master:

Margin: auto | length a length value composed of floating-point numbers and unit identifiers | percentage. The percentage is based on the height of the parent object. For inline objects, the left and right extension margins can be negative values.

Padding: length is a length value composed of floating-point numbers and unit identifiers | or percent. The percentage is based on the width of the parent object.

Float: none | left | right: this is a floating property that must be used in the definition layout. When using it, pay attention to the location and browser compatibility issues, you need to learn more about this attribute in many practical operations. If you have this attribute, you need to know the "clear" attribute used in this configuration item"

Clear: none | left | right | both; none allows both sides to have floating objects both does not allow floating objects; left does not allow floating objects on the left right.

Background: url (images/aardvark.gif) left top no-repeat | repeat-x | repeat-y defines the background image to beautify the layout.

Overflow: visible | auto | hidden | scroll is used in layout to prevent browser compatibility problems.

Border: 1px solid # CCCCC: This defines the border size, line, and color attributes.

List-style-image list-style-position list-stle-type this list attribute is usually used in the ordered list and unordered list, the list is often used in defining the webpage Title Index text connection, this is a typical example of verifying that CSS definitions are superior to tables.

The above are CSS attributes that I think must be memorized and understood in learning CSS. A full understanding of its features can greatly improve the degree of freedom of our application layout. Therefore, it is not very difficult to learn this. You will find that when you do not know the above style, you may feel powerless to start a page, after mastering it, You can naturally implement the layout and layout you want based on your own logic thinking, And the CSS resistance will ease a lot.

Speaking of this, I want to raise a very common question. I think that the WEB Standard does not prohibit all table DIV use, including the incorrect idea I had at the beginning, "standard" My understanding is to standardize designers to develop a good writing habit, to achieve a mainstream unity. In some cases, the functions of a table on a webpage are superior to that of a DIV, and the excessive use of ie parsing by an uncontrolled DIV increases the cpu burden. This is also a noteworthy issue.

While mastering the common attributes above, the following uses a three-column CSS layout template compiled by the design designer by referring to the network blog. It mainly focuses on how to master the CSS essentials and learn the web page layout tutorial instance template, you can download the template and carefully learn the technology based on the content of the article. This template covers the important CSS attributes listed above through the orchestration on this site.

Because it is an example of layout tutorial, it does not take more time to fine-tune the layout details, but I think the layout of the template is good, if you understand CSS, you can download and perform more meticulous beautification. It will be a good web page. You can download and modify attribute parameters to better understand the attributes, to better understand CSS.