Client-Side Web Technologies. CSS Part II

Size: px

Start display at page:

Download "Client-Side Web Technologies. CSS Part II"

Rudolf Chapman
6 years ago
Views:

1 Client-Side Web Technologies CSS Part II

2 Topics Box model and related properties Visual formatting model and related properties

3 The CSS Box Model Describes the rectangular boxes generated for elements in the document tree Each box has: Content area Padding (optional) Border (optional) Margins (optional)

4 The CSS Box Model (continued) Source:

5 Width Property Specifies the width of the content area of boxes width Value: length percentage auto inherit Initial: auto Inherited: no Does not apply to non-replaced inline-level elements (width of non-replaced inline elements is determined by the rendered content within them)* When set to auto, the width depends on the value of other properties * We will discuss what is meant by inline-level later

6 Height Property Specifies the height of the content area of boxes height Value: length percentage auto inherit Initial: auto Inherited: no Does not apply to non-replaced inline-level elements* When set to auto, the height depends on the value of other properties * We will discuss what is meant by inline-level later

7 Margin Properties Specify the width of the margin area of a box The value can be a negative value margin-top, margin-bottom, margin-right, margin-left Value: length percentage auto inherit Initial: 0 Inherited: no margin shorthand property Value: [ length percentage auto ]{1,4} inherit 1 value: applies all sides 2 values: top and bottom set to 1 st, left and right set to 2 nd 3 values: top is set to 1 st, left and right set to 2 nd, bottom set to 3 rd 4 values : apply to top, right, bottom, left respectively

8 Padding Properties Specify the width of the padding area of a box padding-top, padding-bottom, padding-right, padding-left Value: length percentage inherit Initial: 0 Inherited: no padding shorthand property Value: [ length percentage ]{1,4} inherit 1 value: applies all sides 2 values: top and bottom set to 1 st, left and right set to 2 nd 3 values: top is set to 1 st, left and right set to 2 nd, bottom set to 3 rd 4 values : apply to top, right, bottom, left respectively

9 Border Properties Border width properties Border color properties Border style properties Border radius properties

10 Border Width Properties Specify the width of the border area of a box border-top-width, border-bottom-width, borderright-width, border-left-width Value: thin medium thick length inherit Initial: medium Inherited: no border-width shorthand property Value: [ thin medium thick length ]{1,4} inherit 1 value: applies all sides 2 values: top and bottom set to 1 st, left and right set to 2 nd 3 values: top is set to 1 st, left and right set to 2 nd, bottom set to 3 rd 4 values : apply to top, right, bottom, left respectively

11 Border Color Properties Specify the color of the border area of a box border-top-color, border-bottom-color, borderright-color, border-left-color Value: color transparent inherit Initial: computed color property value Inherited: no border-color shorthand property Value: [ color transparent ]{1,4} inherit 1 value: applies all sides 2 values: top and bottom set to 1 st, left and right set to 2 nd 3 values: top is set to 1 st, left and right set to 2 nd, bottom set to 3 rd 4 values : apply to top, right, bottom, left respectively

12 Border Style Properties Specify the line style of the border area of a box <border-style> = none hidden dotted dashed solid double groove ridge inset outset border-top-style, border-bottom-style, borderright-style, border-left-style Value: <border-style> inherit Initial: none Inherited: no border-style shorthand property Value: [ <border-style> ]{1,4} inherit 1 value: applies all sides 2 values: top and bottom set to 1 st, left and right set to 2 nd 3 values: top is set to 1 st, left and right set to 2 nd, bottom set to 3 rd 4 values : apply to top, right, bottom, left respectively

13 Border Shorthand Properties border-top, border-bottom, border-right, border-left Value: [ border-width border-style border-color ] inherit Examples h1 { border-top: thick solid red } h1 { border-top: 1px solid } border Value: [ border-width border-style border-color ] inherit Sets values on all 4 borders

14 Box-Sizing Property Controls whether border and padding are included in width/height box-sizing Value: content-box border-box inherit Initial: content-box Inherited: no content-box: padding and border are drawn outside content area border-box: padding and border are drawn inside content area See:

Border Radius Properties Specify the shape of the corner of the border border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius Value: [ length

15 Border Radius Properties Specify the shape of the corner of the border border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius Value: [ length percentage ]{1,2} inherit Initial: 0 Inherited: no The 2 length or percentage values define the radii of the quarter ellipse that defines the shape of the corner of the outer border edge 1 st value: horizontal radius 2 nd value: vertical radius border-top-left-radius: 55pt 25pt Source:

16 Border Radius Shorthand Property border-radius Value: [ length percent ]{1,4} [ / [ length percent ]{1,4} ]? inherit Values before the / set horizontal radius and values after set the vertical radius If there is no / then both radii are set equally The 4 values for each radii are given in the order: top-left top-right (if omitted, same as top-left) bottom-right (if omitted, same as top-left) bottom-left (if omitted, same as top-right) See

17 Box Shadow Property Attaches one or more drop-shadows to the box <shadow> = inset? && [ length{2,4} && color? ] box-shadow Value: none <shadow> [, <shadow> ]* Initial: none Inherited: no Length values: The 1 st length is the horizontal offset of the shadow (+ is right, - is left) The 2 nd length is the vertical offset (+ is down, - is up) The 3 rd length is the blur radius (the > the value the more blur) The 4 th length is spread distance (+ causes expansion, - contraction) Color is the color of the shadow The inset keyword causes an inner shadow as opposed to an outer See

18 Visual Formatting Model How user agents (browsers) process the document tree for visual media Each element generates zero or more boxes according to the box model with layout based on: Box dimensions and type Positioning scheme Relationships between elements in the tree External information (e.g. Browser viewport size)

19 Visual Formatting Model (continued) Replaced element: Any element whose appearance and dimensions are defined by an external source E.g. images, form elements Non-replaced element Any element that is not a replaced element

20 Visual Formatting Model (continued) Canvas Space where the formatting structure is rendered Viewport Window offered by user agents (browsers) that allows users to view a document When smaller than the canvas area, a scrolling mechanism should be provided

21 Visual Formatting Model (continued) viewport

22 Visual Formatting Model (continued) Containing block Rectangular box that establishes the context by which descendant boxes positions and sizes are calculated from Every element box has a containing block The root element s (html) containing block is called the initial containing block and has the dimensions of the viewport For other elements, the containing block depends on the positioning scheme of the element and its relationship with other elements in the document tree

23 Visual Formatting Model (continued) Block formatting contexts Boxes are laid out one after the other, vertically, beginning at the top of the containing block Vertical distance between sibling boxes is determined by margin properties (vertical margins between adjacent boxes collapse)

24 Containing Block Block formatting contexts

25 Visual Formatting Model (continued) Inline formatting contexts Boxes are laid out one after the other, horizontally, beginning at the top of the containing block Horizontal margins, borders, and padding are respected between boxes Boxes may be aligned vertically in different ways The rectangular area that contains the boxes that form a line is called a line box

26 Inline formatting contexts Containing Block Line Box

27 Visual Formatting Model (continued) Block-level elements Elements that are formatted visually as blocks Each generates a block-level box Block-level boxes Boxes that participate in a block formatting context Usually are also block container boxes Block container boxes Contain either only block-level boxes or establish an inline formatting context and thus contain only inlinelevel boxes Not all block container boxes are block-level boxes

28 Visual Formatting Model (continued) Inline-level elements Elements that do not form new blocks of content Each generates an inline-level box Inline-level boxes Boxes that participate in an inline formatting context Inline boxes Inline-level boxes that are both inline level and whose contents participate in its containing inline formatting context Atomic inline-level boxes Inline-level boxes that are not inline boxes because they participate in their inline formatting context as a single opaque box

29 Visual Formatting Model (continued) Anonymous inline boxes Any text directly contained inside a block container box must be treated as an anonymous inline element Anonymous block boxes If a block container box has a block-level box inside it, then it must only have block-level boxes inside it An anonymous block box will wrap any non-block content See

30 Display Property Specifies how an element is displayed with respect to the visual formatting model display Value*: inline block inline-block inherit Initial: inline Inherited: no inline causes an element to generate one or more inline boxes block causes an element to generate a block-level box that is also a block container box inline-block causes an element to generate an inline-level block container box (is an atomic inline-level box) none causes an element to not appear in the formatting structure (creates no box for itself and descendant elements do not generate any boxes either) See * This is not the complete list of possible values (we will not discuss the various table-* values; we will talk about flex shortly)

37 Calculating Widths and Margins Values used for layout depend on several factors Lots of rules that we will not cover Specification details here: Inline-level, non-replaced elements: width property does not apply, auto margin values become 0 Block-level, non-replaced elements in normal flow margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of the containing block

38 Minimum and Maximum Width Properties Constrain widths to a certain range min-width Value: length percentage inherit Initial: 0 Inherited: no max-width Value: length percentage none inherit Initial: none Inherited: no The none value (max only) means there is no limit Do not apply to non-replaced, inline-level elements

39 Calculating Heights and Margins Values used for layout depend on several factors As with widths, lots of rules that we will not cover Specification details here: Inline-level, non-replaced elements: height property does not apply Block-level, non-replaced elements in normal flow An auto value for margin-top or margin-bottom becomes 0 (you cannot vertically center boxes like you can horizontally) If height is auto, the value used depends on its children

40 Minimum and Maximum Height Properties Constrain heights to a certain range min-height Value: length percentage inherit Initial: 0 Inherited: no max-height Value: length percentage none inherit Initial: none Inherited: no The none value (max only) means there is no limit Do not apply to non-replaced, inline-level elements See

41 Flexible Box Layout Current support across browsers is pretty good Useful for creating responsive layouts US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_fl exible_boxes See

42 Normal flow Positioning Block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes Absolute Boxes are removed from the normal flow entirely and assigned a position with respect to its containing block Floats Boxes are laid out according to normal flow, then taken out of normal flow and shifted to the left or right as far as possible

43 Position Property Specifies how to position a box (float positioning has separate properties) position Value: static relative absolute fixed inherit Initial: static Inherited: no static: normal box, laid out according to normal flow this is the only positioning we have dealt with so far relative: box s position is calculated according to normal flow but is then offset relative to its normal position using the box offset properties absolute: box is taken out of normal flow and its position, with respect to its containing block, is specified with the box offset properties fixed: same as absolute but positioned with respect to the viewport (for screen media)

44 Containing Blocks Revisited Relative and static position elements The containing block is formed by the content edge of the nearest block container box Fixed position elements The containing block is established by the viewport (screen media) Absolute position elements The containing block is established by the nearest ancestor with an absolute, relative, or fixed position

45 Box Offset Properties Specifies offsets for positioned (not static) boxes top, right, bottom, left Value: length percentage auto inherit Initial: auto Inherited: no For absolutely positioned boxes, specifies how far the box s corresponding margin edge is offset from the corresponding edge of the box s containing block For relatively positioned boxes, specifies how far the box is offset with respect to the corresponding edge of the box itself See:

46 Float Property Specifies whether a box should float to the left, right, or not at all float Value: left right none inherit Initial: none Inherited: no left: the element generates a block box that touches the left edge of the containing block or the right edge of another floating block right: the element generates a block box that touches the right edge of the containing block or the left edge of another floating block There are all kinds of rules for floats:

47 Clear Property Specifies which sides of an element s box may not be adjacent to an earlier floating box clear Value: none left right both inherit Initial: none Inherited: no left: the left edge of the element may not adjoin a floating element right: the right edge of the element may not adjoin a floating element both: neither edge of the element may adjoin a floating element See

48 Z-Index Property Specifies the relative front-to-back order of an element z-index Value: auto integer inherit Initial: auto Inherited: no Only applies to positioned elements (absolute, relative, fixed) auto = 0 Elements with higher z-index values will be on top of elements with lower values See

49 Overflow Properties Specifies whether content of a block container element is clipped when it overflows the element s box overflow-x, overflow-y Value: visible hidden scroll auto inherit Initial: visible Inherited: no overflow Value: visible hidden scroll auto inherit

50 Clip Property Specifies what portion of an element s box is visible (absolutely positioned elements only) <shape> = rect(top, right, bottom, left) clip Value: <shape> auto inherit Initial: auto Inherited: no See

51 Visibility Property Specifies whether boxes generated by an element are rendered (invisible boxes still affect layout, unlike display: none) visibility Value: visible hidden collapse inherit Initial: visible Inherited: yes collapse is used for table rows and columns

INFS 2150 Introduction to Web Development

Objectives INFS 2150 Introduction to Web Development 3. Page Layout Design Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout