网页制作进阶-沈阳理工大学.PPT

Q3-4 CSS语法概览 CSS 语法由三部分构成：选择器、属性和值 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）： body {color: blue} p { text-align: center; color: black; font-family: arial; } Q3-4 CSS语法概览 选择器分组 继承问题(老式浏览器在继承支持上有问题) 通过 CSS 继承，子元素将继承最高级元素所拥有的属性 body { font-family: Verdana, sans-serif; } h1,h2,h2,h3,h5,h6 { color: green; } Q3-4 CSS语法概览 Id选择器(#号开头) 类选择器(点号开头) #red {color:red;} #green {color:green;} .center {text-align: center} HTML代码中的具体使用: p id=“red”这个段落的文字是红色。/p p id=“green”这个段落的文字是绿色。/p p class=center This paragraph will also be center-aligned. /p Q3-4 CSS语法概览 关键字 keywords 选择器 属性 值 *** Id选择器 *** 类选择器 *** Q3-5 CSS盒子模式 想象一下邮寄快递时包装物品的过程 物品装入盒子（假设用盒子包装） 为了防止物品在邮寄的过程中损坏，通常还要在物品周围与盒子之间的缝隙中填充一些泡沫之类的填充物。 盒子有一定的厚度。 邮寄的时候，物品和物品之间也留有一定的空间。 Q3-5 CSS盒子模式 盒子模式 什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。那么内容（CONTENT）就是盒子里装的东西；而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。 用CSS盒子堆起来的网页 其结构代码如下： div id=header/divdiv id=nav/divdiv id=content/divdiv id=footer/div 上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成: bodydiv id=header/divdiv id=nav/divdiv id=content/divdiv id=footer/div/body 最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是： body {font-family: Arial, Helvetica, sans-serif;font-size: 12px;margin: 0px auto;height: auto;width: 760px;border: 1px solid #006633;} 页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为： #header {height: 100px;width: 760px;background-image