css样式表—讲座.ppt

看下CSS到底有多强大 HTML+CSS 地图 再看下没有CSS的时候是什么样子的。。。 （号称裸奔，2008年4月9日 裸奔节） 具体功能有： 控制布局（几列几列） 控制全局（字体、颜色、链接、边框、背景） 控制个体（br、hr、H1、H2、div、table） 自定义样式（class、id、style、link） … 什么是样式？ 常用的样式属性 行内样式 内嵌样式-1 内嵌样式-2 选择器 根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器 Class和ID有什么区别？ 1、在CSS文件里书写时，ID加前缀#；CLASS用. 2、id一个页面只可以使用一次；class可以多次引用。 3、ID是一个标签，用于区分不同的结构和内容；class是一个样式，可以套在任何结构和内容上. 4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。 外部样式 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表 链接外部样式表 使用LINK（链接）标签 ，语法： HEAD LINK rel = “stylesheet” type = ”text/css” href = ”样式表文件.css” /HEAD 导入外部样式表 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import 样式表文件.css; /STYLE /HEAD 样式的混合使用 行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式 DIV 层标签 SPAN 标签 css控制布局 早期表格布局 css控制布局（头和身体的问题） div搭建的基本框架 快速实现CSS（编辑器） DW里的CSS编辑器。 了解CSS的基础前提 设置好页面布局 不用DW属性编辑区域 用链接外部CSS的方式 应用时，自行命名选择符，不要过多的继承 使用cssTidy工具清理代码 想要进步，慢慢脱离它 设计字体/段落 color: red/blue/yellow…. #ff7300 font-family: ”字体”;font-size:字号(px,em,ex) font-weight: bold text-decoration: underline/none text-align: center / left / right line-height: 26px / 200% 看效果 尝试一下 设计边框等效果 border-width: 1px border-color: #ff7300 border-style: solid / dashed / dotted 缩写border: 1px solid #ff7300 试下：适时适地使用table 背景设计的妙用 background-color:#ff7300 background-image:url(“”); background-repeat: no-repeat / repeat-x / repeat-y 缩写：background 定位：background-position:看首页 试一下 背景设计的妙用——地图特效 特效设计思路分析（1）： 课堂设问 背景图片是黄红两个图片吗? 特效设计思路分析（2）： 2、背景图片合二为一 盒模型 内外边距的问题 margin-top/right/bottom/left: 8px padding-top/right/bottom/left : 8px 盒模型（慎用padding,挤电梯的道理） 试试看 display：显示方式属性 display: none / block / in-line 内联元素/块元素 标签初始化的一些问题 body{} form{} ul{} dl{} 办法{margin:0px; padding:0px} {list-style:none} …看例子，想办法 定位的慎用和好用 position: absolute / relative 使用top / left / right 和 margin 的区别 相对/绝对的差别 做个例子 float float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 值描述 le