Outline. Link HTML With Style Sheets &6&7XWRULDO &66 ;+70/ (GZDUG;LD

Transcription

1 &6&7XWRULDO &66 ;+70/ (GZDUG;LD Outline CSS Link XHTML With Style Sheets, Class/ID selectors, Pseudo-class/element, Color values, Length units, Text, Font, Lists, Padding/border/margin, Floating/clearing, Link CSS to XML XHTML Links, Frames lists, Tables, Forms -DQXDU\ 1 CSC309 Tutorial --CSS & XHTML 2 Link HTML With Style Sheets (1) External style sheets <link rel="stylesheet" type="text/css href="external.css"/> (2) Internal style sheets h1 text-align: left; color: green; font-size: 150% </style> h1 text-align: center; color: red; font-size: 150% (3) Inline styles <h1 style="text-align: right; color: yellow"> This is an inline style. </h1> CSC309 Tutorial --CSS & XHTML 3 CSC309 Tutorial --CSS & XHTML 4

2 Specify Style Rules Class Selectors General form selector property: value or selector property1: value1; property2: value2;... property3: value3 Grouping selector 1, selector 2,..., selector n property: value Define different styles for the same element h1.red color: red; h1.green color: green <h1 class="red >This line is red</h1> <h1 class="green >This line is green</h1> Used by any element without tag name.blue color: blue <h1 class="blue >This line is blue<h1> <p class="blue >This paragraph is blue.</p> CSC309 Tutorial --CSS & XHTML 5 CSC309 Tutorial --CSS & XHTML 6 ID Selectors #emph font-weight: bold; font-size: 150% p#large font-size: 300% <p id="emph > This line will be boldfaced.</p> <p> This line will not be boldfaced. </p> <p id= large > The font of this line will be larger. </p> Use # in ID selectors instead of. which is used in class selectors. Classes may be assigned to any number of elements, while IDs are supposed to be used only once. CSC309 Tutorial --CSS & XHTML 7 Pseudo-class & Pseudo-element Selectors a:link color: blue a:visited color: red a:active color: green p.line:first-line font-size: 200% p.letter:first-letter font-size: 300% <p class="line >In this paragraph, the first line has a larger size than others.</p> <p class="letter >Here, the first letter has a larger size.</p> CSC309 Tutorial --CSS & XHTML 8

3 Color Values Named colors: aqua black blue fuchsia gray green lime navy olive purple red silver teal white yellow Color by GRB: (1) Hexadecimal colors #ffffff /* white */ # /*black */ #ff0000 /* red */ #00ff00 /* green */ #0000ff /* blue */ (2) going by numbers rgb(255, 255, 255) /* white */ rgb(0, 0, 0) /* black */ (3) percentage colors rgb(100%, 100%, 100%) /* white */ rgb(0%, 0%, 0%) /* black */ Color equivalents e.g., white == #ffffff == rgb(255, 255, 255) == rgb(100%,100%, 100%) black == # == rgb(0,0,0) == rgb(0%, 0%, 0%) red == #ff0000 == rgb(250, 0, 0) == rgb(100%, 0%, 0%) CSC309 Tutorial --CSS & XHTML 9 Length Units Absolute length units inch (in) centimeters (cm) -- 1 cm = in or 1 in = 2.54 cm millimeters (mm) -- 1 cm = 10 mm points (pt) -- 1 in = 72 pt picas (pc) -- 1 pc = 12 pt Relative lengths units: relative to another length property em: em-height, the height of the element's font ex: x-height, the height of the letter "x" px: pixels Percentage units: relative to the element's font size % CSC309 Tutorial --CSS & XHTML 10 Background Text body background-image: url("microcrest.gif"); background-repeat: no-repeat; background-position: center center; background-color: #ffffff h1color: green </style> </head> <h1> An example of background style</h1> NOT just used for body CSC309 Tutorial --CSS & XHTML 11 h1 color: green; text-decoration: underline; text-align: right a text-decoration: none; color: blue h2 text-decoration: line-through; text-indent: 2cm This <a href="t.html>link</a> has no underline. <h1>this line: underlined</h1> <h2>next line: line-through</h2> CSC309 Tutorial --CSS & XHTML 12

4 Font Lists CSS p.c1 font-family: times; font-size: 200%; font-style: italic; font-weight: bold p.c2 font-size: 150% <p class="c1">this is line 1</h1> <p class="c2">this is line 2</h2> <p>this is line 3</p> u1.disclist-style-type: disc // a solid circle (default) u1.square list-style-type: square // a solid square u1.circlelist-style-type: circle // an open circle ol.decimal list-style-type: decimal // 1, 2, 3 (default) ol.lroman list-style-type: lower-roman // i, ii, iii ol.uroman list-style-type: upper-roman // I, II, III ol.lalpha list-style-type: lower-alpha // a, b, c ol.ualpha list-style-type: upper-alpha // A, B, C ul list-style-image: url("listimage.jpg") // am image list marker ul.none list-style-type: none // no list marker ol.none list-style-type: none // no list marker CSC309 Tutorial --CSS & XHTML 13 CSC309 Tutorial --CSS & XHTML 14 Padding/Border/Margin Floating & Clearing p.b1 border-style: solid; border-color: red; border-bottom-width: 2; img.lf float: left; height: 30; width: 50 img.lc clear: left p.b2 border-style: double; border-color: green; p.f float: right; border-style: solid; padding: 10 width: 70; padding: 10 p.b3 border-style: solid; padding: 10; margin: 10 p.b4 border-style: solid; <img class="lf" src="microcrest.gif" /> padding: 30; margin: 10 <p>image and text elements that appear in another p.b5 border-style: solid; element are called floating elements, which padding: 10; margin: 30 will be displayed on the left or right side of the following document.</p> <img class="lc" src="microcrest.gif" /> <p>use the clear property with a particular element <p class="b1">paragraph 1</p> <hr /> to prevent a previous floating element from being <p class="b2">paragraph 2</p> <hr /> displayed alongside it.</p> <p class="b3">paragraph 3</p> <hr /> <p class="f">this is a float paragraph.</p> <p class="b4">paragraph 4</p> <hr /> <p>in this paragraph, the image (actually a paragraph) is <p class="b5">paragraph 5</p> <hr /> floating to the right. The left text wraps around this element.</p> CSC309 Tutorial --CSS & XHTML 15 CSC309 Tutorial --CSS & XHTML 16

5 Link CSS to XML css Link CSS to XML xml book font-size: 150% content border: solid; margin: 2cm; padding: 1em; chapter author display: inline; color: blue; description margin-top: 1in; margin-bottom: 1in; section font-size; 200% CSC309 Tutorial --CSS & XHTML 17 <?xml version="1.0" encoding="utf-8" standalone="no"?> <?xml-stylesheet type="text/css" href= book.css"?> <!DOCTYPE bookdatabase SYSTEM "book.dtd"> <bookdatabase> <book bookid="isbn-0-13-xxx"> <author>&eh;</author> <content> <chapter number="1">xml Structure, Syntax</chapter> <description> <section>xml Fundamentals</section> </description> </content> <content> <chapter number="2">document Type Definitions</chapter> <description> <section>element Declarations</section> <summary>summary of the chapter 2</summary> </description> </content> </book> <bookdatabase> CSC309 Tutorial --CSS & XHTML 18 XHTML XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML XHTML is HTML defined as an XML application XHTML elements must be properly nested Tag names must be in lowercase All XHTML elements must be closed Attribute values must be quoted Wrong: <br>, <hr>, <ol><li>item one</ol> Correct: <br />, <hr />, <ol><li>item one</li></ol> Wrong: <input checked> Correct: <input checked="checked" /> CSC309 Tutorial --CSS & XHTML 19 CSC309 Tutorial --CSS & XHTML 20

6 A simple (minimal) XHTML document <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN transitional.dtd"> <title>simple document</title> </head> <p>a simple paragraph</p> CSC309 Tutorial --CSS & XHTML 21 Links <a href=" url</a> <a href="course.html">relative url</a> <a href="course.html#end">link to the end of the paragraphy</a> ( define a name anchor: <a name="end" /> ) <a href="mailto:xiaeg@cs.toronto.edu"> me </a> <a href="course.html"> <img src="flower.gif" alt="link to course page" /> </a> <a href="course.html" target="_blank">open a new window</a> <a href="course.html" target="_top">link to the top window/a> CSC309 Tutorial --CSS & XHTML 22 Frames <frameset rows="75%, 25%"> <frame src="r1.html" name="rowone_window" /> <frameset cols= 100, *"> <frame src="r2c1.html" scrolling="no" /> <frame src="r2c2.html" scrolling="auto" /> </frameset> </frameset> Lists html ul.level1 list-style-type: square ul.level2 list-style-type: circle ol list-style-type: decimal </style> </head> <ul class="level1"> <li>aaa</li> <ul class="level2"> <li>aaa</li><li>bbb</li><li>ccc</li> </ul> <li>bbb</li> <ol><li>xxx</li><li>yyy</li><li>zzz</li> </ol> </ul> CSC309 Tutorial --CSS & XHTML 23 CSC309 Tutorial --CSS & XHTML 24

7 Tables td text-align: center; vertical-align: top; padding: 15 <table border="2" cellspacing="20"> <tr> <td colspan="2">aaa</td> </tr> <tr> <td rowspan="2">bbbbb</td> <td>ccc</td> </tr> <tr> <td>dddddddd</td> </tr> </table> Forms <form name="input" action="formaction.asp" method="get"> Enter your first names: <input type="text" name="firstname" value="john" /><br /> Enter your last name: <input type="text" name="lastname" value="smith" /><br /> <input type="submit" value="submit"> </form> <p>click the "Submit" button to send your inputs</p> CSC309 Tutorial --CSS & XHTML 25 CSC309 Tutorial --CSS & XHTML 26