CSI 3140 WWW Structures, Techniques and Standards. Cascading Style Sheets (CSS)

Transcription

1 CSI 3140 WWW Structures, Techiques ad Stadards Cascadig Style Sheets (CSS)

2 Motivatio whtml markup ca be used to represet Sematics: h1 meas that a elemet is a top-level headig Presetatio: h1 elemets look a certai way wit s advisable to separate sematics from presetatio because: It s easier to preset documets o multiple platforms (browser, cell phoe, spoke, ) It s easier to geerate documets with cosistet look Sematic ad presetatio chages ca be made idepedetly of oe aother (divisio of labor) User cotrol of presetatio is facilitated

3 Style Sheet Laguages wcascadig Style Sheets (CSS) Applies to (X)HTML as well as XML documets i geeral Focus of this chapter wextesible Stylesheet Laguage (XSL) Ofte used to trasform oe XML documet to aother form, but ca also add style XSL Trasformatios covered i later chapter

4 CSS Itroductio wa styled HTML documet produced by the style sheet style1.css:

5 CSS Itroductio lik elemet associates style sheet with doc.

6 CSS Itroductio type attribute specifies style laguage used

7 CSS Itroductio href attribute provides style sheet URL

8 CSS Itroductio title attribute provides style sheet ame

9 CSS Itroductio Alterative, user selectable style sheets ca be specified

10 CSS Itroductio

11 CSS Itroductio wa styled HTML documet produced by the style sheet style2.css:

12 CSS Itroductio Note that alterate, user selectable style is ot widely supported: firefox 3 ad IE 8 do, but IE 6, IE 7 ad Chrome do t.

13 CSS Itroductio wsigle documet ca be displayed o multiple media platforms by tailorig style sheets: This documet will be prited differetly tha it is displayed.

14 CSS Sytax wparts of a style rule (or statemet)

15 CSS Sytax: Selector Strigs wsigle elemet type: wmultiple elemet types: wall elemet types: wspecific elemets by id:

16 CSS Sytax: Selector Strigs

17 CSS Sytax: Selector Strigs welemets belogig to a style class: class selector: begis with a period. Referecig a style class i HTML: welemets of a certai type ad class:

18 CSS Sytax: Selector Strigs welemets belogig to a style class: Referecig a style class i HTML: this spa belogs to three style classes welemets of a certai type ad class:

19 CSS Sytax: Selector Strigs welemets belogig to a style class: Referecig a style class i HTML: welemets of a certai type ad class: this rule applies oly to spa s belogig to class special

20 CSS Sytax: Selector Strigs wsource achor elemets: pseudo-classes welemet types that are descedets:

21 CSS Sytax: Selector Strigs wsource achor elemets: welemet types that are descedats: rule applies to li elemet that is

22 CSS Sytax: Selector Strigs wsource achor elemets: welemet types that are descedats: rule applies to li elemet that is part of the cotet of a ol elemet

23 CSS Sytax: Selector Strigs wsource achor elemets: welemet types that are descedats: rule applies to li elemet that is part of the cotet of a ol elemet that is part of the cotet of a ul elemet

24 CSS Sytax wstyle rules covered thus far follow ruleset sytax wat-rule is a secod type of rule URL relative to style sheet URL Reads style rules from specified URL Must appear at begiig of style sheet

25 Style Sheets ad HTML wstyle sheets refereced by lik HTML elemet are called exteral style sheets wstyle sheets ca be embedded directly i HTML documet usig style elemet wmost HTML elemets have style attribute (value is list of style declaratios)

26 Style Sheets ad HTML wrules of thumb: Use exteral style sheets to defie site-wide style Prefer style sheets (either exteral or embedded) to style attributes XML special characters l Must use refereces i embedded style sheets ad style attribute l Must ot use refereces i exteral style sheets

27 CSS Rule Cascade wwhat if more tha oe style declaratio applies to a property of a elemet? wthe CSS rule cascade determies which style rule s declaratio applies

28 CSS Rule Cascade To fid the value for a elemet/property combiatio, user agets must apply the followig sortig order: 1- Fid all declaratios that apply to the elemet ad property i questio, for the target media type. Declaratios apply if the associated selector matches the elemet i questio.

29 CSS Rule Cascade 2- The primary sort of the declaratios is by weight ad origi: for ormal declaratios, author style sheets override user style sheets which override the default style sheet. For "!importat" declaratios, user style sheets override author style sheets which override the default style sheet. "!importat" declaratio override ormal declaratios. A imported style sheet has the same origi as the style sheet that imported it. Five origi/weight levels: 1. user/importat 2. author/importat 3. author/ormal 4. user/ormal 5. user aget/ormal

30 CSS Rule Cascade 3- The secodary sort is by specificity of selector: more specific selectors will override more geeral oes. Pseudoelemets ad pseudo-classes are couted as ormal elemets ad classes, respectively. Specificity: 1. style attribute 2. rule with selector: 1. ID 2. class/pseudo-class 3. descedat/elemet type 4. uiversal 3. HTML attribute

31 CSS Rule Cascade 4- Fially, sort by order specified: if two rules have the same weight, origi ad specificity, the latter specified wis. Rules i imported style sheets are cosidered to be before ay rules i the style sheet itself. Coceptually, create oe log style sheet. Later style rules have higher priority tha earlier rules.

32 CSS Iheritace wwhat if o style declaratio applies to a property of a elemet? wgeerally, the property value is iherited from the earest acestor elemet that has a value for the property wif o acestor has a value (or the property does ot iherit) the CSS defies a iitial value that is used

33 CSS Iheritace

34 CSS Iheritace wproperty values: Specified: value cotaied i declaratio l Absolute: value ca be determied without referece to cotext (e.g., 2cm) l Relative: value depeds o cotext (e.g., larger) Computed: absolute represetatio of relative value (e.g., larger might be 1.2 x paret fot size) Actual: value actually used by browser (e.g., computed value might be rouded)

35 CSS Iheritace wmost properties iherit computed value Exceptio discussed later: lie-height wa little thought ca usually tell you whether a property iherits or ot Example: height does ot iherit

36 CSS Fot Properties w A fot is a mappig from code poits to glyphs Glyph (visual represetatio) character cell (cotet area)

37 CSS Fot Properties w A fot is a mappig from code poits to glyphs glyphs do ot ecessary stay iside cells!

38 CSS Fot Properties wa fot family is a collectio of related fots (typically differ i size, weight, etc.) wfot-family property ca accept a list of families, icludig geeric fot families first choice fot

39 CSS Fot Properties wa fot family is a collectio of related fots (typically differ i size, weight, etc.) wfot-family property ca accept a list of families, icludig geeric fot families secod choice fot

40 CSS Fot Properties wa fot family is a collectio of related fots (typically differ i size, weight, etc.) wfot-family property ca accept a list of families, icludig geeric fot families geeric

41 CSS Fot Properties geeric fots are systemspecific

42 CSS Fot Properties wnote that most geeric fot ca be easily set o Firefox ad Chrome, but such optio does t seem to be available o IE 7 ad 8. IE will still default to somethig although maybe ot what you had hoped for!

43 CSS Fot Properties w May properties, such as fot-size, have a value that is a CSS legth w All CSS legth values except 0 eed uits

44 CSS Fot Properties Computed value of fot-size property

45 CSS Fot Properties wreferece fot defies em ad ex uits Normally, referece fot is the fot of the elemet beig styled Exceptio: Usig em/ex to specify value for fot-size paret elemet s fot is referece fot

46 CSS Fot Properties wother ways to specify value for fot-size: Percetage (of paret fot-size) Absolute size keyword: xx-small, x-small, small, medium (iitial value), large, x-large, xx-large l User aget specific; should differ by ~ 20% Relative size keyword: smaller, larger l Relative to paret elemet s fot

47 CSS Fot Properties

48 CSS Fot Properties wtext is redered usig lie boxes wheight of lie box give by lie-height Iitial value: ormal (i.e., cell height; relatioship with em height is fot-specific) Other values (followig are equivalet):

49 CSS Fot Properties wwhe lie-height is greater tha cell height: wiheritace of lie-height: Specified value if ormal or uit-less umber Computed value otherwise

50 CSS Fot Properties wfot shortcut property:

51 CSS Fot Properties wfot shortcut property: Iitial values used if o value specified i fot property list (that is, potetially reset)

52 CSS Fot Properties wfot shortcut property: specifyig lie-height (here, twice cell height) ay order size ad family required, order-depedet

53 CSS Text Formattig

54 CSS Text Color wfot color specified by color property wtwo primary ways of specifyig colors: Color ame: black, gray, silver, white, red, lime, blue, yellow, aqua, fuchsia, maroo, gree, avy, olive, teal, purple, full list at Keywords red/gree/blue (RGB) values

55 CSS Text Color

56 CSS Text Color

57 CSS Box Model wevery redered elemet occupies a box: (or outer edge) (or ier edge)

58 CSS Box Model

59 CSS Box Model

60 CSS Box Model

61 CSS Box Model

62 CSS Box Model

63 CSS Box Model

64 CSS Box Model

65 CSS Box Model

66 CSS Box Model wif multiple declaratios apply to a property, the last declaratio overrides earlier specificatios Left border is 30px wide, iset style, ad red

67 Backgrouds wbackgroud-color Specifies backgroud color for cotet, paddig, ad border areas Margi area is always trasparet Not iherited; iitial value trasparet wbackgroud-image Specifies (usig url() fuctio) image that will be tiled over a elemet

68 Backgrouds <body style="backgroud-image:url('cucumberflowerpot.pg')">

69 Normal Flow Layout wi ormal flow processig, each displayed elemet has a correspodig box html elemet box is called iitial cotaiig block ad correspods to etire documet Boxes of child elemets are cotaied i boxes of paret Siblig block elemets are laid out oe o top of the other Siblig ilie elemets are oe after the other

70 Normal Flow Layout (body) (html)

71 Normal Flow Layout Block elemets oly

72 Normal Flow Layout html body div d1 div d2 div d3 div d4 Top edges of block boxes are i documet order

73 Normal Flow Layout wwhat is a block elemet? Elemet with value block specified for its display property User aget style sheet (ot CSS) specifies default values; typical block elemets iclude html, body, p, pre, div, form, ol, ul, dl, hr, h1 through h6 Most other elemets except li ad table-related have ilie specified for display

74 Normal Flow Layout wwhe blocks stack, adjacet margis are collapsed to the size of the larger margi

75 Normal Flow Layout wiitial value of width property is auto, which for block boxes meas to make the cotet area as wide as possible withi margi/paddig costraits: Width of block boxes icreases as browser cliet area is wideed

76 Normal Flow Layout wca also specify CSS legth or percetage (of paret s cotet width) for width property By default, width of right margi is adjusted to accommodate a chage to width

77 Normal Flow Layout wca also specify CSS legth or percetage (of paret s cotet width) for width property Ceterig ca be achieved by settig both margis to auto

78 Normal Flow Layout wboxes correspodig to character cells ad ilie elemets are laid out side by side i lie boxes that are stacked oe o top of the other Heights based o cotet Character cells aliged by baselie

79 Normal Flow Layout Paddig/borders/margis affect width but ot height of ilie boxes

80 Normal Flow Layout wspecify value for vertical-alig to positio a ilie elemet withi lie box: iitial value of verticalalig

81 Beyod Normal Flow wcss allows for boxes to be positioed outside the ormal flow: Relative positioig spa s shifted backwards relative to ormal flow

82 Beyod Normal Flow wcss allows for boxes to be positioed outside the ormal flow: Float positioig spa take out of ormal flow ad floated to the left of its lie box

83 Beyod Normal Flow wcss allows for boxes to be positioed outside the ormal flow: Absolute positioig spa s removed from ormal flow ad positioed relative to aother box

84 Beyod Normal Flow wproperties used to specify positioig: positio: static (iitial value), relative, or absolute l Elemet is positioed if this property ot static l Properties left, right, top, bottom apply to positioed elemets w Primary values are auto (iitial value) or CSS legth float: oe, left, or right l Applies to elemets with static ad relative positioig oly

85 Beyod Normal Flow wrelative positioig Specifyig positive value for right property of relatively positioed box moves it to left <spa style="backgroud-color:red">&bsp;&bsp;&bsp;&bsp; </spa><spa class="right">red</spa> spa cotaiig text moves left

86 Beyod Normal Flow wrelative positioig Specifyig egative value for left property also moves box to left <spa style="backgroud-color:red">&bsp;&bsp;&bsp;&bsp; </spa><spa class="right">red</spa> same effect as before

87 Beyod Normal Flow wfloat positioig Specify value for float property

88 Beyod Normal Flow wfloat positioig Specify value for float property Floated elemet becomes a CSS block elemet (e.g., ca set height ad width)

89 Beyod Normal Flow wabsolute positioig Specify locatio for corer of box relative to positioed cotaiig block p elemets are positioed (but do t move!) cotaiig block margi area paddig area This secod paragraph has a ote.

90 Beyod Normal Flow wabsolute positioig Specify locatio for edges of box relative to positioed cotaiig block

91 Beyod Normal Flow wabsolute positioig 10em paddig top edge paddig left edge

92 Beyod Normal Flow wabsolute positioig 8em

93 Beyod Normal Flow wabsolutely positioed box does ot affect positioig of other boxes! Secod absolutely positioed box obscures first

94 CSS Positio-Related Properties wz-idex: drawig order for overlaid boxes (largest umber draw last)

95 CSS Positio-Related Properties wdisplay: value oe meas that elemet ad its descedats are ot redered ad do ot affect ormal flow wvisibility: value hidde (iitial value is visible) meas that elemet ad its descedats are ot redered but still do affect ormal flow