«Εθαξκνγέο Δηαδηθηύνπ» CSS Μνξθνπνίεζε θαη Δηάηαμε κε ζηπι http://www.elizabethcastro.com/html5ed/examples/#c10 http://www.elizabethcastro.com/html5ed/examples/#c11 Πίλαθεο http://www.elizabethcastro.com/html5ed/examples/#c14 Ισάλληλα 2008 Ι. Παπαδόπνπινο 1
Μοπυοποίηση με CSS Οηθνγέλεηα γξακκαηνζεηξώλ Ιδηόηεηα: font-family γεληθά νλόκαηα γξακκαηνζεηξώλ: Serif : The quick brown fox jumps over the lazy dog. Sans-serif : Monospace : Cursive : Fantasy : The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. Ισάλληλα 2008 Ι. Παπαδόπνπινο 2
Μοπυοποίηση με CSS ζπλήζεηο γξακκαηνζεηξέο: serif: times, bookman, palatino sans-serif: arial, helvetica, verdana, tahoma monospace: courier cursive: script fantasy: π.ρ. font-family : Arial Black, Helvetica Bold, sans-serif ; κε ηνλ θαλόλα απηό ζα επηιεγεί ε πξώηε ππάξρνπζα γξακκαηνζεηξά ηεο αλαθεξόκελεο ιίζηαο Ισάλληλα 2008 Ι. Παπαδόπνπινο 3
Μοπυοποίηση με CSS κέγεζνο γξακκάησλ: font-size : 18px ; font-size : 1.25em ; font-size : 150% ; απόλσηε ηιμή ζτεηική ηιμή φς προς ηο γονικό ζηοιτείο ζτεηική ηιμή φς προς ηο γονικό ζηοιτείο πιάγηα γξάκκαηα: font-style : italic ; έληνλα γξάκκαηα: font-weight : bold ; Ισάλληλα 2008 Ι. Παπαδόπνπινο 4
Μοπυοποίηση με CSS νξηζκόο ύςνπο γξακκήο: line-height : 30px ; line-height : 1.3em ; line-height : 180% ; απόλσηε ηιμή ζτεηική ηιμή φς προς ηο γονικό ζηοιτείο ζτεηική ηιμή φς προς ηο γονικό ζηοιτείο ρξώκα θεηκέλνπ: ρξώκα θόληνπ: color : red ; color : #acf ; color : #1aff3c ; color : rgb(10, 220, 45) ; color : rgb(20%, 85%, 0%) ; background : red ; background : #3a9 ; Ισάλληλα 2008 Ι. Παπαδόπνπινο 5
Μοπυοποίηση με CSS απόζηαζε κεηαμύ ιέμεσλ: word-spacing : 30px ; απόλσηε ηιμή word-spacing : 1.3em ; ζτεηική ηιμή φς προς ηο γονικό ζηοιτείο απόζηαζε κεηαμύ γξακκάησλ: letter-spacing : 30px ; απόλσηε ηιμή letter-spacing : 1.3em ; ζτεηική ηιμή φς προς ηο γονικό ζηοιτείο πξνζζήθε εζνρώλ: text-indent : 50px ; text-indent : 0.8em ; Ισάλληλα 2008 Ι. Παπαδόπνπινο 6
Μοπυοποίηση με CSS ζηνίρηζε θεηκέλνπ: text-align : left ; left, right, center ή justify αιιαγή πεδώλ - θεθαιαίσλ: text-transform : uppercase ; μεηαηροπή όλφν ζε κεθαλαία text-transform : lowercase ; μεηαηροπή όλφν ζε πεδά text-transform : capitalize ; ηο 1 ο γράμμα να γίνει κεθαλαίο text-transform : none ; ακύρφζε ηες όποιας μεηαηροπής Ισάλληλα 2008 Ι. Παπαδόπνπινο 7
Μοπυοποίηση με CSS ρξήζε μικπών θεθαιαίσλ (small capitals): font-variant : small-caps ; font-variant : none ; για ενεργοποίεζε για καηάργεζε δηαθόζκεζε θεηκέλνπ: text-decoration : underline ; σπογράμμιζε text-decoration : overline ; σπεργράμμιζε text-decoration : line-through ; διαγράμμιζε text-decoration : blink ; αναβόζβεμα text-decoration : none ; ακύρφζε ηες όποιας διακόσμησης Ισάλληλα 2008 Ι. Παπαδόπνπινο 8
Διάταξη με CSS Σύκθσλα κε ηελ ηερλνινγία CSS: θάζε ζηνηρείν κίαο ηζηνζειίδαο πεξηθιείεηαη από έλα αόξαην πιαίζην θάζε ηέηνην πιαίζην απνηειείηαη από ηελ πεξηνρή πεξηερνκέλνπ ην πεξίγξακκα (border) ηνλ θελό ρώξν κεηαμύ πεξηγξάκκαηνο θαη πεξηερνκέλνπ (padding) ηνλ θελό ρώξν έμσ από ην πεξίγξακκα (margin) Ισάλληλα 2008 Ι. Παπαδόπνπινο 9
Διάταξη με CSS Εκθάληζε Απόθξπςε ζηνηρείσλ εμαθάληζε ζηνηρείνπ (ζαλ λα κελ ππάξρεη θαζόινπ ζηελ ηζηνζειίδα) display : none ; απόθξπςε ζηνηρείνπ, δηαηεξώληαο ην ρώξν πνπ απαζρνιεί ζηε ζειίδα visibility : hidden ; visibility : visible ; απόκρσυε εμθάνιζε Ισάλληλα 2008 Ι. Παπαδόπνπινο 10
Διάταξη με CSS Τνπνζέηεζε ζηνηρείσλ ζρεηηθή (relative) ζρεηηθή σο πξνο ην γνληθό ζηνηρείν position : relative ; top 25px ; left 10em ; position : relative ; top 20em ; left 5% ; απόιπηε (absolute) ζηαζεξή σο πξνο ηελ ηζηνζειίδα, ζε απόιπηε ζέζε position : absolute ; top 25px ; left 10em ; position : absolute ; top 20em ; left 5% ; ζηαηηθή (fixed) ζηαζεξνπνίεζε σο πξνο ην παξάζπξν ηνπ θπιινκεηξεηή position : fixed ; top 5% ; left 40px ; Ισάλληλα 2008 Ι. Παπαδόπνπινο 11
Διάταξη με CSS θαζνξηζκόο θόληνπ ελόο ζηνηρείνπ: background background : red url(myimage.gif) repeat-x bottom left ; θαζνξηζκόο επηκέξνπο ηδηνηήησλ θόληνπ ελόο ζηνηρείνπ: ρξώκα background-color : red ; εηθόλα background-image : url(myimage.gif) ; (transparent) (none) ηύπνο επαλάιεςεο background-repeat : repeat-x ; (repeat, repeat-x, repeat-y, no-repeat) ηνπνζέηεζε σο πξνο ην παξάζπξν ηνπ θπιινκεηξεηή background-attachment : bottom ; (top, center, bottom) ζέζε ηεο εηθόλαο background-position : left ; (left, center, right) Ισάλληλα 2008 Ι. Παπαδόπνπινο 12
Διάταξη με CSS ρξώκα κειάλεο ελόο ζηνηρείνπ: color : red ; νξηζκόο πεξηγξάκκαηνο (border): border : solid red 3px ; border-style : solid ; border-color : red ; border-width : 3px ; νξηζκόο επηκέξνπο ηκεκάησλ πεξηγξάκκαηνο (border-ηκήκα): όπνπ ηκήκα = left, right, top ή bottom border-τμήμα : solid red 3px ; border-τμήμα-style : solid ; border-τμήμα-color : red ; border-τμήμα-width : 3px ; Ισάλληλα 2008 Ι. Παπαδόπνπινο 13
Διάταξη με CSS πξνζζήθε θελνύ ρώξνπ κεηαμύ πεξηγξάκκαηνο θαη πεξηερνκέλνπ (padding) padding : 10px 15px 20px 25px ; padding-top : 10px; padding-right : 15px ; padding-bottom : 20px ; padding-left : 25px ; Ισάλληλα 2008 Ι. Παπαδόπνπινο 14
Διάταξη με CSS πξνζζήθε θελνύ ρώξνπ έμσ από ην πεξίγξακκα (margin) margin : 10px 15px 20px 25px ; margin-top : 10px; margin-right : 15px ; margin-bottom : 20px ; margin-left : 25px ; Ισάλληλα 2008 Ι. Παπαδόπνπινο 15
Διάταξη με CSS νξηζκόο ύςνπο θαη πιάηνπο ζηνηρείνπ width : auto ; width : 200px ; width : 30% ; ζτεηική ηιμή φς προς ηο γονικό ζηοιτείο height : auto ; height : 100px ; height : 10% ; ζτεηική ηιμή φς προς ηο γονικό ζηοιτείο Ισάλληλα 2008 Ι. Παπαδόπνπινο 16
Διάταξη με CSS ηνπνζέηεζε ζηνηρείσλ ζε ζηξώζεηο, ην έλα πάλσ ζην άιιν z-index : 3 ; όζν πην κεγάινο είλαη ν z-index ηόζν πην πάλσ βξίζθεηαη ην ζηνηρείν Ισάλληλα 2008 Ι. Παπαδόπνπινο 17
Διάταξη με CSS θαηαθόξπθε ζηνίρηζε ζηνηρείσλ: vertical-align baseline middle sub super text-top γξακκώλ βάζεο ζηνηρείνπ γνλέα κέζσλ ζηνηρείνπ γνλέα ζηνηρείν = δείθηεο ηνπ γνλέα ζηνηρείν = εθζέηεο ηνπ γνλέα θνξπθέο ζηνηρείνπ γνλέα text-bottom θάησ κέξε ζηνηρείνπ γνλέα top bottom θνξπθή ζηνηρείνπ κε ηελ θνξπθή ηνπ πςειόηεξνπ ζηνηρείνπ ηεο γξακκήο θάησ κέξνο ζηνηρείνπ κε ην θάησ κέξνο ηνπ ρακειόηεξνπ ζηνηρείνπ ηεο γξακκήο Ισάλληλα 2008 Ι. Παπαδόπνπινο 18
Πίνακερ <table> <td>κελί 11</td> <td>κελί 12</td> <td>κελί 13</td> <td>κελί 21</td> <td>κελί 22</td> <td>κελί 23</td> </table> table = πίλαθαο tr = table row γξακκή πίλαθα td = table data θειί πίλαθα Ισάλληλα 2008 Ι. Παπαδόπνπινο 19
Πίνακερ <style> td {border: solid 1px; text-align:center; padding:10px;} </style> <table> <td>κελί 11</td> <td>κελί 12</td> <td>κελί 13</td> <td>κελί 14</td> <td>κελί 21</td> <td>κελί 22</td> <td>κελί 23</td> <td>κελί 24</td> <td>κελί 31</td> <td>κελί 32</td> <td>κελί 33</td> <td>κελί 34</td> </table> Τα ζηνηρεία-πίλαθεο (table) πεξηέρνπλ κόλνλ ζηνηρεία-γξακκέο (tr) Τα ζηνηρεία-γξακκέο (tr) πεξηέρνπλ κόλνλ ζηνηρεία-θειηά (td) Ισάλληλα 2008 Ι. Παπαδόπνπινο 20
Πίνακερ επέθηαζε θειηνύ ζε πνιιέο ζηήιεο: colspan <style> td {border: solid 1px; text-align:center; padding:10px;} </style> <table> <td colspan="2">κελί 11+12</td> <td>κελί 13</td> <td>κελί 14</td> <td>κελί 21</td> <td>κελί 22</td> <td>κελί 23</td> <td>κελί 24</td> <td>κελί 31</td> <td>κελί 32</td> <td>κελί 33</td> <td>κελί 34</td> </table> Ισάλληλα 2008 Ι. Παπαδόπνπινο 21
Πίνακερ επέθηαζε θειηνύ ζε πνιιέο γξακκέο: rowspan <style> td {border: solid 1px; text-align:center; padding:10px;} </style> <table> <td>κελί 11</td> <td>κελί 12</td> <td>κελί 13</td> <td>κελί 14</td> <td rowspan="2">κελί 21+31</td> <td>κελί 22</td> <td>κελί 23</td> <td>κελί 24</td> <td>κελί 32</td> <td>κελί 33</td> <td>κελί 34</td> </table> Ισάλληλα 2008 Ι. Παπαδόπνπινο 22
Πίνακερ επέθηαζε θειηνύ ζε πνιιέο ζηήιεο θαη γξακκέο <style> td {border: solid 1px; text-align:center; padding:10px;} </style> <table> <td>κελί 11</td> <td>κελί 12</td> <td colspan="2" rowspan="2">κελί 13+14+23+24</td> <td rowspan="2">κελί 21+31</td> <td>κελί 22</td> <td>κελί 32</td> <td>κελί 33</td> <td>κελί 34</td> </table> Ισάλληλα 2008 Ι. Παπαδόπνπινο 23
Πίνακερ επέθηαζε θειηνύ ζε πνιιέο ζηήιεο θαη γξακκέο <style> td {border: solid 1px; text-align:center; padding:10px;} </style> <table> <td colspan="2">11 12</td> <td rowspan="2" rowspan="2">13<br/>23</td> <td rowspan="2">21</br>31</td> <td>22</td> <td colspan="2">32 33</td> </table> Ισάλληλα 2008 Ι. Παπαδόπνπινο 24