02周 CSS样式.pptVIP

Ajax 企业级开发 第2章 CSS样式 CSS概述 引用CSS样式 颜色及背景 字体属性 文本属性 边框属性 定位与布局 2.4 字体属性 2.4.1 font-family 字形 可以同时提供多个字形，供选择 由多个字符串组成时，必须使用双引号 p{font-family:”Times New Roman”} 2.4.2 font-weight 加粗属性, 表2-7 bolder和lighter是相对其上一级标记的font-weight而设定 2.4.3 font-size 字体大小 预设字体 表 2-8 ， smaller、larger是相对上一级标记的绝对尺寸变大或变小 示例 2.4 字体属性 2.4.4 font-style 显示的样式，italic normal oblique 示例 2.4.5 font-variant 变形功能 normal 普通文本，默认值 small-caps : 小型的大写字母文本 示例 2.4.6 font 综合使用多个字体属性 见 P43 说明p style=font-variant:small-capsThis line is small-caps style/p 示例 第2章 CSS样式 CSS概述 引用CSS样式 颜色及背景 字体属性 文本属性 边框属性 定位与布局 2.5 文本属性 2.5.1 text-indent 文本首行缩进的方式 缩进长度 p{ style=” text-indent:10mm”} 缩进百分比 p{style=” text-indent:10%”} 示例 2.5.2 text-align 对齐方式:left, center, right, justify(两端对齐) 示例 2.5.3 white-space 空白属性 pre : 文本间空白不被忽略。 Nowarp 除非br不允许换行 normal : 正常显示，多余空白将被忽略 示例 2.5 文本属性 2.5.4 line-height 行间距 内容框 与行间距的含义 示例 2.5.5 vertical-align 垂直对齐方式:表2-9 示例1 示例2 2.5.6 text-transform 大小写转换 表2-10 示例 2.5 文本属性 2.5.7 text-decoration属性 文本修饰属性 表2-11 示例 2.5.8 word-spacing 和 letter-spacing 词间距 和字符间距 示例1 2.6 边框属性 边框是指元素内容及间隙包含在其中的边线 2.6.1 border-style 样式，见表2-12, 表 2-13 示例 上、右、下、左 2.6.2 boder-width 表 2-14 示例1 示例2 2.6.3 boder-color 表 2-15 示例 2.6 边框属性 2.6.4 border 表2-16 border:[border-width] [border-style] [border-color] 示例 2.7 定位与布局 2.7.1 定位属性 指元素框在网页中所处的位置，分绝对位置和相对位置 见表2-17，分定位属性和元素框属性 示例 2.7.2 边偏移属性 元素块与它的边框最近边线之间的偏移量 示例 2.7.3 position 属性 1. position:absolute 绝对定位，以浏览器左上角的0点为参照点 示例 2.7 定位与布局 2.7.3 position属性 2. position:relative 相对定位，以上一级元素的原 始点为参照点 示例 3. position:fixed 固定点位 ， 浏览器窗口 示例 : 里面也用到floa