[三天学会PHP]02_层叠样式表CSS精讲.ppt

层叠样式表CSS;本章任务;1. CSS简介;2.CSS规则的组成;2.1 CSS语法;html head title样式规则/title style type=text/css p{ color:red; font-family:隶书; font-size:24px;} /style /head body h2登鹳雀楼/h2 p白日依山尽，/p p黄河入海流。/p p欲穷千里目，/p p更上一层楼。/p /body /html ;2.2 长度单位;2.3 颜色单位;3. 在HTML文档中放置CSS的几种方式;3.1 内联样式表;第二种：内部引用（也叫内嵌式） 使用style标签直接把CSS文件中的内容加载到HTML文档内部的head标签里。 ;第三种：外部引用 CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件. 外部引用相对于内部引用和内联引用来说是高效的是节省宽带的. 外部引用是W3C推荐使用的 使用link标签引用CSS ;多重样式表的叠加;4. CSS选择器（选择符）;4.1 HTML选择符;4.2 类选择符;4.3 ID选择符;5. 常见的样式属性和值;CSS中的样式属性比较多，经常使用的属性可以分为这么几类:字体、文本、背景、位置、边框，以及其他一些样式属性。每个类中的属性都可以单独使用，如果同一类中多个属性在一起使用，还可将它们合为一行解决。 如：font:[字体风格||字体变形||字体粗细]?字体大小[/行高]?字体族科 例：p{font:italic bold 12pt/14pt Times,serif} 说明：p标签中的字体为斜体加粗，字体大小为12点行高为14点字体为Times，无效时用serif。;5.1 字体与颜色;5.2 背景属性;除了使用上表中提供的背景属性，控制HTML元素的背景样式，也可以将其简化使用一行代码解决。通过背景类中的background属性实现，语法格式如下： background:背景颜色||背景图片||背景重复||背景附件||背景位置;5.3 文本属性;5.4 边框属性;属性;6. DIV+CSS对页面布局的优势;7.“无意义”的HTML元素div和span;8. W3C盒子模型;声明盒子模型的CSS属性;html head title盒子模型/title style #box { /* ID为box的盒子模型 */ width:200px; /* 盒子的宽度为200px */ height:200px; /* 盒子的高度为200px */ border:5px solid #ccc; /* 盒子边框实线各边宽5px */ padding:10px; /* 盒子的4个内填充为10px */ margin:20px; /* 盒子的4个外边距为10px */ } /style /head body div id=box !-- 使用DIV声明一个盒子 -- 内容区 !-- 盒子内容可再嵌套个盒子 -- /div /body /html;9. 和页面布局有关的CSS属性;属 性;10、使用盒子模型的浮动布局 ;10.1 设置浮动;10.2 行框和清理;htmlhead style .left { /* 声明一个css类选择器，名子为left */ width:200px; /* 盒子模型宽度为200px*/ height:200px; /* 盒子模型高度为200px */ margin:10px; /* 盒子模型外边距为10px */ bor