Conventions used in this book - pg.1
- Italic
- new terms
- URLs
- filenames
- file extensions
- directories commands
- and options
- program names
- Constant width
- file content
- command output
Adding Styles to HTML and XHTML - pg.2
- Inline Styles
- Embedded Style Sheets
- External Style Sheets - Examples
- @import directive
- link element
- xml-stylesheet processing instruction
Rule Structure - pg.5
Style Precedence - pg.6
- Specificity Calculations
- Universal selector - 0,0,0,0
- Combinations - 0,0,0,0
- Element identifier - 0,0,0,1
- Pseudo-element identifier - 0,0,0,1
- Class identifier - 0,0,1,0
- Psuedo-class identifier - 0,0,1,0
- Attribute identifier - 0,0,1,0
- ID identifier - 0,1,0,0
- Inline Style - 1,0,0,0
- Inheritance
- The Cascade
- Find all declarations
- Sort by explicit weight
- Sort by specificity
- Sort by order
Element Classification - pg.8
- Nonreplaced Elements
- content is presented in a box generated by the element itself
- paragraphs, headings, table cells, lists, etc.
- Replaced Elements
- element's content is replaced by something not directly represented by the document content
- img, input
Element Display Roles - pg.8
- Block-Level Elements
- fill it's parent element with nothing to the sides
- generate breaks before and after
- p, div, li
- Inline-Level Elements
- element box within a line of text
- strong, em
Basic Visual Layout - pg.10
- Block-Level Layout
- diagram
- Only the margins, height, and width may be set to auto
- Only the margins can be given negative values
- Padding defaults to 0
- Borders default to none
- height and width refer to the size of the object before padding, borders, and margins
- Inline Layout
- diagram
- Anonymous text
- Anything not specified with an inline element
- Em-box
- Content Area
- total area of text
- em-box*length
- Leading
- Inline Box
- leading + content area
- Nonreplaced Elements: height of inline box = line-height
- Replaced Elements: height of inline box = content area
- Line Box
- from lowest inline box bottom to top of the highest inline box top
Floating Rules - pg.13
- Floating rules see page 14
Positioning Rules - pg.15
- Types of Positioning
- Static - element's box is part of the document's flow
- Relative - positioned relative to its container
- Absolute - element becomes a box completely apart from the document and positioned relative to the window
- Fixed - behaves as though it were set to absolute, but its containing block is the viewport itself
- The Containing Block see page 16
- Layout of Absolutely Positioned Elements
- Shrink to fit - minimum element width that will fit
- Static position - the position where the element would be placed if its position were static
- Horizontal layout of nonreplaced absolutely positioned elements - pg.17
- width of containing block = left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right
- Vertical layout of nonreplaced absolutely positioned elements - pg.18
- height of containing block = top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom
- Horizontal layout of replaced absolutely positioned elements - pg.20
- Vertical layout of replaced absolutely positioned elements - pg.20
Table Layout - pg.21
- diagram
- Table Arrangement Rules - pg.22
- Fixed Table Layout - pg.23
- Automatic Table Layout - pg. 23
- Collapsing Cell Borders - pg.25
- Vertical Alignment within cells
Values - pg.28
- Keywords
- Color Values
- #RRGGBB - hex-pair notation (EX: #0000ff = blue)
- #RGB - abbreviated hex-pair notation, (EX: #00F = blue)
- rgb(rrr.rr%,ggg.gg%,bbb.bb%) - (EX: rgb(0%,0%,0%) = black; rgb(0%,0%,100%) = blue)
- rgb(rrr,ggg,bbb) - decimal equivelant to hex (EX: rgb(0,0,255) = blue; rgb(255,255,255) = white)
- <keyword>
- aqua
- black
- blue
- fuchsia
- gray
- green
- lime
- maroon
- navy
- olive
- orange
- purple
- red
- silver
- teal
- white
- yellow
- Number Values
- Percentage Values
- Length Values
- Absolute
- Inches (in)
- Centimeters (cm)
- Millimeters (mm)
- Points (pt)
- Picas (pc)
- Relative length units
- em-height (em)
- x-height (ex)
- Pixels (px)
- URLS
- Aural-Specific Values (Dropped from CSS2.1)
- Angle values
- Time values
- Frequency values
