Heim  >  Artikel  >  Web-Frontend  >  div+css 的嵌入方式和布局优点_html/css_WEB-ITnose

div+css 的嵌入方式和布局优点_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:31:021305Durchsuche

div+css 的嵌入方式和布局优点

 1、嵌入方式

行内套用

  可以在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串接)。

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

  

文字

  这个代码通过直接嵌入标签的形式,使得标签内的文字更改颜色,而且根据css的优先调用级直接嵌入标签的写法也更直接更优先选择调用。

2、布局优点  

     一、使页面载入得更快

  由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。

  二、降低流量费用

  页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。

  三、修改设计时更有效率

  由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。

  四、保持视觉的一致性

  DIV+CSS最重要的优势之一:保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。

  五、更好地被搜索引擎收录

  由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,便于被搜索引擎采集收录。

  六、对浏览者和浏览器更具亲和力

  我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优势。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn