ΕΠΛ 012. Φύλλα Στυλ (ΙΙ)

Transcript

1 ΕΠΛ 012 Φύλλα Στυλ (ΙΙ)

2 Τροποποίηση χρωµάτων Color: "όνοµα χρώµατος" rgb (rr,gg,bb) #RRGGBB RGB συνιστώσες όπου rr,gg,bb είναι ακέραιοι από το H1 {color: rgb(255,0,0)} κόκκινες επικεφαλίδες background-colorcolor : "όνοµα χρώµατος" rgb (rr,gg,bb) #RRGGBB background-image: url none (προεπιλεγµένο) µία εικόνα ως παρασκήνιο σε ένα στοιχείο <! background> Π.χ., BODY {background-image:url(bgi.jpg); color:white} repeat: repeat repeat-x repeat-y no-repeat Π.χ., BODY {color:beige; background-image: url(bgi gi.jpg); background-repeat: repeat: repeat-y} <! bg-repeat-y> background-repeat

3 Τροποποίηση χρωµάτων background-attachment: scroll fixed Καθορίζει τη σχέση του υπόβαθρου του στοιχείου µε αυτού της ιστοσελίδας background-position: [ ποσοστό µήκος ] [top center bottom] _ [left center right] Background: οµαδοποίησης για όλες τις ιδιότητες P {background: blue url(icon.jpg) repeat fixed } P { background-color: color: blue; background-image: url(icon.jpg); background-repeat: repeat: repeat; background-attachment: attachment: fixed}

4 font-familyfamily Ιδιότητες Μορφοποίησης Γραµµατοσειρών serif" (Times), "sans-serif" serif" (Helvetica), "monospace" (Courier) BODY {font-family: family: Ηelvetica, sans-serif} serif} font-size Α όλυτο µέγεθος pt: στιγµές (points) ή px: εικονοστοιχεία (pixels) Π.χ., font-size:12pt, font-size:22px Προκαθορισµενα: xx-small, x-small, small, medium, large, x-large, xx-large Σχετικό µέγεθος: Ποσοστό % προκαθορισµένη τιµή font-size:12pt, font-size:150% size:150%, font-size:small <b style= "font-size:large ">

5 Ιδιότητες Μορφοποίησης Ύψος γραµµής κειµένου Γραµµατοσειρών µαζί µε το font-size µε την βοη0εια / Π.χ., P {font-size: 12pt/14pt} ύψος χαρακτήρα 12 pt και ύψος γραµµής 14 pt font-weight (βάρος έντονης γραφής) normal bold bolder lighter Π.χ., H1 {font-weight: 900}, H3 {font-weight: bolder} font-style normal italic oblique (µε κλίση)

6 font-variant Ιδιότητες Μορφοποίησης normal small-caps Π.χ., Γραµµατοσειρών <P STYLE="font-family family : Times; font-variant : small-caps;"> Το κείµενο αυτό εµφανίζεται µε κεφαλαία γράµµατα. </P> font: οµαδοποίησης για όλες τις ιδιότητες font P {font: 12pt/14pt italic Palatino serif} P {font: 80% 700 sans-serif serif small-caps caps}

7 Στοίχισης Κειµένου word-spacing: normal µήκος (pt, px, cm,..) letter-spacing: normal +/- µήκος (pt, px, cm,..) text-decoration none underline overline line-through blink Π.χ., P {color:red; text-decoration: decoration:"underline overline"} text-transform: none capitalize uppercase lowercase P {text-tranform: tranform: uppercase} text-align: left right center justify (πλήρης στοίχισης) text-indent: µήκος (εσοχή-περιθώριο) line-height: normal αριθµός µήκος ποσοστό Π.χ., BLOCKQUOTE {line-height: 110%; font-size: 10pt}

8 Περιγραφή Καταλόγων display: block list-item item inline none white-space: normal nowrap pre list-style-typetype τύπο της κουκίδας ή της αρίθµησης disc circle square none decimal lower-roman upper-roman lower-alpha upper-alpha list-style-image: url() none λίστα εικόνες, αντί προκαθορισµένo σύµβολo ή αριθµήσεις list-style-position: outside inside καθορίζει την τοποθέτηση του συµβόλου list-style: οµαδοποίησης για όλες τις ιδιότητες list

9 Προδιαµορφωµένο κείµενο Μη αναµόρφωση από διαφυλλιστή, όπως έχει συνταχτεί Π.χ., διατηρεί τα κενά στο κείµενο ιπλή ετικέτα <PRE>, </PRE> Π.χ., <PRE> Είδος Τιµή Έκπτωση Κόστος Α Β Γ </PRE> Όχι: Είδος Τιµή Έκπτωση Κόστος Α Β Γ Όχι

10 παράδειγµα UL.style1 { list-style:square style:square outside url(marble.jpg); } UL.style2 { list-style:disk style:disk url(pointer.jpg); } OL { list-style:lower-roman roman inside }

11 Ιδιότητες Περιθωρίων margin: µήκος ποσοστό auto Περιθωριο Π.χ., margin-top για το επάνω περιθώριο margin-rightright για το δεξιό περιθώριο margin-bottom για το κάτω περιθώριο margin-left για το αριστερό περιθώριο IMG {margin: 10} IMG {margin: } P {margin: 10 40} P {margin: } DIV {margin: } DIV { margin: } IMG {margin-bottom: 40 ; margin-left: 30; margin-right: right: 30;}

12 border-style ιδιότητες περιθωρίων Τιµές none dotted dashed solid double groove ridge inset outset πλευρές border-style-toptop border-style-bottom border-style-leftleft border-style-right Π.χ., P { border-style: solid} IMG { border-style-top: top: none; border-style-bottom: solid; border-width-left: rigid;}

13 ιδιότητες περιθωρίων border-width thin medium thick µήκος Π.χ., <P STYLE="border-width: "> border-width-top, top, border-width width-right border-width-bottom, border-width width-left P { border-width width-top: top: 2; border-width-left: thin; border-width-right: medium;} border-color όνοµα χρώµατος rgb (rr,gg,bb) #RRGGBB border-color-top, border-color color-right right border-color-bottom, border-color color-leftleft

14 ιδιότητες περιθωρίων Border οµαδοποίησης για όλες τις ιδιότητες border Padding µήκος ποσοστό auto???

15 τρόποι τοποθέτησης στοιχείων position: static absolute relative static: σειριακά όπως εµφανίζονται στο κείµενο absolute: νέα επιφάνεια (textbox) οπουδήποτε relative νέα επιφάνεια µε σχετική στοίχιση µε τα άλλα στοιχεία µήκος (cm, mm, in, px, pt) οσοστό auto συντεταγµένες (x, y) της αριστερής (left) και επάνω κορυφής (top) στοιχείων που ορίζονται µε την ιδιότητα block left: : x-axis; top: : y-axis Συνδυάζεται µε τις θέσεις absolute και relative Σηµείο αναφοράς πάντα το top-left (0,0) της σελίδας ή του στοιχείου παράδειγµα left και top: µήκος

16 τρόποι τοποθέτησης στοιχείων width και height: µήκος οσοστό auto πλάτος και ύψος block στοιχείων παραδειγµα Overflow: visible hidden scroll auto Τρόπος χειρισµού κειµένου που δεν χωρεί σε ένα block στοιχείο visible: εµφάνισε όλο το κείµενο αλλάζοντας τις διαστάσεις hidden: δεν αλλάζουν οι διαστάσεις και ό,τι φαίνεται scroll: µπάρες κύλισης, δεν αλλάζουν οι διαστάσεις auto: α οφασίζει ο διαφυλιστής

17 τρόποι τοποθέτησης στοιχείων Clip: auto rect (πάνω δεξιά κάτω αριστερά) το τµήµα του στοιχείου που θα εµφανίζεται όρισµα µηκών πλευρών του παραλληλογράµµου Visibility: inherit visible hidden inherit: εµφάνιση του στοιχείου εξαρτάται από την ύπαρξη ή όχι κάποιου γονικού στοιχείου (προεπιλεγµένη τιµή). visible: εµφανίζεται πάντα hidden: δεν εµφανίζεται αλλά µένει ο χώρος του κενός z-index: auto ακέραιος θέση (σχετικό ύψος) του στοιχείου στον κατακόρυφο άξονα Θετικές τιµές (+) φέρνει το στοιχείο στο προσκήνιο παράδειγµα z-index

18 Μονάδες Μήκους cm,, εκατοστά π.χ. P { line-height: 3cm } mm,, χιλιοστά π.χ. TD { word-spacing: 4mm } in,, ίντσες (1 ίντσα = 2.54 εκατοστά) π.χ. Η1 { margin: 0.5in } pt,, στιγµές (1 στιγµή = 1/72 ίντσες) π.χ. Β { font-size: 12pt } pc,, picas (1 pica = 12 στιγµές) π.χ. I { font-size: 1pc } em,, όπου η έκφραση em συµβολίζει το ύψος της γραµµατοσειράς π.χ. BODY { font-size: 12pt; text-ident: 3em; } /* text-ident = 36pt */.

19 Μορφή είκτη Ποντικιού (Cursor) cursor: auto crosshair default hand move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help

20 Ψευδοκλάσεις Μορφοποίησης στους υπερσυνδέσµους A:pseudo-class { } A:link { } - επέκταση της LINK="χρώµα συνδέσµου", της ετικέτας <BODY LINK=".."... >, A:active { } - επέκταση της ALINK="χρώµα συνδέσµου", της ετικέτας <BODY ALINK=".."... > για ενεργούς συνδέσµους A:visited { } - επέκταση της VLINK="χρώµα συνδέσµου", της ετικέτας <BODY VLINK=".."... >, για συνδέσµους που χρησιµοποιήθηκαν A:hover { } - µορφοποίει τους συνδέσµους όταν ο δείκτης του ποντικιού είναι πάνω τους

21 Παράδειγµα <STYLE> A:link { font:normal normal normal 10pt "MS Sans Serif" color:red; text-decoration:none; } A:active { color:green; text-decoration:none; } A:visited { color:blue; text-decoration:none; } A:hover { color:red; font-weight:bold text-decoration:none; } </STYLE>

22 Ψευδοκλάσεις :first-letter - µορφοποίει το πρώτο χαρακτήρα (πρώτο γράµµα) του στοιχείου που περιέχει κείµενο :first-line - µορφοποίει τη πρώτη γραµµή κειµένου (πρώτη σειρά) του στοιχείου που περιέχει κείµενο. παράδειγµα pseudo-class-text