Summary of css div layout?? 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:

(1) Transitional - very commonly used.

(2) Strict

(3)Frameset

4)用小写字母书写所有的标签 
   XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的：

5)为图片添加 alt 属性 
   为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，象下面这样的写法毫无意义：
  
正确的写法：
  

6)给所有属性值加引号 
   在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。还必须用空格分开属性。
例：

---

这也是不正确的

7)关闭所有的标签 
  在XHTML中，每一个打开的标签都必须关闭。空标签也要关闭，在标签尾部使用一个正斜杠"/"来关闭它们自己。例如：
 


8)收藏夹小图标
   例如：首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区：



9)用CSS定义元素外观 
  用css布局的一个好处是可以批量对页面进行修改，它能将文档结构和表现层分离开来，减轻工作量和服务器的负荷，增加站点的扩展能力和应用。
  dreamweaver为我们提供了非常方便的方法去编写css.(图)

css是不区别空格和大小写的，下面是一些基础的归纳
     (1)颜色值
    颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
   (2)定义字体
   web标准推荐如下字体定义方法：
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
   字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
   Lucida Grande字体适合Mac OS X；
   Verdana字体适合所有的Windows系统；
   Lucida适合UNIX用户
   "宋体"适合中文简体用户;
   如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;

(3)群选择器
   当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
 p, td, li { font-size : 12px ; }

(4)派生选择器
   可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong { font-style : italic; font-weight : normal；}
   就是给li下面的子元素strong定义一个斜体不加粗的样式。

(5)id选择器
   用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层

Then define it like this in the style sheet:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
Where "menubar" is the id name you defined. 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 , has multiple derived elements.

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

(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 boring 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% indicates that the line spacing is normal 150%

10) Structured Code div (division), id, class
Use them to write compact xhtml, use css more wisely.
(1) Structured id tag, which is 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 finished website can go to w3c for standard correction
http:validator.w3.org
http://jigsaw.w3.org/css-validator/

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 encoding language declared here is Simplified Chinese GB2312. If you need to make Traditional Chinese Content can be defined as BIG5.