18-oct-15 css second css lecture applications to xml

18
Aug 24, 2 022 CSS Second CSS Lecture Applications to XML

Upload: emory-terry

Post on 13-Jan-2016

223 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 18-Oct-15 CSS Second CSS Lecture Applications to XML

Apr 21, 2023

CSS

Second CSS Lecture

Applications to XML

Page 2: 18-Oct-15 CSS Second CSS Lecture Applications to XML

2

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

Page 3: 18-Oct-15 CSS Second CSS Lecture Applications to XML

3

The display property

Every XML element that is formatted by a CSS command is considered to be in an invisible “box”

The box containing an XML element can have one of three display properties: display: block

The element will start on a new line, and so will the element that follows it (an HTML paragraph is an example)

display: inline (default) The element will not start on a new line, or cause the next

element to start on a new line (bold is an HTML example) display: none

The element is hidden and will not appear on the display

Page 4: 18-Oct-15 CSS Second CSS Lecture Applications to XML

4

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

Page 5: 18-Oct-15 CSS Second CSS Lecture Applications to XML

5

border (can be colored)

Boxes

The invisible box containing a styled XML element has three special areas:

padding (invisible)

margins (invisible)

The element

Page 6: 18-Oct-15 CSS Second CSS Lecture Applications to XML

6

Padding

Padding is the extra space around an element, but inside the border

To set the padding, use any or all of: padding-top: size padding-bottom: size padding-left: size padding-right: size padding: size to set all four sides at once

size is given in the units described earlier Example: sidebar {padding: 1em; padding-bottom: 5mm}

Page 7: 18-Oct-15 CSS Second CSS Lecture Applications to XML

7

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

Page 8: 18-Oct-15 CSS Second CSS Lecture Applications to XML

8

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 once

Page 9: 18-Oct-15 CSS Second CSS Lecture Applications to XML

9

Box and display interactions

With display:none, contents are invisible and margin, border, and padding settings have no effect

With display:block, margin, border, and padding settings work about as you would expect

With display:inline (which is the default if you don’t specify otherwise):

Margin, border, and padding settings for left and right work about as you would expect

Margin, border, and padding settings for top and bottom do not add extra space above and below the line containing the element

This means that inline boxes will overlap other text

Page 10: 18-Oct-15 CSS Second CSS Lecture Applications to XML

10

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 width of images and tables (img and table tags)

Page 11: 18-Oct-15 CSS Second CSS Lecture Applications to XML

11

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: 0in

Page 12: 18-Oct-15 CSS Second CSS Lecture Applications to XML

12

Setting relative position

To move an element relative to its natural position, use position: relative (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 to move left, make left negative or right positive to move right, make right negative or left positive to move up, make top negative or bottom positive to move down, make bottom negative or top positive Setting an element’s position does not affect the position of other

elements, so There will be a gap in the element’s original, natural position Unless you are very careful, your element will overlap other elements

Page 13: 18-Oct-15 CSS Second CSS Lecture Applications to XML

13

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

Page 14: 18-Oct-15 CSS Second CSS Lecture Applications to XML

14

External style sheets

In HTML, within the <head> element:<link REL="STYLESHEET" TYPE="text/css" HREF="Style Sheet URL">

As a PI in the prologue of an XML document:<?xml-stylesheet href="Style Sheet URL" type="text/css"?>

Note: "text/css" is the MIME type

Page 15: 18-Oct-15 CSS Second CSS Lecture Applications to XML

15

Namespace selectors

Namespace selectors (XML only) choose tags from the given namespace

namespace|element {...} chooses the element if and only if it is from the given namespace

*|element {...} chooses the element regardless of the namespace

|element {...} chooses the element if it has no declared namespace

Namespace selectors are currently supported only by Netscape 6

Page 16: 18-Oct-15 CSS Second CSS Lecture Applications to XML

16

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

Page 17: 18-Oct-15 CSS Second CSS Lecture Applications to XML

17

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%

Page 18: 18-Oct-15 CSS Second CSS Lecture Applications to XML

18

The End