Tải bản đầy đủ - 0 (trang)
Chapter 16. Cascading Style Sheets and Dynamic HTML

Chapter 16. Cascading Style Sheets and Dynamic HTML

Tải bản đầy đủ - 0trang

themostimportantCSSstylesforcommonDHTMLeffects.

Next,thechapterdescribesvariouswaysofscriptingCSS.The

mostcommonandimportanttechniqueistoscriptthestyles

thatapplytoindividualdocumentelementsusingthestyle

property.Arelatedtechniqueindirectlymodifiesanelement's

stylebyalteringthesetofCSSclassesthatapplytothat

element.Thisisdonebysettingormodifyingtheelement's

classNameproperty.Itisalsopossibletoscriptstylesheets

directly,andthechapterconcludeswithadiscussionofenabling

anddisablingstylesheetsandquerying,adding,andremoving

rulesfromstylesheets.



16.1.OverviewofCSS

StylesinCSSarespecifiedasasemicolon-separatedlistof

name/valueattributepairs,inwhichcolonsseparateeachname

andvalue.Forexample,thefollowingstylespecifiesbold,blue,

underlinedtext:

font-weight:bold;color:blue;text-decoration:underline;



TheCSSstandarddefinesquiteafewstyleattributes.Table161listsmostofthem,omittingafewpoorlysupportedones.You

arenotexpectedtounderstandorbefamiliarwithallthese

attributes,theirvalues,ortheirmeanings.Asyoubecome

familiarwithCSSanduseitinyourdocumentsandscripts,

however,youmayfindthistableaconvenientquickreference.

FormorecompletedocumentationonCSS,consultCascading

StyleSheets:TheDefinitiveGuidebyEricMeyer(O'Reilly)or

DynamicHTML:TheDefinitiveGuidebyDannyGoodman

(O'Reilly).Orreadthespecificationitself:youcanfinditat

http://www.w3c.org/TR/CSS21/.

Table16-1.CSS2.1styleattributesandtheirvalues

Name



Values



background



[background-color||background-image||background-repeat||background-attachment||

background-position]



backgroundattachment scroll|fixed



backgroundcolor



color|TRansparent



backgroundurl(url)|none

image



backgroundposition



[[percentage|length]{1,2}|[[top|center|bottom]||[left|center|right]

]]



backgroundrepeat|repeat-x|repeat-y|no-repeat

repeat



border



[border-width||border-style||color]



bordercollapse



collapse|separate



bordercolor



color{1,4}|TRansparent



borderspacing



lengthlength?



borderstyle



[none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset]{1,4}



border-top



[border-top-width||border-style||[color|transparent]]



borderright



borderbottom



border-left



border-topcolor



color|TRansparent



borderright-color



borderbottomcolor



borderleft-color



border-topnone|hidden|dotted|dashed|solid|double|groove|ridge|inset|

style



borderoutset

right-style



borderbottomstyle



borderleft-style



border-topthin|medium|thick|length

width



borderright-width



borderbottomwidth



borderleft-width



borderwidth



[thin|medium|thick|length]{1,4}



bottom



length|percentage|auto



captionside



top|bottom



clear



none|left|right|both



clip



[rect([length|auto]{4})]|auto



color



color



content



[string|url(url)|counter|attr(attribute-name)|open-quote|close-quote|noopen-quote|no-close-quote]+|normal



counterincrement



[identifierinteger?]+|none



counterreset



[identifierinteger?]+|none



cursor



[[url(url),]*[auto|crosshair|default|pointer|progress|move|e-resize|neresize|nw-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|

help]]



direction



ltr|rtl



display



inline|block|inline-block|list-item|run-in|table|inline-table|table-rowgroup|table-header-group|table-footer-group|table-row|table-column-group|tablecolumn|table-cell|table-caption|none



empty-cells show|hide



float



left|right|none



font



[[font-style||font-variant||font-weight]?font-size[/line-height]?fontfamily]|caption|icon|menu|message-box|small-caption|status-bar



font-family



[[family-name|serif|sans-serif|monospace|cursive|fantasy],]+



font-size



xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger|



length|percentage



font-style normal|italic|oblique



fontvariant



normal|small-caps



font-weight normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900



height



length|percentage|auto



left



length|percentage|auto



letterspacing



normal|length



line-height normal|number|length|percentage



list-style



list-style-



[list-style-type||list-style-position||list-style-image]



url(url)|none



image



list-styleinside|outside

position



disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|

list-stylelower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|hebrew|armenian|

type

georgian|cjk-ideographic|hiragana|katakana|hiragana-iroha|katakana-iroha|none



margin



[length|percentage|auto]{1,4}



margin-top



length|percentage|auto



marginright



marginbottom



margin-left



markeroffset



length|auto



max-height



length|percentage|none



max-width



length|percentage|none



min-height



length|percentage



min-width



length|percentage



outline



[outline-color||outline-style||outline-width]



outlinecolor



color|invert



outlinestyle



none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset



outlinewidth



thin|medium|thick|length



overflow



visible|hidden|scroll|auto



padding



[length|percentage]{1,4}



padding-top



length|percentage



paddingright



paddingbottom



paddingleft



page-breakauto|always|avoid|left|right

after



page-breakauto|always|avoid|left|right

before



page-breakavoid|auto

inside



position



static|relative|absolute|fixed



quotes



[stringstring]+|none



right



length|percentage|auto



tablelayout



auto|fixed



text-align left|right|center|justify



textdecoration none|[underline||overline||line-through||blink]



text-indent



length|percentage



textTRansform



capitalize|uppercase|lowercase|none



top



length|percentage|auto



unicodebidi



normal|embed|bidi-override



verticalalign



baseline|sub|super|top|text-top|middle|bottom|text-bottom|percentage|



length



visibility visible|hidden|collapse



white-space normal|pre|nowrap|pre-wrap|pre-line



width



length|percentage|auto



wordspacing



normal|length



z-index



auto|integer



ThesecondcolumnofTable16-1showstheallowedvaluesfor

eachstyleattribute.ItusesthegrammarusedbytheCSS

specification.Itemsinfixed-widthfontarekeywordsandshould

appearexactlyasshown.Itemsinitalicsspecifyadatatype

suchasastringoralength.Notethatthelengthtypeisa

numberfollowedbyaunitsspecification,suchaspx(forpixels).

SeeaCSSreferencefordetailsontheothertypes.Itemsthat

appearinitalicfixed-widthfontrepresentthesetofvalues

allowedbysomeotherCSSattribute.Inadditiontothevalues

showninthetable,eachstyleattributemayhavethevalue

"inherit"tospecifythatitshouldinheritthevaluefromits

parent.

Valuesseparatedbya|arealternatives;youmustspecify

exactlyone.Valuesseparatedby||areoptions;youmust

specifyatleastone,butyoumayspecifymorethanone,and

theycanappearinanyorder.Squarebrackets[]groupvalues.



Anasterisk(*)specifiesthatthepreviousvalueorgroupmay

appearzeroormoretimes,aplussign(+)specifiesthatthe

previousvalueorgroupmayappearoneormoretimes,anda

questionmark(?)specifiesthatthepreviousitemisoptional

andmayappearzerooronetime.Numberswithincurlybraces

specifyanumberofrepetitions.Forexample,{2}specifiesthat

thepreviousitemmustberepeatedtwice,and{1,4}specifies

thatthepreviousitemmustappearatleastonceandnomore

thanfourtimes.(Thisrepetitionsyntaxmayseemfamiliar:itis

thesameoneusedbyJavaScriptregularexpressions,discussed

inChapter11.)

TheCSSstandardallowscertainstyleattributesthatare

commonlyusedtogethertobecombinedusingspecialshortcut

attributes.Forexample,thefont-family,font-size,font-style,and

font-weightattributescanallbesetatonceusingasinglefont

attribute:

font:bolditalic24pthelvetica;



Themarginandpaddingattributesareshortcutsforattributesthat

specifymargins,padding,andbordersforeachoftheindividual

sidesofanelement.Thus,insteadofusingthemarginattribute,

youcanusemargin-left,margin-right,margin-top,andmargin-bottom,

andthesamegoesforpadding.



16.1.1.ApplyingStyleRulestoDocument

Elements

Youcanapplystyleattributestotheelementsofadocumentin

anumberofways.Onewayistousetheminthestyleattribute

ofanHTMLtag.Forexample,tosetthemarginsofan

individualparagraph,youcanuseataglikethis:







OneoftheimportantgoalsofCSSistoseparatedocument

contentandstructurefromdocumentpresentation.Specifying

styleswiththestyleattributeofindividualHTMLtagsdoesnot

accomplishthis(althoughitcanbeausefultechniquefor

DHTML).Toachievetheseparationofstructurefrom

presentation,usestylesheets,whichgroupallthestyle

informationintoasingleplace.ACSSstylesheetconsistsofa

setofstylerules.Eachrulebeginswithaselectorthatspecifies

thedocumentelementorelementstowhichitapplies,followed

byasetofstyleattributesandtheirvalueswithincurlybraces.

Thesimplestkindofruledefinesstylesforoneormorespecific

tagnames.Forexample,thefollowingrulesetsthemargins

andbackgroundcolorforthetag:



body{margin-left:30px;margin-right:15px;background-color:



Thefollowingrulespecifiesthattextwithin

and



headingsshouldbecentered:

h1,h2{text-align:center;}



Inthepreviousexample,notehowacommaisusedtoseparate

thetagnamestowhichthestylesaretoapply.Ifthecommais

omitted,theselectorspecifiesacontextualrulethatapplies

onlywhenonetagisnestedwithinanother.Forexample,the

followingrulesspecifythatthetextinside
tagsis

displayedinanitalicfont,buttextinsideantaginsidea

isdisplayedinplain,nonitalictext:



blockquote{font-style:italic;}

blockquotei{font-style:normal;}



Anotherkindofstylesheetruleusesadifferentselectorto

specifyaclassofelementstowhichitsstylesshouldbeapplied.

Theclassofanelementisdefinedbytheclassattributeofthe

HTMLtag.Forexample,thefollowingrulespecifiesthatanytag

withtheattributeclass="attention"shouldbedisplayedinbold:

.attention{font-weight:bold;}



Classselectorscanbecombinedwithtagnameselectors.The

followingrulespecifiesthatwhena

taghasthe

class="attention"attribute,itshouldbedisplayedinred,in

additiontobeingdisplayedinaboldfont(asspecifiedbythe

previousrule):

p.attention{color:red;}



Finally,stylesheetscancontainrulesthatapplyonlyto

individualelementsthathaveaspecifiedidattribute.The

followingrulespecifiesthattheelementwithanidattribute

equaltop1shouldnotbeshown:

#p1{visibility:hidden;}



You'veseentheidattributebefore:itisusedwiththe

documentmethodgetElementById()toreturnindividualelements

ofadocument.Asyoumightimagine,thiskindofelement-



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 16. Cascading Style Sheets and Dynamic HTML

Tải bản đầy đủ ngay(0 tr)

×