Presentation is loading. Please wait.

Presentation is loading. Please wait.

LIS650 lecture 4 Thomas Krichel 2004-02-27. today Advice CSS Properties –Box properties-- List properties –Table properties-- Classification properties.

Similar presentations

Presentation on theme: "LIS650 lecture 4 Thomas Krichel 2004-02-27. today Advice CSS Properties –Box properties-- List properties –Table properties-- Classification properties."— Presentation transcript:

1 LIS650 lecture 4 Thomas Krichel

2 today Advice CSS Properties –Box properties-- List properties –Table properties-- Classification properties –(Audio properties)-- Generated content properties –Paged properties Nielsen on site design http Information architecture Semantic web

3 advice for cheaters Within a style sheet, for example the contents of a tag, you can import another file using url(; ""; these two ways appear to be equivalent

4 media dependent styles Remember the media CSS knows about ? you can import different types for different "URI" medialist where medialist is a list of one or more media, separated by comma challenged.css" braille, handheld

5 advice about spacing Traditionally only use horizontally, the em nowadays is the height of the font, and should be used vertically as well, as in { padding: 1.5em; margin: 1.5em} For body, use %ages, as in BODY {margin-left: 15%; margin-right:0%} To create a menu, do something like {float: left; width=15em}

6 the 'inherit' value Each property can have the 'inherit' value. In this case, the value of the property for the tag is determined by the containing tag. Sometimes, 'inherit' is the default value.

7 validating CSS It is at check your style sheet there when you wonder why the damn thing does not work. Note that checking the style sheet will not be part of the assessment of the web site.

8 box properties V {z-index: } let you set an integer value for a layer on the canvas where the tag will appear. A negative value means that the tag contents is behind its containing block. Thus if tag 1 has z-index value 1 and tag 2 has z-index value number 2, they are laying on top of each other. the initial value is auto browser support for this property is limited.

9 box properties VI The {visibility: } property sets the visibility of a tag. It takes values –'visible' The generated box is visible. –'hidden' The generated box is invisible (fully transparent), but still affects layout. –'collapse' The tag collapses in the table. Only useful if applied to table tags. used on elements; otherwise 'collapse' has the same meaning as 'hidden'. With this you can do sophisticated alignments

10 box properties VII The {clip:} properties sets which area of a box is visible. When the {overflow: } property is not set to 'hidden' it will take no effect. It only applies to absolutely positioned tags. p {overflow: hidden; clip: rect(15px, -10px, 5px, 10px)} IE v6 does not support it. Example at clip_test.html

11 box properties VIII We now look at overflow and clipping. When a box contents is larger than the containing box, it overflows. {overflow:} can take the values –visible contents is allowed to overflow –hidden contents is hidden –scroll UA displays a scroll device at the edge of the box –auto leave to the user agent to decide what to do

12 list properties {list-style-position: } can take the value inside or outside. The latter is the default, the property refers to the position of the list item start marker {list-style-image: } define the bullet point of a list as a graphic, use url(URL) to give the location of the graphic. {list-style-property: } –takes the values disc, circle, square, none with an unordered list –takes the value decimal, lower-roman, upper- roman, lower-alpha, upper-alpha with ordered list.

13 table properties I {border-collapse: } allows to choose the fundamental table model. It can take two values –'separate' implies that each cell has its own box. –'collapse' implies that adjacent cells share the same border

14 table properties II The properties on this slide are only useful if you choose the separated border model. You can set the distance between adjacent cells using the border-spacing: property. Set it to two distances to specify different horizontal and vertical values empty-cells: can be set to –'show' shows empty cells with their border –'hide' does not show the border around an empty cell there are some other table properties

15 classification properties I {display: } sets the display type of an tag, it take the following values –'block' displays the tag contents as a block –'inline' displays it as inline contents –'list-item' makes it an item of a list, you can then attach list properties to it –'none' does not display it –'run-in' (see later) –'compact'(see later)

16 classification properties II {display: } also takes the following values –table-- table-footer-group –table-row -- table-row-group –table-cell-- table-column –table-caption -- table-column-group –inline-table-- table-header-group these means that they behave like the table elements that we already discussed

17 run-in box If a block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. Otherwise, the run-in box becomes a block box. Example on next page

18 example for run-in box a run-in box example h3 { display: run-in } a run-in heading. and a paragraph of text that follows it and it continues on the line of the h3

19 compact box If a block-level box follows the compact box, the compact box is formatted like a one-line inline box. The resulting box width is compared to one of the side margins of the block box, –left margin if direction is left-to-right –right margin if direction is right-to-left If the inline box width is less than or equal to the margin, the inline box is given a position in the margin as described immediately below. Otherwise, the compact box becomes a block box.

20 compact box example

Similar presentations

Ads by Google