ch3_CSS基础样式.ppt

第3章CSS基础样式主讲 易丹 学习目标 掌握包含框边距 边框 填充样式的用法掌握如何用样式表来布局页面掌握背景颜色 背景图片样式的用法掌握文本样式的用法 案例一 包含框样式 1 知识点 设置CSS文件的字符集为utf 8 以便让该文件能支持中文 charset utf 8 知识点 设置标签边距 边距由margin属性进行设置 边距的值可以用像素px或行高em来表示 例如 margin 30px 设置边距为30像素margin 2em 设置边距为2个行高知识点 分别设置标签的上下左右边距 例如margin top 30px 设置上边距为30像素margin bottom 1em 设置下边距为1个行高margin left 20px 设置左边距为20像素margin right 5px 设置右边距为5像素 案例一 包含框样式 2 知识点 设置标签边框样式 边框由边框大小 边框样式和边框颜色三个特性组成 边框由border属性进行设置 例如 border 6pxsolidblue 设置一个大小为6个像素的直线型的蓝色边框知识点 分别设置标签上下左右的边框样式 例如 border top 3pxdashed 660099 设置上边框样式border bottom 3pxdashed 660099 设置下边框样式border left thindottedred 设置左边框样式border right width thin 设置右边框大小为thinborder right style dotted 设置右边框样式为dottedborder right color red 设置右边框颜色为红色 案例一 包含框样式 3 知识点 设置标签填充样式 填充由padding属性进行设置 填充的值可以用像素px或行高em来表示 注意 填充总是与内容本身的背景颜色相一致的 例如 padding 0 5em 设置填充为0 5个行高设置标签的背景颜色 有关背景颜色的知识我们将在后面的案例中进行讲解 例如 background color FFFF99 设置标签的背景颜色为 FFFF99知识点 使用display属性 可以改变元素的类型 该属性主要有block inline none三个值 其中block表示块标签 inline表示内联标签 none表示不显示该标签的内容 例如 display block 将标签设置为块标签display inline 将标签设置为内联标签display none 隐藏标签内容 案例一 包含框样式 4 案例二 页面布局 1 知识点 通过相对定位将网页内容居中 CSS中元素的定位方式是通过position属性来设置的 常用的定位方式有以下三种 相对定位 相对于其他元素 将当前元素放置在后面 绝对定位 将元素放置于父元素的绝对位置上 固定定位 将元素放置于整个网页的固定位置上 例如 将当前元素摆放在相对于其他元素左边5像素 上边5像素的位置上position relative left 5px top 5px 将当前元素摆放在父元素之内 左边5像素 上边5像素的位置上position absolute left 5px top 5px 将当前元素摆放在网页内 左边5像素 上边5像素的位置上position fixed left 5px top 5px 案例二 页面布局 2 知识点 通过相对定位设置好网页头部 主体部分 底部三个部分的摆放位置知识点 以浮动的方式布局内容 例如 float left 浮动于父元素的左边float right 浮动于父元素的右边知识点 以绝对定位的方式布局内容 例如 将当前元素摆放在父元素之内 左边0像素 上边110像素的位置上position absolute left 0px top 110px 案例二 页面布局 3 案例三 文本及背景样式 1 知识点通过background image属性为标签添加背景图片 例如 background image url images bg1 gif 设置标签的背景图片为bg1 gif通过background repeat属性来指定背景图片在屏幕上的平铺方式 其平铺方式有以下四种 background repeat repeat x 只水平平铺background repeat repeat y 只垂直平铺background repeat repeat 水平和垂直平铺background repeat no repeat 背景图片只显示一次 不平铺知识点 通过background color属性为元素指定背景颜色 例如background color CCCCCC background color red 案例三 文本及背景样式 2 知识点 通过background position属性指定背景图片摆放的位置 其摆放位置有以下5种 background position top 将背景图片摆放在元素的顶部background position bottom 将背景图片摆放在元素的底部background position left 将背景图片摆放在元素的左边background position right 将背景图片摆放在元素的右边background position center 将背景图片摆放在元素的中间知识点 通过font family属性设置文字字体 例如 font family 华文隶书 设置字体为 华文隶书 通过font style属性设置字体显示样式 其显示样式有以下两种 font style italic 以斜体的方式显示font style normal 以非斜体的方式显示 案例三 文本及背景样式 3 知识点 通过color属性设置文本颜色 例如 color CC0066 通过font size属性设置文字大小 例如 font size 18px 通过line height设置文字的行高 例如 line height 28px line height 2em line height 200 案例三 文本及背景样式 4 知识点 通过font属性设置文本的大小 字体等 例如 font 16px 华文楷体 通过font weight属性设置文本的粗细 例如 font weight 600 font weight bold 通过text decoration属性来修饰文本以产生特殊效果 例如 text decoration underline 为文本添加下划线text decoration line through 为文本添加删除线通过letter spacing属性来设置文字之间的间距 例如 letter spacing 3px 设置文字间距为3个像素通过text indent属性设置文本缩进 例如 text indent 40px 案例三 文本及背景样式 5 知识点 通过text align属性设置文本的对齐方式 其对齐方式有以下4种 text align center 文本居中对齐text align justify 文本两端对齐text align left 文本左对齐text align right 文本右对齐 小结 margin border padding分别用来设置包含框边距 边框 填充HTML文档中常用的块标签包括 以及到等标签 常用的内联标签有 等标签 display的block属性将标签设置为块标签 inline属性将标签设置为内联标