WENJI08-CSS基础知识.pptVIP

*/28 附录6：边框属性 */28 附录7：图文混排 */28 附录7：图文混排 */32 上机作业(1103) 利用HTML和CSS设计制作个人主页，题目为“我生命的春天”，要求围绕主题，充分利用课堂上讲到的各种标签，整体美观漂亮，内容丰富. 要求：满分30分。当堂提交给助教老师，同时提交至ftp上。最晚不得迟于4月14日。 文档头部（1分） 页面布局 （2分） 文本修饰 （2分） 列表 （1分） 表格（2分） 超链接 （4分，不同的超链接形式） 多媒体效果 （2分） 框架页面 （2分） 至少包含2个页面。（2分） 内部样式表。（3分） 文档样式表。（3分） 外部样式表。（4分） 整体和谐美观。（2分） 层叠样式表CSS基础知识 吴云芳 北京大学信息科学技术学院 wuyfster@ */28 主要内容 CSS的基本概念 CSS的基本语法 选择符的分类 Div标签 CSS的定义层次 附录：属性列表 */28 什么是CSS？ CSS是Cascading Style Sheets的缩写，翻译为层叠样式表 ，简称样式表，是一种改善网页外观的技术。利用之可以对网页中的文本、图像等内容进行精确的格式化控制，如字体、背景、排列方式等。 */28 CSS与HTML CSS的基本理念，就是将网页的“内容”与“形式”的设置分离开来。 HTML表现网页的具体内容，CSS 修饰网页的表现形式。 类比word 中的“样式” */28 为什么要学习CSS？ 灵活性 丰富精确地描述网页中各元素的格式。 灵活便捷地修改网页中各元素的格式。 方便准确地控制多个页面的格式。 呈现性 符合W3C标准。 浏览器将缓存外部样式表，加快下载速度。 代码数量可减少 50%甚至更多。 */28 CSS的基本语法 CSS定义由三部分构成：选择符、属性和属性值。 选择符 {属性:属性值;属性:属性值;……} 选择符是HTML 的标签； 属性是希望定义的属性，每个属性都有一个值； 属性与属性值之间用“:”相连接； 不同属性之间用“;”相分割。 body {color: yellow} p {font-family: 隶书} caption{font-size:40;font-family:黑体} 参见CSS01.html. 和html语法的区别？ */28 CSS的基本语法 CSS定义由三部分构成：选择符、属性和属性值。 选择符 {属性:属性值;属性:属性值;……} 选择符是HTML 的标签； 属性是希望定义的属性，每个属性都有一个值； 属性与属性值之间用“:”相连接； 不同属性之间用“;”相分割。 body {color: yellow} p {font-family: 隶书} caption{font-size:40;font-family:黑体} 参见CSS01.html. 和html语法的区别？ */32 HTML语言的基本语法 标签＋文本内容 带属性的标签 标签 属性名1＝属性值1 属性名２＝属性值2 … 内容 /标签 Font size=7 color=red face=“隶书”文科计算机 /Font 不同属性之间用空格相隔 温故而知新 */28 CSS: 设置背景图片 利用CSS可以设置背景图片的很多属性。 body {background-image:url (“file.jpg”);background-repeat: repeat-x| repeat-y | no-repeatbackground-position: [top | center | bottom ] left | center | right] } repeat-x 横向重复， repeat-y 纵向重复。 设置position值时，横向和纵向值配合使用。 例如：background-position: top center 在兔子的主页上设置背景图片。 */28 选择符的分类 选择符有下列可选的形式： 1 HTML标签 2 选择符组 3 类选择符 相关类选择符 独立类选择符 选择符 {属性:属性值;属性:属性值;……} */28 选择符组 当需要赋予某些选择符一些相同的属性值时，可以进行组合声明，用逗号将不同的选择符分开，如此可以减少重复定义。 等效于： p{color:yellow} table{color:yellow} p,table{color:yellow} 参见CSS02.html