CSS讲座幻灯片.ppt

css的优势 浏览器支持完善 表现与结构分离 实现了设计代码与内容分离 便于维护管理 样式设计控制能力强大 继承性能优越 什么是id,class id是XHTML元素的一个属性，用于标识对象名称。 每个被定义了id名称的对象，其id名字在每个页面中只允许出现一次 id名称是对网页中某个对象的唯一标识 id前面用#标识 class也是相对于id的一个属性，是对一类元素的标识，主要用途对应于css样式 class可以在一个页面中出现多次 class前面用.标识 id可以理解为对象的名称，class可以理解为对象的类型或归属 div 是什么 div和XHTML的其他标签一样，也是一种标签。也是成对出现div/div div是个容器，是XHTML中指定的，专门用于布局设计的容器对象 div是css布局的核心对象 div是一个block块对象，显示是默认占据整行 可以用于嵌套divdiv/divdiv/div/div web设计应用的思路 辅助布局设计元素 指div，span元素，主要功能是用来布局整个页面。灵活运用可以使页面丰富多彩。 结构话元素或者信息元素 table,ul,pre,code等。是一些信息显示与控制方面的元素。例如table是显示表格状态的数据信息，ul用来显示序列化信息。需要用时使用是很明智的。 a,meta元件，实现特殊的功能 1，使用div等布局元素制作页面的设计布局，定位，色块，图片等 2，使用table,ul等元素来显示页面中需要展示的数据与信息 选择合适的标签 布局 div标签是首选，页面中每一个区域都可以用div进行标识。 文本 h1-h6用于标题型的内容 p表示段落，strong用于加粗等 图片及其他对象 img标签 列表标签 列表元素除了应用在列表型内容中外，也可以做导航设计。ul ol li dt dd等 表单标签，form,input,select以及表格使用的标签等。 良好的XHTML编写习惯 属性名称必须小写 在标签中编写属性，必须要小写， 例如：span class=blue，不允许出现CLASS 属性值必须使用双引号 不允许使用属性简写 例如：input type=checkbox checked option selected不允许出现 应该为input type=checkbox checked=checked option selected=selected 使用id替代name，使用id作为统一的名称标记 必须使用结束标签 img src= / br / css语法结构 由3部分组成：选择符、属性、值 选择符：可以是一个XHTML标签（body，h1）,也可以是定义了id或class的标签（如#main,选择符表示选择div id=main/div） 属性：对于每个标签都有丰富的样式属性，如颜色，大小，定位，浮动方式等，属性之间要用分号隔开 值：一种是指定范围的值（如float属性只有left,right,none）另外一种是数值（如width属性） 选择符 包含选择符 h1 span{font-weight:bold;} 即对h1下面的span进行了样式指派，h1标签下的span标签都将应用该样式属性 也可以多级包含，body h1 span strong{.....} 标签指定式选择符 h1#content{......} 针对所有id为content的h1标签进行指派 h1.p1{......} 表示针对所有class为p1的h1标签进行定义 组合选择符 无论什么样的选择符，都可以进行组合 h1 .p1{......} 表示h1下面所有class为p1的标签 #content h1{......} h1#content h2{......} 伪类及伪对象 伪类及伪对象是一种特殊的类和对象，它由css自动支持，属css的一种扩展型类和对象 a:hover{......}表示链接标签a的鼠标移上状态 样式优先权 写法优先权 行内样式表 内部样式表 外部样式表 id class 类型选择符 可以加!important div盒子模型 margin外边距 padding内边距 border边框 height高 width宽 定位 浮动定位 float: left,right,none div是块状元素，本身占据一行的显示空间，当改变一个元素a的float属性以后，a元素会脱离文档流转而按照自身的要求进行显示 浮动的清理 clear: both,left,right 绝对定位 position: absolute 相对定位 position: relative 学习网站 /tech-CSS/20074221818567395.html / /Get/css/ C