Div + CSS layout Overview
Summary of CSS + dir layout in XHTML
XHTML is the abbreviation of Extensible Markup Language
CSS --- the abbreviation of a stacked style sheet
1. Add the correct doctype to the page
Doctype is short for document type. It is mainly used to describe the XHTML or html version you are using.
2. Set a namespace
Add the following code directly after the doctype declaration:
<HTML xmlns = "http://www.w3.org/1999/xhtml">
3 declare your encoding Language
The Code is as follows:
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
Simplified Chinese --- gb2312 traditional Chinese content --- big5
4. Write All tags in lowercase letters
XML is case sensitive.
5. Add the alt attribute to the image
Correct syntax:
6. Quote all attribute values
7. Disable all labels
Use a forward slash (/) at the end of the tag to close itself. For example: <br/>
8. favorites icons
First, create a 16x16 icon named favicon. ICO and put it in the root directory.
Then embed it into the head area;
<LINK rel = "icon" href = "/favicon. ICO" type = "image/X-icon"/>
<LINK rel = "shortcut icon" href = "/favicon. ICO" type = "image/X-icon"/>
9 define the element appearance with CSS
CSS is case-insensitive.
1 color value
RGB values can be written in hexadecimal notation. For example, color: RGB (255, 0, 0) color: # ff0000
2. Define the font
Body {font-family: "luciad Grande", verdana, lucida, Arial, Helvetica,, sans-serif ;}
Verdana fonts are suitable for all Windows systems
3. Group Selector
When the style attributes of several elements are the same, you can call a declaration to separate the elements with commas (,).
P, TD, Li {font-size: 12px ;}
4. Derivative Selector
You can define a style for a child element in an element by using the derivation tool.
Li strong {font-style: italic; font-weight: normal ;}
5 Id Selector
The CSS layout is mainly implemented by the "Div" layer, and the DIV style is defined by the "id selector ".
<Div id = "menubar"> </div>
Then define in the style sheet as follows:
# Menubar {margin: 0px; Background: # fefefefe; color: #666 ;}
6. Category Selector
In CSS, a vertex switch is used to indicate the class selector definition, for example:
. 14px {color: # f60; font-size: 14px ;}
On the page, use the class = "Class Name" method to call:
<SPAN class = "14px"> 14 PX font </span>
7. Define the link Style
In CSS, four pseudo classes are used to define the link styles: A: Link A: visited a: hover and A: active.
For example:
A: link {font-weight: bold; text-Decoration: none; color: # c00 ;}
A: visited {font-weight: bold; text-Decoration: none; color: # C30 ;}
A: hover {font-weight: bold; text-Decoration: underline; color: # f60 ;}
A: active {font-weight: bold; text-Decoration: none; color: # f90 ;}
The preceding statement defines the style of "links that have been accessed, when the mouse is over, and when the mouse is over ".
Note: The data must be written in the above sequence; otherwise, the display may be different from what you expected.
Their order is: "lvha"
8. Combine selector to create exquisite design results
9. The abbreviation is clockwise.
10 rows high
Line-Height: 150% indicates that the line spacing is normal 150%.
10 Structured code Div (Division), ID, Class
1 structured ID tag, which is different from class:
If your property page contains a div whose ID is "content", it cannot have another
A Div or other element has the same name. On the contrary, the class attribute can be stored in any
Pages are used again and again
2 ID rules
An ID value must be opened with a letter or underline. It cannot be switched with a number.
11. After the website is created, you can go to W3C for standard correction.
Validator.w3.org
Jigsaw. w3org/CSS-validator/
Call a style sheet
The following two methods are usually used to call a style sheet externally:
1. Page embedding: The style sheet is directly written in the head area of the page code.
For example, <style type = "text/CSS"> <! -Body {bockground: White; color: black;}-> </style>
2 external call method: Write the sample table in an independent .css file, and then use
Call the following code
For example: <LINK rel = "stylesheet" REV = "stylesheet" href = "CSS/style.css" type = "text/CSS" Media = "all"/>
Content for search engines
1. Allow searching robots to search all links in the site.
For example: <meta content = "all" name = "Robots"/>
2. Set site author information
For example: <meta name = "author" content = "ajie@asd.com, Archimedes"/>
3. Set site copyright information
For example: <meta name = "Copyright" content = "www.w3cn.org, copyright"/>
4. Brief introduction to the site
For example: <meta name = "Description" content = "New web designer"/>
5. Site keywords
<Meta content = "Designing, with, web, standards, XHTML, CSS" name = "keywords"/>
Code Specification
1. All tags must have an ending mark.
Unpaired, add a slash to the backend. Example: <br/>
2. The element and attribute names of all tags must be in lowercase.
3. All XML tags must be reasonably nested.
Correct syntax: <p> <B> </B> </P>
4. All attributes must be enclosed in quotation marks ("").
5. encode all <and & special characters
Any minor sign (<), not part of the tag, must be encoded as & lt;
Any greater than sign (>) is not part of the tag and must be encoded as & gt;
Any ampersand (&), not part of an object, must be encoded as & amp;
6. assign a value to all attributes.
For example: <TD nowrap = "nowrap"> <input type = "checkbox" name = "shirt" value = "medium" Checked = "checked">
7. Do not use "--" In comments "--"
For example, replace the dotted line with an equal sign or space.
<! -- Here is the comment ========= here is the comment->
Getting started with CSS
CSS is short for Cascading Style Sheet (stacked style sheet). It is a method for adding
A simple style mechanism is the layout language of the presentation layer.
1. Basic syntax Specification
Typical CSS statements:
P {color: # ff0000; Background: # ffffff}
"P" is called a "selector", indicating that we want to define a style for "p;
Style declaration is written in a pair of braces;
Color and background are called "properties". Different properties are separated by semicolons;
"# Ff0000" and "# ffffff" are attribute values ).
2. color value
3. Define the font
4. Group Selector
5. Derivative Selector
6. ID Selector
7. Category Selector
8. Define the link Style
Getting started with CSS layout
1 Define Div
Analysis Div example:
# Sample {margin: 10px 10px 10px 10px;
Padding: 20px 10px 10px 20px;
Border-top: # CCC 2px solid;
Border-Right: # CCC 2px solid;
Border-bottom: # CCC 2px solid;
Border-left: # CCC 2px solid;
Backround: URL (images/bg_poem.jpg) # fefefefe no-repeat right bottom;
Color: #666;
Text-align: center;
Line-Height: 150%; width: 60% ;}
Description:
The layer name is sample. You can call this style on the page.
Margin refers to the margin left outside the border of the layer, used for margin or other Layer Manufacturing
One spacing. "10px 10px 10px 10px" represents the upper right and lower left respectively "(clockwise)
The four borders are abbreviated as "margin: 10px;" if the margin is zero, it is written as "margin: 0px ;"
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
