CSS 层叠样式表

CSS层叠样式表

本章目标 • CSS作用 • CSS定义规则 • 选择器分类和引用 • 常用样式属性

CSS层叠样式表 Cascading Style Sheet • 将格式和结构分离 • 可以方便的更新网页格式和外观 • 强大的控制页面格式和布局的功能 • 制作美观的界面

样式表规则 • 样式规则 • 样式表 • 规则用法： RuleSelector{property:value;property: value; ... } 属性规则选择器声明属性值

样式表选择器 • HTML选择器 • 类选择器 • ID选择器

样式表的使用 Html选择器 <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> 类选择器 ID选择器

HTML和类选择器混用 <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>

在HTML中引用样式表 • Style元素 • Style属性 • Link元素

使用Style元素 • STYLE元素应插入文档的<HEAD>元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响 <STYLE TYPE="text/css"> H1 {color:maroon;} P {color:hotpink; font-family:Arial;} </STYLE> <STYLE TYPE="text/css"> @import url(“sheet1.css”) </STYLE> 导入外部样式表

使用Style属性－－内嵌样式表 • style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。样式表可以只有一条规则。使用Style属性，可以绕过Style元素，而将声明直接放入单个的开始标记中。 <HTML> <HEAD><TITLE>设置属性</TITLE></HEAD> <BODY> <Pstyle = "color:aqua;font-Style:italic;"> 本段应用了内嵌样式<BR> <P>本段以默认样式显示。<BR> <P>您能发现本行中的 <SPAN style = "color:red">不同之处</SPAN>吗？ </BODY> </HTML>

使用Link元素－－链入外部样式表 • 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内 <HTML> <HEAD><TITLE>设置属性</TITLE> <LINK REL=stylesheet HREF="stylesmine.css“ Type="text/css" > </HEAD> <BODY> 。。。。。。。。。。。。。。。。。。。。 </BODY> </HTML>

样式表属性

度量单位说明

实例演示—超链接 A {FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 22px; TEXT-DECORATION: none} A:hover {FONT-SIZE: 12px; COLOR: #ff0000; LINE-HEIGHT: 22px; TEXT-DECORATION: underline} A.first{font-size:12px;text-decoration:none} A.first:hover{font-size:18px;text-decoration:none} A:visited—超链接被访问后的样式 A:Active—超链接激活时的样式

CSS控制文本定位 P.left{text-align:left;line-height:2} P.right{text-align:right;text-transform:upper} P{text-indent:1px; letter-spacing:2px} ….

CSS控制表格 • 表格加边框 • table{border-style:inset;border-width:5px;border-color:red} • 或者table{border:”5px inset red”} • 单元格格式 • td{text-align:center;line-height:2;vertical-align:top;letter-spacing:2px} • 单元格边框属性 • td.border1{border-top:”1px solid blue”} • 或者td.border2{border-width:3px 10px 20px;border-color:blue red yellow} • 补白 • td.pad{padding:2px 3px 1px}

CSS 层叠样式表

CSS 层叠样式表

Presentation Transcript