Vorschau wird generiert...
Style sheet ◼ Style sheet describes how documents are presented on screens, in print, or perhaps how they are pronounced ◼ Separate structure and presentation ◼ W3C has actively promoted the use of style sheets since 1994. ◼ W3C recommends several stylesheets CSS1, CSS2, XPath, XSLT ◼ CSS especially is widely implemented in browsers.
Advantage of StyleSheet ◼ Simple management Separating of presentation result in well-organized content and simple structure. Construction and maintenance of the site easier. ◼ Change the apparence of the document easily without changing the HTML code ◼ Consistency in the appearance of the site ◼ Change style of a page easily Switch from a style for the others For handicap people and limited user-interface environment.
Link CSS with HTML ◼ HTML document contains content of a web page ◼ CSS document contains the presentation style ◼ 3 ways for defining a style for a HTML Inline: writing styles mixing with the HTML tags Internal: writing CSS in a style section in the HTML document External: leaving CSS in a separate document and link it with the HTML document
Link CSS with HTML: Inline ◼ In-line styles are plonked straight into the HTML tags using the style attribute. ◼ <p style="color: red">text</p> ◼ Style is applied only for the tags contaning it ◼ in-line styles make the HTML document presentation dependant ➔should be avoided
Link CSS with HTML: Internal ◼ Internal styles are used for the whole page. ◼ Styles are defined inside the head section, surrounded by <style> tags ◼ <html> <head> <style type="text/css"> p {color: red; } a {color: blue; } </style> </head>. …. ◼ This will make all of the paragraphs in the page red and all of the links blue. ◼ Better than in-line styles, the styles and HTML code are more independent by still include in one document
Syntax of CSS ◼ CSS contain rules that defines styles for HTML document Rules define formats of information, data and presentation of the content Rules are associated with HTML elements Rules have a different syntax with HTML syntax ◼ It is recommended that the HTML tags serving for the presentation such as <font>, <b> , <i> should be not be used
Rules in CSS ◼ Rules in CSS contains Selector: define the object that the style will be applied ◼ A HTML tag, a class of HTML tag… Style declaration: ◼ Description of the style Syntax selector {attribute1: value1; attribute2: value2; …} Example H1 { color: blue} The selectors can be grouped together ◼ h1,h2,h3 { font-weight:bold}
Example of rules in CSS ◼ body { background-color: white } ◼ h1 { font-family : sans-serif } ◼ h2, h3, h4 { font-family : cursive } ◼ h2, h4 { color : orange }
Different selectors in CSS ◼ Selector-type ◼ Selector-id ◼ Selector-class ◼ Selector universal ◼ Selector pseudo-class
Selector-type ◼ The selector is associated with a HTML tag selector {attribute: value} ◼ Example P {font-size: large} All characters in the paragraph are displayed in large size
Selector-id ◼ Selector-id Rule CSS applies for all HTML element that have the given ID ◼ Syntax #id_value {attribute: value} ◼ Ex: CSS: #chapter1 { text-align: center } HTML: <h1 id= chapter1> Tieu de chuong I </h1>
Selector-class ◼ Rule with selector class will be applied for all HTML object that has the given class ◼ Syntax: .class { attribute: value} ◼ Example: CSS: .important {color: red} HTML: <h1 class="important”> Important title </h1> <p class="important”> This is an important paragraph. </p> All characters in <h1> and <p> are in red.
Die ersten 20 Seiten werden angezeigt. Laden Sie das Dokument herunter, um alles zu sehen.
Noch keine Kommentare. Seien Sie der Erste!
Kommentare (0)
Noch keine Kommentare. Seien Sie der Erste!