(精品)HTML+CSS第13章CSS样式基础用法.ppt

《(精品)HTML+CSS第13章CSS样式基础用法.ppt》由会员分享，可在线阅读，更多相关《(精品)HTML+CSS第13章CSS样式基础用法.ppt（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、联系方式：http:/北京源智天下科技有限公司第第13章章 CSS样式基础用法样式基础用法 CSS样式基础用法是指样式基础用法是指CSS样式在选择器里，基样式在选择器里，基础的常用的属性的设置和用法。由于础的常用的属性的设置和用法。由于CSS样式的盛行，样式的盛行，现在的网页制作中，已经逐渐用现在的网页制作中，已经逐渐用CSS样式代替样式代替HTML中中标签的属性了。标签的属性了。联系方式：http:/北京源智天下科技有限公司13.1 CSS背景背景(background)CSS背景是指页面的背景，通过背景是指页面的背景，通过background属性来属性来进行设置。进行设置。backgrou

2、nd属性和属性和HTML中的中的background属性是一样用法的。但在属性是一样用法的。但在CSS样式里，样式里，background属性属性里进行多项里进行多项HTML中没有的设置。中没有的设置。背景颜色背景颜色background-color 背景图片背景图片background-image 不同方向重复使用背景图片不同方向重复使用背景图片background-repeat固定背景图片固定背景图片background-attachment 放置背景图片位置和定位背景图像放置背景图片位置和定位背景图像background-position 综合声明背景综合声明背景background C

3、SS背景的常用的设置包括：背景的常用的设置包括：1-3北京源智天下科技有限公司联系方式：http:/13.2 CSS文本文本 CSS文本是指用文本是指用CSS样式来设置样式来设置HTML文本内容。利用文本内容。利用CSS属性来设置文本的样式，可以更多元化的修饰文本内容。属性来设置文本的样式，可以更多元化的修饰文本内容。常用的常用的CSS文本样式属性内容包括：文本样式属性内容包括：文本颜色文本颜色color 字符间距字符间距letter-spacing 行间距行间距line-height 文本对齐方式文本对齐方式text-align文本修饰文本修饰text-decoration 文本缩进文本缩进

4、text-indent 控制英文文本控制英文文本text-transform 禁止文本折行禁止文本折行white-space 字体大小字体大小font-size 字体风格字体风格font-family 1-4北京源智天下科技有限公司联系方式：http:/13.3 CSS边框边框 在第在第6章里学过表格的边框，本节将讲述用章里学过表格的边框，本节将讲述用CSS定义的边框。定义的边框。使用使用CSS定义的边框不止在表格里可以用，在别的标签都可以使定义的边框不止在表格里可以用，在别的标签都可以使用。相对于第用。相对于第7章讲述的边框，章讲述的边框，CSS里的边框多出了一些属性，里的边框多出了一些属性

5、，让边框也更加多元化。让边框也更加多元化。边框颜色边框颜色border-color 边框样式边框样式border-style 边框宽度边框宽度border-width 上边框上边框border-top 右边框右边框border-right 下边框下边框border-bottom 左边框左边框border-left 综合声明边框综合声明边框border 边框内容包括：边框内容包括：1-5北京源智天下科技有限公司联系方式：http:/13.4 CSS外边距外边距 外边距是指用标签设置文本内容之外的边距，不被标签外边距是指用标签设置文本内容之外的边距，不被标签计算在内的距离。在第计算在内的距离。在第

6、12章的章的CSS框架模型可以看到外边距框架模型可以看到外边距的具体位置。由于外边距不被计算在标签内，所以通过外边的具体位置。由于外边距不被计算在标签内，所以通过外边距来设置背景图片，可以很好的将背景图片和旁边的其他文距来设置背景图片，可以很好的将背景图片和旁边的其他文本内容隔开。本内容隔开。居中居中auto 上外边距上外边距margin-top 右外边距右外边距margin-right 下外边距下外边距margin-bottom 左外边距左外边距margin-left 综合声明外边距综合声明外边距margin 外边距内容包括：外边距内容包括：1-6北京源智天下科技有限公司联系方式：http:

7、/13.5 CSS内边距内边距 内边距是指用标签设置文本内容内部的边距，是被标签内边距是指用标签设置文本内容内部的边距，是被标签计算在内的距离。在第计算在内的距离。在第12章的章的CSS框架模型可以看到内边距框架模型可以看到内边距的具体位置。区别于外边距，内边距是被计算在标签内，所的具体位置。区别于外边距，内边距是被计算在标签内，所以通过内边距来设置背景图片，无法将背景图片和旁边的其以通过内边距来设置背景图片，无法将背景图片和旁边的其他文本内容隔开，但是可以很好的用来规定有背景的标签里他文本内容隔开，但是可以很好的用来规定有背景的标签里内容的显示位置。内容的显示位置。上内边距上内边距paddi

8、ng-top右内边距右内边距padding-right 下内边距下内边距padding-bottom 左内边距左内边距padding-left 综合声明内边距综合声明内边距padding 内边距内容包括：内边距内容包括：1-7北京源智天下科技有限公司联系方式：http:/13.6 CSS列表列表 CSS列表的设置是列表的设置是HTML中列表的扩展属性。使用中列表的扩展属性。使用CSS列表属性可以控制列表属性可以控制HTML列表中更多不可以做到的，使简单列表中更多不可以做到的，使简单的代码可以实现更多的功能。的代码可以实现更多的功能。列表排序图案列表排序图案list-style-image列表排

9、序位置列表排序位置list-style-position 列表排序图案类型列表排序图案类型list-style-type 列表综合属性列表综合属性list-style CSS列表的属性内容包括：列表的属性内容包括：1-8北京源智天下科技有限公司联系方式：http:/13.7 小结小结 本章学习了本章学习了CSS的基本样式属性的用法。通过学习，的基本样式属性的用法。通过学习，可以掌握到可以掌握到HTML标签属性外的样式的设置。这些样式的设标签属性外的样式的设置。这些样式的设置，使页面更加的丰富多彩，也使代码更加的整洁和简单。置，使页面更加的丰富多彩，也使代码更加的整洁和简单。但是由于一些属性并不

10、为每个浏览器所支持，所以在学习但是由于一些属性并不为每个浏览器所支持，所以在学习CSS样式的基础上，建议应该去看一下关于浏览器样式的基础上，建议应该去看一下关于浏览器bug的一的一些解说，这些解说能让网站很好的支持和兼容多浏览器的些解说，这些解说能让网站很好的支持和兼容多浏览器的浏览。浏览。对对CSS基本样式属性的掌握，有利于在网站上对基本样式属性的掌握，有利于在网站上对CSS的基本使用，更有利于以后对的基本使用，更有利于以后对CSS的深入了解。本章所讲的深入了解。本章所讲的的CSS样式属性都是网页上常用的属性，对于更多的属性样式属性都是网页上常用的属性，对于更多的属性设置，请参考其他设置，请参考其他CSS书籍。书籍。1-9北京源智天下科技有限公司联系方式：http:/性格决定命运性格决定命运,专注成就人生专注成就人生源智天下源智天下