CSS基础详解-5边框与边距.pdf

第3章：CSS 第5节边框和边距 内容回顾 设置颜色——color  设置背景颜色——background-color  插入背景图片——background-image:url()  设置重复背景图片——background-repeat  设置背景图片位置——background-position 插入背景附件——background-attachment 内容回顾 1、四种超链接特效： a:link、a:visited、a:hover、a:active 2、设置列表样式： list-style-type、list-style-image、 list-style-position、list-style 、列表的应用 导航菜单 3 —— 4、元素的display属性：block inline 本节内容  CSS的盒模型  边框:border  边距 内边距：padding 外边距：margin 用火狐展示相册： 哪个更美观？ css盒模型 对浏览器而言，任何HTML标签都是一个里 面装有内容的盒子。 内容可以是文本、图片或者其他 内容周围是修饰盒子的属性 • border(边框) • padding(内边距或填充) • margin(外边距) 深入理解CSS盒模型  Demo3-5-1phtoAlbulm.html 本节内容  CSS的盒模型  边框:border  边距 内边距：padding 外边距：margin 边框 边框是围绕在元素周围的”线”。 边框有3种属性分别用来控制： 边框的颜色：border-color 边框的宽度：border-width 边框线的线型：border-style 设置边框的颜色 border-color:关键字 | RGB值 border-width: 长度 |关键字 设置边框的颜色为蓝色 border-color:blue; 设置边框的颜色为#FF66CC border-color: #FF66CC; 设置边框的宽度（粗细） border-color:关键字 | RGB值 border-width: 长度 |关键字 设置边框的宽度为2px: border-width:2px; 设置边框线的线型 border-style: 样式的取值 设置边框为虚线： border-style:dashed; border属性快捷设定 border:颜色宽度线型 例：border:blue 2px solid; border-bottom:green 8px dashed; 注意： 属性的排列顺序不重要 边框的设置 border-color:red; boder