第3章 CSS基础演示文稿.PPTVIP

网页设计高级进阶之CSS篇 ---Web Design三剑客 CSS之基本语法篇 2课时 CSS之高级语法篇 2课时 CSS之页面布局篇 2课时 CSS之综合应用篇 2课时 xhtml介绍 CSS的基本概念 CSS引用方法，常用CSS属性 实例讲解 From HTML to XHTML, II 属性名称必须是小写 Example: table width=100% 属性值必须加上引号 Example: table width=100% 避免属性值的简写 Example: frame noresize=noresize,cannot be abbreviated to frame noresize 使用 id 属性代替 name 属性 Wrong: img src=picture.gif name=picture1 / Right: img src=picture.gif id=picture1 / Best: img src=picture.gif name=picture1 id=picture1 / DOCTYPE 声明 I Every XHTML document must begin with one of the DOCTYPE declarations (DTDs): !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN /TR/xhtml1/DTD/xhtml1-frameset.dtd DOCTYPE 声明 II DTD主要有三种类型： Strict（严格类型） 需要干净的标记，避免表现上的混乱。请与层叠样式表配合使用 Transitional（过渡类型） 并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时 Frameset（框架类型） 需要使用HTML框架将浏览器窗口分割为两部分或更多框架时 What：Css是什么？ 层叠样式表（Cascading Style Sheets） 详解border 深入理解盒子模型 什么是“模型”——本质特征的抽象 布局的“模型” 详解margin,padding(1) Margin: 外边距 Border: 边框 Padding:内边距 详解margin,padding(2) Margin: 外边距 Border: 边框 Padding:内边距 深入理解盒子模型 div{ margin:20px; padding:5px; border-width:6px; border-color:#000000; border-style:dashed; background-color:#FFFFCC; } 深入理解盒子模型 属性值的简写形式? 只给出2个、3个或者4个属性值，它们的含义是有所区别，具体含义如下： 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性； 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性； 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。 详解margin,padding(3) 深入理解盒子模型 属性值的简写形式? border-color: red green; border-width:1px 2px 3px; border-style: dotted dashed solid double; 详解background 背景颜色属性(background-color) 为Html元素设定背景颜色，相当于HTML中bgcolor属性 body { background-color: #99FF00; } 背景图片属性(background-image) 为HTML元素设定背景图片，相当于HTML中background属性 body { background-image: url(background.jpg); } 背景重复属性(background-repeat) repeat-x 背景图片横向重复 repeat-y 背景图片竖向重复 n