Learn DIV CSS(2)_html/css_WEB-ITnose with me

Arranged by: Zhutou Communication QQ: 117376883

Chapter 1: Where to start?

Everything is difficult at the beginning, where should I start as my tutorial What about the beginning of? Before I wrote a few words in the first chapter, I was still thinking, and I happened to think of a question my apprentice asked me that day. Let me start my tutorial from here!

The other day my apprentice asked me:

How do I control the display style in the style sheet? I didn't answer her directly at that time, but said to her directly: "You don't have a very clear concept of the principle of CSS processing pages. Don't study CSS in depth first. You should first understand the principles of CSS processing pages."

…….

Then let’s take the principle of CSS page processing as the first chapter of my tutorial, because many people are not very clear about this concept.

The so-called div css (actually xhtml or xml css) principle of making web pages is the separation of content div and style css (performance). Learning the appearance of this kind of web page is not the most important. A well-structured xhtml The page can be presented in any appearance, CSS Zen Garden is a typical example. CSS Zen Garden helps us finally realize the power of CSS.

So to learn this web page production technology, you must fully understand the concept of separation of content and style

1. Let’s talk about the content first

The content is your final page to be displayed to The viewer's information, such as news, pictures, animations, videos, etc., is included in the content. Before building a page containing this content, don't worry about how it is displayed, but in a good way. Structure and write them on the page, as long as the page includes the content you want to display! In a word: everything you need is already on the page. Of course, this is the minimum requirement. I have added the word "structure" in blue above. An excellent front-end developer has already considered how to better integrate with css and database (dynamic page) when writing xhtml pages

Of course, for those who are new to div css, don’t worry, take your time!

2. Let’s talk about styles

Before talking about this, you first go to the Zen Garden website http://www.csszengarden.com/

Why should you read this website? This is to illustrate the power of CSS. The xhtml code of all pages of the Zen Garden website is the same. If you are interested, you can download it online. So why are the display styles so different? Is it different? Yes, style sheets are at work. Different pages call different external style sheets. This website can perfectly explain the previous sentence "A well-structured xhtml page can be expressed in any appearance."

Having seen the power of CSS, are you ready to take action?

Don’t worry, we haven’t finished the first chapter yet.

For those who have learned to use tables to create web pages, it may be a bit difficult to continue learning this method. , like me, I have never learned to use tables to create web pages before, but I directly taught myself this method. I went back and studied tables. It is said that after learning tables and then learning div css, it is particularly difficult to understand the concept of separation of content and presentation. , then my suggestion is: simply forget everything you have learned before and start from scratch!

Back to my apprentice’s question, regarding

, this thing exists in the .html file, but it is currently empty content. If we insert a picture into it, the code becomes like this

If now When previewing in the browser, you can only see one image, and it’s in a disordered position!

We start to let css play its role. The class (class) b in

implements css call. We write this in css: .b {width:450px;height:500px;margin-top:15px;}The content in {} controls the display style of the image in the xhtml file: width 450 pixels, height 500 pixels, margin 15 pixels, content and style have been written , how can we combine the two into one?

Just insert

of the xhtml file />Connect the external style sheet on it!

One is content and the other is style. Without a style sheet, the content will be "ugly".

This is the end of the first chapter. I wonder if you clearly understand the concept of separation of content and style!