introduction:
To quote a passage from a book: "When I first started learning Chinese, my tutor Lao Wang gave me a Chinese-English dictionary, a Chinese grammar book and a beginner's tutorial. However, he would The books were placed in a book basket and were not to be used until the next week. During the first week, he only taught me to listen and memorize a few phrases, and then he wanted me to learn how to repeat some of them. Short comment. “Excuse me, where is the restaurant? ". "Bring me some rice, please." "How much does this dress cost? ”. During that week, I had to accept knowledge, sentence structure, pronunciation and grammar unconditionally. However, on Friday I could actually go to a Chinese restaurant, order a bowl of rice and pay the bill. No theory, no explanation, that’s all Simple phrases gave me enough grammar and vocabulary to do this.
I don’t know since when, CSS began to be taken seriously by Chinese people. Many people are starting to learn CSS, but don’t know where to start, so this article is written for those beginners to take them on the CSS train.
1. CSS learning focuses on methods!
It’s the same when learning anything. From elementary school, middle school, to university, in addition to learning knowledge, you also need to learn methods!
If you want to master CSS, you must first learn HTML. I started learning from scratch and spent a month learning HTML. I had no teacher, so books were my only teacher, and I didn’t have access to the Internet! A month later, I started learning CSS. The first CSS book I read was "CSS Web Style Design". After reading it for a few days, I found that I couldn't understand it at all! , and then changed to the "HTML Reference Encyclopedia". This book is a regular desk book for web page designers! The reason why I changed this book to learn CSS is because part of it is CSS, and it became my CSS enlightenment book. After reading a few paragraphs, I feel that the tutorials written by foreigners are very organized, starting from the shallower to the deeper, and leading you forward step by step, so that you understand what they are talking about, unlike the domestic books that have different depths and lack of organization. , as if he is afraid that you don’t know that he is very knowledgeable! Just like the book "CSS Web Style Design" mentioned earlier, I read it at the time. As a beginner in CSS, I really had no idea what it was talking about!
Let’s talk about the details of the learning process, because a style cannot be separated from the HTML page. If HTML is not combined with the style, CSS will lose the meaning of existence. Therefore, the book will usually give an example and then let you test the effect on the computer. This is because the author wants you to have a preliminary impression of style sheet CSS and tell you what CSS can do. A small example: "Although a sparrow is small, it has all five internal organs." You may not understand the true meaning of each statement. But you can remember the pattern of the example and use it continuously in practice in the future. The process of continuous use is the process of continuous memorization, so you can’t relax and always think that your memory is not good, but it doesn’t matter whether you are riding an ox or a thousand-mile horse. No matter what, as long as you have perseverance, you will definitely reach the end.
When reading a book, generally speaking, you should read the entire book for the first time. If you don't understand, you should read on. In the process of reading, you may find the answer to that question. After reading it, you will have a general impression, but there must be many things you don’t understand. It doesn’t matter, just keep reading.
For the second time, you have to take study notes while reading. Write down the parts that you think are the key points. Also, write down the parts that you think you have questions about. Keep reading with questions. If there is no answer, you can Post a post on BBS. There are still many well-meaning people. Here is a reminder: "You must learn how to ask questions!" I won't go into details here. You have to go on the computer to practice the examples in the book. What confuses you the most is: "First, you can't remember it, and second, you have a wrong understanding of the concept. (This may be because the book is not translated well, and the other is that your understanding is wrong." )", for the first one, you have to build up confidence, persist and persist. When you reach the end, you will find that everything is a matter of course. Because if you work hard, you will be rewarded and have results.
Many people have also watched it, but have not made any progress. I analyze the main reasons as follows:
Reason 1: There is not enough pressure, because many people, such as artists, learn CSS because they watch others learn it, so they learn it. If they don’t learn it, they will have no advantage! This kind of pressure is very small. If you don't learn well, you will still have a job as an artist.
Reason two: It’s just a part-time study, and it’s just for fun, because you don’t necessarily have to make a living with this technology.
Reason three: The method is wrong. Some people are just watching tutorials, but they don’t do it. I used to watch too much and do too little, so only with practice can you incorporate theoretical things.
2. Master the four learning stages of CSS
Once I asked a netizen, is it difficult to learn CSS?
She said, "It's not difficult." I asked, "How long have you been studying?" She said: "Just learned". In fact, what she said is right! If someone asks me if it is difficult to learn CSS? I would say: "It's difficult!" Why would I say it's difficult?
Learning CSS can be divided into the following stages:
Stage 1: The page can be created without thinking about browser compatibility issues, but the page is written with TABLE mode DIV everywhere.
Stage 2: Compatibility problems are thought of, but there is no way to prevent them in advance. They can only fix the problems and use HACK technology extensively (I only know about HACK technology, but use it rarely)
Stage 3: BUGs can be prevented in advance, but ID, CLASS are widely used in the style sheet, and CSS is translated as overlapping style sheets, such as "DIV P SPAN". This code marks the sub-element SPAN of P in the sub-element of DIV. By writing this way, you can define the style of SPAN without adding CLASS to SPAN. This is the advantage of CSS. Why not make good use of it and be sure to define a CLASS!
Stage 4: This stage is the most difficult, good HTML semantic structure, reasonable CSS, and reusable styles. There are articles in this area about good semantics and reasonable CSS. I will definitely write a special topic to study these two aspects in the future.
3. Frequently Asked Questions for CSS Beginners
Let's take it step by step. The first requirement is that there should be a title directly below the thumbnail. It's pretty straightforward: put an image in your HTML, followed by a line break (BR), then put the title inside a paragraph (P) and center it (using CSS).
Next we need to arrange these thumbnails and titles in pairs in the browser window. When using table layout, the pairs of thumbnails and titles will be placed in the TD respectively. When using CSS layout, we need to place them in DIV respectively. In order to arrange them horizontally on the window, we use CSS to float these DIVs to the left (FLOAT).
Question 1: What kind of book should I choose to read to learn CSS?
Let me recommend a few books first:
"The Definitive Guide to CSS"
"Website Reconstruction"
"Website Layout Record"
"HTML Reference"
If you don’t know much about HTML, you can first read the book "HTML Reference". This book is not only a teaching book but also a good tool book for querying HTML. The recently published "Mastering CSS" and "Impeccable Web Design" are very good books, but they are not suitable for people who do not have a foundation in CSS. If you want to become an excellent CSS Builder, you must also have a solid foundation in English. You can read foreign CSS tutorials and participate in related forums. Some people say that if you don’t understand English, you can just read the code, but in fact, their books discuss not only the code, but more importantly, they will tell us The idea of coding and the method of coding are worth learning and understanding. In addition, the Chinese tutorials I recommend are: "HTML and CSS Standard", Su Chen Xiaoyu's "CSS2 Chinese Manual", and the electronic version of "Web Designer"; there are many foreign and English e-books, so I won't give examples one by one. Reading e-books is a very tedious task. I am not used to reading e-books, so I often buy books to read.
Question 2: What software is used to edit CSS code?
This question seems to be asked most frequently! Let me talk about myself first. I first used DreamWeaver to write code. Since the DreamWeaver software itself is a very CPU- and memory-consuming software, you can imagine the speed of editing during runtime. After walking for a long time, I transitioned to the "semi-handwriting" state. "Semi-handwriting" is to use the code prompt function provided by DW. When you write "F", the style of "F" will be immediately prompted later. , convenient for you to choose. If you write a few more letters, the style you want will be found quickly. This can speed up your style writing, but one disadvantage is that if you leave the editing software that prompts you, you will not be able to write styles. , for example, when you modify the fine-tuning style from a programmer, he may not be using the same software that you are using, and may not have a code prompt function, so you can only go back to your own machine to edit it and then send it to the programmer! This is obviously unprofessional! So if you want to be an excellent person, you have to be professional!
Having said this, it seems that the topic has not been mentioned yet:
As long as you can write by hand, you can use any software. It is recommended to use the DreamWeaver plug-in TopStyle (the latest version is Pro V3.12).
Question 3: Should I write HTML or CSS first?
There are many answers on the Internet: write HTML first and then write CSS; write CSS first and then write HTML; write both at the same time. I tend to write both together. Writing CSS first or writing HTML first are not appropriate methods for beginners. If you ask a person to write code, and you tell him to write HTML first, the HTML cannot be modified after writing, and then you write CSS. If he can write it, then this person must be a very high-level Builder! So for beginners, in most cases I recommend writing at the same time. I will explain the specific steps:
First, we need to build the site and the directory. For example, we create the folders CSS and IMAGES. These two are the most basic. Then we create a new HTML file, a style.css and an empty style sheet, and connect the HTML pages. to this external style sheet.
Then we first write the most basic layout part in HTML, using DIV, and then add ID or CLASS directly to the DIV. These layout parts include the outer part, the header part, the middle part, the left, the middle, the right, the copyright part, etc. .
After writing these, you can then go to the style sheet to write the style, or you can continue to write the parts in the layout. Let's take the header as an example. Write the LOGO part in the header, and also add ID or CLASS to the NAV part. The same applies to others.
Why do we say that it is impossible to write the HTML part in one go? Because people are likely to make mistakes. There may be problems with the process of writing your ideas, or for browser compatibility issues, some of which are due to your experience. The shortcomings are not anticipated in advance, so when you find problems when writing styles, you may have to change your HTML code. This is how you write it. You can also use HTML/CSS at the same time. It all works. It depends on your habits. When we write code, we often test it while writing it. It does not mean writing one sentence to test one sentence. Instead, we write a piece of code and then test the browser. I tested it with IE6 and FF at the same time. Most of the time, a good developer will test their code after they have written it for a long time. This is because if a person has more experience, they will know and prevent browser errors from occurring in advance! So they can write code faster than inexperienced people. They have already gone through the errors you are going through. The first time you encounter a wrong browser display problem you have to spend time fixing it, but they can prevent it in advance or solve the problem immediately! This is one of the differences between you and them.
Another difference between beginners and experts is that experts use a lot of shortcut keys, so be sure to remember those commonly used shortcut keys. Every small detail will improve a little, and together they will make a big improvement. .
In addition, the best way to improve your own level is to practice more and find some better HTML+CSS templates for coding practice. Choose a simpler one at the beginning, take a screenshot of the page, and then use your own ideas on this picture. Restore to HTML page...