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.
显示前 20 页。下载资料查看完整内容。
暂无评论。快来抢沙发吧！
评论 (0)
暂无评论。快来抢沙发吧！