DIV+CSS网页样式与布局

CSS+DIV网页样式与布局—徐州市华网信息科技有限公司第一章CSS的初步体验第二章CSS的基本语法第三章图片效果和超链接目录1.1CSS的概念CSS(CascadingStyleSheet)，中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。简单地说，CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。它以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景、和整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格。1.1.1标记的概念在页面中各种标记以及位于标记中间的所有内容，组成了整个页面。如：h2标题内容/h2其中h2称为起始标记，对应的/h2称为结束标记，在这两者之间为实际的标题内容。见例1-1.html1.1.2CSS的引入见例1-2.html1.2使用CSS控制页面在对CSS有了大致的了解之后，便可以使用CSS对页面进行全方位的控制。使用CSS控制页面的方法，包括行内样式、内嵌套、链接式和导入式。1.2.1行内样式行内样式是所有方法中最为直接的一种，它直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。见例1-3.html在例中可以看到3个p标记中都使用了style属性，并且设置了不同的css样式，各个样式之间互不影响，分别显示自己的样式效果。行内样式是最为简单的css使用方法，但由于需要为每一个标记设置style属性，后期维护成本很高，而且网页容易过胖，因此不推荐使用。1.2.2内嵌式内嵌式样式表就是将CSS写在head与/head之间，并且用style和/style标记进行声明。见例1-4.html1.2使用CSS控制页面从上例中看到，所有css的代码部分被集中在了同一个区域，方便了后期的维护，页面本身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同页面上的p标记都希望采用同样的风格时，内嵌式的方法就显得略微麻烦，维护成本也不低。因此仅适用于对特殊的页面设置单独的样式风格。1.2.3链接式链接式css样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码完全分离，使得前期制作和后期维护都十分方便。对于同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使得网站整体风格统一、协调，并且后期维护的工作量也大大减少。见例1-5.html1.2.4导入样式导入样式和上一节中的链接样式表的功能基本相同，只是语法和运作方式上略有区别。采用1.2使用CSS控制页面import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时以链接的方式引入。常用的有几种@import语句，可以选择任意一种放在style与/style标记之间。@importurl(sheet1.css);@importurl(sheet1.css);@importurl('sheet1.css');@importsheet1.css;@importsheet1.css;@import'sheet1.css';见例1-6.html不单是HTML文件的style与/style标记中可以导入多个样式表，在CSS文件内也可以导入其他的样式表。1.2使用CSS控制页面1.2.5各种方式的优先级问题上面介绍了CSS控制页面的4种不同方法，各种方法都有其自身的特点。这4种方法如果同时用到同一个HTML文件的同一个标记上时，将会出现优先级的问题。行内样式的优先级最高，其次是采用link标记的链接式，再次是位于style和/style之间的内嵌式，最后才是@import导入式。虽然各种CSS样式加入页面的方式有先后的优先级，但在建设网站时，最好只使用其中的1~2种，这样即有利于后期的维护和管理，也不会出现各种样式“撞车”的情况，便于设计者理顺设计的整体思路。1.3CSS的注释编写CSS代码与编写其他的程序一样，养成良好的写注释习惯对于提高代码的可读性，以及减少日后维护的成本都非常重要。在CSS中，注释的语句都位于“/*”与“*/”之间，其内容可以是单行业可以是多行。在添加单行注释时，必须注意将结尾处的“*/”加上。另外，在style与/style之间常常会见到“!--”和“--”将所有的CSS代码包含于其中，这是为了避免老式浏览器不支持CSS、将CSS代码直接显示在浏览器上而设置的HTML注释。在style与/style之间当“!--”后面加上字之后，下面的内容就全被忽略了，直到/style结束。CSS的注释语法是：/*......*/而不是：!--......--后者是html语法。两者不是一回事儿。2.1CSS选择器选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。2.1.1标记选择器一个HTML页面由很多不同的标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。例如p选择器，就是用于声明页面中所有p标记的样式风格。同样也可以通过h1选择器来声明页面中所有的h1标记的CSS风格。如：styleh1{color:red;font-size:25px;}/style2.1CSS选择器每一个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记，声明多种样式风格。如图2.1CSS标记选择器2.1CSS选择器2.1.2类别选择器在上一节中提到的标记选择器一旦声明，那么页面中所有的该标记都会相应地产生变化。例如当声明了p标记为红色时，页面中所有的p标记都将显示为红色。如果希望其中的某一个p标记不是红色，而是蓝色，这时仅靠标记选择器是远远不够的，还需要引入类别（class）选择器。类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范，如图2.2类别选择器2.1CSS选择器见例2-1.html很多时候页面中几乎所有的p标记都使用相同的样式风格，只有1~2个特殊的p标记需要使用不同的风格来突出，这时可以通过class选择器与标记选择器配合使用，见例2-2.html见例2-3.html，例中定义了h3标记的风格样式，同时单独定义了h3.special，用于特殊的控制，而在这个h3.special中定义的风格样式仅仅适用于h3class=special标记，而不会影响单独的.special选择器，如最后一行的p在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。见例2-4.html2.1CSS选择器2.1.3ID选择器ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此针对性更强。如图2.3ID选择器2.1CSS选择器见例2-5.html在很多浏览器下，ID选择器也可以用于多个标记。但这里需要指出的是，将ID选择器用于多个标记是错误的，因为每个标记定义的id不只是CSS可以调用，JavaScript等其他脚本语言同样也可以调用。如果一个HTML中有两个相同的id标记，那么将会导致js在查找id时出错。例如函数getElementById().2.2选择器声明在利用CSS选择器控制HTML标记时，除了每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个，并且任何形式的选择器（包括标记选择器、class类别选择器、ID选择器等）都是合法的。2.2.1集体声明在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时便可以利用集体声明的方法，将风格相同的CSS选择器同时声明，见例2-6.html另外，对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望逐个来加入集体声明列表，这时可以利用全局声明符号“*”，见例2-7.html例2-7.html与例2-6.html效果完全相同，代码却大大缩减了。2.2选择器声明2.2.2选择器的嵌套在CSS选择器中，还可以通过嵌套的方式，对特殊位置的html标记进行声明，例如当p与/p之间包含b/b标记时，就可以使用嵌套选择器进行相应的控制，见例2-8.html，通过将b选择器嵌套在p选择器中进行声明，显示效果只适用于p与/p之间包含b/b标记，而其外的b/b标记并不产生任何效果。嵌套选择器的使用非常广泛，不只是嵌套的标记本身，类别选择器和ID选择器都可以进行嵌套。如：1.csstdclass=toppclass=top1其他内容strongcss控制的部分/strong其他内容/p/td2.2选择器声明选择器的嵌套在CSS的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记（父标记）定义calss或者id，内层标记（子标记）能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时，才单独进行声明，例如一个ul标记中包含多个li标记3.1图片样式3.1.1图片边框在HTML文件中可以直接通过img标记的border属性值为图片添加边框，从而控制边框的粗细，当设置该值为0时，则显示为没有边框，如下所示：imgsrc=jining.jpgborder=0imgsrc=jining.jpgborder=1imgsrc=jining.jpgborder=2在CSS中可以通过border属性为图片添加各式各样的边框，border-style定义边框的样式，如虚线、实线、或点划线等；可以通过border-color定义边框的颜色，通过border-width定义边框的粗细。见例3-1.html3.1图片样式在CSS中还可以分别设置4个边框的不同样式，即分别设定border-left、border-right、border-top和border-bottom的样式，见例3-2.html使用熟练后，border属性还可以将各个值写到同一语句中，用空格分离，这样可大大简化CSS代码的长度，见例3-3.html3.1.2图片的缩放CSS控制图片的大小也是通过width和height两个属性来实现的，见例3-4.html因为设定的是相对大小（这里即相对于body的宽度），因此当拖动浏览器窗口改变其宽度时，图片的大小也会相应地发生变化。这里需要指出的是，当仅仅设置了图片的width属性，而没有设置height属性时，图片本身会自动等纵横比例缩放，如果只设定height属性也是一样的道理。只有3.1图片样式当同时设定width和height属性时才不会不等比例缩放，见例3-5.html。从显示效果我们看到图片的高度固定了，当浏览器窗口变化时，高度并没有随着图片宽度的变化而变化。也可以如下设置图片的宽度和高度：imgsrc=cup.jpgwidth=100height=200练习一：建立一个网页，放置一张图片，宽度为980px，高度为220px，边框实线、蓝色，边框线的宽度为6px。图片水平居中。3.2超链接特效超链接式网页上最普通不过的元素，通过超链接能够实现页面的跳转、功能的激活等，因此超链接也是与用户打交道最多的元素之一。3.2.1动态超链接超链接是通过标记a来实现的，链接的具体地址则是利用a标记的href属性；target属性规定在何处打开链接文档，它有四个属性值：_blank:在新窗口中打开被链接文档。_self:默认。在相同的框架中打开被链接文档。_parent:在父框架集