Tải bản đầy đủ - 0 (trang)
Chapter 18. Applying CSS to Web Forms

Chapter 18. Applying CSS to Web Forms

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

TheApplyStylespanedisplaysonlythosestylesthatare

relevanttothecurrentlyselectedpageelement.Therefore,ifa

styleisdefinedfortheHTMLaelement,itisdisplayedinthe

ApplyStylespaneonlyifahyperlinkorbookmarkisselectedon

thecurrentpage.

TheApplyStylespanedoesnothaveastylepreviewsectionas

theManageStylespanedoes.Instead,thenameofthestyleis

formattedaccordingtothepropertiesdefinedinthestyle.You

canchangethebackgroundcolorofthatpreviewbyclickingthe

OptionsbuttonandthenselectingPreviewBackgroundColor

fromthemenu.Thisisusefulifyouuseanythingotherthana

CSSstyletospecifythebackgroundcolorofyourpageandyou

wanttoseewhatyourstyleswilllooklikeagainstthatcolor.

Torestorethepreviewbackgroundcolortothedefaultvalueof

Automatic,clickOptionsandselectPreviewBackgroundColor.



CleartheValuetextbox,asshowninFigure18.2.

Figure18.2.ByclearingtheValuetextbox,youcan

restorethebackgroundpreviewcolortothedefault

valueofAutomatic.



ApplyingaStyle

ToapplyastyleintheApplyStylespane,selectthedesired

pageelementandthenclickonthestyleintheApplyStyles

pane.Alternatively,youcanright-clickonthestylenameinthe

ApplyStylespaneandselectApplyStyle,oryoucanclickthe

arrowattherightedgeofthestyleandselectApplyStylefrom

themenu,asshowninFigure18.3.

Figure18.3.Youcanapplystylesbyclickingthearrowat

therightedgeofthestyleandselectingApplyStylefrom

themenu.



IftheappliedCSSstyleisaCSSclassorID,theQuickTag

SelectorandtheBlockSelectordisplaythenameoftheclassor

ID.Figure18.4showstheQuickTagSelectorandBlockSelector

ofapelementafteraCSSclassnamedcontentisappliedto

theparagraph.

Figure18.4.BoththeBlockSelectorandtheQuickTag

SelectordisplaythenameofCSSclassesorIDsthatare

appliedtopageelements.



RemovingaPreviouslyAppliedCSSClass,CSSID,

orInlineStyle

Insomecases,youmayneedtoremoveanexistingstylefrom

apageelement.Forexample,Figure18.5showsa

element

surroundedbya

element.Thestyle1CSSclassis

appliedtothe
elementandthestyle2CSSclassis

appliedtothe

element.AsyoucanseeintheApplyStyles

pane,thestyle1classappliedtothe

usestheArialfontfamily,buttheparagraphisstillusingtheCourierfont-family

appliedbystyle2.

Figure18.5.AsimpleCSSexampleshowinghowaCSS

classcanoverridepropertiesdefinedinahigher-level

CSSclass.

[Viewfullsizeimage]



Toforcetheparagraphtothefont-familyspecifiedbythe

style1CSSclass,youcanremovethestyle2classassignment

fortheparagraphbyclickinginsidetheparagraph,right-clicking

thestyle2classintheApplyStylespane,andselecting

RemoveClass,asshowninFigure18.6.

Figure18.6.RemovingaCSSclassassignmentwiththe

ApplyStylespanecouldn'tbeeasier.



Tip

YoucanalsoremoveaCSSIDbyselectingRemoveID

andaninlinestylebyselectingRemoveInlineStyle.



Note

Theotheroptionsthatareavailablewhenright-clicking

astyleintheApplyStylespaneareidenticaltothose



thatareavailableintheManageStylespane.



FormoreinformationontheManageStylespane,

see"TheManageStylesPane,"p.255.



Chapter18.ApplyingCSStoWebForms

INTHISCHAPTER

UsingtheApplyStylesPane260

UsingtheCSSPropertiesPane263

Checkpoint267



UsingtheApplyStylesPane

TheApplyStylespaneisanotherfeaturethatVisualWeb

Developer2008borrowedfromExpressionWeb.TheApply

StylespaneissimilartotheManageStylespane,butits

primarypurposeistoapplyCSSstylestopageelements.

Tip

YoucannotdraganddropCSSclassesandIDsinthe

ApplyStylespaneasyoucanintheManageStyles

pane.

AsshowninFigure18.1,theApplyStylespaneusesthesame

visualrepresentationforCSSstylesthatisusedintheManage

Stylespane.JustaswiththeManageStylespane,theApply

Stylespaneusescoloredballstoindicatethestyletype,butthe

ApplyStylestaskpanealsousesyellowballstodisplayinline

styles.

Figure18.1.TheApplyStylespaneusesthesamevisual

cuesusedbytheManageStylespane.



TheApplyStylespanedisplaysonlythosestylesthatare

relevanttothecurrentlyselectedpageelement.Therefore,ifa

styleisdefinedfortheHTMLaelement,itisdisplayedinthe

ApplyStylespaneonlyifahyperlinkorbookmarkisselectedon

thecurrentpage.

TheApplyStylespanedoesnothaveastylepreviewsectionas

theManageStylespanedoes.Instead,thenameofthestyleis

formattedaccordingtothepropertiesdefinedinthestyle.You

canchangethebackgroundcolorofthatpreviewbyclickingthe

OptionsbuttonandthenselectingPreviewBackgroundColor

fromthemenu.Thisisusefulifyouuseanythingotherthana

CSSstyletospecifythebackgroundcolorofyourpageandyou

wanttoseewhatyourstyleswilllooklikeagainstthatcolor.

Torestorethepreviewbackgroundcolortothedefaultvalueof

Automatic,clickOptionsandselectPreviewBackgroundColor.



CleartheValuetextbox,asshowninFigure18.2.

Figure18.2.ByclearingtheValuetextbox,youcan

restorethebackgroundpreviewcolortothedefault

valueofAutomatic.



ApplyingaStyle

ToapplyastyleintheApplyStylespane,selectthedesired

pageelementandthenclickonthestyleintheApplyStyles

pane.Alternatively,youcanright-clickonthestylenameinthe

ApplyStylespaneandselectApplyStyle,oryoucanclickthe

arrowattherightedgeofthestyleandselectApplyStylefrom

themenu,asshowninFigure18.3.

Figure18.3.Youcanapplystylesbyclickingthearrowat

therightedgeofthestyleandselectingApplyStylefrom

themenu.



IftheappliedCSSstyleisaCSSclassorID,theQuickTag

SelectorandtheBlockSelectordisplaythenameoftheclassor

ID.Figure18.4showstheQuickTagSelectorandBlockSelector

ofapelementafteraCSSclassnamedcontentisappliedto

theparagraph.

Figure18.4.BoththeBlockSelectorandtheQuickTag

SelectordisplaythenameofCSSclassesorIDsthatare

appliedtopageelements.