CSS Div Layout Summary-Basics_html/css_WEB-ITnose

With the emergence of xml (extensible Markup Language), structured documents and data have a universal and adaptable format, which can be applied not only on the web, but also anywhere. Standards are called possible.
XHTML is the abbreviation of The Extensible HyperText Markup Language. On the basis of HTML4.0, it is extended with XML rules to obtain XHTML. It implements the transition from HTML to XML.
CSS is the abbreviation of Cascading Style Sheets. The combination of pure CSS layout and structured XHTML can help designers separate appearance and structure, making the site easier to access and maintain.

I made some basic summaries on my study of css div in the past two days.

1) Add the correct DOCTYPE to the page
DOCTYPE is the abbreviation of document type. Mainly used to indicate what version of XHTML or HTML you are using. The browser interprets the page code according to the DTD (Document Type Definition) defined by your DOCTYPE.
XHTML1.0 provides three DOCTYPE options: 2) Set a namespace (Namespace)
Add the following code directly after the DOCTYPE declaration:

A namespace is a detailed DTD that collects element types and attribute names. The namespace declaration allows you to identify your namespace through an online address pointer. Just enter the code as usual.

3) Declare your encoding language
In order to be correctly interpreted by browsers and pass tag verification, all XHTML documents must declare the encoding language they use. The code is as follows:

The coding language declared here is Simplified Chinese GB2312. If you need to make Traditional Chinese Content can be defined as BIG5.

(1) Transitional - very commonly used.

(2) Strict

(3) Frameset

4) Write all tags in lowercase letters
XML is case-sensitive, so XHTML is also case-sensitive. All XHTML element and attribute names must be lowercase. Otherwise your document will be considered invalid by W3C validation. For example, the following code is incorrect:

5) Add alt attribute to images
Add alt attribute to all images. The alt attribute specifies that replacement text is displayed when the image cannot be displayed. This is dispensable for normal users, but it is crucial for text-only browsers and users using screen readers. Only when the alt attribute is added will the code pass the W3C correctness check. Note that we need to add meaningful alt attributes. Writing like the following is meaningless:

Correct writing:


6) Add quotation marks to all attribute values ​​
In HTML, you Attribute values ​​do not need to be quoted, but in XHTML they must be quoted. Attributes must also be separated by spaces.
Example:

---

This is also incorrect

7) Close all tags
In XHTML, every open tag Tags must be closed. Empty tags should also be closed, using a forward slash "/" at the end of the tag to close themselves. For example:



8) Favorites small icon
For example: First make a 16x16 icon, name it favicon.ico, and place it in the root directory. Then embed the following code into the head area:



9) Use CSS to define the appearance of elements
One benefit of using CSS layout is that you can batch edit pages Modification, it can separate the document structure and presentation layer, reduce the workload and server load, and increase the site's scalability and application.
Dreamweaver provides us with a very convenient way to write css. (Picture)

css does not distinguish between spaces and case. The following is some basic summary
(1) Color value
Color values ​​can be written in RGB values, for example: color : rgb(255,0,0), or they can be written in hexadecimal, just like the example above color:#FF0000. If the hexadecimal values ​​are repeated in pairs they can be abbreviated with the same effect. For example: #FF0000 can be written as #F00. However, it cannot be abbreviated if it does not repeat. For example, #FC1A1B must be filled with six digits.
(2) Define font
Web standards recommend the following font definition method:
body { font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif; }
Fonts are selected in the order listed. If the user's computer contains the Lucida Grande font, the document will be designated Lucida Grande. If not, it is designated as Verdana font, if there is no Verdana, it is designated as Lucida font, and so on;
Lucida Grande font is suitable for Mac OS X;
Verdana font is suitable for all Windows systems;
Lucida is suitable for UNIX users
"Song Ti" is suitable for simplified Chinese users;
If none of the listed fonts are available, the default sans-serif font can be guaranteed to be called;

(6) Category Selector
In CSS, use a dot at the beginning to indicate the category selector definition, for example:
.14px {color : #f60;font-size:14px;}
In the page, use class="category Name" method call:
14px size font
This method is relatively simple and flexible, and can be created and deleted at any time according to the needs of the page.

(7) Define the style of the link
Four pseudo-classes are used in CSS to define the style of the link, namely: 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 above statements respectively define the styles of "links, visited links, when the mouse is over, and when the mouse is clicked". Note that you must write in the above order, otherwise the display may be different from what you expected. Remember they are in order "LVHA".

(8) Use selectors in combination to create exquisite design effects
Replace the dull black dots in front of ordinary unordered lists with beautiful patterns. The site http://marine.happycog.com/
first uses css rules to tell the unordered list of the category attribute inventory.
ul.inventory{
list-style:disc url(/images/common/lister2.gig) inside;}
Its call tag:

• Angelfish(67 items)


• Angels/Frogfish(35 items)


• Angelfish(5526 items)


• Angelfish(15 items)



(9) The abbreviations are in order The order of the hour hand
margin:25px 0 25px 0;

(10) line height
line-height:150% means the line spacing is normal 150%

10) structured Code div(division), id, class
Use them to write compact xhtml and use css more wisely.
(1) Structured id tags are different from class:
If your attributes The page contains a div with the id "content", and it is impossible to have another div or other element with the same name. In contrast, the class attribute can be used again and again on a page.
(2) ID rules
An id value must start with a letter or an underscore. It cannot start with a number and then follow letters, numbers and underscores. Spaces and hyphens - both are not allowed.

11) The produced website can go to w3c for standard correction
http:validator.w3.org
http://jigsaw.w3.org/css-validator/

(3) Group selector
When several elements have the same style attributes, a statement can be called together, and the elements are separated by commas:
p, td, li { font-size : 12px; }

(4) Derived selector
You can use derived selectors to define styles for child elements in an element, for example:
li strong { font-style: italic; font-weight: normal;}
is to define an italic but not bold style for the strong sub-element under li.

(5) id selector
CSS layout is mainly implemented using the layer "div", and the style of the div is defined through the "id selector". For example, we first define a layer



and then define it like this in the style sheet:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE; COLOR: #666;}
Where "menubar" is the id name you define. Note the "#" sign in front.

The id selector also supports derivation, for example:
#menubar p { text-align : right; margin-top : 10px; }
This method is mainly used to define layers and those that are more complex , there are multiple derived elements

Posted by marslei

Go to: http://www.yuanma.org/data/2006/1214/article_1951.htm