1 / 19

Cascade Style Sheet Demo

Cascade Style Sheet Demo. Cascading Style Sheets . Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.

marc
Télécharger la présentation

Cascade Style Sheet Demo

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascade Style Sheet Demo

  2. Cascading Style Sheets • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. • A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.

  3. Selector Examples • All elements of a specific type: • H1 { color: blue } • ID as a selector: with a preceding '#': • HTML: <div id="content"> • Style: #content { width: 450px; margin: 0 auto; padding: 15px; background: white; border: 2px solid navy; }

  4. Class As Selector • Example 1: • HTML: <h1 class="center">Center-aligned heading</h1> • Style: with a preceding “.” .center{ text-align:center; } • Example 2: For a specific element • HTML: <ul class="nav"> • Style: ul.nav { list-style-type: none; margin-left: 0; padding-left: 0; }

  5. Pseudo Class Selector:pseudo-classes are used to add special effects to some selectors. For example, change color when mouse is over the element, a:hover {color:#FF00FF;} • table:hover{color:red;} • td:hover {color:blue;} • Others: http://www.w3schools.com/css/css_pseudo_classes.asp

  6. CSS MIME Type • Multipurpose Internet Mail Extensions (MIME) is an Internet standard of content type system. • CSS MIME type: • text/css • Example: referencing a CSS file using the <link> element inside the head section <link rel="stylesheet" type="text/css" href="main.css" />

  7. Example: Page View

  8. HTML Code <body> <div id="content"> <h1>Product Discount Calculator</h1> <form action="display_discount.php" method="post"> <div id="data"> <label>Product Description:</label> <input type="text" name="product_description"/><br /> <label>List Price:</label> <input type="text" name="list_price"/><br /> <label>Discount Percent:</label> <input type="text" name="discount_percent"/>%<br /> </div> <div id="buttons"> <label>&nbsp;</label> <input type="submit" value="Calculate Discount" /><br /> </div> </form> </div> </body>

  9. body { font-family: Arial, Helvetica, sans-serif; margin: 10px; padding: 0; } #content { width: 450px; margin: 0 auto; padding: 15px; background: white; border: 2px solid navy; } h1 { color: navy; } label { width: 10em; padding-right: 1em; float: left; } #data input { float: left; width: 15em; margin-bottom: .5em; } #buttons input { float: left; margin-bottom: .5em; } br { clear: left; }

  10. HTML Element Object Properties:http://www.w3schools.com/jsref/dom_obj_all.asp • className property • style property • Assuming we have two classes: • .evenColor {color:red;} • .oddColor {color:black;} • Example of assigning className value dynamically using code. var row = table.insertRow(rowCount); if(count % 2 == 0){ row.className= "evenColor"; } else{ row.className = "oddColor"; } Example of assigning style property using code: varboxFV=document.getElementById('FV'); fv=myPV*Math.pow(1+myRate,myYear); if (fv>1000) boxFV.style.backgroundColor = "red"; else boxFV.style.backgroundColor = "green";

  11. Loan Affordability Analysis

  12. HTML Code <body> <div> <p>Loan Affordability Analysis</p> <form name="pmtForm"> <p>Enter Loan: <input type="text" id="Loan" name="Loan" value="" /><br><br> <p>Enter Rate: <input type="text" id="Rate" name="Rate" value="" /><br><br> <p>Enter Term: <input type="text" id="Term" name="Term" value="" /><br><br> <p>Enter Affordable payment: <input type="text" id="Afford" name="Afford" value="" /><br><br> <p>Payment is: <input type="text" id="Pmt" name="Pmt" value="" /><br><br> <input type="button" value="Compute Payment" name="btnCompute" onclick="computePmt()" /> </form> </div> </body>

  13. computePmt() <script> function computePmt(){ Loan=parseFloat(document.getElementById("Loan").value); Rate=parseFloat(document.getElementById("Rate").value); Term=parseFloat(document.getElementById("Term").value); Afford=parseFloat(document.getElementById("Afford").value); Pmt=(Loan*Rate/12)/(1-Math.pow(1+Rate/12,-12*Term)); varboxPmt=document.getElementById("Pmt"); if (Pmt>Afford) boxPmt.style.backgroundColor="red"; else boxPmt.style.backgroundColor="green"; boxPmt.value=Pmt.toFixed(2); } </script>

  14. CSS File div { width: 450px; margin: 0 auto; padding: 15px; background: aqua; border: 2px solid navy; } p {font-weight:bold;}

  15. <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="rowcss.css" /> <script> function showTable(){ value=eval(document.depForm.pValue.value); life=eval(document.depForm.pLife.value); depreciation = value / life; var table = document.getElementById('depTable'); vartotalDepreciation=0; for(vari = table.rows.length - 1; i > 0; i--) { table.deleteRow(i); } for (count = 1; count <= life; count++) { varrowCount = table.rows.length; var row = table.insertRow(rowCount); if(count % 2 == 0){ row.className = "evenColor"; }else{ row.className = "oddColor"; } var cell0 = row.insertCell(0); cell0.innerHTML=count; var cell1 = row.insertCell(1); cell1.innerHTML="$" + value.toFixed(2); var cell2 = row.insertCell(2); cell2.innerHTML="$" + depreciation.toFixed(2); totalDepreciation += depreciation; var cell3 = row.insertCell(3); cell3.innerHTML="$" + totalDepreciation.toFixed(2); value -= depreciation; } } </script> </head>

  16. Body Section <body> <div id="content"> <p>Straight Line Depreciation Table<p><br><br> <form name="depForm"> Enter Property Value: <input type="text" name="pValue" value="" /><br><br> Enter Property Life_: <input type="text" name="pLife" value="" /><br> <br> <input type="button" value="Show Table" name="btnShowTable" onclick="showTable()" /> </form><br> <table id="depTable" border="1" width="400" cellspacing="1"> <thead> <tr> <th>Year</th> <th>Value at BeginYr</th> <th>Dep During Yr</th> <th>Total to EndOfYr</th> </tr> </thead> <tbody> </tbody> </table> </div> </body>

  17. CSS File #content { width: 650px; margin: 0 auto; padding: 15px; background: aqua; border: 2px solid navy; } table:hover {color:blue;} td:hover {color:blue;} table { border:1px solid green; margin: 0 auto; } .evenColor {color:red;} .oddColor {color:black;} p { font-size: 200; font-weight: bold; text-align: center; text-decoration: underline; }

  18. Tutorials • W3C: • http://www.w3.org/TR/REC-CSS1/#css1-properties • W3Schools.com: • http://www.w3schools.com/css/default.asp

More Related