CSS技术在网页制作中使用英文版.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Chapter 4,CSS,1,Objectives,Compare CSS formatting with HTML formatting.,Describe and compare the 3 levels of style sheets.,Compare different types of selectors.,Describe the box model.,Use various styles(style properties)to modify page content.,2,CSS vs.HTML,HTML(p130):,Heading1,CSS:,h1 text-align:center;font-family:Arial,Heading1,3,The benefits of CSS,Greater capacity to handle presentation,Less work,Potentially smaller documents,Its well supported,4,How CSS works,Start with an HTML document.Ideally,it will have been given a,logical structure,and,semantic meaning,using HTML.,Write,style rules,for how each element should ideally look.Each rule targets the element by name,and then lists propertiessuch as font,color,and so onto be applied to the element.,Attach,the style to the document.,5,Levels of Style Sheets,HTML style sheets are called,cascading style sheets,because they can be defined at,three different levels,to specify the style of a document.,Lower-level style sheets can,override,higher-level style sheets,so the style of the content of a tag is determined through a,cascade,of style sheet applications.,6,Levels of Style Sheets,Inline,-specified for a specific occurrence of a,tag,and apply only to that tag,This is fine-grain style,which defeats the purpose of style sheets-uniform style,Document-level,style sheets-apply to the whole,document,in which they appear,External style sheets,-can be applied to,any number of documents,7,Levels of Style Sheets,When more than one style sheet applies to a specific tag in a document,the lowest level style sheet has,precedence.,Note:,IE implementation is a bit different.It takes a“nearest first”approach.,Example:What color is it?(page 135),8,Levels of Style Sheets,Inline style sheets appear in the,tag,itself,Document-level style sheets appear in the,head,of the document,External style sheets are in,separate files,potentially on any server on the Internet,Written as text files with the MIME type,text/css,tag is used to specify that the browser is to fetch and use an external style sheet file,9,Style Specification Formats,Format depends on the level of the style sheet,Inline,:Style sheet appears as the value of the,style,attribute,General form:,style=property_1:value_1;,property_2:value_2;,property_n:value_n”,Scope,of an inline style sheet is the content of the,tag,10,Style Specification Formats,Document-level:,Style sheet appears as a list of rules that are the content of a,tag,The tag must include the,type,attribute,set to,text/css,The list of rules must be placed in an HTML comment,because it is not HTML,11,Style Specification Formats,Comments in the rule list must have a different form-use C comments(/*/),General form:,12,Style Specification Formats,Form of the rules:,selector list of property/values,The,selector,is a tag name or a list of tag names,separated by,commas,.,Each,property/value pair,has the form:property:value,Pairs are separated by,semicolons,just as in the value of a tag,13,Style Specification Formats,H1 text-align:center;font-family:Arial,selector,style definition(declaration),property,value,14,Style Specification Formats,External style sheets,Form is,a list of style rules,as in the content of a tag for document-level style sheets,E.g.,h1color:red,h1,h2 background-color:white,15,Selectors,Type(element)selectors,Class and ID selectors,Pseudoselectors(anchor pseudoclasses),16,Type selectors,The type selector targets an,element,by name,as shown in these examples:,h1 color:blue;,h2 color:blue;,p color:blue,Type selectors can be,grouped,into comma-separated lists so a single property will apply to all of them.For example:,h1,h2,p color:blue,17,Class and ID selectors,Class,selectors and,ID,selectors give us the opportunity to target elements that weve named ourselves,independent of the document element.,Elements are named using the,class,and,id,attribute(p291).,They can be applied to all HTML elements except a few,such as html,head,title,script.,18,Style Classes,Used to allow different occurrences of the,same tag,to use,different style,specifications,A style class has a name,which is attached to a tag name,For example,p.normal,property/value list,p.special,property/value list,19,Style Classes,The class you want on a particular occurrence of a tag is specified with the,class,attribute of the tag,For example,.,.,.,20,Style Classes,A,generic class,can be defined if you want a style to apply to more than one kind of tag,A generic class must be named,and the name must begin with a period.,For example:,.really-big ,Use it as if it were a normal style class,.,21,id selectors,The,id,attribute is used similarly to,class,but it is used for targeting a,single,element rather than a group.,id,must be used to name an element uniquely.,New item added today,#new003 color:red;,In modern Web design,id attributes are frequently used to identify main sections(usually,div,s)within a page.Some common id values are,content,header,sidebar,navigation,and,footer,.,22,Generic elements(,div,and,span,),The generic,div,and,span,elements provide a way for authors to create custom elements.,The,div,elements is used to indicate,block,-level elements,while,span,indicates,inline,elements.,Both generic elements rely on,id,and,class,attribute to give them a name,meaning,or context.,23,div,The,div,element is used to identify and label any,block,-level,division,of text,whether it is a few list items or an entire page.,Example:see right.,Once youve marked up and named a div,you can apply,styles,to all of its components or treat it as a,box,that can be positioned on the page,for instance,to form a new text column.,List of links,Resource 1,Resource 2,Resource 3,24,span,Like the div elements,span,allows authors to create custom elements.,The difference is that,span,is used for,inline,elements and does not introduce a line break.,For example:,Jenny:867.5309,Markup like this has a number of uses.Most commonly,it is a“hook”that can be used to apply,style sheet rules,.In this example,all elements labeled as,telephone,may receive the same presentational instructions,such as to be displayed in bold,blue text.,25,Element identifiers(,class,and,id,),The,id,attribute is used to give an element a specific and,unique,name in the document.,The,class,attribute is used for,grouping,similar elements.Multiple elements may be assigned the same class name,and doing so enables them to be treated,similarly,.,26,Anchor Pseudo-Classes,Anchor pseudo-classes,can be used to specify the,hyperlink,effect:,A:link color:red /*unvisited link*/,A:visited color:blue /*visited links*/,A:active color:lime /*active links*/,A:hover color:green /*hovering links*/,27,Anchor pseudo-classes,pseudo-classes can be combined with normal classes:,A.external:visited color:blue,external link,Note that normal class names precede pseudo-classes in the selector.,28,Pseudo-classes,Example of pseudo-classes,Questions:,How to remove underlines of all links?(hint:,text-decoration:none,),How to remove underlines of only some links?,Answers:,A text-decoration:none,A.nolinetext-decoration:none,A.noline:visited text-decoration:none,29,Style properties,There are more than 50 different properties in 5 categories:,-,Font,(e.g.font-family,font-size),-,Color and background,(e.g.color,background-color,background-image),-,Text,(e.g.text-decoration,text-align),-,Box,(e.g.margin,padding,border),-,Classification,(e.g.list-style,display),30,Property Value Forms,Keywords,-left,small,Not case sensitive,Length,-numbers,maybe with decimal points,Length units:px,in,cm,mm,pt,pc(picas,12 points),em(height of the letter m),x-height(height of the letter x),No space is allowed between the number and the unit specification.e.g.,1.5 in,is illegal!,31,Property Value Forms,Percentage,-just a number followed immediately by a percent sign,URL,values,url(protocol:/server/pathname),Colors,Color name,rgb(n1,n2,n3),Numbers can be decimal or percentages,Hex form:#XXXXXX,32,Property Value Inheritance,Property values are,inherited,by all nested tags,unless overriden.,For example,if we set property value(e.g.font-size,color,etc.)for the,tag,then the whole document will inherit that property value automatically.Unless overridden,every tag,in the document inherits the property values of.,33,Font Properties,font-family,Value is a list of font names-browser uses the first in the list it has,E.g.,font-family:Arial,Helvetica,Courier,Generic fonts:,serif,sans-serif,cursive,fantasy,and,monospace,(defined in CSS),If a font name has more than one word,it should be,single-quoted,Example,34,Font Properties,font-size,Possible values:a,length number,or a,name,such as smaller,xx-large,etc.,font-style,italic,oblique,(useless),normal,font-weight-degrees of,boldness,bolder,lighter,bold,normal,Could specify as a multiple of 100(,100 900,),35,Font Properties,font,For specifying a list of font properties,font:bolder 14pt Arial Helvetica,Order must be,:style,weight,size,name(s),Example:font properties,36,Color and Background Properties,Color is a,problem,for the Web for two reasons:,1.Monitors vary widely,2.Browsers vary widely,There are three color collections,16 colors,216 colors,16 million different colors,37,Color and Background Properties,1.There is a set of,16,colors that are guaranteed to be displayable by all graphical browsers on all color monitors,black 000000 green 008000,silver C0C0C0 lime 00FF00,gray 808080 olive 808000,white FFFFFF yellow FFFF00,maroon 800000 navy 000080,red FF0000 blue 0000FF,purple 800080 teal 008080,fuchsia FF00FF aqua 00FFFF,38,Color and Background Properties,2.There is a much larger set,the,Web Palette,-,216,colors,-Use hex color values of,00,33,66,99,CC,and,FF,3.Any one of,16 million,different colors,39,Color and Background Properties,The,color,property specifies the,foreground,color of elements,Apple,Orange,Screwdriver,Example,40,Color and Background Properties,The,background-color,property specifies the,background,color of elements,To really make it stand out,use a red,background!,Example,41,Color and Background Properties,background-image(,url(URL),),background-attachment(,scroll/fixed,),for,example,:,body,background-image:url(background.jpg);background-attachment:fixed,42,Text Properties,line-height,text-align(left/right/center),text-decoration(none/underline/overline),text-indent,Example,43,Box Properties,Each,box,has a,content,area(e.g.,text,an image,etc.)and optional surrounding,padding,border,and,margin,areas;the size of each area is specified by properties defined below.,The following diagram(,box model,)shows how these areas relate and the terminology used to refer to pieces of,margin,border,and,padding,:,44,Box Properties,Margin properties,margin-top,margin-right,margin-bottom,margin-left,and,margin,The,margin,property is a shorthand property for setting margin-,top,margin-,right,margin-,bottom,and margin-,left,at the same place in the style sheet.,45,Box Properties,Padding properties,padding-top,padding-right,padding-bottom,padding-left,and,padding,Border properties:,Border width properties,Border color properties,Border style properties,Border shorthand properties(width,style,color),Box properties example,46,Positioning Properties,position,(static/relative/absolute),top,left,width,height,z-index,Example,47,Filter Properties,Filter,is an expansion of CSS,it can apply certain effects on text,image,or other objects.,Filter can only be applied to,control,elements:body,button,div,img,input,marquee,span,table,td,textarea,th,Use format:,filter:filter-name(parameters),Example1,exmaple2,48,CSS application 1 Overall styling of a page,body,font:small Verdana,Geneva,Arial,helvetica,sans-serif;color:black;background-color:white;margin:0px 0px 30px 0px;border:none;,h1,h2,h3,p,li,line-height:150%;,h2,font-weight:bold;text-transform:capitalize;color:#666;font-size:medium;,h2.red,color:#933;,strong.heading,font-weight:bold;display:block;,Other examples,49,CSS application 2A navigation bar,Easy and convenient,navigation,is critical to the success of any Web site.,A,navigation bar,(navbar)collects important links in a central place.,Visitors expect to find navigation constructs on the,top,and,left,sides of pages.,Frequently,auxiliary,navigation links are also placed on the,right,and,bottom,sides.,A logical and consistent design of,rollovers,can help the user feel in control when visiting a site.,For example,50,Homework3 modify your site using CSS,At least 6 pages,Proper navigation,Most(if not all)of the presentation should be handled by CSS(no font element or align attribute should be used).,Use at least one external style sheet for the whole site.,51,Objectives,Compare CSS formatting with HTML formatting.,Describe and compare the 3 levels of style sheets.,Compare different types of selectors.,Describe the box model.,Use various styles(style properties)to modify page content.,52,Thats all for this chapter!,53,