动态网页制作讲样式表.pptVIP

网页设计与网站开发 第五讲：样式表 主要内容 样式表基础 样式表语法 常见样式属性 样式表布局实例 主要内容 样式表基础 样式表语法 常见样式属性 样式表布局实例 样式表基础 什么是CSS 样式表基础 CSS的作用 主要内容 样式表基础 样式表语法 常见样式属性 样式表布局实例 样式表语法 CSS与HTML结合的方式 样式表语法 CSS的基本语法 样式表语法 CSS的基本语法 样式表语法 类的使用 样式表语法 伪类 样式表语法 ID标志 样式表语法 CSS的注释 样式表语法 内部样式 样式表语法 使用外部样式表 主要内容 样式表基础 样式表语法 常见样式属性 样式表布局实例 常见样式属性 常见样式属性 常见样式属性--文字属性 常见样式属性--文字属性 常见样式属性--颜色与背景属性 常见样式属性--颜色与背景属性 常见样式属性--边框属性 常见样式属性--定位属性 常见样式属性--定位属性 常见样式属性--定位属性 常见样式属性--定位属性 常见样式属性--定位属性 常见样式属性--定位属性 常见样式属性--定位属性 常见样式属性—其它属性 主要内容 样式表基础 样式表语法 常见样式属性 样式表布局实例 样式表布局实例 样式表布局实例 作业 找一个你认为设计的比较好的网页，查看其源代码后简单描述其设计者用到了那些样式？ 下一讲: 表 单 样式布局实例1： * * 联系方式：bosscao@126.com CSS：Cascading Style Sheet，译作层叠样式表单； CSS用于增强控制网页样式，为特定的网页元素或者一系列网页元素创建表现样式，并允许将样式信息与网页内容分离的一种标记性语言； CSS是对HTML语言的一种扩充，CSS依赖HTML标记，并不是HTML的替代，如果不和网页标记结合是没有任何意义的。 将格式和结构分离； 更容易控制页面的布局； 可以制作出体积更小下载更快的网页； 可以更快更容易地维护及更新大量的网页； 良好的浏览器兼容性。 将样式与HTML结合的常用的三种方式： 1.在文档head中： style type=text/css/style 2.使用link元素链接到外部的样式表单： link rel=stylesheet href=style1.css 3.在body内部的元素中使用style定义CSS： h3 style= style type=text/css HTML标志 {属性:属性值;属性:属性值……} /style 说明： 属性定义用“{ }”包含，属性和属性的值用“：”分隔，要定义多个属性时，各个属性间用“；”分隔。 style h1{color:red;font-size:15pt;text-align:center} p{color:black;font-size:10pt;text-indent:1px} /style 组合定义: b,i,h1 {color: red} 定义类 标志.类名{属性:属性值;属性:属性值;......} .类名{属性：属性值；属性：属性值；......} 引用类 标志 class=类名 定义伪类 选择符:伪类 { 属性: 值 } 类可以与伪类和伪元素一起使用选择符 类: 伪类 { 属性: 值 } A:link{color:blue; text-decoration:none} A:hover{color:red; text-decoration:underline} A:active{color:black} A:visited{color:green} 定义ID #ID名 {属性：属性值；属性：属性值} 引用ID 标志　id＝ID名 style Type=text/css #a {color: red} #b {color: blue} /style p id=a段落1文字/p p id=b段落2文字/p /* 注释文字 */ 标记 style=属性:属性值;属性:属性值;... table style=font-size:10pt;color:blue 外部样式表是一个完全独立的文本文件，扩展名为 .css； 1、使用link标记链接外部样式表 link rel=stylesheet href=example.css 2、使用 @import 导入样式表信息 style type=text/css @import example.css; @import style/other.css; /style 文字属性 颜色与背景属性 边框属性 定位属性(显示、隐藏