HTML & CSS Basics - 40 Essential Elements
•
0 j'aime•816 vues
This document provides information about HTML elements and CSS properties. It discusses the different DOCTYPE declarations for HTML, XHTML, and HTML5. It also covers using ID and class attributes, headings, tables, and div elements. The document compares tables and div elements and provides tips for using tables. Finally, it defines margin, padding, transparency and ends with a cross-browser transparency example.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à HTML & CSS Basics - 40 Essential Elements
Similaire à HTML & CSS Basics - 40 Essential Elements (20)
Dernier
Dernier (20)
HTML & CSS Basics - 40 Essential Elements
- 1. Base HTML & CSS Nick
- 2. HTML DOCTYPE? HTML DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > HTML5 DOCTYPE <!DOCTYPE html>
- 3. <body> SAMPLE CODE <style type="text/css"> .text-layer { font-family: Monaco, "Courier New", monospace; font-size: 12px; cursor: text; } .bg-red { background-color: red; } </style> <body> <h1 style="color:red">Juhu Kinners</h1> <div id="elem_id"></div> <div class="text-layer bg-red"></div> </body>
- 5. attr id Attribute id <div id="elem_id"></div> Identity of HTML Element ● ● It is the only Always use in JavaScript
- 6. attr class Attribute class <div class="text-layer bg-red"></div> Styling the HTML Element ● ● It can be many Each class match with their css in stylesheet .text-layer { font-family: Monaco, "Courier New", monospace; font-size: 12px; cursor: text; } .bg-red { background-color: red; }
- 8. <table> VS <div> <table> Base usage <table> <tr> <td>row1 column1</td> <td>row1 column2</td> </tr> <tr> <td>row2 column1</td> <td>row2 column2</td> </tr> </table> row1 column1 row1 column2 row2 column1 row2 column2
- 9. <table> VS <div> <table> colspan <table> <tr> <td colspan=”2”> row1 column1 + row1 column2 </td> </tr> <tr> <td>row2 column1</td> <td>row2 column2</td> </tr> </table> row1 column1 + row1 column2 row2 column1 row2 column2
- 10. <table> VS <div> <table> rowspan <table> <tr> <td rowspan=”2”> row1 column1 + row2 column1 </td> <td>row1 column2</td> </tr> <tr> <td>row2 column2</td> </tr> <tr> <td>row3 column1</td> <td>row3 column2</td> </tr> </table> row1 column1 + row2 column1 row1 column2 row2 column2 row3 column1 row3 column2
- 11. <table> VS <div> Tips for using <table> ● ● When the container has margin or padding, do not set table in 100% width Do not try to set the height, if you want to make it flexible padding <table width=”100%”> padding <table width=”auto”>
- 12. <table> VS <div> Why <div> ? ● ● ● Easy to control No any extra css Default display “Block” <div id=”1” style=”position: absolute”> <div id=”1” style=” position: relative”> <div id=”2” style=” position: relative”> <div id=”4” style=”position: absolute”> <div id=”3” style=” position: relative”> <div id=”4” style=” position: relative”> <div id=”5” style=” position: relative”> <div id=”6” style=” position: relative”> <div id=”2” style=” position: absolute”> <div id=”3” style=” position: absolute”>
- 13. <table> VS <div> So... <table> ● ● ● Not too much customize Seems simple Have a some format <div> ● ● ● Lots of customize Complex layout Not in same format
- 14. margin & padding
- 18. About transparent Cross browser /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Good browsers */ opacity: 0.5;
- 19. <END/>