XML AND CSSXML AND CSSCSC1310 Fall 2009CSC1310 Fall 2009
STYLESHEETSSTYLESHEETS
• StylesheetsStylesheets map style properties to elements in documents (rulerule).
• PropertyProperty is anything that affects the appearance or behavior of the document (typeface, color, size, etc.)
• For each element it can be multiple rules that match, so processor either apply all of them or try to find the best fit.
• Stylesheets:– Making design changes easier by separating details
from document– Enabling multiple uses for one document.– Giving the end user more control and accessibility.
CASCADING STYLE SHEETSCASCADING STYLE SHEETS
• Cascading Style Sheets (CSS)Cascading Style Sheets (CSS) is recommendation of W3C (1994, Hakon Lee)
• The goal is to create a simple yet expressive language that could combine style descriptions from different sources.
• CSS1CSS1 has 50 properties which is widely supported (1996)
• CSS2CSS2 has 120 properties which is supported by the most browsers (1998)
• CSS3CSS3 is in progress.
STYLESHEETS EMBEDDINGSTYLESHEETS EMBEDDING
• Processing instruction <?xml-stylesheet?> :Processing instruction <?xml-stylesheet?> :<?xml-stylesheet<?xml-stylesheet
type=“text/css”type=“text/css”href=“url-of-stylesheet”href=“url-of-stylesheet”
?>?>
CSS AND XML EXAMPLECSS AND XML EXAMPLE
CSS SYNTAXCSS SYNTAX
• SelectorSelector tells processor what element this rule matches.
• Items inside of the brackets are called property property declarationsdeclarations.
selectorselector{{
property1: value1;property1: value1; property2: value2; property2: value2;
}}• Comments: /* comment text *//* comment text */• Universal selectorUniversal selector is an asterisk (**)* {color: blue}
PROPERTY INHERITANCEPROPERTY INHERITANCE
• In XML:<sect1> <para>Inheritance Example</para> </sect1>• In CSS:sect1{
margin-left: 25pt;margin-right: 25pt;font-size: 18pt;color: navy; }
para {margin-top: 10pt;
margin-bottom: 10pt;font-size: 12 pt;}
• Margins are never inheritable.
COMBINING STYLESHEETSCOMBINING STYLESHEETS
• Reusability• Modularity• @import@import links current stylesheet to another and
causes the style settings in the target to be imported.
@import url(http://www.example.org/math.css)@import url(http://www.example.org/text.css)
• To override imported rules, you need to redefine them in your local stylesheet.
@import url(http://www.example.org/math.css)h1: { font-size: 3em; }
SELECTORSELECTOR
• Universal selector(*)• Element selector (list of element selectors)• Attribute selector: element [attribute refinement]element [attribute refinement]:
– element[attribute] – [attribute]– element[attribute=“value”]– element[attribute~~=“value”] # space-separated list of strings– element[attribute||=“value”] # hyphen-separated value list– element[attribute1=“value”] [attribute2=“value”]– #IDvalue
CONTEXTUAL SELECTION CONTEXTUAL SELECTION
• AncestryAncestry: (>>) book > title {font-size: 24pt;} chapter > title {font-size: 20pt;} title {font-size: 18pt;} table para {color: green} para {color: black}• PositionPosition:
– para:first-child {font-variant: uppercase;}– para:before {content: “element”;}– para:after {content: “element”;} – url:link{color:red;}– url:visited{color:blue;} – para:first-child:first-line {color:red;}– para:first-child:first-letter {color:red;}
UNITS OF MEASUREMENTS UNITS OF MEASUREMENTS
• Absolute measurementsAbsolute measurements use units that have a predefined size (inches, points, picas):– mm, cm, in, pt, pc
• Relative measurementsRelative measurements use percentages and fractions of some variable distance:– em (size of current font), ex (x-height), %
b {font-size:200%}
• In general, relative measurements are better since they do not need to be rewritten if default properties are changed.
DISPLAY TYPES DISPLAY TYPES
• block block is a rectangular region of text isolated form the content preceding and following by spacing. It has boundaries (marginsmargins) to keep text in the shape (paragraphs, titles, sections).
• inline inline is content that doesn’t interrupt the flow of text in a block (emphasis, keywords, hypertext links).
• none none is skipped by processor (children of such element are ignored as well)
• It is recommended to declare the displaydisplay property for XML.
BLOCKISH PROPERTIES BLOCKISH PROPERTIES
• MarginsMargins are distances between the bounding box and any neighboring element.– margin-left– margin-right– margin-top– margin-left– margin v1– margin v1 v2 – margin v1 v2 v3– margin v1 v2 v3 v4
This is a text inside of block.
margin-topmargin-top
margin-margin-bottombottom
mar
gin
-lef
tm
arg
in-l
eft
mar
gin
-rig
ht
mar
gin
-rig
ht
• Negative values are acceptable.• Unspecified values margins default to 0.para {margin: 5% 10em 0 }para{margin-left: 10em; margin-right:10em; margin-top:
5%}
paddingpadding
BLOCKISH PROPERTIES BLOCKISH PROPERTIES
• borderborder– width: width: thin, medium, thick,
value – style: style: solid, dashed, dotted,
groove, ridge, double, inset, outset
– colorcolor• padding padding
– The value is a space-separated list of between one and four length measurements (see marginmargin)
• text-align: text-align: left, right, center, justify
• text-indent text-indent – Indents the first line of a block.
TEXT PROPERTIES TEXT PROPERTIES
• font-family font-family has a comma-separated list of font preferences, starting with the most specific and desirable, and finishing with the generic– serifserif (Times), sans-serifsans-serif (Helvetica),
monospacemonospace (Courier), cursivecursive, fantasyfantasy (Comic Strip)
font-family: Palantino, “Times New Roman”, serif;• font-size font-size has absolute or relative units or
measured by keywords: xx-small, x-small, small, xx-small, x-small, small, medium, large, x-large, xx-largemedium, large, x-large, xx-large
• line-height line-height affects font size and whitespace above it.
para1{line-height: 1}para2{line-height: 1.5}para3{line-height: 2}
TEXT PROPERTIES TEXT PROPERTIES
• font-style: font-style: normalnormal, italicitalic, oblique, inheritoblique, inherit
• font-weight:font-weight: light, light, normal, bold, lighter, normal, bold, lighter, bolderbolder
• colorcolor– colorcolor– background-colorbackground-color– RGB (red-green-blue): RGB (red-green-blue):
rgb(v1,v2,v3) (0-255), rgb(v1,v2,v3) (0-255), #000000 - #FFFFFF#000000 - #FFFFFF
– Predefined colors:Predefined colors:aqua, black, blue, fuchsia, aqua, black, blue, fuchsia,
gray, green, lime, gray, green, lime, maroon, navy, olive, maroon, navy, olive, purple, red, silver, teal, purple, red, silver, teal, white, yellowwhite, yellow
BACKGROUND BACKGROUND
• backgroundbackground• background-attachmentbackground-attachment
– sets whether a background image is fixed or scrolls with the rest of the page
– scroll, fixed• background-colorbackground-color
– Color or transparentColor or transparent• background-imagebackground-image
– url(URL) or noneurl(URL) or none• background-positionbackground-position• background-repeatbackground-repeat
LISTLIST
• display: list-item;display: list-item;• list-stylelist-style• list-style-imagelist-style-image
– url(URL) or noneurl(URL) or none• list-style-positionlist-style-position
– inside or outside inside or outside • list-style-typelist-style-type
LIST EXAMPLELIST EXAMPLE
TABLETABLE
• display: display: – table – table-row – table-row-group – table-header-group– table-column– table-column-group – table-cell – table-caption
TABLE EXAMPLETABLE EXAMPLE
TABLE PROPERTIESTABLE PROPERTIES
• border-collapse: border-collapse: collapse or separate
• empty-cells: empty-cells: show or hide
Top Related