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
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
