java web 6 DIV+CSS网页布局

    HTML是一种超文本标记语言,它具有简单性、可拓展性以及与平台无关性等优点,主要用来显示网页的内容和结果。那么如何将网页的内容和结果更加美观、有条理、有层次的显示出来,给用户带来更好的体验。接下来介绍CSS,实现这种效果

    什么是CSS

        CSS是英语cascading style sheets的缩写,中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS随着时间也在不断地升级,目前最新版本的CSS 3 。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有网页对象盒模型的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。

  一个标注的Web构成就是:表现、结构和行为这三个要素

    表现:用于对已经被结构化的信息进行显示上的修饰,包括板式、颜色、大小等。主要技术就是CSS样式表。

     结构:用来对网页中的信息进行整理与分类,常用的技术有:HTML、XHTML和XML

    行为:是指对整个文档内部的一个模型进行定义及交互行为的编写。主要技术有:DOM、javascript脚本语言和Ajax

        Web标准的核心目的就是将表现、结构和内容分离开来,这样做的好处是:

                高效率的开发与简单维护

                信息跨平台的可用性

                 降低服务器成本:加快网页解析速度

                更良好的用户体验

CSS的出现,正好解决了这个问题,从CSS2.0开始真正意义上实现了这个标准,将表现与内容才算是真正意义上的分开了。



传统布局与CSS布局

    这里说的传统布局就是Table布局,它利用HTML的Table元素所具有的零边框特性,因此可以知道Table布局的核心是:设计一个能满足板式要求的表格结构,将内容装入每个单元格中,间距及空格使用透明gif图片实现,最终的结构是一个复杂的表格(有时候会出现多次嵌套)。显然,这样不利于设计和修改。

    CSS能单独地设置字体、格式、比重等网页元素的属性,而DIV单独对网页的结构布局做控制,这样就真正的做到了表现与内容的完全分离,使代码的可读性提高了。并且这样还可以重复用到不同的页面,复用性增强了。



CSS布局实例

    对java Web标准的CSS的布局特点了解后,下面看一个CSS布局实例,首先在电脑上创建一个文本文档,然后打开,将下面的代码输入到文本文档



CSS语法基础

    通过上面的CSS实例代码,我只是想告诉大家CSS可以单独地作为文件直接被引用到网页中,对于代码中一些标签和属性可能大家还不知道是什么含义,为什么要这样写,这个不着急,接下来将介绍CSS的语法基础,

    CSS语法结构:选择符{属性1:值1;属性2:值2...},例如下面这段代码

body{

    front-size:12px;

    text-align:center;

}

这段代码中,font-size:12px 表示网页中body内的字体大小为12px,text-align:center表示文字居中

参数说明:属性和属性值之间用冒号隔开,定义多个属性时,属性之间用分号隔开。


1.css中常见的三种选择器

需要说明的是,在CSS中主要通过查询选择器来找到网页中需要设置样式的位置,常见的选择器有三种,分别为:标签选择器、类别选择器和ID选择器。下面分别介绍一下各自的特点和用法。

1)标签选择器。指以网页中已有的标签名作为名称的选择器,几乎所有的HTML标签均可用作该类选择器

2)类别选择器,属于用户自定义名称的选择器,可以在HTML标签中用class=""为相应标签指派样式,可理解为一类。

3)ID选择器。属于用户自定义名称的选择器,基于DOM文档对象模型原理出现的选择器,可以在XHTML标签中用id=""为相应标签指派样式,可理解为一个标识。


2.CSS中的三种声明

    从上面看到,选择器后面是声明,声明又包含属性和属性值。其中声明又分为:集体声明、嵌套声明和混合声明三种

1)集体声明:属于并列关系,对并列的所有的标签、ID和类别都使用相同的属性和属性值。这时可以把相同属性和值的选择符组合来写,用逗号将选择符分开,这样可以减少样式重复定义

2)嵌套声明

3)混合声明



如何应用CSS到网页中

猜你喜欢

转载自blog.csdn.net/qq_36344771/article/details/80766462