《CSS技术在网页制作中的使用(英文版).ppt》由会员分享，可在线阅读，更多相关《CSS技术在网页制作中的使用(英文版).ppt（53页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Chapter 4 CSS1ObjectivesCompare 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.2CSS vs.HTMLHTML(p130):Heading1CSS:h1 text-align:center;font-fa
2、mily:Arial Heading1 3The benefits of CSSGreater capacity to handle presentationLess workPotentially smaller documentsIts well supported4How CSS works1.Start with an HTML document.Ideally,it will have been given a logical structure and semantic meaning using HTML.2.Write style rules for how each elem
3、ent 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.3.Attach the style to the document.5Levels of Style SheetsHTML style sheets are called cascading style sheets because they can be defined at three different
4、 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.6Levels of Style SheetsInline-specified for a specific occurrence of a tag and apply only to tha
5、t tagThis is fine-grain style,which defeats the purpose of style sheets-uniform styleDocument-level style sheets-apply to the whole document in which they appearExternal style sheets-can be applied to any number of documents7Levels of Style SheetsWhen more than one style sheet applies to a specific
6、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)8Levels of Style SheetsInline style sheets appear in the tag itselfDocument-level style sheets appear in the head of the docume
7、ntExternal style sheets are in separate files,potentially on any server on the InternetWritten 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 file9Style Specification FormatsFormat depends on the level of the style sheetI
8、nline:Style sheet appears as the value of the style attributeGeneral 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 tag10Style Specification FormatsDocument-level:Style sheet appears as a list of rules that are the content of
9、a tagThe tag must include the type attribute,set to text/cssThe list of rules must be placed in an HTML comment,because it is not HTML11Style Specification FormatsComments in the rule list must have a different form-use C comments(/*/)General form:12Style Specification FormatsForm of the rules:selec
10、tor list of property/valuesThe selector is a tag name or a list of tag names,separated by commas.Each property/value pair has the form:property:valuePairs are separated by semicolons,just as in the value of a tag13Style Specification Formats H1 text-align:center;font-family:Arialselectorstyle defini
11、tion(declaration)propertyvalue14Style Specification FormatsExternal style sheetsForm is a list of style rules,as in the content of a tag for document-level style sheetsE.g.h1color:redh1,h2 background-color:white15SelectorsType(element)selectorsClass and ID selectorsPseudoselectors(anchor pseudoclass
12、es)16Type selectorsThe type selector targets an element by name,as shown in these examples:h1 color:blue;h2 color:blue;p color:blueType selectors can be grouped into comma-separated lists so a single property will apply to all of them.For example:h1,h2,p color:blue17Class and ID selectorsClass selec
13、tors 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.18Style ClassesUsed to allow d
14、ifferent occurrences of the same tag to use different style specificationsA style class has a name,which is attached to a tag nameFor example,p.normal property/value list p.special property/value list19Style ClassesThe class you want on a particular occurrence of a tag is specified with the class at
15、tribute of the tagFor example,.20Style ClassesA generic class can be defined if you want a style to apply to more than one kind of tagA 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 .21id selectorsThe id attribute
16、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 divs)within a page.Some common id va
17、lues are content,header,sidebar,navigation,and footer.22Generic 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
18、and class attribute to give them a name,meaning,or context.23divThe 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 trea
19、t it as a box that can be positioned on the page,for instance,to form a new text column.List of linksResource 1Resource 2Resource 324spanLike 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
20、 example:Jenny:867.5309Markup 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.25Element identifiers(class
21、 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.26Anchor Pseudo-ClassesAnchor pseudo-classe
22、s 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*/27Anchor pseudo-classespseudo-classes can be combined with normal classes:A.external:visited color:blue ext
23、ernal linkNote that normal class names precede pseudo-classes in the selector.28Pseudo-classesExample of pseudo-classesQuestions:How to remove underlines of all links?(hint:text-decoration:none)How to remove underlines of only some links?Answers:A text-decoration:noneA.nolinetext-decoration:noneA.no
24、line:visited text-decoration:none29Style propertiesThere 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.lis
25、t-style,display)30Property Value FormsKeywords-left,small,Not case sensitiveLength-numbers,maybe with decimal pointsLength 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
26、 is illegal!31Property Value FormsPercentage-just a number followed immediately by a percent signURL valuesurl(protocol:/server/pathname)ColorsColor namergb(n1,n2,n3),Numbers can be decimal or percentagesHex form:#XXXXXX32Property Value InheritanceProperty values are inherited by all nested tags,unl
27、ess 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.33Font Propertiesfont-familyValue is a list of font names-browser
28、 uses the first in the list it hasE.g.font-family:Arial,Helvetica,CourierGeneric fonts:serif,sans-serif,cursive,fantasy,and monospace (defined in CSS)If a font name has more than one word,it should be single-quotedExample34Font Propertiesfont-sizePossible values:a length number or a name,such as sma
29、ller,xx-large,etc.font-styleitalic,oblique(useless),normalfont-weight-degrees of boldnessbolder,lighter,bold,normalCould specify as a multiple of 100(100 900)35Font PropertiesfontFor specifying a list of font propertiesfont:bolder 14pt Arial HelveticaOrder must be:style,weight,size,name(s)Example:fo
30、nt properties36Color and Background PropertiesColor is a problem for the Web for two reasons:1.Monitors vary widely 2.Browsers vary widelyThere are three color collections16 colors 216 colors16 million different colors37Color and Background Properties1.There is a set of 16 colors that are guaranteed
31、 to be displayable by all graphical browsers on all color monitorsblack 000000 green 008000 silver C0C0C0 lime 00FF00 gray 808080 olive 808000 white FFFFFF yellow FFFF00 maroon 800000 navy 000080 red FF0000 blue 0000FFpurple 800080 teal 008080 fuchsia FF00FF aqua 00FFFF38Color and Background Propert
32、ies2.There is a much larger set,the Web Palette -216 colors -Use hex color values of 00,33,66,99,CC,and FF3.Any one of 16 million different colors39Color and Background PropertiesThe color property specifies the foreground color of elements Apple Orange Screwdriver Example40Color and Background Prop
33、ertiesThe background-color property specifies the background color of elements To really make it stand out,use a red background!Example41Color and Background Propertiesbackground-image(url(URL)background-attachment(scroll/fixed)for example:body background-image:url(background.jpg);background-attachm
34、ent:fixed 42Text Propertiesline-heighttext-align(left/right/center)text-decoration(none/underline/overline)text-indentExample43Box PropertiesEach 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 d
35、efined below.The following diagram(box model)shows how these areas relate and the terminology used to refer to pieces of margin,border,and padding:44Box PropertiesMargin propertiesmargin-top,margin-right,margin-bottom,margin-left,and marginThe margin property is a shorthand property for setting marg
36、in-top,margin-right,margin-bottom,and margin-left at the same place in the style sheet.45Box PropertiesPadding propertiespadding-top,padding-right,padding-bottom,padding-left,and paddingBorder properties:Border width propertiesBorder color propertiesBorder style propertiesBorder shorthand properties
37、(width,style,color)Box properties example46Positioning Propertiesposition(static/relative/absolute)top,leftwidth,heightz-indexExample47Filter PropertiesFilter 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
38、,div,img,input,marquee,span,table,td,textarea,thUse format:filter:filter-name(parameters)Example1,exmaple248CSS application 1 Overall styling of a pagebody 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-h
39、eight: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 examples49CSS application 2A navigation barEasy and convenient navigation is critical to the success of any Web site.A navigation bar(navbar)coll
40、ects 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
41、site.For example50Homework3 modify your site using CSSAt least 6 pagesProper navigationMost(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.51ObjectivesCompare 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.52Thats all for this chapter!53