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 knowledge
First, let's talk about the knowledge points of this lesson.
Document Type
Language Encoding
HTML Tag
CSS style
CSS priority
CSS box model Composition
1) Document Type
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 Encoding
Next 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 tags
HTML 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 style
There are four types of CSS styles to load:
External Style
Internal Style
Intra-row style
Import Style
<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 priority
The ID has a higher priority than the class.
The following style overwrites the previous
The specified value is higher than the inherited value.
The intra-row style is higher than the internal or external style.
Summary: A single (ID) is higher than a shared (class). If a single (ID) is specified, it inherits
6) CSS box model Composition
The 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 weight 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? 2) Change concepts 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-brain |
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
