Welcome to learn "ten days to learn web standards", which is what we often call Div + CSS. However, the DIV + CSS here is an incorrect name. We suggest you call it web standard.
To learn this series of tutorials, you need to have a certain HTML and CSS basics, that is, you have done Web pages before and will use table layout. If you do not know what table layout and HTML and CSS are when you first start to learn how to create web pages, we recommend that you charge them first. Otherwise, this tutorial will be difficult or hard to understand.
Due to the time relationship, this tutorial only describes some basic knowledge, allowing you to move from the original table layout to the Web Standard (div + CSS) layout, and create common pages using the Web standard, this also achieves the purpose of this tutorial.
In this tutorial, we will explain it step by step in the form of instances. We will explain the key points or difficulties involved in the instance, but will not explain the concept much. It is hard to say that you understand concepts, or that you cannot understand them. So leave the concept to everyone for further research.
Due to the relationship between the chapters, CSS and CSS hack are not separated separately, but they are used only when inserted for explanation. The basics of HTML and CSS are described only in section 1.
Next we will start the first day of study.
I. Basic XHTML CSS knowledgeFirst, let's talk about the knowledge points of this lesson.
When we use Dreamweaver to create an HTML document, we can view the source code and find the following statements at the top of the Code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This statement indicates that this document is of the Transition type, and there are also frameworks and strict types. Currently, the Transition type is generally used, because the browser has loose parsing of XHTML, And the tags in html4.01 are allowed, but it must comply with the XHTML syntax. Many friends often like to delete this sentence when creating a page. We recommend that you keep this sentence here, deleting it may cause some style sheets to become invalid or unexpected problems.
2) Language EncodingNext we will find the following sentence:
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
It indicates the language encoding of the document. Just like what we usually speak in Chinese and English. Here gb2312 tells the browser that this document uses Simplified Chinese encoding; there is also a commonly used encoding is UTF-8 encoding, it is internationally used encoding. No matter which encoding we adopt, one thing is that the included CSS style sheet and other files must be encoded like this document, or garbled characters may occur.
3) HTML tagsHTML tags must end on the page. The pairs of tags end with "/Tag Name", and some single tags end with/at the end of their own. This is the specification for writing XHTML code.
Paired tags:
<Head> {...} <Body >{...} </body>
<Div >{...} </div>
<Span >{...} </span>
<P> {...} </P>
......
Single Tag:
<Br/>
.......
Note that the labels must be in lower case according to XHTML specifications.
4) CSS styleThere are four types of CSS styles to load:
<Link href = "layout.css" rel = "stylesheet" type = "text/CSS"/>
In this form, CSS is written to a CSS file separately, and then linked in the source code as a link. It can be called not only on the current page, but also on other pages. It is the most common form.
<Style>
H2 {color: # f00 ;}
</Style>
This form is an internal style table, which ends with <style> and </style> and is written in the head label of the source code. This style sheet is only valid for this page. It cannot act on other pages.
<P style = "font-size: 18px;"> internal style </P>
This style is marked as an in-row style in the label. The in-row style is only valid for the elements in the label. It is not recommended because it is not separated from the content.
@ Import URL ("/CSS/global.css ");
A link style is an external style table marked by @ import URL. It is usually used in another style table. You can link the global style in the form of @ import URL ("/CSS/global.css"), so that the code can be reused.
5) CSS priorityThe CSS box model is the focus of this tutorial. The previous knowledge points can be well understood and mastered if you use table layout. The box model here is different from the table layout. To learn web standards, you must first understand the box model, which is the core of Div layout. Traditional table formatting uses different sizes of tables and nested tables to locate typographical web content. After CSS formatting is used, the webpage is organized by nesting boxes and boxes of different sizes defined by CSS. The webpage code in this typographical mode is concise, its performance is separated from the content, which is easy to maintain and compatible with more browsers, such as PDA devices.
Why is it a box? First, let's talk about the attribute names that we often hear in web design: content, padding, border, and margin all have these attributes.
We can think of it as a box opened above the reality, and then look down from the top down, the border is equivalent to the thickness of the box, the content is relative to the space of the objects in the box, and fill it, it is equivalent to a bubble filled in the box for shockproof purposes. The boundary is equivalent to setting up a certain amount of space around the box for easy removal. This makes it easy to understand the box model.
Therefore, the width of the entire box model in the page is composed of the Left Border + Left fill + content + right fill + Right Border + right border, in css styles, the width defined by width is only the width of the content, which is easy to confuse with many friends.
The boundary here is also called the outer margin and the outer patch; the padding is also called the inner margin and the inner patch.
If you do not have a thorough understanding of the CSS box model, go on to the next section and apply it to the box model instance.
2. How to start learning web standards? 1) Basic HTML and CSSBefore learning this series of tutorials, you must have a certain HTML and CSS basics. After creating a webpage, you can use a table for webpage layout so that you can learn it easily. If you do not understand this, we recommend that you first learn this knowledge and then study this tutorial.
2) Change conceptsIn the past, when we made a website, we always used to consider the appearance, color, font and layout of all the content displayed on the page. However, the appearance is not the most important. On the contrary, the experience of end users when accessing webpages is a top priority. A page with good layout and structure by Div + CSS can be defined as any appearance by CSS and displayed on any network device (including mobile phones, PDAs, and computers) as any appearance, in addition, webpages built with Div + CSS layout can simplify code and speed up display.
Therefore, to learn about Div + CSS, we must first change our mindset. We need to abandon the traditional table layout method, adopt layer (DIV) layout, and use Cascading Style Sheets (CSS) to display the page. It provides a better experience for website viewers.
3) Multiple hands-on and multi-brainSpeaking of this, it's a little pediatric, just as teachers often taught us when we went to elementary school. Why am I also listed here? I found through comments that some of the questions raised by some students are too low, so I can understand them with a little bit of brains, or you can try it by yourself, but he is too lazy to try it. Let's take a simple example. In terms of browser compatibility, after you write a style, you will not understand it after you open the IE and Firefox respectively, but you will not do it. Another student asked me to package an image from an instance and send it to him. When I read the code, I used an image. It was speechless. At this time, I sent a message, I downloaded the image too early. So I would like to warn you that you must be more hands-on and brain-driven, so don't be afraid of troubles. In addition, after learning a tutorial, you must make your own instances to learn more quickly.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
