Home > Developer > Web Develop
http://www.aa25.cn/special/10day/
Welcome to learn "Ten days to learn Web standards", which is what we often say div+css. But the div+css here is a mistake, suggesting that you call it a Web standard.
Learning this series of tutorials requires a certain set of HTML and CSS basics, which means that you have previously done a Web page that uses a table layout. If you're just starting out with web authoring, don't know what table layouts are and HTML and CSS, it's a good idea to recharge your batteries, or you'll be struggling with this tutorial or you won't understand it at all.
Due to the time relationship, this tutorial only covers some of the basics, allowing you to stride from the original table layout to the Web Standard (DIV+CSS) layout, using a Web-based standard to make common pages, which is also the purpose of this tutorial.
This tutorial is an example of how to explain the key points or difficulties, less explaining the concept. Because the concept of these things is difficult to understand, or to understand that you may not be able to understand, understand and not necessarily understand. So the concept is left to everyone in-depth study.
As a result of the chapter relationship, CSS and CSS are not hack separate, but in the use of the time interspersed into the explanation. The HTML Foundation and the CSS Foundation are just a few of the important things that are described in the first section.
Let's start our first day of study.
First, XHTML CSS BasicsFirst of all, let's talk about our knowledge of this lesson.
When we use Dreamweaver to create a new HTML-formatted document, we look at the source code, and we find the following sentence 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 a transition type, as well as a framework and a strict type, the transition type is generally used, because the browser's parsing of XHTML is more lenient, allowing the use of tags in HTML4.01, but must conform to XHTML syntax. Many friends in the production of the page, often like to delete this sentence, here is recommended that you must keep this sentence, delete it may cause some style sheet failure or other unexpected problems.
2) Language codingNext we will find this sentence:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
It indicates the language encoding of the document. As we usually say in Chinese and English. The gb2312 here tells the browser that this document is encoded in Simplified Chinese, and that a commonly used encoding is UTF-8 encoding, which is an internationally-accepted encoding. Regardless of which encoding we use, one thing is that the CSS stylesheets and other files that are included must also be encoded in this document, or garbled.
3) HTML tagsHTML tags must end in the page. Paired labels End with a "/tag name", and some single tags end up at the end of themselves, which is the specification for XHTML code writing.
Paired Tags:
<body>{...} </body>
<div>{...} </div>
<span>{...} </span>
<p>{...} </p>
......
A single label:
<br/>
.......
It is also important to note that by XHTML specification, labels must be lowercase.
4) CSS StyleThere are four types of CSS styles loaded:
<link href= "Layout.css" rel= "stylesheet" type= "Text/css"/>
This form is to write the CSS in a separate CSS file, and then link in the source code. The advantage is that not only this page can be called, other pages can also be called, is the most common form.
<style>
H2 {color: #f00;}
</style>
This form is an internal style sheet, which ends with <style> and </style> and is written in the head tag of the source code. This style sheet is valid only for this page. cannot be used for other pages.
<p style= "FONT-SIZE:18PX;" > Internal Styles </p>
This is the inline style marked with style in the tag, and the inline style is only valid for the elements within the tag, because it is not separated from the content, so it is not recommended.
@import url ("/css/global.css");
A link style is an external style sheet that is linked with a @import URL tag, which is typically used inside another style sheet. If LAYOUT.CSS is the style used for the home page, then we can put the common styles needed for the whole world into a global.css file, and then link the global style in the form of @import URL ("/css/global.css") in Layout.css. This makes the code good reusability.
5) CSS PrecedenceThe CSS box model is the focus of this section of the tutorial. The first few knowledge points, if you will use the table layout, it is very good to understand and grasp. The box model here is a different point from the table layout. Learning Web standards, the first thing to understand is the box model, this is the core of Div typesetting. The traditional table layout is to locate the content of the typesetting page by nesting tables and tables in different sizes, and then using CSS to format the pages by nesting the boxes and boxes of different sizes defined by CSS. The layout of the page code concise, performance and content separation, maintenance is convenient, can be compatible with more browsers, such as PDA devices can also be viewed normally.
So why is it called a box? Let's first talk about the property names we often hear in web design: content, padding (padding), Borders (border), boundaries (margin), CSS box patterns.
We can think of it as a box above the opening of the reality, and then look down from the top, the border is equivalent to the thickness of the box, the content of the box with respect to the space of the object, and fill it, the equivalent of shock and in the box filled with foam, the border is equivalent to the box around to set aside a certain amount of space Is it so easy to understand the box model.
So the width of the whole box model in the page is composed of left Border + left box + Left padding + content + right padding + right border + right boundary, and width in CSS style is only the width of the content section, which is a lot of friends easy to confuse the place
Here the boundary we also call: margin, outer patch; padding is also called: Inner margin, inner patch.
If you do not understand the CSS box model now, continue to look down, later chapters will be applied to the box model instances.
Second, how to start learning Web standards? 1) HTML and CSS BasicsBefore studying this series of tutorials, you are required to have a certain HTML and CSS Foundation, make a Web page, and use a table to layout the page, so that learning can be very easy. If you do not understand these, it is recommended that you learn this knowledge before you learn this tutorial.
2) Change of conceptWhen we used to make a website, we used to think about the appearance, color, font and layout of all the content on the page. But the appearance is not the most important, contrary to the end-user experience when visiting the Web page is a priority to consider. A div+css layout and well-structured page can be defined by CSS as any appearance, displayed in any form on any network device, including mobile phones, PDAs, and Computers, and Web pages built with div+css layouts to simplify code and speed up display.
Therefore, in order to learn div+css, first of all to change the concept, you need to abandon the traditional table layout, the use of layer (DIV) layout, and the use of cascading style sheets (CSS) to achieve the appearance of the page. A better experience for web visitors.
3) Multi-action, multi-brainSpeaking of this, a little bit of pediatrics, just like when we were in elementary school teachers often taught us that. Why am I here also as a little column out, I was through the comments found that some students ask the question is too not level, a little move the brain to understand, or do a try to know, but he did not bother to try. For a simple example, take a browser-compatible, you write a style, after IE and Firefox open to look at a bit, but do not do. There is a student message to me to take an example of the picture package to him, I look at the code, the use of a picture, no words, you have the message of this time, I also early to download the picture down. So here is to warn everyone, must be more hands-on, more brain, do not be afraid of trouble. In addition, after learning a tutorial, be sure to do the instance yourself, so that you can master it faster.
DIV+CSS Special topic: 10 Days Learn Div+css
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
