层叠式样式表css(二).ppt

《层叠式样式表css(二).ppt》由会员上传分享，免费在线阅读，更多相关内容在PPT专区-天天文库。

1、Div+CSS标准化网页布局基础静语计算机协会辉翔网络有限公司主讲人：宋文杰学习目标掌握div+css的语法。上节回顾一、四种样式表1.内联式样式表（行内样式表）2.嵌入式样式表3.输入式样式表4.外部样式表二、id选择器与class选择器#name{...}.name{...}css的语法CSS语法由三部分构成：选择器、属性和值：selector{property:value}选择器(select

2、or)通常是你希望定义的HTML元素或标签属性(property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）选择器的分组你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。h1,h2,h3,h4,h5,h6{color:green;}继承CSS中，子元素从父元素继承属性。但是有的浏览器并不支持继承，

3、比如Netscape4就不支持继承；IE/Windows直到IE6还存在相关的问题，在表格内的字体样式会被忽略。元素背景1、背景色：background-color这个属性接受任何合法的颜色值。例：.container{background-color:gray;}2、背景图像：background-image属性的默认值是none，表示背景上没有放置任何图像。例：body{background-image:url(路径);}注意：所有背景属性都不能继承。3、背景重复：background-repeat参数

4、：repeatrepeat-xrepeat-yno-repeat例：body{background-image:url(1.gif);background-repeat:repeat-y;}4、背景关联：background-attachment如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。参数：fixed固定scroll滚动css文本1、缩进文本：text-indent把Web页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。2、水平对齐：

5、text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。参数：leftrightcenterjustify(两端对齐)3、字间隔：word-spacing属性可以改变字（单词）之间的标准间隔。（中文无效果）4、字母间隔：letter-spacing属性与word-spacing的区别在于，字母间隔修改的是字符或字母之间的间隔。（中文有效果）5、文本装饰：text-decoration参数：noneunderlineoverlineline-throughblink6、line-h

6、eight属性设置行间的距离（行高）。CSS字体1.字体：font-family2.font-size设置字体的尺寸。3.font-style设置字体风格。参数：italic斜体normal正常4.font-weight设置字体的粗细。参数：normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。数字定义由粗到细的字符。400等同于normal，而700等同于bold。CSS框模型CSS框模型(BoxModel)规定了元素框处理元素内容、内边距、边

7、框和外边距的方式。1.外边距：marginmargin-leftmargin-topmargin-rightmargin-bottom2.内边距：paddingpadding-toppadding-rightpadding-bottompadding-left还可以按照上、右、下、左的顺序分别设置各边的边距，各边均可以使用不同的单位或百分比值边框border1.边框样式：border-style参数：none定义无边框。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览

8、器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于border-width的值。2.边框宽度：border-widthborder-top-widthborder-right-widthborder-bottom-widthborder-left-width3.边框的颜色：border-colorborder-top-colorborder-right-colorborder-bottom-