WebSitesDesignandProgrammingLecturer:LijieGuoRoom:XNA508Phone:23678517Email:2024/5/261CascadingStyleSheets(CSS)WDP[CN]第六章,148－191WDP[EN]Chapter6,188－238

P3W[CN]第三章,70－962024/5/262OverviewMotivationLevelsofstylesheetsStylespecificationformatsSelectorformsPropertyvalueformsExamplesofproperties–font,list,color,textalignment,backgroundimages2024/5/263MotivationConsiderthemanagementofacorporatewebsiteSiteidentity(look&feel-e.g.corporateimage)mustbemaintainedChangesinsiteidentitymustbeimplementedacrosstheentiresiteAmixtureofcontentandappearanceinadatasetisdifficulttomaintainStylesheetconceptfromDTPXHTMLnecessarilymixesstyleandcontent,butstylesheetshelptheseparation2024/5/264CSSCSSprovidesthemeanstocontrolandchangepresentationofXHTMLdocumentsCSSisnottechnicallyHTML,butcanbeembeddedinHTMLdocumentsStylesheetsallowyoutoimposeastandardstyleonawholedocument,orevenawholecollectionofdocumentsCSS1specificationwasdevelopedin1996CSSlevel2〔1998)revision1(“CSS2.1”)-2004,isaCandidateW3CRecommendationCSS3isunderdevelopment2024/5/265LevelsofStyleSheetsTherearethreelevelsofstylesheetsInline-specifiedforaspecificoccurrenceofatagandapplyonlytothattagThisisfine-grainstyle,whichdefeatsthepurposeofstylesheets-uniformstyleDocument-levelstylesheets-applytothewholedocumentinwhichtheyappearExternalstylesheets-canbeappliedtoanynumberofdocumentsWhenmorethanonestylesheetappliestoaspecifictaginadocument,thelowestlevelstylesheethasprecedenceInasense,thebrowsersearchesforastylepropertyspec,startingwithinline,untilitfindsone(orthereisn’tone)2024/5/266LevelsofStyleSheetsInlinestylesheetsappearinthetagitselfDocument-levelstylesheetsappearintheheadofthedocumentExternalstylesheetsareinseparatefiles,potentiallyonanyserverontheInternetWrittenastextfileswiththeMIMEtypetext/cssA<link>tagisusedtospecifythatthebrowseristofetchanduseanexternalstylesheetfile<linkrel="stylesheet"type="text/css"href="://"></link>Externalstylesheetscanbevalidatedvalidator-upload.html2024/5/267InlineStyleSpecificationStylesheetappearsasthevalueofthestyleattributeGeneralform:

style="property_1:value_1;property_2:value_2;…property_n:value_n;"2024/5/268DocumentStyleSpecificationStylesheetappearsasalistofrulesthatarethecontentofa<style>tagThe<style>tagmustincludethetypeattribute,setto"text/css"<styletype="text/css">rulelist</style>Formoftherules:selector

{property_1:value_1;property_2:value_2;…;property_n:value_n;}ThelistofrulesmustbeplacedinanHTMLcomment,becauseitisnotHTMLCommentsintherulelistmusthaveadifferentform-useCcomments(/*…*/)2024/5/269ExternalStyleSheetSpecificationFormisalistofstylerulesLikethecontentofa<style>tagfordocument-levelstylesheets2024/5/2610SimpleSelectorTheselectorisatagnameoralistoftagnames,separatedbycommasExamples:h1{font_size:24pt;}h2,h3{font_size:20pt;}ContextualselectorsApplystyleonlytoelementsinspecifiedpositioninbodyofdocumentListelementhierarchybodypb{font_size:30pt}

2024/5/2611ClassSelectorUsedtoallowdifferentoccurrencesofthesametagtohavedifferentstylespecificationsAstyleclasshasaname,whichisattachedtoatagnamep.narrow{property/valuelist}p.wide{property/valuelist}Theclassyouwantonaparticularoccurrenceofatagisspecifiedwiththeclassattributeofthetag<pclass="narrow">...</p>...<pclass="wide">...</p>2024/5/2612GenericSelectorsAgenericclasscanbedefinedifyouwantastyletoapplytomorethanonekindoftagAgenericclassmustbenamed,andthenamemustbeginwithaperiod.really-big{…}Useinbodyofdoclikenormalstyleclass

<h1class="really-big">…</h1>...<pclass="really-big">…</p>2024/5/2613idSelectorsAnidselectorallowtheapplicationofastyletoonespecificelementGeneralform:

#specific-id{property-valuelist}e.g.#section3{font-size:20}InXHMTLdoc:

<h2id=“section3”>

3.Propertiesforsale

</h2>2024/5/2614PseudoClassesPseudoclassesarestylesthatapplywhensomethinghappens,ratherthanbecausethetargetelementsimplyexistsNamesbeginwithcolonshoverclassapplieswhenthemousecursorisovertheelementfocusclassapplieswhenanelementhasfocusE.G.WDP-4/pseudo.html2024/5/2615reviewCSSSyntax2024/5/2616reviewNote:OnlyoneclassattributecanbespecifiedperXHTMLelement!DoNOTstartaclassnamewithanumber!ItwillnotworkinMozilla/Firefox.2024/5/2617reviewDoNOTstartaclassnamewithanumber!ItwillnotworkinMozilla/Firefox.<html><head><styletype="text/css">h3{text-align:left;color:black}.right{text-align:right;color:blue}#first{text-align:center;color:red}</style></head><body>

<h3class="right"id="first">Howtodisplay</h3></body></html>Howtodisplay?E.G.WDP-4/first.html2024/5/2618SelectorPRIidSelector>classSelector>Simple(tag)Selector2024/5/2619PropertiesThereare60differentpropertiesin7categories:FontsListsAlignmentoftextMarginsColorsBackgroundsBorders2024/5/2620PropertyValueFormsKeywords-left,small,…Length-numbers,maybewithdecimalpointsUnits:px–pixelsin–inchescm–centimetersmm–millimeterspt–pointspc-picas(12points)em-heightoftheletter‘m’ex-height-heightoftheletter‘x’Nospaceisallowedbetweenthenumberandtheunitspecification,e.g.1.5inisillegal!2024/5/2621PropertyValueFormsPercentage-justanumberfollowedimmediatelybyapercentsignURLvaluesurl(protocol://server/pathname)ColorsColorname,e.g.whiteHexform:#XXXXXX,e.g.#FFFFFFrgb(n1,n2,n3),e.g.rgb(255,255,255)Numberscanbedecimal(0-255)orpercentagesPropertyvaluesareinheritedbyallnestedtags,unlessoverridden2024/5/2622FontPropertiesfont-familyValueisalistoffontnames-browserusesthefirstinthelistithasfont-sizePossiblevalues:alengthnumberoraname,suchassmaller,xx-large,etc.font-styleitalic,oblique(useless),normalfont-weight-degreesofboldnessbolder,lighter,bold,normalfont

-forspecifyingalistoffontpropertiesfont:bolder14ptArialHelveticaOrdermustbe:style,weight,size,fontname(s)E.G.WDP-4/fonts.htm

、fonts2.htm2024/5/2623ListPropertieslist-style-typeOnunorderedlistslist-style-type

canbeusedtospecifytheshapeofthebullets

disc(default),square,orcircleSetitoneitherthe<ul>or<li>tag

<h3>Fruit</h3><ul><listyle="list-style-type:disc">Apple</li><listyle="list-style-type:square">Orange</li><listyle="list-style-type:circle">Pear</li></ul>CoulduseanimageforthebulletsinanunorderedlistExample:<listyle="list-style-image:url(bird.jpg)">2024/5/2624ListPropertieslist-style-typeOnorderedlistslist-style-typecanbeusedtochangethesequencevalues

PropertyvalueSequencetypeFirstfour

decimal

Arabicnumerals

1,2,3,4

upper-alpha

UclettersA,B,C,D

lower-alpha

Lclettersa,b,c,d

upper-roman

UcRomanI,II,III,IV

lower-roman

LcRomani,ii,iii,ivE.G.WDP-4/sequence_types.htm2024/5/2625ColorThecolorpropertyspecifiestheforegroundcolourofelements<styletype=“text/css”>th.red{color:red}th.orange{color:orange}</style>Thebackground-colorpropertyspecifiesthebackgroundcolourofelementsE.G.WDP-4/back_color.htm2024/5/2626AlignmentofTextThetext-indentpropertyallowsindentationTakeseitheralengthora%valueThetext-alignpropertyhasthepossiblevalues,left(thedefault),center,right,orjustifySometimeswewanttexttoflowaroundanotherelement-thefloatpropertyvaluesofleft,right,andnone

(thedefault)E.G.WDP-4/float.htm2024/5/2627BoxModel2024/5/2628BoxModel2024/5/2629BoxModel－BordersBorders–everyelementhasaborder-stylepropertyControlswhethertheelementhasaborderandifso,thestyleoftheborderborder-stylevalues:none,dotted,dashed,anddoubleborder-width–thin,medium(default),thick,oralengthvalueinpixelsBorderwidthcanbespecifiedforanyofthefourborders(e.g.,border-top-width)border-color–anycolorBordercolorcanbespecifiedforanyofthefourborders(e.g.,border-top-color)2024/5/2630BoxModel－Margin

Margin–

thespacebetweentheborderofanelementanditsneighborelementThemarginsaroundanelementcanbesetwithmargin-left,etc.-justassignthemalengthvalue<imgsrc="c210.jpg"style="float:right;margin-left:0.35in;margin-bottom:0.35in"/>2024/5/2631BoxModel－Padding

Padding–thedistancebetweenthecontentofanelementanditsborderControlledbypadding,padding-left,etc.E.G.WDP-4/borders.htmlE.G.WDP-4/marpads.html2024/5/2632BackgroundImagesThebackground-image

property

E.G.WDP-4/back_image.htm

background-repeat

propertyPossiblevalues:repeat(default),no-repeat,repeat-x,orrepeat-ybackground-positionpropertyPossiblevalues:top,center,bottom,left,orright2024/5/2633The<span>and<div>tagsOneproblemwiththefontpropertiesisthattheyapplytowholeelements,whichareoftentoolargeSolution:anewtagtodefineanelementinthecontentofalargerelement-<span>Thedefaultmeaningof<span>istoleavethecontentasitis<styletype="text/css">

.bigred{font-size:24pt;font-family:Ariel;color:red}</style