css教程PPT课件

-,1,CSS教程,网页制作系列制作郑伟,-,2,一本优秀的杂志不仅仅是具备一套完整的结构内容、巧妙出奇的页面布局，还需要一个统一的风格，好的风格代表了一种高级的品味。优秀的网页制作也不再是漂亮的图形、优美的布局和完整的结构就能满足了，使网站整体保持一致的风格，例如字体字形的显示，页面边距等等，也是使网站作品有美感有品味的关键一步。层叠样式表为你完成这一任务。,-,3,通过大量的HTML语言实现，即每次遇上标题，用HTML标签进行设置：这里是标题显然你很容易就会为之头大如斗的，即使你有很好的耐心却难保挂一漏万，设置一多就会有所疏忽。最后，对于公司建设的大型站点来说，往往分成几个组各自开发，这时候就更需要一个统一的样式表来规划网站的整体面貌，各个组都在遵循这统一的样式表的基础上进行各自的开发建设。,-,4,HTML语言由标志和属性构成，CSS也是如此。样式表基本语法：HTML标志标志属性：属性值；标志属性：属性值；标志属性：属性值；,样式表放在不同的地方，产生作用的范围也不同。大致来说，样式表分为内联样式表和外联样式表，即有页面内放置、外部引用、外部导入三种方式。,-,5,1、内联样式表例如我们要设置一HTML页面中所有H1标题字显示为蓝色，其代码如下：ThisisaCSSsamples.页面内容,1.样式表信息包括在和标记中。2.放到和中去。3.整个页面中产生作用，,-,6,注意，1.标记中包括了TYPE“text/css”，这是让浏览器知道你是使用CSS1样式规则。2.加入这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。,-,7,在使用样式表时，经常会有多标志用同一个属性比如：Bcolor:redIcolor:redH1color:red用逗号分隔各个HTML标志，把三行代码合并成一行，我们可以写成：B,I,H1color:red同一个HTML标志，可能定义到多种属性，例如，我们规定把从H1到H6各级标题定义为红色黑体字，带下划线，则应写为：H1,H2,H3,H4,H5,H6color:red;text-decoration:underline;font-family:黑体注意各个标志属性之间用分号隔开。,-,8,内联样式表还包括一种直接插入方式，即单独指定HMTL页面中某一个标志，规定其风格样式，可以写为：定义该表格内的字符大小为10pt，颜色为蓝色。,-,9,2、外部样式表建立一个完全独立的文本文件，其扩展名为.css，文件内容则输入样式表信息，除去任何相关的HTML语言。例如在外部样式表中输入：bodyline-height:130ptH1,H2,H3,H4,H5,H6color:red;text-decoration:underline;font-family:黑体bfont-style:italic;color:#FF3333;text-decoration:underline少了和注释标记。保存为example.css。,-,10,有两种办法可以实现引用外部样式表。（一）使用标记链接外部样式表HREF中应包含路径信息。一个HTML文档可引用多个外部样式表，例如：首先链接的example.css作为该文档缺省样式表，当样式定义产生冲突时首先满足前者。,-,11,（二）使用IMPORT导入样式表信息存在于在和标记中例如：import“example.css”;import“style/other.css”;样式表产生作用的优先级按照导入的先后顺序来设定。样式表信息规则一多，就比较容易产生冲突。这时就看哪一个样式表被引用在前，它就是具有第一优先权的。,-,12,四、创建CLASS同一个HTML标志有多种风格时。应该创建类（CLASS），也可直接插入方式可以一一的对之进行定义，但繁琐。定义语法为：标志.类名标志属性：属性值；标志属性：属性值；标志属性：属性值引用方法是：,-,13,例如，我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in，我们知道段落采用这个标记。代码如下：Thisisasample这个段落将缩进0.5in这个段落将比上面缩进一倍距离,-,14,可以直接定义CLASS，应用于HTML页面中的各个标记。其语法只是比上面的少了一个标志：.类名标志属性：属性值；标志属性：属性值；标志属性：属性值例如：引用的方法：例如设置某单元格中的字符大小：设置某一段落字符：,-,15,用ID建立多种风格，实现同一规则被应用到页面中不同的地方。语法是：#id名标志属性：属性值；标志属性：属性值；标志属性：属性值如上面的例子，可以改写为：引用的方法也相同：。,-,16,伪类和伪元素伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visitedlinks(已访问的连接)和activelinks(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。伪类或伪元素规则的形式如选择符:伪类属性:值或选择符:伪元素属性:值伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:选择符.类:伪类属性:值或选择符.类:伪元素属性:值,-,17,定位锚伪类伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visitedlinks)和可激活连接(activelinks)。定位锚元素可给出伪类link、visited或active。A:linkcolor:redA:activecolor:blue;font-size:125%A:visitedcolor:green;font-size:85%,首个字母伪元素首个字母伪元素用于加大(dropcaps)和其他效果P:first-letterfont-size:300%;float:left,-,18,五、边框属性每一个网页都可以理解成是被一个方框框起来的，而页面中不同的部分又可以分为一个个小的方框。因此定义方框的边距、边界、颜色等的边框属性应用而生。1、边距属性：左边距（margin-left）右边距（margin-right）上边距（margin-top）下边距（margin-bottom）边距（margin）边距属性定义HTML页面中方框四边和其他元素之间的空白距离，每一个margin-side属性只影响到一条边，而margin则提供了一个同时设置四个边距的机会。,-,19,2、填充属性：左填充（padding-left）右填充（padding-right）上填充（padding-top）下填充（padding-bottom）填充（padding）填充属性设置边框和内部元素的距离。它和边距属性十分相似，每个padding-side定义一个边框距离，padding则同时定义四个距离。,-,20,3、边界属性（3.1边界宽度）上边界宽（border-top-width）右边界宽（border-right-width）下边界宽（border-bottom-width）左边界宽（border-left-width）边界宽（border-width这几个属性定义边界宽度，用thin、medium和thick分别表示细、中等和粗，或者指定具体的数值来定义边界的宽度。,-,21,3.2边界样式（border-style）该属性用以定义边框的风格呈现式样。共有九种。none不显示边框，为缺省值dotted点线dashed虚线solid实线double双线groove凹线ridge凸线inset使整个方框凸起outset使整个方框凹陷上边界（border-top）右边界（border-right）下边界（border-bottom）左边界（border-left）边界（border）这几个是简写属性，它集合了上面几种属性的特点，可使用其给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。,-,22,3.3边界颜色（border-color）这个属性定义边界的颜色，可以用16种颜色名或RGB值来设置。16种颜色名分别为：aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow。RGB值则应表示为#RRGGBB或r%,g%,b%。,#rrggbb(如，#00cc00)rgb(x,x,x)x是一个介乎0到255之间的整数(如，rgb(0,204,0)rgb(y%,y%,y%)y是一个介乎0.0到100.0之间的整数(如，rgb(0%,80%,0%),-,23,3.4、尺寸属性定义方框的宽度width和高度height。例：DIV.samplewidth:300px;height:200px3.5、浮动和清除属性浮动属性是指某一对象在母体元素内的浮动位置，清除属性和浮动属性一起使用，则表示同一母体内的其他对象可以流到浮动对象的旁边。例：.float1float:left;clear:right假如这个样式定义在表格单元中的某个对象，则该对象将浮动在单元中的左边，而同一单元格中的其他对象在它右边的周围部分。,-#logofloat:right,-,24,这里是一个比较完整的例子，把这个例子按样输入，建立一个HTML文件，看看它的显示样式：asample这是一个关于边框属性的完整实例看看它的显示风格,-,25,六、字体属性字体属性共分五种：字体家族（font-family）、字体风格（font-style）、字体变体（font-variant）、字体黑度（font-weight）、字体尺寸（font-size）;此外font属性是一个总体属性，可一一指定以上各种属性和属性值。1、字体家族（font-family）通过font-family指定字体类型，其语法为：标记font-family:字体类型，字体类型，字体类型例：pfont-family:TimesNewRoman,arial,serif假如字体类型之间有空格，就象TimesNewRoman，必须用引号将之括起，中文字体也须用括号括起，列出多种类型，以防浏览用户无前面的字体类型时，可以用后一种字体类型将之取代。,-,26,2、字体风格（font-style）属性值：normal（普通）、italic（斜体）、oblique（倾斜），默认值为normal。例：h1font-syle:italic3、字体变体（font-variant）属性值：normal（普通）和small-caps（小型大写字母），缺省值为normal。字体变体属性是让字体以小型大写方式来显示。小型大写方式看起来是一般大写字母的7580左右。该变体在某些需要特殊表现的标题中比较有用。例：H1font-variant:small-caps4、字体加粗（font-weight）属性值：normal、bold、lighter、bolder、以及数值100900。该属性用以指定字体粗细的显示，并不是所有字体都可以显示这些指定的加粗程度，因此有些情况下这些指定值会被替代，例如100到300被lighter替代，600到900则替换bolder，反之亦然。例：h1p,-,27,5、字体尺寸（font-size）字体尺寸可设置绝对尺寸、相对尺寸、长度、百分比。绝对尺寸分为xx-small,x-small,small,medium,large,x-large,xx-large七种，它们以各种字体的medium尺寸成比例缩放，每一级1.5倍。相对尺寸有larger和smaller两种，根据字体原来的大小来决定缩放以后的大小。长度是以pt,points,cm,mm,inch等度量单位用具体数值来指定字体的尺寸大小。百分比是把字体设置成原来尺寸的百分比值，可以任意指定数值。例如：h1font-size:150%tdfont-size:10ptpfont-size:smaller,-,28,6、字体（font）该属性使你可以把上述字体的各种属性合并到一行代码中指定，也即提供了一个实现字体属性的快捷方式，各种属性值之间用空格隔开。例如：tdfont:italicbold12pt方正楷体简体，宋体,-,29,七、文本属性文本属性设置文本的一些显示特性，例如文本对齐、文本缩进、行间距、字间距等。1、文本对齐text-align属性值：left（左）,right（右）,center（居中）,justify（两端对齐）。例：h1text-align:center2、文本缩进text-indent该属性有效的控制了文本段落第一行的缩进，其值可以指定，是长度或段落宽度的百分比。例：ptext-indent:1.0in3、行高line-height该属性设置行与行之间的间距，其值可以为数值、长度或百分比，百分比以行高为基础。例：bodyline-height:120%4、字间距letter-spacing字间距设置字与字之间的距离，同样可以用数值、长度或百分比来指定，百分比以字符大小为基础。例：bodyletter-spacing:0.5em顺便提一下，文本属性中还有一个单词间距（word-spacing），设置每个单词之间的距离，对于中文页面来讲，可能很少用到。,-,30,5、文本装饰text-decoration属性值：underline（下划线）,overline（底线）,line-through（线穿过）,blink（闪烁）,none(无)。例：h3text-decoration:underline6、垂直对齐vertical-align属性值：baseline（基准线）,super（上标）,sub（下标）,top（顶部）,text-top（文本顶部）,middle（中）,bottom（底部）,text-bottom（文本底部）和百分比。通过不同的值设某对象相对其他文本的位置，特别有用的是，上标、下标成为可能。例：平方值：32,-,31,7、文本变换text-transform属性值：capitalize（首字母大写）,uppercase（大写）,lowercase（小写）和none（无）。缺省值为none。例：ptext-transform:capitalize,-,32,八、颜色与背景属性在很多时候，要用到颜色属性，指定文本段落、标题、背景等的颜色，背景属性则用于设定背景图像在浏览器中的显示方式。1、颜色属性：color属性值：16种颜色名（上文已经介绍过）、数值（#RRGGBB或是r%,g%,b%）。在、及其单元元素、标题等对象都可以用到color属性。下例指定超链接的初始颜色和被激活时的颜色：acolor:greena:hovercolor:red,-,33,2、背景属性background-color定义页面或指定对象的背景颜色，属性值和颜色属性相同。background-image属性值：none,url（address），包括相对路径和绝对路径，指定对象的背景图像。background-repeat属性值：no-repeat（无重复）,repeat（重复）,repeat-x（x方向重复）,repeat-y（y方向重复），缺省值为repeat，指定背景图像的显示方式。该属性需与background-image和background-position组合使用。background-attachment属性值：scroll（随对象一起滚动）,fixed（固定），缺省值为scroll。该属性指定对象的背景图像是否与对象一起滚动，或是固定在页面上的某一个位置。这个属性与background-image组合使用。background-position属性值：垂直位置vertical，指定top,center,bottom和具体数值、百分比；水平位置horizontal，指定left,center,right和具体数值、百分比。定义背景图像的绝对或相对位置显示。,-,34,这是一个简写属性，可以把上述所有背景属性归纳到一行代码中定义。这里是一个较完整的例子：bodybackground-image:url(yueju/images/002.gif);background-repeat:no-repeat;background-position:20px50px;background-attachment:fixed用background属性简写为：bodybackground:url(yueju/images/002.gif)no-repeat20px50pxfixed,-,35,九、分类属性分类属性控制了浏览器的显示方式，我们知道在HTML语言中，对于空格和换行的处理是缺陷所在，分类属性的到来使这些特性的控制成为可能。分类属性包括显示属性、空白属性和列表属性。下面一一的介绍。1、显示属性display通过显示属性控制HTML页面中被定义对象在浏览器中的显示方法。这个属性有四个值：块（block）在该对象前后自动增加分行符例：texttext图像前后的文字将与图像分行显示。内联（inline）这个对象前后的元素与之在一行显示这个属性值正好相反，当需要对象与前一元素强制性在同一行时使用该值。列表项（list-item）加一个列表项标记，其余