CSS技術(shù)在網(wǎng)頁制作中使用(英文版)CSS技術(shù)在網(wǎng)頁制作中使用(英文版)CSS技術(shù)在網(wǎng)頁制作中使用(英文版)2ObjectivesCompareCSSformattingwithHTMLformatting.Describeandcomparethe3levelsofstylesheets.Comparedifferenttypesofselectors.Describetheboxmodel.Usevariousstyles(styleproperties)tomodifypagecontent.CSS技術(shù)在網(wǎng)頁制作中使用(英文版)CSS技術(shù)在網(wǎng)頁制作中使1ObjectivesCompareCSSformattingwithHTMLformatting.Describeandcomparethe3levelsofstylesheets.Comparedifferenttypesofselectors.Describetheboxmodel.Usevariousstyles(styleproperties)tomodifypagecontent.2ObjectivesCompareCSSformattiCSSvs.HTMLHTML(p130):<h1align=“center”><fontface=“Arial”>Heading1</font></h1>…CSS:<style>h1{text-align:center;font-family:Arial}</style><h1>Heading1</h1>3CSSvs.HTMLHTML(p130):3ThebenefitsofCSSGreatercapacitytohandlepresentationLessworkPotentiallysmallerdocumentsIt’swellsupported4ThebenefitsofCSSGreatercapHowCSSworksStartwithanHTMLdocument.Ideally,itwillhavebeengivenalogicalstructureandsemanticmeaningusingHTML.Writestylerulesforhoweachelementshouldideallylook.Eachruletargetstheelementbyname,andthenlistsproperties—suchasfont,color,andsoon—tobeappliedtotheelement.Attachthestyletothedocument.5HowCSSworksStartwithanHTMLevelsofStyleSheetsHTMLstylesheetsarecalledcascadingstylesheetsbecausetheycanbedefinedatthreedifferentlevelstospecifythestyleofadocument.Lower-levelstylesheetscanoverridehigher-levelstylesheets,sothestyleofthecontentofatagisdeterminedthroughacascadeofstylesheetapplications.6LevelsofStyleSheetsHTMLstyLevelsofStyleSheetsInline-specifiedforaspecificoccurrenceofatagandapplyonlytothattagThisisfine-grainstyle,whichdefeatsthepurposeofstylesheets-uniformstyleDocument-levelstylesheets-applytothewholedocumentinwhichtheyappearExternalstylesheets-canbeappliedtoanynumberofdocuments7LevelsofStyleSheetsInline-LevelsofStyleSheetsWhenmorethanonestylesheetappliestoaspecifictaginadocument,thelowestlevelstylesheethasprecedence.Note:IEimplementationisabitdifferent.Ittakesa“nearestfirst”approach.Example:Whatcolorisit?(page135)8LevelsofStyleSheetsWhenmorLevelsofStyleSheetsInlinestylesheetsappearinthetagitselfDocument-levelstylesheetsappearintheheadofthedocumentExternalstylesheetsareinseparatefiles,potentiallyonanyserverontheInternetWrittenastextfileswiththeMIMEtypetext/css<link>tagisusedtospecifythatthebrowseristofetchanduseanexternalstylesheetfile<linkrel=stylesheettype="text/css"href="“/>9LevelsofStyleSheetsInlinesStyleSpecificationFormatsFormatdependsonthelevelofthestylesheetInline:StylesheetappearsasthevalueofthestyleattributeGeneralform:style="property_1:value_1;property_2:value_2;…property_n:value_n”Scopeofaninlinestylesheetisthecontentofthetag10StyleSpecificationFormatsForStyleSpecificationFormatsDocument-level:Stylesheetappearsasalistofrulesthatarethecontentofa<style>tagThe<style>tagmustincludethetypeattribute,setto"text/css"ThelistofrulesmustbeplacedinanHTMLcomment,becauseitisnotHTML11StyleSpecificationFormatsDocStyleSpecificationFormatsCommentsintherulelistmusthaveadifferentform-useCcomments(/*…*/)Generalform:<styletype="text/css"><!--rulelist--></style>12StyleSpecificationFormatsComStyleSpecificationFormatsFormoftherules:selector{listofproperty/values}Theselectorisatagnameoralistoftagnames,separatedbycommas.Eachproperty/valuepairhastheform:property:valuePairsareseparatedbysemicolons,justasinthevalueofa<style>tag13StyleSpecificationFormatsForStyleSpecificationFormatsH1{text-align:center;font-family:Arial}selectorstyledefinition

(declaration)propertyvalue14StyleSpecificationFormatsH1StyleSpecificationFormatsExternalstylesheetsFormisalistofstylerules,asinthecontentofa<style>tagfordocument-levelstylesheetsE.g.h1{color:red}h1,h2{background-color:white}15StyleSpecificationFormatsExtSelectorsType(element)selectorsClassandIDselectorsPseudoselectors(anchorpseudoclasses)16SelectorsType(element)selectTypeselectorsThetypeselectortargetsanelementbyname,asshownintheseexamples:h1{color:blue;}h2{color:blue;}p{color:blue}Typeselectorscanbegroupedintocomma-separatedlistssoasinglepropertywillapplytoallofthem.Forexample:h1,h2,p{color:blue}17TypeselectorsThetypeselectoClassandIDselectorsClassselectorsandIDselectorsgiveustheopportunitytotargetelementsthatwe’venamedourselves,independentofthedocumentelement.Elementsarenamedusingtheclassandidattribute(p291).TheycanbeappliedtoallHTMLelementsexceptafew,suchashtml,head,title,script.18ClassandIDselectorsClassseStyleClassesUsedtoallowdifferentoccurrencesofthesametagtousedifferentstylespecificationsAstyleclasshasaname,whichisattachedtoatagnameForexample,p.normal{property/valuelist}p.special{property/valuelist}19StyleClassesUsedtoallowdifStyleClassesTheclassyouwantonaparticularoccurrenceofatagisspecifiedwiththeclassattributeofthetagForexample,<pclass=“normal">...</p>...<pclass=“special">...</p>20StyleClassesTheclassyouwanStyleClassesAgenericclasscanbedefinedifyouwantastyletoapplytomorethanonekindoftagAgenericclassmustbenamed,andthenamemustbeginwithaperiod.Forexample:.really-big{…}Useitasifitwereanormalstyleclass<h1class="really-big">…</h1>...<pclass="really-big">…</p>21StyleClassesAgenericclasscidselectorsTheidattributeisusedsimilarlytoclass,butitisusedfortargetingasingleelementratherthanagroup.idmustbeusedtonameanelementuniquely.<pid=“new003”>Newitemaddedtoday</p>#new003{color:red;}InmodernWebdesign,idattributesarefrequentlyusedtoidentifymainsections(usuallydivs)withinapage.Somecommonidvaluesarecontent,header,sidebar,navigation,andfooter.22idselectorsTheidattributeiGenericelements(divandspan)Thegenericdivandspanelementsprovideawayforauthorstocreatecustomelements.Thedivelementsisusedtoindicateblock-levelelements,whilespanindicatesinlineelements.Bothgenericelementsrelyonidandclassattributetogivethemaname,meaning,orcontext.23Genericelements(divandspandivThedivelementisusedtoidentifyandlabelanyblock-leveldivisionoftext,whetheritisafewlistitemsoranentirepage.Example:seeright.Onceyou’vemarkedupandnamedadiv,youcanapplystylestoallofitscomponentsortreatitasaboxthatcanbepositionedonthepage,forinstance,toformanewtextcolumn.<divid=“sidebar”><h1>Listoflinks</h1><ul><li>Resource1</li><li>Resource2</li><li>Resource3</li></ul></div>24divThedivelementisusedtospanLikethedivelements,spanallowsauthorstocreatecustomelements.Thedifferenceisthatspanisusedforinlineelementsanddoesnotintroducealinebreak.Forexample:

Jenny:<spanclass=“telephone”>867.5309</span>Markuplikethishasanumberofuses.Mostcommonly,itisa“hook”thatcanbeusedtoapplystylesheetrules.Inthisexample,allelementslabeledastelephonemayreceivethesamepresentationalinstructions,suchastobedisplayedinbold,bluetext.25spanLikethedivelements,spaElementidentifiers(classandid)Theidattributeisusedtogiveanelementaspecificanduniquenameinthedocument.Theclassattributeisusedforgroupingsimilarelements.Multipleelementsmaybeassignedthesameclassname,anddoingsoenablesthemtobetreatedsimilarly.26Elementidentifiers(classandAnchorPseudo-ClassesAnchorpseudo-classescanbeusedtospecifythehyperlinkeffect: A:link{color:red}/*unvisitedlink*/ A:visited{color:blue}/*visitedlinks*/ A:active{color:lime}/*activelinks*/ A:hover{color:green}/*hoveringlinks*/27AnchorPseudo-ClassesAnchorpsAnchorpseudo-classespseudo-classescanbecombinedwithnormalclasses:A.external:visited{color:blue}<aclass=“external”href="">externallink</A>Notethatnormalclassnamesprecedepseudo-classesintheselector.28Anchorpseudo-classespseudo-clPseudo-classesExampleofpseudo-classesQuestions:Howtoremoveunderlinesofalllinks?(hint:text-decoration:none)Howtoremoveunderlinesofonlysomelinks?Answers:A{text-decoration:none}A.noline{text-decoration:none}A.noline:visited{text-decoration:none}29Pseudo-classesExampleofpseudStylepropertiesTherearemorethan50differentpropertiesin5categories:-Font(e.g.font-family,font-size)-Colorandbackground(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)30StylepropertiesTherearemorePropertyValueFormsKeywords-left,small,…NotcasesensitiveLength-numbers,maybewithdecimalpointsLengthunits:px,in,cm,mm,pt,pc(picas,12points),em(heightoftheletter‘m’),x-height(heightoftheletter‘x’)Nospaceisallowedbetweenthenumberandtheunitspecification.e.g.,1.5inisillegal!31PropertyValueFormsKeywords-PropertyValueFormsPercentage-justanumberfollowedimmediatelybyapercentsignURLvalues url(protocol://server/pathname)ColorsColornamergb(n1,n2,n3),NumberscanbedecimalorpercentagesHexform:#XXXXXX32PropertyValueFormsPercentagePropertyValueInheritancePropertyvaluesareinheritedbyallnestedtags,unlessoverriden.Forexample,ifwesetpropertyvalue(e.g.font-size,color,etc.)forthe<body>tag,thenthewholedocumentwillinheritthatpropertyvalueautomatically.Unlessoverridden,everytaginthedocumentinheritsthepropertyvaluesof<body>.33PropertyValueInheritancePropFontPropertiesfont-familyValueisalistoffontnames-browserusesthefirstinthelistithasE.g.font-family:Arial,Helvetica,CourierGenericfonts:serif,sans-serif,cursive,fantasy,andmonospace(definedinCSS)Ifafontnamehasmorethanoneword,itshouldbesingle-quotedExample34FontPropertiesfont-family34FontPropertiesfont-sizePossiblevalues:alengthnumberoraname,suchassmaller,xx-large,etc.font-styleitalic,oblique(useless),normalfont-weight-degreesofboldnessbolder,lighter,bold,normalCouldspecifyasamultipleof100(100–900)35FontPropertiesfont-size35FontPropertiesfontForspecifyingalistoffontpropertiesfont:bolder14ptArialHelveticaOrdermustbe:style,weight,size,name(s)Example:fontproperties36FontPropertiesfont36ColorandBackgroundPropertiesColorisaproblemfortheWebfortworeasons:1.Monitorsvarywidely2.BrowsersvarywidelyTherearethreecolorcollections16colors216colors16milliondifferentcolors37ColorandBackgroundPropertieColorandBackgroundProperties1.Thereisasetof16colorsthatareguaranteedtobedisplayablebyallgraphicalbrowsersonallcolormonitors black000000green008000 silverC0C0C0lime00FF00 gray808080olive808000 whiteFFFFFFyellowFFFF00 maroon800000navy000080 redFF0000blue0000FF purple800080teal008080 fuchsiaFF00FFaqua00FFFF38ColorandBackgroundPropertieColorandBackgroundProperties2.Thereisamuchlargerset,theWebPalette-216colors-Usehexcolorvaluesof00,33,66,99,CC,andFF3.Anyoneof16milliondifferentcolors39ColorandBackgroundPropertieColorandBackgroundPropertiesThecolorpropertyspecifiestheforegroundcolorofelements<tableborder="5px"><tr><thstyle="color:red">Apple</th><thstyle="color:orange">Orange</th><thstyle="color:orange">Screwdriver</th></tr></table>Example40ColorandBackgroundPropertieColorandBackgroundPropertiesThebackground-colorpropertyspecifiesthebackgroundcolorofelements<pstyle="font-size:24;color:blue;background-color:red">Toreallymakeitstandout,usearedbackground!</p>Example41ColorandBackgroundPropertieColorandBackgroundPropertiesbackground-image(url(URL))background-attachment(scroll/fixed)forexample:body{background-image:url(background.jpg);

background-attachment:fixed}42ColorandBackgroundPropertieTextPropertiesline-heighttext-align(left/right/center)text-decoration(none/underline/overline)text-indentExample43TextPropertiesline-height43BoxPropertiesEachboxhasacontentarea(e.g.,text,animage,etc.)andoptionalsurroundingpadding,border,andmarginareas;thesizeofeachareaisspecifiedbypropertiesdefinedbelow.Thefollowingdiagram(boxmodel)showshowtheseareasrelateandtheterminologyusedtorefertopiecesofmargin,border,andpadding:44BoxPropertiesEachboxhasacBoxPropertiesMarginproperties'margin-top','margin-right','margin-bottom','margin-left',and'margin‘The'margin'propertyisashorthandpropertyforsetting'margin-top','margin-right','margin-bottom',and'margin-left'atthesameplaceinthestylesheet.45BoxPropertiesMarginpropertieBoxPropertiesPaddingproperties'padding-top','padding-right','padding-bottom','padding-left',and'padding‘Borderproperties:BorderwidthpropertiesBordercolorpropertiesBorderstylepropertiesBordershorthandproperties(width,style,color)Boxpropertiesexample46BoxPropertiesPaddingpropertiPositioningPropertiesposition(static/relative/absolute)top,leftwidth,heightz-indexExample47PositioningPropertiespositionFilterPropertiesFilterisanexpansionofCSS,itcanapplycertaineffectsontext,image,orotherobjects.Filtercanonlybeappliedtocontrolelements:body,button,div,img,input,marquee,span,table,td,textarea,thUseformat:filter:filter-name(parameters)Example1,exmaple248FilterPropertiesFilterisanCSSapplication1——

Overallstylingofapagebody{font:smallVerdana,Geneva,Arial,helvetica,sans-serif;color:black;background-color:white;margin:0px0px30px0px;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;}Otherexamples…49CSSapplication1——

OverallsCSSapplication2

——AnavigationbarEasyandconvenientnavigationiscriticaltothesuccessofanyWebsite.Anavigationbar(navbar)collectsimportantlinksinacentralplace.Visitorsexpecttofindnavigationconstructsonthetopandleftsidesofpages.Frequently,auxiliarynavigationlinksarealsoplacedontherightandbottomsides.Alogicalandconsistentdesignofrolloverscanhelptheuserfeelincontrolwhenvisitingasite.Forexample…50CSSapplication2

——AnavigatiHomework3

—modifyyoursiteusingCSSAtleast6pagesPropernavigationMost(ifnotall)ofthepresentationshouldbehandledbyCSS(nofontelementoralignattributeshouldbeused).Useatleastoneexternalstylesheetforthewholesite.51Homework3

—modifyyoursiteuObjectivesCompareCSSformattingwithHTMLformatting.Describeandcomparethe3levelsofstylesheets.Comparedifferenttypesofselectors.Describetheboxmodel.Usevariousstyles(styleproperties)tomodifypagecontent.52ObjectivesCompareCSSformattiThat’sallforthischapter!53That’sallforthischapter!53謝謝！謝謝！54CSS技術(shù)在網(wǎng)頁制作中使用(英文版)CSS技術(shù)在網(wǎng)頁制作中使用(英文版)CSS技術(shù)在網(wǎng)頁制作中使用(英文版)2ObjectivesCompareCSSformattingwithHTMLformatting.Describeandcomparethe3levelsofstylesheets.Comparedifferenttypesofselectors.Describetheboxmodel.Usevariousstyles(styleproperties)tomodifypagecontent.CSS技術(shù)在網(wǎng)頁制作中使用(英文版)CSS技術(shù)在網(wǎng)頁制作中使55ObjectivesCompareCSSformattingwithHTMLformatting.Describeandcomparethe3levelsofstylesheets.Comparedifferenttypesofselectors.Describetheboxmodel.Usevariousstyles(styleproperties)tomodifypagecontent.56ObjectivesCompareCSSformattiCSSvs.HTMLHTML(p130):<h1align=“center”><fontface=“Arial”>Heading1</font></h1>…CSS:<style>h1{text-align:center;font-family:Arial}</style><h1>Heading1</h1>57CSSvs.HTMLHTML(p130):3ThebenefitsofCSSGreatercapacitytohandlepresentationLessworkPotentiallysmallerdocumentsIt’swellsupported58ThebenefitsofCSSGreatercapHowCSSworksStartwithanHTMLdocument.Ideally,itwillhavebeengivenalogicalstructureandsemanticmeaningusingHTML.Writestylerulesforhoweachelementshouldideallylook.Eachruletargetstheelementbyname,andthenlistsproperties—suchasfont,color,andsoon—tobeappliedtotheelement.Attachthestyletothedocument.59HowCSSworksStartwithanHTMLevelsofStyleSheetsHTMLstylesheetsarecalledcascadingstylesheetsbecausetheycanbedefinedatthreedifferentlevelstospecifythestyleofadocument.Lower-levelstylesheetscanoverridehigher-levelstylesheets,sothestyleofthecontentofatagisdeterminedthroughacascadeofstylesheetapplications.60LevelsofStyleSheetsHTMLstyLevelsofStyleSheetsInline-specifiedforaspecificoccurrenceofatagandapplyonlytothattagThisisfine-grainstyle,whichdefeatsthepurposeofstylesheets-uniformstyleDocument-levelstylesheets-applytothewholedocumentinwhichtheyappearExternalstylesheets-canbeappliedtoanynumberofdocuments61LevelsofStyleSheetsInline-LevelsofStyleSheetsWhenmorethanonestylesheetappliestoaspecifictaginadocument,thelowestlevelstylesheethasprecedence.Note:IEimplementationisabitdifferent.Ittakesa“nearestfirst”approach.Example:Whatcolorisit?(page135)62LevelsofStyleSheetsWhenmorLevelsofStyleSheetsInlinestylesheetsappearinthetagitselfDocument-levelstylesheetsappearintheheadofthedocumentExternalstylesheetsareinseparatefiles,potentiallyonanyserverontheInternetWrittenastextfileswiththeMIMEtypetext/css<link>tagisusedtospecifythatthebrowseristofetchanduseanexternalstylesheetfile<linkrel=stylesheettype="text/css"href="“/>63LevelsofStyleSheetsInlinesStyleSpecificationFormatsFormatdependsonthelevelofthestylesheetInline:StylesheetappearsasthevalueofthestyleattributeGeneralform:style="property_1:value_1;property_2:value_2;…property_n:value_n”Scopeofaninlinestylesheetisthecontentofthetag64StyleSpecificationFormatsForStyleSpecificationFormatsDocument-level:Stylesheetappearsasalistofrulesthatarethecontentofa<style>tagThe<style>tagmustincludethetypeattribute,setto"text/css"ThelistofrulesmustbeplacedinanHTMLcomment,becauseitisnotHTML65StyleSpecificationFormatsDocStyleSpecificationFormatsCommentsintherulelistmusthaveadifferentform-useCcomments(/*…*/)Generalform:<styletype="text/css"><!--rulelist--></style>66StyleSpecificationFormatsComStyleSpecificationFormatsFormoftherules:selector{listofproperty/values}Theselectorisatagnameoralistoftagnames,separatedbycommas.Eachproperty/valuepairhastheform:property:valuePairsareseparatedbysemicolons,justasinthevalueofa<style>tag67StyleSpecificationFormatsForStyleSpecificationFormatsH1{text-align:center;font-family:Arial}selectorstyledefinition

(declaration)propertyvalue68StyleSpecificationFormatsH1StyleSpecificationFormatsExternalstylesheetsFormisalistofstylerules,asinthecontentofa<style>tagfordocument-levelstylesheetsE.g.h1{color:red}h1,h2{background-color:white}69StyleSpecificationFormatsExtSelectorsType(element)selectorsClassandIDselectorsPseudoselectors(anchorpseudoclasses)70SelectorsType(element)selectTypeselectorsThetypeselectortargetsanelementbyname,asshownintheseexamples:h1{color:blue;}h2{color:blue;}p{color:blue}Typeselectorscanbegroupedintocomma-separatedlistssoasinglepropertywillapplytoallofthem.Forexample:h1,h2,p{color:blue}71TypeselectorsThetypeselectoClassandIDselectorsClassselectorsandIDselectorsgiveustheopportunitytotargetelementsthatwe’venamedourselves,independentofthedocumentelement.Elementsarenamedusingtheclassandidattribute(p291).TheycanbeappliedtoallHTMLelementsexceptafew,suchashtml,head,title,script.72ClassandIDselectorsClassseStyleClassesUsedtoallowdifferentoccurrencesofthesametagtousedifferentstylespecificationsAstyleclasshasaname,whichisattachedtoatagnameForexample,p.normal{property/valuelist}p.special{property/valuelist}73StyleClassesUsedtoallowdifStyleClassesTheclassyouwantonaparticularoccurrenceofatagisspecifiedwiththeclassattributeofthetagForexample,<pclass=“normal">...</p>...<pclass=“special">...</p>74StyleClassesTheclassyouwanStyleClassesAgenericclasscanbedefinedifyouwantastyletoapplytomorethanonekindoftagAgenericclassmustbenamed,andthenamemustbeginwithaperiod.Forexample:.really-big{…}Useitasifitwereanormalstyleclass<h1class="really-big">…</h1>...<pclass="really-big">…</p>75StyleClassesAgenericclasscidselectorsTheidattributeisusedsimilarlytoclass,butitisusedfortargetingasingleelementratherthanagroup.idmustbeusedtonameanelementuniquely.<pid=“new003”>Newitemaddedtoday</p>#new003{color:red;}InmodernWebdesign,idattributesarefrequentlyusedtoidentifymainsections(usuallydivs)withinapage.Somecommonidvaluesarecontent,header,sidebar,navigation,andfooter.76idselectorsTheidattributeiGenericelements(divandspan)Thegenericdivandspanelementsprovideawayforauthorstocreatecustomelements.Thedivelementsisusedtoindicateblock-levelelements,whilespanindicatesinlineelements.Bothgenericelementsrelyonidandclassattributetogivethemaname,meaning,orcontext.77Genericelements(divandspandivThedivelementisusedtoidentifyandlabelanyblock-leveldivisionoftext,whetheritisafewlistitemsoranentirepage.Example:seeright.Onceyou’vemarkedupandnamedadiv,youcanapplystylestoallofitscomponentsortreatitasaboxthatcanbepositionedonthepage,forinstance,toformanewtextcolumn.<divid=“sidebar”><h1>Listoflinks</h1><ul><li>Resource1</li><li>Resource2</li><li>Resource3</li></ul></div>78divThedivelementisusedtospanLikethedivelements,spanallowsauthorstocreatecustomelements.Thedifferenceisthatspanisusedforinlineelementsanddoesnotintroducealinebreak.Forexample:

Jenny:<spanclass=“telephone”>867.5309</span>Markuplikethishasanumberofuses.Mostcommonly,itisa“hook”thatcanbeusedtoapplystylesheetrules.Inthisexample,allelementslabeledastelephonemayreceivethesamepresentationalinstructions,suchastobedisplayedinbold,bluetext.79spanLikethedivelements,spaElementidentifiers(classandid)Theidattributeisusedtogiveanelementaspecificanduniquenameinthedocument.Theclassattributeisusedforgroupingsimilarelements.Multipleelementsmaybeassignedthesameclassname,anddoingsoenablesthemtobetreatedsimilarly.80Elementidentifiers(classandAnchorPseudo-ClassesAnchorpseudo-classescanbeusedtospecifythehyperlinkeffect: A:link{color:red}/*unvisitedlink*/ A:visited{color:blue}/*visitedlinks*/ A:active{color:lime}/*activelinks*/ A:hover{color:green}/*hoveringlinks*/81AnchorPseudo-ClassesAnchorpsAnchorpseudo-classespseudo-classescanbecombinedwithnormalclasses:A.external:visited{color:blue}<aclass=“external”href="">externallink</A>Notethatnormalclassnamesprecedepseudo-classesintheselector.82Anchorpseudo-classespseudo-clPseudo-classesExampleofpseudo-classesQuestions:Howtoremoveunderlinesofalllinks?(hint:text-decoration:none)Howtoremoveunderlinesofonlysomelinks?Answers:A{text-decoration:none}A.noline{text-decoration:none}A.noline:visited{text-decoration:none}83Pseudo-classesExampleofpseudStylepropertiesTherearemorethan50differentpropertiesin5categories:-Font(e.g.font-family,font-size)-Colorandbackground(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)84StylepropertiesTherearemorePropertyValueFormsKeywords-left,small,…NotcasesensitiveLength-numbers,maybewithdecimalpointsLengthunits:px,in,cm,mm,pt,pc(picas,12points),em(heightoftheletter‘m’),x-height(heightoftheletter‘x’)Nospaceisallowedbetweenthenumberandtheunitspecification.e.g.,1.5inisillegal!85PropertyValueFormsKeywords-PropertyValueFormsPercentage-justanumberfollowedimmediatelybyapercentsignURLvalues url(protocol://server/pathname)ColorsColornamergb(n1,n2,n3),NumberscanbedecimalorpercentagesHexform:#XXXXXX86PropertyValueFormsPercentagePropertyValueInheritancePropertyvaluesareinheritedbyallnestedtags,unlessoverriden.Forexample,ifwesetpropertyvalue(e.g.font-size,color,etc.)forthe<body>tag,thenthewholedocumentwillinheritthatpropertyvalueautomatically.Unlessoverridden,everytaginthedocumentinheritsthepropertyvaluesof<body>.87PropertyValueInheritancePropFontPropertiesfont-familyValueisalistoffontnames-browserusesthefirstinthelistithasE.g.font-family:Arial,Helvetica,CourierGenericfonts:serif,sans-serif,cursive,