CSS文字和图片.ppt

1、第10 章 CSS文字和图片,王会 wangh-,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”; 浏览器首先在计算机中寻找“黑体”，如果该用户计算机中没有黑体，则接着寻找“幼圆”，依次下去直到最后一种字体

2、，如果全都没有则用默认字体。 一些字体名称中间会出现空格，这时需要用双引号将其引起来，如“Times New Roman”。 实例：10-1.html,1.2 文字大小,CSS属性：font-size 常用单位： px：像素，如”12px”; IE浏览器默认为16px。 em：字符宽度或字符高度，相对于当前对象内文本的字体尺寸。如”2em”； 百分比：如200%； 1em=100%,1.2 文字大小,除了用物理单位设定文字的绝对大小外，CSS还提供了一些绝对大小的关键字来进行设定。包括：xx-small、x-small、small、medium、large、x-large、xx-large。

3、实例：10-4.html,1.3 文字颜色,CSS属性：color 在单独设置某一个段落或某个字的颜色时，通常可以利用标记，将需要的部分进行单独标注，然后再设置标记的颜色属性。 例如白色可表示为： white #FFFFFF rgb(100%,100%,100%) 例： CSS规则如下： pcolor:red; font-size:17px; p span color:blue; 冬至过节源于汉代,1.4文字的加粗效果font-weight,实例： 10-6.html,1.5 斜体,CSS属性：font-style 实例：10-7.html,1.6 下划线、顶划线、删除线,CSS属性：text

4、-decoration,该属性可以同时设置多个属性值，之间用空格隔开。,1.7 英文字母大小写,CSS属性：text-transform 实例：10-10.html,1.8 练习模拟Google文字颜色,请利用CSS设置文字样式来模拟Google公司Logo的效果。,2. CSS段落文字,设置段落的样式,常用CSS属性： text-align 水平对齐 vertical-align 垂直对齐 line-height 行间距 letter-spacing 字间距 margin 段间距 text-indent 首行缩进,2.1 段落水平对齐方式,CSS属性：text-align 水平对齐方式的值可

5、以设置为(left)左、(center)中、(right)右和(justify)两端对齐等。 实例：10-11.html,2.2 段落垂直对齐方式,CSS属性：vertical-align 对于文字本身而言，该属性对于块级元素并不起作用。但对于表格而言，这个属性则显得十分重要。 实例：10-12.html 另外，该属性值设置为正数时，文字将向上移动相应的数值，设置为负数时则向下移动。 实例：10-13.html,2.3 字间距,CSS属性：letter-spacing 该属性用于设置字间距。 实例：10-15.html,2.4设置段落格式-行高,设置段落内部的文字行高：line-height,

6、什么是行高？,2.5设置段落格式段间距,设置段落之间的距离 margin(margin-top、 margin-left 、margin-right、 margin-bottom)属性:四边的外延边距 padding属性:四边的内边距 例： 这是第一段 这是第二段 这是第三段 有如下样式： pmargin:0px;,2.6设置段落首行缩进text-indent,思考：如何设置段落首行缩进2个字符的效果？ 思考：如何设置段落首行“悬挂缩进”2个字符？,text-indent：正值，首行向右缩进；负值，悬挂缩进 例：p text-indent:-2em; /*向左缩进2个字*/ padding-l

7、eft:2em; /*左边距2个字*/ ,2.7 首字放大,实例：10-16.html,p font-size:15px;/* 文字大小 */ p spanfont-size:60px;/* 首字大小 */ float:left;/* 首字下沉 */ padding-right:5px; /* 与右边的间隔 */ font-weight:bold; /* 粗体字 */ font-family:黑体;/* 黑体字 */ color:red; /* 字体颜色 */ 中秋节是.,2.5 练习模拟百度搜索结果,ftp课堂练习中下载”CSS段落“，请利用CSS文字和段落设置方法模拟百度搜索结果，效果如下

8、。,3. 图片样式和对齐,图片样式与对齐,border-style、border-color、border-width 图片边框 width、height 图片尺寸 text-align 图片水平对齐 vertical-align 图片纵向对齐,3.1 图片边框,CSS属性：border-style、border-color、border-width 上述属性分别设置图片边框的样式、颜色和粗细。 实例：10-17.html .test1 border-style:dotted;/* 点画线 */ border-color:#FF9900;/* 边框颜色 */ border-width:5px;

9、/* 边框粗细 */ ,3.1 图片边框,另外，还可以分别设置4个边框的不同样式。 CSS属性：border-left、border-right、 border-top、border-bottom 实例：10-18.html 另外，border属性还可以将各个值写到同一语句中，用空格分离，这样可大大简化CSS代码的长度。 实例：10-19.html img.test2 border-right:5px double #FF00FF; border-left:8px solid #0033FF; ,3.2 图片缩放,CSS属性：width、height 与HTML中的属性不同的是，CSS中可以使

10、用更多的值，例如相对值和绝对值等。例如当设置width的值为50%时，图片的宽度将调整为父元素宽度的一半。 实例：10-20.html img.test1 width:50%;/* 相对宽度 */ ,3.3 图片横向对齐方式,CSS属性：text-align 水平对齐方式同样有左、中、右三种，所不同的是，图片的水平对齐方式不能直接通过设置图片的text-align属性，而是通过设置其父元素的该属性来实现的。 实例：10-22.html ,3.4 图片纵向对齐方式,CSS属性：vertical-align 图片纵向对齐方式主要体现在与文字搭配的情况下，尤其当图片的高度与文字本身不一致时。 另外，

11、该属性的IE和Firefox中的显示结果在某些值上还略有区别。 实例：10-23.html,4. 图文混排,4.1 文字环绕,CSS属性：float 实例：10-25.html imgfloat:left;margin-right:5px; margin-bottom:5px; spanfloat:left; /* 首字放大 */ font-size:85px; font-family:黑体; margin:0px; padding-right:5px; 春节古时叫“元旦”。,4.2 练习八仙过海,ftp课堂练习中下载”图文混排八仙过海“，利用CSS图文混排的方法，实现页面的效果。,5. CS

12、S网页背景颜色,5.1 页面背景色,CSS属性：background-color 在CSS中页面的背景色主要通过设置body标记的background-color属性来实现。实例：10-26.html,5.2 用背景色给页面分块,几乎所有的HTML元素的背景色都可以通过background-color属性来设定。因此很多网页都通过设定不同的HTML元素的各种背景色来实现分块的目的。 实例：10-27.html,6. CSS背景图片,CSS背景图片属性,background-image：添加背景图片 background-repeat：背景图片重复 background-position：背景图

13、片位置 background-attachment：固定背景图片 Background：背景图片样式综合设置,6.1 页面的背景图,CSS属性：background-image 使用该属性就可以给页面添加背景图片，直接定义其url值，浏览器就会自动将图片覆盖整个页面。 实例：10-28.html body background-image:url(03.jpg); 如果使用透明的GIF格式图片，并且再设置背景颜色，则背景颜色就会透过图片显示出来。 实例：10-29.html body background-image:url(03.gif); background-color:#FFFF00;

14、 ,6.2 背景图片的重复,CSS属性：background-repeat 该属性可以设置背景图片的重复方式，分为水平重复(repeat-x)、竖直重复(repeat-x)、不重复(no-repeat)、重复(repeat) 。 实例：10-30.html body background-image:url(bg1.jpg); background-repeat:repeat-y; ,6.3 背景图片的位置,CSS属性：background-position 默认情况下背景图片都是从标记的左上角开始出现的，这个位置可以自由指定。 属性值可以设为：bottom right、top left、to

15、p center、top right、center left、center center、center right、bottom left和bottom center等。 实例：10-33.html 另外，还可以给背景图片的位置定义具体的百分比和具体的数值，实现精确定位。 实例：10-34.html background-position:400px 300px; background-position:30% 70%;,6.4 固定背景图片,CSS属性：background-attachment 该属性的值设为fixed，就可以实现背景图片的固定，即不随滚动条滚动。 实例：10-35.htm

16、l body background-image:url(bg6.jpg);background-repeat:no-repeat;/* 不重复 */ background-attachment:fixed;/* 固定背景图片 */ ,6.5 添加多个背景图片,在CSS3之前一个标记只能用一次background属性，因此可以给多个标记添加不同的背景来实现特殊效果。 实例：10-36.html body background-image:url(bg7.jpg); background-repeat:no-repeat; div background-image:url(bg8.gif); background-repeat:repeat-y; 银杏的优点1. 叶色秀雅， ,6.6 背景样式综合设置,CSS属性：back