DOC PREVIEW
Penn CIT 597 - Second CSS Lecture Applications to XML

This preview shows page 1-2-3-4-5-6 out of 18 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 18 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 18 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 18 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 18 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 18 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 18 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 18 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

CSSA different emphasisThe display propertyCSS unitsBoxesPaddingBordersMarginsBox and display interactionsSizing elementsSetting absolute positionSetting relative positionPseudo-elementsExternal style sheetsNamespace selectorsLengthsSome border styles and valuesSlide 18CSSSecond CSS LectureApplications to XMLA 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 browsersThe 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 displayCSS units•For many of the remaining CSS values, we will need to be able to specify how much space to put around elements•CSS uses several measurement units:–em the current font size–ex the x-height (height of an x) in the current font–px number of pixels (typically about 72 per inch)–% percent of the size in the parent element–in inches (assuming about 72 pixels per inch)–cm centimeters (assuming about 72 pixels per inch)–mm millimeters (assuming about 72 pixels per inch)–pt points, 1/72 of an inch (assuming about 72 pixels per inch)–pc pica; one pica = 12 points•Note: you can use decimal fractions, such as 1.5cmborder (can be colored)Boxes•The invisible box containing a styled XML element has three special areas:padding (invisible)margins (invisible)The elementPadding•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}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 soundMargins•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 onceBox 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 textSizing 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)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 elementsposition:absolute; left: 0in; top: 0in position:absolute; right: 0in; top: 0inposition:absolute; left: 0in; bottom: 0in position:absolute; right: 0in; bottom: 0inSetting 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 elementsPseudo-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


View Full Document

Penn CIT 597 - Second CSS Lecture Applications to XML

Documents in this Course
DOM

DOM

21 pages

More DOM

More DOM

11 pages

Rails

Rails

33 pages

DOM

DOM

21 pages

RELAX NG

RELAX NG

31 pages

RELAX NG

RELAX NG

31 pages

RELAX NG

RELAX NG

31 pages

RELAX NG

RELAX NG

31 pages

Rake

Rake

12 pages

Ruby

Ruby

58 pages

DOM

DOM

21 pages

Tomcat

Tomcat

16 pages

DOM

DOM

21 pages

Servlets

Servlets

29 pages

Logging

Logging

17 pages

Html

Html

27 pages

DOM

DOM

22 pages

RELAX NG

RELAX NG

30 pages

Servlets

Servlets

28 pages

XHTML

XHTML

13 pages

DOM

DOM

21 pages

DOM

DOM

21 pages

Servlets

Servlets

26 pages

More CSS

More CSS

18 pages

Servlets

Servlets

29 pages

Logging

Logging

17 pages

Load more
Download Second CSS Lecture Applications to XML
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Second CSS Lecture Applications to XML and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Second CSS Lecture Applications to XML 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?