CSS文字和图片教学PPT课件.ppt

4. 图文混排 4.1 文字环绕 CSS属性：float 实例：10-25.html img{ float:left; margin-right:5px; margin-bottom:5px;} span{float:left; /* 首字放大 */ font-size:85px; font-family:黑体; margin:0px; padding-right:5px;} img src=chunjie.jpg border=0 pspan春/span节古时叫“元旦”。/p 4.2 练习——八仙过海 ftp课堂练习中下载”图文混排—八仙过海“，利用CSS图文混排的方法，实现页面的效果。 5. CSS网页背景颜色 1. CSS文字样式 设置文字的样式 常用CSS属性： font-family 字体 font-size 文字大小 color 文字颜色 font-weight 文字粗细 font-style 斜体 text-decoration下划线、顶划线、删除线 text-transform 英文字母大小写 1.1 字体 CSS属性：font-family 典型语句： p{ font-family:黑体, 幼圆, “Times New Roman”; } 浏览器首先在计算机中寻找“黑体”，如果该用户计算机中没有黑体，则接着寻找“幼圆”，依次下去直到最后一种字体，如果全都没有则用默认字体。 一些字体名称中间会出现空格，这时需要用双引号将其引起来，如“Times New Roman”。 实例：10-1.html 1.2 文字大小 CSS属性：font-size 常用单位： px：像素，如”12px”; IE浏览器默认为16px。 em：字符宽度或字符高度，相对于当前对象内文本的字体尺寸。如”2em”； 百分比：如200%； 1em=100% 绝对单位 说明 in Inch，英寸 cm Centimeter，厘米 mm Millimeter，毫米 pt Point，印刷的点数,1pt=1/72inch pc Pica，1pc=12pt 1.2 文字大小 除了用物理单位设定文字的绝对大小外，CSS还提供了一些绝对大小的关键字来进行设定。包括：xx-small、x-small、small、medium、large、x-large、xx-large。 实例：10-4.html 1.3 文字颜色 CSS属性：color 在单独设置某一个段落或某个字的颜色时，通常可以利用span标记，将需要的部分进行单独标注，然后再设置span标记的颜色属性。 例如白色可表示为： white #FFFFFF rgb(100%,100%,100%) 例： CSS规则如下： p{ color:red; font-size:17px; } p span{ color:blue; } pspan冬至/span过节源于汉代/p 1.4文字的加粗效果——font-weight 属性值 说明 normal 正常粗细 bold 粗体 bolder 加粗体 lighter 细体 100-900 有100，200，…900九个层次，数字越大字体越粗 实例： 10-6.html 1.5 斜体 CSS属性：font-style 实例：10-7.html 属性值 说明 italic 意大利斜体 normal 标准风格，非斜体 oblique 斜体，IE上显示和italic一样 1.6 下划线、顶划线、删除线 CSS属性：text-decoration 属性值 说明 none 无装饰效果，正常显示 underline 加下划线 line-through 加删除线 overline 加顶线 blink 闪烁效果(在IE中不支持，在Firefox中支持) 该属性可以同时设置多个属性值，之间用空格隔开。 1.7 英文字母大小写 CSS属性：text-transform 实例：10-10.html 属性值 说明 capitalize 单词首字大写 uppercase 全部大写 lowercase 全部小写 1.8 练习——模拟Google文字颜色 请利用CSS设置文字样式来模拟Google公司Logo的效果。 2. CSS段落文字 设置段落的样式 常用CSS属性： text-align 水平对齐 vertical-align 垂直对齐 line-height 行间距 letter-spacing 字间距 margin 段间距 text-indent