预览加载中，请您耐心等待几秒...

css教程ppt课件.ppt

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共38页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

CSS教程一本优秀的杂志不仅仅是具备一套完整的结构内容、巧妙出奇的页面布局，还需要一个统一的风格，好的风格代表了一种高级的品味。优秀的网页制作也不再是漂亮的图形、优美的布局和完整的结构就能满足了，使网站整体保持一致的风格，例如字体字形的显示，页面边距等等，也是使网站作品有美感有品味的关键一步。 层叠样式表为你完成这一任务。通过大量的HTML语言实现，即每次遇上标题，用HTML标签进行设置： <h1><fontface="宋体"color="blue">这里是标题</font></h1> 显然你很容易就会为之头大如斗的，即使你有很好的耐心却难保挂一漏万，设置一多就会有所疏忽。 ――最后，对于公司建设的大型站点来说，往往分成几个组各自开发，这时候就更需要一个统一的样式表来规划网站的整体面貌，各个组都在遵循这统一的样式表的基础上进行各自的开发建设。HTML语言由标志和属性构成，CSS也是如此。 样式表基本语法： HTML标志{标志属性：属性值；标志属性：属性值；标志属性：属性值；……}1、内联样式表例如我们要设置一HTML页面中所有H1标题字显示为蓝色，其代码如下：<HTML><HEAD><TITLE>ThisisaCSSsamples</TITLE><STYLETYPE="text/css"><!--H1{color:blue}--></STYLE></HEAD><BODY> ...页面内容…</BODY></HTML>注意， 1.<STYLE>标记中包括了TYPE＝“text/css”，这是让浏览器知道你是使用CSS1样式规则。2.加入<!--和-->这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。在使用样式表时，经常会有多标志用同一个属性 比如： B{color:red} I{color:red} H1{color:red} 用逗号分隔各个HTML标志，把三行代码合并成一行，我们可以写成： B,I,H1{color:red} 同一个HTML标志，可能定义到多种属性，例如，我们规定把从H1到H6各级标题定义为红色黑体字，带下划线，则应写为： H1,H2,H3,H4,H5,H6{ color:red; text-decoration:underline; font-family:"黑体" } 注意各个标志属性之间用分号隔开。 内联样式表还包括一种直接插入方式，即单独指定HMTL页面中某一个标志，规定其风格样式，可以写为： <Tablestyle="font-size:10pt;color:blue"> 定义该表格内的字符大小为10pt，颜色为蓝色。2、外部样式表 建立一个完全独立的文本文件，其扩展名为.css，文件内容则输入样式表信息，除去任何相关的HTML语言。 例如在外部样式表中输入： body{line-height:130pt} H1,H2,H3,H4,H5,H6{color:red;text-decoration:underline;font-family:"黑体"} b{font-style:italic;color:#FF3333;text-decoration:underline} 少了<STYLE>和注释标记。 保存为example.css。有两种办法可以实现引用外部样式表。 （一）使用<LINK>标记链接外部样式表 <LINKREL=STYLESHEETHREF="example.css"> HREF中应包含路径信息。 一个HTML文档可引用多个外部样式表，例如： <LINKREL=STYLESHEETHREF="example.css"> <LINKREL=STYLESHEETHREF="style/other.css"> 首先链接的example.css作为该文档缺省样式表，当样式定义产生冲突时首先满足前者。（二）使用@IMPORT导入样式表信息 存在于在<STYLE>和</STYLE>标记中 例如： <STYLETYPE=“text/css”>@import“example.css”;@import“style/other.css”;</STYLE> 样式表产生作用的优先级按照导入的先后顺序来设定。样式表信息规则一多，就比较容易产生冲突。这时就看哪一个样式表被引用在前，它就是具有第一优先权的。四、创建CLASS 同一个HTML标志有多种风格时。应该创建类（CLASS），也可直接插入方式可以一一的对之进行定义，但繁琐。 定义语法为： 标志.类名{标志属性：属性值；标志属性：属性值；……标志属性：属性值} 引用方法是： <标志CLASS="类名">例如，我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in，我们知道段落采用<P>这个标记。代码如下：