CSS初步概要1.ppt

5.1.2 区域的定位 实例5.2 区域的定位 源代码 html head title区域的位置/title style type=text/css div {font-size:20;width:300;height=100} #d1 {background-color:red;position:absolute;top:0;left:0} #d2 {background-color:blue;position:absolute;top:50;left:50} #d3 {background-color:green;position:absolute;top:100;left:100} /style /head body center div id=d1/div div id=d2/div div id=d3/div /center /body /html Position属性的设置值 Absoulte 区域位置以网页的左上角为基准来设置 Relative 区域位置以其原始位置来设置 Static 区域位置以HTML默认位置来设置 实例5.3 区域的相对位置 实例5.4 区域的默认位置 5.2 网页中组件的分段管理 实例5.5 分段显示不同的字体 实例5.6 分段显示不同的文字背景 5.3 层的概念 实例5.7 区域的重叠 实例5.8 改变区域的重叠顺序 Z-index属性 取值越大，越在上面的层 实例5.9 图片和文字的层次建立 实例5.10 文字的立体效果 实例5.11 文字的阴影效果 实例5.10 文字的立体效果 首先制作两个层，一个在上，显示主颜色；一个在下，显示暗颜色。然后两个层的位置稍微错开一点，这样就能制作出文字的立体效果了。 实例5.11 文字的阴影效果 首先制作三个层。上面的显示主颜色，中间的显示文字的光亮效果，小面的显示暗颜色。然后江三个层的位置都稍微错开一点，这样就形成文字的阴影效果了。 第六节 CSS与HTML的结合方式 6.1 HTML的内部定义 6.2 HTML的外部定义 6.3 CSS的调用顺序 6.4 CSS中的继承性质 6.5 在dreamweaver中使用CSS 6.1 HTML的内部定义 实例6.1 在HTML标记内直接定义 源代码 html head titleHTML标记内的直接定义/title /head body ph1 style=font-family:楷体; color:red 此行文字将被定义为红色楷体的字体/h1/P ph1 style=font-family:黑体; color:green 此行文字将被定义为绿色黑体的字体/h1/p /body /html 结构方式 标记名称 style=“属性名：属性值；属性名：属性值；……” 实例6.2 对标记直接定义 源代码 html headtitle对HTML标记直接定义/title style type=text/css h1 {font-family:楷体; color:yellow} h2 {font-family:黑体; color:blue} /style /head body ph1此行文字为黄色楷体的字体/h1 ph2此行文字为蓝色黑体的字体/h2 /body /html 对HTML标记进行直接定义后，只要用到这个标记，就能显示出同样的样式效果。这样比使用style属性的方法定义更方便，不必每次用到该标记事都要定义一次。 实例6.3 class属性的选择性定义 源代码 html headtitleCLASS定义样式的使用/title style type=text/css p.a1 {font-family:楷体; color:red} *.a2 {font-family:黑体; color:green} /style/head body p class=a1此行文字为红色楷体的字体/p h1 class=a1此行文字为浏览器默认的字体样式/h1 h1 class=a2此行文字为蓝色黑体的字体样式/h1 /body /html Class属性的语法结构 style type=“text/css” *.样式名1{样式属性：属性值；样式属性：属性值；…… } *.样式名2{样式属性：属性值；样式属性：属性值；…… } …… /style 或者是 style type=“text/css” 标记名1.样式名1{样式属性：属性值；样式属性：属性值；…… } 标记名2.样式名2{样式属性：属性值；样式属性：属性值；…… } …… /style 备注：样式名是可以随便定义的，里面的”*.”就等 同于id属性里的“#”，其中“*”是可以省略的。 实例6.4 利用id属性的选择性定义 源