WEB05_02 表示层_CSS基础（简）.pptxVIP

层叠样式表 CSS编写规则（样式描述）标记文档（创建文档结构）应用过程标记文档（创建HTML文档）编写规则（样式描述）附加到文档编写规则（样式描述）选择器（见附录）格式：selector { property: value; }selector { property1: value1;property2: value2;property3: value3;}属性：值附加到文档内嵌<style></style>内联<h1 style="color: red">Introduction</h1><h1 style="color: red; margin-top: 2em">Introduction</h1>外部链入导入样式表重用组件式样式表外部css链入<link rel="stylesheet" href="/path/stylesheet.css">导入@import url("/path/stylesheet.css");组件式：/* basic typography */@import url("type.css");/*form inputs */@import url(“forms.css”);/* navigation */@import url("list-nav.css"); body { background: orange; }/* site-specific styles */…more style rules…解析规则继承文档结构父子关系传递规则样式冲突优先级规则顺序列表中的项目将覆盖上面的项目：浏览器默认设置用户样式设置（在浏览器中做为"读者样式表”）设置链接的外部样式表（link添加）导入的样式表（@import导入）内嵌样式（style添加）内联样式（在打开的标签中style添加）任何样式被作者 标记!important的规则任何用户（读者）标记 !important 的规则HTML页面HTML页面CSS网页：各种块构成CSS：设置各个块的样式CSS块?盒模型：外边距margin（块间关系）边框 border填充 padding内容：文本、图像等，内容背景、内容前景（颜色）块大小：（内容盒content-box、边框盒border-box）块的位置（浮动和定位，块与块之间的关系）元素盒子盒模型图解： top外边缘内边缘边框Margin空白区域rightleft内容区域padding填充区域bottom外边距（margin）外边距：Margin独立设置：次序：margin-top、margin-right、margin-bottom、margin-left 快捷设置：margin:5px; /*top right and bottom left*/margin:5px 5px; /*top right and bottom left*/margin:5px 5px 5px; /*top right and bottom left*/margin:5px 5px 5px 5px;外边距（margin）外边距：Margin外边距重叠左右保留上下留大外边距（margin）外边距：Margin内联元素的margin属性：左右有效上下无效例如：span、strong、……等标签边框边框border风格：border-style宽度：border-width颜色：border-color圆角：border-radius边框边框border风格：border-stylenone dotted dashedsoliddoublegroove ridge inset outset边框边框border宽度：border-width颜色：border-color边框边框border圆角：border-radius边框边框border圆角：border-radius边框边框border圆角：border-radius椭圆角：水平半径 垂直半径填充区域（padding）内容填充 padding ：内容和边框间Padding-top、right、bottom、leftpadding: 10px; top、right、bottom、leftpadding: 10px 6px; top、right、bottom、left.padding: 10px 6px 4px; top、right、bottom、left.padding: 10px 6px 4px 10px; top、right、bottom、left 盒子尺寸大小设置首先确定大小设置的对象：即谁的大小，内容 or 全部盒子相关属性：box-sizing内容盒content-box（默认）边框盒border-box溢出overflow盒中内容溢出时 可