div css generates background, pop advantage, etc._html/css_WEB-ITnose

产生背景

　　HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记，这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养，随后发布了XML。

　　XML是一种比HTML更加严格的标记语言，全称是可扩展标记语言（EXtensible Markup Language）。但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。

　　而CSS关键就在于其与脚本语言（如Javascript）及XML技术的融合，即CSS+Javascript+XML（实际上有一种更好的融合：XML+XSL+Javascript）??但XSL，即可扩展样式表语言相较于CSS过于复杂，不太容易上手。自从CSS出现之后，HTML终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。

流行优势

　　1、符合W3C标准。

　　2、支持浏览器的向后兼容。

　　3、搜索引擎更加友好。

　　4、样式的调整更加方便。

　　5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。

　　6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

嵌入方式 行内套用

　　可以在HTML文件内直接宣告样式。

　　举例来说，Thisisfontsize16.

　　以上的HTML文件在浏览器上会显现为：Thisisfontsize16.

　　嵌入套用样式可以嵌入于HTML文件中(通常是在

内)。

　　举例来说，

背景颜色是红色

　　以上的HTML会显现出：背景颜色是红色

　　外部连接套用

　　在这种方式下，所有的CSS样式宣告都是存在另外一个档案中。

　　该档案通常名称为.css。

　　在HTML文件的

..

之中，我们将用以下的程式码将这个.css档案连接进入：

　　

　　以上这一行会将在external-stylesheet.css这个档案内所宣告的样式加入HTML文件内。

汇入套用

　　外部的CSS样式也可以被汇入进HTML文件。

　　汇入的做法为利用@import这个指令。

　　@import的语法为：

　　@import指令最初的用意，是为了能够针对不同的浏览器而运用不同的样式。不过，现在已经没有这个必要。现在用@import的目的，最常是要加入多个CSS样式。当多个CSS样式被@import的方式加入，而不同CSS样式互相有冲突时，後被加入的CSS样式有优先的顺位(详情请见CSS串接)。

　　还有一种嵌入的方式是直接写在标签上的，不过这种写法有些限制，大多数标签都可以接受这种解法:

　　

文字

This code changes the color of the text in the label by directly embedding the label, and the writing method of directly embedding the label according to the priority call level of css is more direct and preferential to call.

Layout advantages

1. Make the page load faster

Since most of the page code is written in CSS, the page size becomes smaller. Compared with the table nesting method, DIV CSS separates the page into more areas, which are loaded layer by layer when the page is opened. Instead of enclosing the entire page in a large table like table nesting, the loading speed is very slow.

2. Reduce traffic costs

The page size becomes smaller and the browsing speed becomes faster, which is the biggest advantage for some websites that control host traffic.

3. More efficient when modifying the design

Due to the use of DIV CSS production method, it is easier to save time when modifying the page. According to the regional content tag, find the corresponding ID in CSS, which makes it more convenient to modify the page without destroying the layout style of other parts of the page.

4. Maintain visual consistency

One of the most important advantages of DIV CSS is to maintain visual consistency; in the past, the nested table production method would make the page and page, or area The display effect will vary between regions. Using the DIV CSS production method, all pages or all areas are uniformly controlled by CSS files, which avoids effect deviations reflected in different areas or different pages.

5. Better indexed by search engines

Since most of the HTML code and content styles are written into the CSS file, this makes the text part of the web page more prominent. Easy to be collected and included by search engines.

6. More friendly to viewers and browsers

We all know that websites are made for viewers and are more friendly to viewers and browsers. DIV CSS is here more advantages. Because CSS is rich in styles, it makes the page more flexible. It can achieve unified and non-deformed display effects according to different browsers.

Problems

Although DIV CSS has certain advantages, the problems existing in CSS DIV website construction at this stage are also relatively obvious, mainly manifested in:

First, the high reliance on CSS makes the web page The design becomes more complex. Compared with the table layout (table) in HTML4.0, although CSS DIV is not out of reach, it is at least much more complicated than table positioning. Even for website design experts, it is easy to have problems, let alone beginners. To a certain extent, it has affected the popularization and application of XHTML website design language.

Second, abnormal CSS files will affect the normal browsing of the entire website. The design elements produced by CSS websites are usually placed in several external files. This one or several files may be quite complex or even large. If the CSS file is called abnormally, the entire website will become miserable.

Third, the browser compatibility issue with CSS website design is quite prominent. Web design based on HTML4.0 has almost no browser compatibility issues in versions after IE4.0. However, a website designed with CSS DIV may display pages normally in IE but not in Firefox. It’s unrecognizable (which is why Internet marketers are advised to use Firefox). CSS DIV still needs further support from various browser manufacturers.

Fourth, whether CSS DIV is optimized for search engines depends on the professional level of web design rather than CSS DIV itself. CSS DIV web design does not guarantee that the web page will be optimized for search engines. It does not even guarantee that the web page will have a simpler code design than the HTML website. Moreover, the inclusion and sorting of web pages by search engines is obviously not measured by whether tables and CSS positioning are used. This This is the reason why many websites made with traditional table layouts are ranked high in search results, while many web pages made using CSS and web standards are still ranked low. Because for search engines, factors such as website structure, content, and related website links are always the most important indicators for website optimization.