JAVA多媒体CSS层叠样式表.ppt

本章目标 CSS作用 CSS定义规则 选择器分类和引用 常用样式属性 CSS层叠样式表 样式表规则 样式规则 样式表 规则 样式表选择器 HTML选择器 类选择器 ID选择器 样式表的使用 HTML HEAD STYLE TYPE=text/css P{font-style:italic; font-weight:bold; color:limegreen} .button{color:blue;font-size:18} #control{color:red} /STYLE /HEAD Body P样式一/P h1 id=“control”样式三/h1 h2 class=“button”样式二/h2 /BODY /HTML HTML和类选择器混用 在HTML中引用样式表 Style元素 Style属性 Link元素 使用Style元素 STYLE元素应插入文档的HEAD元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响 使用Style属性－－内嵌样式表 style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。样式表可以只有一条规则。使用Style属性，可以绕过Style元素，而将声明直接放入单个的开始标记中。 使用Link元素－－链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用link标记链接到这个样式表文件，这个link标记必须放到页面的head区内 样式表属性 样式表属性 样式表属性 度量单位说明 实例演示—超链接 CSS控制文本定位 CSS控制表格 * CSS层叠样式表 将格式和结构分离 可以方便的更新网页格式和外观 强大的控制页面格式和布局的功能 制作美观的界面 Cascading Style Sheet 用法： RuleSelector {property:value;property: value; ... } 规则选择器 声明 属性 属性值 Html选择器 类选择器 ID选择器 HTML HEAD TITLE New Document /TITLE style type=text/css P.first{font-size:18px;color:red;font-family:楷体_gb2312} P.second{font-size:25px;color:blue;font-family:隶书} P.third{font-size:18px;color:yellow} /style /HEAD BODY P class=first第一个类型/P P class=second第二个类型/P P class=third第三个类型/P /BODY /HTML STYLE TYPE=text/css H1 {color:maroon;} P {color:hotpink; font-family:Arial;} /STYLE STYLE TYPE=text/css @import url(“sheet1.css”) /STYLE 导入外部样式表 HTML HEADTITLE设置属性/TITLE/HEAD BODY P style = color:aqua;font-Style:italic; 本段应用了内嵌样式BR P本段以默认样式显示。BR P您能发现本行中的 SPAN style = color:red不同之处/SPAN吗？ /BODY /HTML HTML HEADTITLE设置属性/TITLE LINK REL=stylesheet HREF=stylesmine.css“ Type=text/css /HEAD BODY 。。。。。。。。。。。。。。。。。。。。 /BODY /HTML 度量 letter-spacing 行距(数字1、度量单位10px、比例50%) line-height 度量 word-spacing Baseline, super, sub, top, text-top, middle-bottom, text-bottom vertical-align none, capitalize, uppercase, lowercase text-transform none, blink, underline, overline, line-through text-decoration 度量 text-indent left, right, center, justify text-align 文本 属性