什么是DIV CSS?它是一种网页的布局方法|建站百科_上海子辛网站建设

建站百科

更多分类
子辛学院 建站百科 常见问题 行业动态 网站策划 网站营销 服务地区
您当前位置:首页 >> 新闻资讯 >> 建站百科

什么是DIV CSS?它是一种网页的布局方法

发布人:Tony老师  来源:子辛网络  时间:2016年08月26日 访问量:

DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。提起DIV+CSS组合,还要从XHTML说起。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。

“DIV+CSS”其实是错误的叫法,而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记,而CSS只是一种表现形式。也许其提出者本意并没有错,但是跟风者从表现曲解了其意思,认为整个页面就应当是DIV+CSS文件的组合。


什么是DIV CSS?它是一种网页的布局方法

一、方法

css是层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

在HTML文档中加入CSS

样式表可分为嵌入式样式表、外部样式表和内联样式表三种,在同一文档内可以同时使用三种方法。


二、发展

1.样式定义放在一个单独的文件中,例:新建一个后辍为CSS的样式定义。

元素{ 属性color:值red;} 在head段使用<link>标记,

引用语法:<link rel=”stylesheet” type=”text/css” href=”样式表URL” />

2.嵌入式样式表:

<style>元素段必须出现在head段内,有一个开始和结束标记,并且可以有多个<style>段

语法格式: <style type=”text/css”>

…样式定义…


3.在嵌入式样式表中我们可以使用@import导入一个外部样式表,例:

<style type=”text/css”>

@import url(外部样式表位置);

…其它嵌入式的样式定义…

</style>


4.内联样式表:

写在开始标记里面,比如你要H1变红色,

<h1 style=”color:red;”>变为红色</h1>

总结: 三种样式表优先使用外部样式表、嵌入式样式表用来调试用的、一般不使用内联样式表。



5.样式规则:

一个样式规则由一个选择器后跟一个声明块组成,声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略,,声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束,每个声明内只能有一个属性,如果属性值中含有空格用双引号括起来例,在一个声明块内可以有多个声明,每个声明用分号隔开。


6、注释:有关的详细内容在中有详细的解释。


7、选择器分组

当遇到几个选择器共享一个声明的时候,可以分组放在一起,每个选择器必须以逗号隔开。例:h1,h2,h3,h4 { color red;}选择器分组时要将每个选择器路径写全,分组结尾不能有逗号。

例:路径不全: #maincontent p, ul{ border-top:1pxsolid #ddd;}

正确写法:#maincontent p, #maincontent ul{ border-top:1pxsolid #ddd;}

例:结尾多了一个逗号: .a1 p, .a1 ul,{color:red;}


8、选择器

元素选择器:语法格式: 元素{color: blue;}

类选择器: 语法格式: .类名{属性: 值;}

ID选择器:#id名 {属性 : 值;} ID名不能重复

通配符选择器:语法格式:*{属性:值;}

伪类选择器:

伪类选择器可以以不同方式格式化超级链接<a>元素的四种不同状态:以下顺序依次写;(记忆方法:a Love or Hate)

a:link 是用在未访问的链接的选择器

a:visited 是用在已访问过的链接的选择器

a:hover 是用在鼠标光标放在其上的链接的选择器

a:active 是用在获得焦点(比如,被点击)的链接的选择器

如果需要,我们可以组合这几个状态,按顺序写:

a:link,a:visited { color :blue;}

a:hover ,a:active { color :blue;}


9、伪元素选择器

标准的选择器不能格式化一个元素内容的第一个字母或者第一行,而伪元素选择器能实现:

所有浏览器支持的有两种: :first-line和 :first-letter

例:段落的第一行:p:first-line {属性:值;}

例:段落的第一个字母:p:first-letter {属性:值;}


三、优先级

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属*(attribute)选择符 > 类别(type),伪对象(pseudo-element)

1,解释:

*内联样式(inline style):元素的style属*,比如 <div style="color:red;"></div> ,其中的color:red;就是内联样式

*ID选择符:元素的id属*,比如 <div id="content"></div> 可以用ID选择符#content

*类选择符:比如<div class="box"></div>,可以使用类选择符 .box

*伪类(pseudo-class):最常见的是锚(a)伪类,比如a:link,a:visited.

*属性选择符(attribute selectors):比如div[class=demo],含有class为demo的div元素

*类别选择器(type selector):HTML标签选择,比如div .demo,div元素下含有class为demo的元素

*伪对象选择器(pseudo-element selector):比如div:first-letter,div元素下的第一个单词。

多重CSS样式定义,属性追加重复最后优先原则

一个标签可以同时定义多个class,也可以是同一个class中重复定义属性。例如:

我们先定义两个样式

.one{width:200px;background:url(images/imgA.jpg) no-repeat left top;}

.two{border:10px solid #000; background:url(images/imgB.jpg) no-repeat left top;}

在页面代码中,我们可以这样调用:<div class="one two"></div>

这样最终的显示效果是这个div样式是什么呢??重复的是以哪一个为准呢??

<div class="one two"></div>应用到的样式如下:

width:200px;

border:10px solid #000;

background:url(images/imgB.jpg) no-repeat left top;

因为,当应用两个或多个样式时,浏览器所应用的样式根据是属性追加重复最后优先原则

就是说两个或多个或重复的样式名定义,浏览器所应用的样式是按先后顺序的,如果定义了重复的属性值,以最后定义的为准,如果应用了两个或多个样式名,里面不重复定义的

属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。


2、CSS的调用

页面内嵌法:就是将样式表直接写在页面代码的head区。类似这样:

<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>

外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

<link href="css/style.css" type="text/css" rel="stylesheet"/>

"@import"命令方法:类以下代码, <style type="text/css" media="all">@import url( css/style01.css );</style>

本人推荐使用第二种调用方法(外部调用法)

优先规则

既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点。

  样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

  1、统计选择符中的ID属性个数。

  2、统计选择符中的CLASS属性个数。

  3、统计选择符中的HTML标记名个数。

  最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数(css2.1是用4位数表示)。( 注意,你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

  例如:

  1、每个ID选择符(#someid),加 0,1,0,0。

  2、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。

  3、每个元素或伪元素(:firstchild)等,加0,0,0,1。

  4、其它选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。


四、使用误区

1、DIV+CSS的合理之处在于可以进行网页的统一设计管理,通过一个样式表,牵一发而动全身,只要修改样式表,就可以统一全站的风格,如果为一个页面单独做一个样式表,或者一个div就做一个样式表,没有全局设计观念,那么这个div+CSS的设计方式就完全没有必要,甚至成了累赘;

2、像Table一样用DIV+CSS,无穷尽的嵌套,其效果与Table设计没有两样,并不会带来搜索引擎的优化效果,反而会增加页面的负担;

3、推崇Div+CSS,却不考虑兼容性,TABLE设计由来已久,得到浏览器的广泛支持,所以显示效果很好,不会出现错位情况,但是DIV+CSS却在 部分浏览器中会发生页面错位的情况,因此在进行设计的时候也要考虑到不同浏览器的情况,进行更改和调试。


五、对SEO作用

1、精简的代码,使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。代码精简提高了百度蜘蛛的爬行效率以及高效性,能在最短的时间内爬完整个页面,同时这样对收录质量有一定好处;

2、提高访问速度、增加用户体验性

使得加载速度得到很大的提高,那么用户点击页面的等待时间就越少,用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢,进而提高网站排名。

3、div+css结构清晰,很容易被搜索引擎搜索到,天生就是适合优化seo,降低网页大小,让网页体积变得更小。注意:div+css结构清晰、精简,不意味着可以全部用div+css结构,比如通篇HTML标签全DIV的,貌似除了<head>之上及<body>之上及之外,其它全是<div>,就如同整个HTML是一万个毫不相干的内容拼装起来,或者通篇是<div><ul><li>结构的,就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍,因为曲解了“DIV+CSS”的真实含义,也许根本就不应该有这个说法,因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。


本篇文章网址:http://www.zixincom.com/news/baike/3060.html

相关资讯

有做网站需求?   联系客服经理 提交需求 直接拨打业务电 话:183 2121 7159
子辛网络的优势
  • 十年专注策划建站与营销经验
  • 上海最专业的网站建设团队
  • 中国百强企业建站供应商
  • 企业营销型网站建设发起者
  • 服务行业领袖超过80个
  • 品牌传播与互联网技术并存
  • 把每套网站做到高端为己任
关于子辛网络更多+
上海网站建设公司子辛网络致力于互联网品牌策划网站建设与网站营销,专业领域包括网站制作,网站策划,电子商务,移动互联网营销,与其 他网站制作公司不同的是,子辛网络有效的整合行业解决方案与网站制作策划经 验和互联网网站营销思维,并将策划与执行紧密结合,提供最有效的专业服务!
联系方式更多+
手机/微信:183-2121-7159
E-mail:info@zixincom.com
子辛人的认知
当网站制作同行还把注意力集中在打建站价格站,低端建站的时候,子辛网络早已改变策略,提供高端网站制作服务,用当前市场最先进的建站技术和提供最优质的网站设计服务,为每一位企业打造最佳高品质网站服务。将网站策划 与网站营销进一步整合,通过整体的互联网品牌分析,帮助企业建立互联网品牌传播价值,提升品牌与用户的互动体验,更好的帮助品牌传播,触发用户的行动力才是子辛网络工作的最终目标,这正是提升高端网站制作的成功秘诀。不可否认,建立互联网营销品牌是一个思 维,也是一门艺术,但互联网不同于艺术涂鸦,企业投资品牌绝不是希望品牌成为某个艺术家的实验品。 因此,互联网传播必须建立品牌传播价值,为梦想者创造梦想品牌,子辛网络与您一同创造企业梦!上海网站建设品牌公司子辛网络,以帮助客户做有价值的网站为服 务理念。