《DreamweaverCS6网页设计与制作》第4章css基础知识刘敏娜主编

1、 css基本语法 css设置图片格式 css设置网页中的背景 css设置表格与表单的样式 css设置页面和浏览器的元素 用css制作实用的菜单 css（cascading style sheet），中文名为层叠样式表，用于控制网页样式并允许将样式信息与网页内容分离的一种标志性语言。 引入它是为了使html语言能够更好的适应页面的美工设计。 css文件是纯文本文件。 使用文字处理软件均可编辑。推荐dreamweaver软件。 行内样式 内嵌式 链接式 导入式 所有样式中最直接的一种，它直接对html的标记使用style属性，然后将css代码直接写在其中。 如：正文内容 行内样式是最为简单的css

2、使用方法，但后期维护不容易，不推荐使用。 将css写在之间，并且用标记声明。 如： 链接式css样式表是使用频率最高的样式。 如： 与链接式功能相似，只是语法和运作方式不同。 采用import方式导入的样式表，在html文件初始化时，会被导入到html文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在html标记需要格式时才以链接形式引入。 语法： 选择器属性值css标记选择器是声明哪些html标记采用哪种css样式。class选择器选择器 class选择器选择器1class选择器选择器2class选择器选择器3h3同样适用同样适用 可以在标记声明后接类别名称没来区别标记。 标记

3、选择器.class 标记选择器.class1标记选择器.class3使用于别的标记 使用方法与class选择器基本相同，不同在于ID选择器只能在html页面中使用一次。 #one color:red; . ID选择器 ID选择器1ID选择器2 Css文字样式 首字放大效果 图片样式 图片的对齐 图文混排 图文实例 图片边框 (border-color,border-sytle,border-width) 图片缩放：width与height实现 图片对齐： 横向对齐：分左中右，text-align:left 纵向对齐：主要体现在与文字搭配的情况。Vertical-align:middle 文字环

4、绕：float:left 设置图片与文字间距：为img标记添加margin 属性 如 margin-right，margin-bottom 背景颜色:background-color 背景图片:background-img:url( ) 重复：background-repeat:repeat-y; 位置：background-position:bottom right 固定背景图片：background-attachment:fixed 控制表格 css与表单 表格的颜色 文字颜色：color 背景颜色：background 表格的边框 border:1px solid #007eff; bo

5、rder-collapse:collapse; 实例一：隔行变色（为偶数行进行格式设置） 实例二：鼠标经过时变色（用javascript读取鼠标的状态） 实例三：日历 表单中的标记：form,input,textarea,select等。 可以为表单标记设置格式，如边框、背景色、宽度和高度等。 直接输入的Excel表格 模仿新浪网民调查问卷 鼠标特效 页面滚动条 通过cursor属性来设置各种各样的鼠标指针。 这个属性可以在任何标记中使用。 常见的属性值：auto、default、no-drop。 如：bodycursor:pointer; 滚动条由3dlight, highlight, fa

6、ce, arrow, shadow, darkshadow等组成 例子： 项目列表 实例 项目列表的编号是通过属性list-style-type来修改，无论是在标记还是标记中都可以。 ullist-style-type:decimal; 可用的属性值：disc,circle,square,upper-alpha Css还提供了属性list-style-image，可以将项目符号显示为任意的图片。 如下例 设置list-style-type为none的效果（无项目符号） display属性：display:block; li标记的float属性：float:left(水平显示各个项目) 百度导航

7、条 流行的Tab菜单 div标记与span标记 盒子模型 元素的定位 div（division）是一个区块容器标记，可以容纳段落、标题、表格等网页元素。可以把中的内容看作一个独立的对象，用于css的控制。 span标记也是作为网页中的容器。 区别：span是一个行内元素，在它的前后不会换行。 Span标记可以包括在div标记中，反之不成立。 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 可以通过调整盒子的边框和距离等参数来调节盒子的位置。 一个盒子模型由content（内容）,border（边框）,padding（间隙）,margin（间隔）4个部分构成。 盒子的实际宽度是由：

8、content+padding+border+margin构成。在css中width和height是指width+padding。content border一般用于分离元素，border的外围是元素的最外围，因此在计算元素实际的高度和宽时要将bordre计算入内。 border的属性：color,width,style style可取值：none,hidden,dotted,dashed,solid,double,insert等。例子： padding用于控制content与border之间的距离。 可以设置4个方向上的值 也可以合并为一个语句,方向为从上方开始顺时针。 用于表示元素之间的距

9、离。 如果是行内元素紧邻时，之间的距离是第一个元素的margin-right+第二个元素的margin-left 如果不是行内元素：则取margin-bottom和margin-top两个中的大者 Float定位 Position定位 实例 可以设置为left,right或者none。 分别取static,absolute,relative,fixed; 取absolute时，子块不属于父块，左边框相对于body左边的距离，四个边上的值可以为绝对的像素，也可以为百分数. 当值取relative时，子块是相对于父块定位。 例子 Css排版观念 固定宽度且居中的版式 左中右版式 将页面首先在整体上

10、进行标记的分块，然后对各个块进行css定位，最后再在各个块中添加相应的内容。 通过css排版的页面，维护更新非常容易。 要求设计者先对页面有一个整体的框架规划，包括整个页面分为哪些模块、各个模块之间的父子关系。 以最简单的框架为例，页面由Banner、主体内容、菜单导航和版权所有组成，各个部分分别由自己的id来标识.#container#banner#content#links#footer页面中每一个色块都是一个div，直接用css的id表示方法来表示各个块,对于每个div还可以加入各种块元素或者行内元素。例#content.blog.date.blogcontent.page.update

11、 当页面的内容确定以后，则需要根据内容本身考虑整体的页面版型，如单栏、双栏或左中右等。#container#banner#content#links#footer首先对body标记和#container父块进行设置：body margin:0px; font-size:13px; font-family:Arial;#container position:relative; width:100%; 以上设置了页面文字的字号、字体，以及父块的宽度，让其撑满整个浏览器。接下来设置#banner块：#banner height:80px; border:1px solid #000000; text

12、-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px;#contentfloat:left;#linksfloat:right;width:200px;text-align:center;#container#banner#content#footer#links#container#linksfloat:right;width:200px;border:1px solid #000000;margin-left:-200px;text-align:center;#container#content#f

13、ooter#links#banner#contentfloat:left;text-align:center;padding-right:200px; #footerclear:both;height:30px;border:1px solid #000000;text-align:center; 页面部分：页面具体内容body,htmlmargin:0px;text-aligh:center;#containerposition:relative;margin:0px auto;width:700px;text-aligh:left;background:url(bg.jpg) repeate-y;exbody,htmlmargin:0px;#containerposition:relative;left:50%;width:700px;margin-left:-350px;例例 11-3#left#middle#rightleft正文内容正文内容right设置标记的样式bodymargin:0px;padding:0px;font-family:arial;color:#060;background-color:#ccc;#leftposition:absolute;top:0px;l