Applications to XML - Advance Java Web Technology - Lecture Slides, Slides of Computer Science

Download Applications to XML - Advance Java Web Technology - Lecture Slides and more Slides Computer Science in PDF only on Docsity!

CSS

Second CSS Lecture

Applications to XML

A different emphasis

• CSS is the same for XML as it is for HTML, but--
  • HTML already does a pretty good job of layout (arranging elements on the page)
  • XML contains no layout information, so by itself it will typically be displayed as one single huge blob of text
• When writing CSS for XML, typically the first thing you need to

worry about is arranging text on the page

• No current browser does a good job of supporting CSS,

particularly when used with XML, so:

• You should make sure everyone who views your pages uses the same version of the same browser (this is possible in some companies), or
• You should test your pages in all the most common browsers

CSS units

• For many of the remaining CSS values, we will need to be able to

specify size measurements

• These are used to specify sizes:
  • em width of the letter ‘m’
  • ex height of the letter ‘x’
  • px pixels (usually 72 per inch, but depends on monitor)
  • % percent of inherited size
• These are also used to specify sizes, but don’t really make sense unless you know the screen resolution: - in inches - cm centimeters - mm millimeters - pt points (72pt = 1in) - pc picas (1pc = 12pt)
• Note: you can use decimal fractions, such as 1.5cm

Boxes

• The invisible box containing a styled XML

element has three special areas:

border (can be colored)

padding (invisible)

margins (invisible)

The element

Borders

• You can set border attributes with any or all of: border-top:,

border-bottom:, border-left:, border-right:, and border:

(all at once)

• The attributes are:
  • The thickness of the border: thin, medium (default), thick, or a specific size (like 3px)
  • The style of the border: none, dotted, dashed, solid, double, groove, ridge, inset, or outset
  • The color of the border: one of the 16 predefined color names, or a hex value with # rrggbb or rgb( r , g , b ) or rgb( r % , g % , b % )
• Example: section {border-top: thin solid blue;}
• Note: the special styles (such as groove) are not as cool as they

sound

Margins

• Margins are the extra space outside the

border

• Setting margins is analogous to setting

padding

• To set the margins, use any or all of:

– margin-top: size

– margin-bottom: size

– margin-left: size

– margin-right: size

– margin: size to set all four sides at onceDocsity.com

Sizing elements

• Every element has a size and a natural

position in which it would be displayed

• You can set the height and width of

display:block elements with:

– height: size

– width: size

• You cannot set the height and width of

inline elements (but you can set left and

right margins)

• In HTML, you can set the height and widthDocsity.com

Setting absolute position

• To move an element to an absolute position on the page
  • position: absolute (this is required!) and also one or more of
  • left: size or right: size
  • top: size or bottom: size
• Confusing stuff:
  • size can be positive or negative
  • top: size puts an element’s top size units from the page top
  • bottom: size puts an element’s bottom size units from the page bottom
  • left: size puts an element’s left side size units from the left edge of the page
  • right: size puts an element’s right side size units from the right edge of the page
  • Changing an element’s absolute position removes it from the natural flow, so other elements fill in the gap
  • You need to be careful not to overlap other elements

position:absolute; left: 0in; top: 0in position:absolute; right: 0in; top: 0in

position:absolute; left: 0in; bottom: 0in position:absolute; right: 0in; bottom: 0inDocsity.com

Pseudo-elements

• Pseudo-elements describe “elements” that

are not actually between tags in the XML

document

• Syntax: element : pseudo-class {...}
  • first-letter the first character in a block-level element
  • first-line the first line in a block-level element (depends on the browser’s current window size)
• Especially useful for XML (but not implemented in Internet

Explorer):

• before adds material before an element
  • Example: author:before {content: "by "}
• after adds material after an element Docsity.com

External style sheets

• In HTML, within the element:

• As a PI in the prologue of an XML document:

• Note: "text/css" is the MIME type

Some border styles and values

• You can put borders around elements
• Borders have width, style, and color
  • These can be set individually:
    • border-left-style:, border-bottom-color:, etc.
  • Or a border at a time:
    • border-top:, border-right:, etc.
  • Or all borders at once: border:
• Available values are:
  • border-width: thin | medium | thick | length
  • border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
  • border-color: color

Padding

• Padding is used to set the space around an

element

– You can set padding individually:

padding-top:, padding-left:,

padding-bottom:, padding-right:

– Or all at once: padding:

– Allowable values: length | 12 %