Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

CSS – Cascading Style Sheets (Ιδιότητες γραμματοσειράς - font) Καθορίζουν τα χαρακτηριστικά της γραμματοσειράς του κειμένου των ιστοσελίδων (τύπο, στυλ,

Παρόμοιες παρουσιάσεις


Παρουσίαση με θέμα: "CSS – Cascading Style Sheets (Ιδιότητες γραμματοσειράς - font) Καθορίζουν τα χαρακτηριστικά της γραμματοσειράς του κειμένου των ιστοσελίδων (τύπο, στυλ,"— Μεταγράφημα παρουσίασης:

1 CSS – Cascading Style Sheets (Ιδιότητες γραμματοσειράς - font) Καθορίζουν τα χαρακτηριστικά της γραμματοσειράς του κειμένου των ιστοσελίδων (τύπο, στυλ, μέγεθος, πάχος, κ.λπ.)

2 CSS – Cascading Style Sheets (Ιδιότητες γραμματοσειράς - font) Γενικές οικογένειες γραμματοσειρών (σύνολα παρόμοιων γραμματοσειρών) Serif (με ουρές) (π.χ. Times New Roman) Sans Serif (π.χ. Arial) (χωρίς ουρές) Monospace(π.χ. Courier) (όλα τα γράμματα έχουν το ίδιο πλάτος)

3 CSS – Cascading Style Sheets (Ιδιότητα font-family) Καθορίζει την οικογένεια και τον τύπο της γραμματοσειράς (π.χ. arial, courier, times και serif, sans-serif, monospace) ΤιμήΠεριγραφή τύπος γραμματοσειράς, όνομα οικογένειας λίστα τύπων γραμματοσειράς και ονομάτων οικογενειών, χωρισμένων με κόμμα

4 CSS – Cascading Style Sheets (Ιδιότητα font-family - παράδειγμα) h1 {font-family: “Times New Roman”, Georgia, Serif} h2 {font-family: Arial, Verdana, “Sans Serif”} p {font-family: Courier, Monospace} Επικεφαλίδα επιπέδου 1 (γραμματοσειρά με ουρές) Επικεφαλίδα επιπέδου 2 (γραμματοσειρά χωρίς ουρές) Απλή παράγραφος (γραμματοσειρά ίδιους πλάτους)

5 CSS – Cascading Style Sheets (Ιδιότητα font-style) Η ιδιότητα font-style χρησιμοποιείτει κυρίως για τον καθορισμό πλάγιου κειμένου. Αυτή η ιδιότητα έχει τρεις τιμές: normal – κανονική εμφάνιση italic – πλάγιο κείμενο oblique – κείμενο παρόμοιο με το πλάγιο

6 CSS – Cascading Style Sheets (Ιδιότητα font-style - παράδειγμα) p.nrml {font-style:normal} p.itlc {font-style:italic} p.oblq {font-style:oblique} Αυτή η παράγραφος είναι κανονική. Αυτή η παράγραφος είναι πλάγια. Κι αυτή η παράγραφος είναι πλάγια.

7 CSS – Cascading Style Sheets (Ιδιότητα font-size) Η ιδιότητα font-size καθορίζει το μέγεθος του κειμένου. Απόλυτο μέγεθος Σχετικό μέγεθος (σε σχέση με το περιβάλλον στοιχείο)

8 CSS – Cascading Style Sheets (Ιδιότητα font-size – απόλυτο μέγεθος) ΤιμήΠεριγραφή Τιμή σε εικονοστοιχεία (pixel)Π.χ. 40px xx-smallΈξτρα έξτρα μικρό μέγεθος x-smallΈξτρα μικρό μέγεθος smallΜικρό μέγεθος mediumΜεσαίο μέγεθος largeΜεγάλο μέγεθος x-largeΈξτρα μεγάλο μέγεθος xx-largeΈξτρα έξτρα μέγεθος smallerΜικρότερο μέγεθος από το γονικό στοιχείο largerΜεγαλύτερο μέγεθος από το γονικό στοιχείο

9 CSS – Cascading Style Sheets (Ιδιότητα font-size – σχετικό μέγεθος) ΤιμήΠεριγραφή Τιμή σε μονάδας μέτρησης em (1 em = 16 px) Τα 16 px είναι το προκαθορισμένο μέγεθος γραμμάτων των φυλλομετρητών) Π.χ. 40px Ποσοστό επί τοις % σε σχέση με το περιβάλλον (γονικό στοιχείο) Π.χ. 150%

10 CSS – Cascading Style Sheets (Ιδιότητα font-size – παράδειγμα 1o) p.double {font-size:200%} p.half {font-size:1.5em} p.stndrd {font-size:16px} Κείμενο δύο φορές μεγαλύτερο από το προκαθορισμένο μέγεθος (16px) του περιβάλλοντος (γονικού) στοιχείου body Κείμενο μιάμιση φορά μεγαλύτερο από το προκαθορισμένο μέγεθος (16px) του περιβάλλοντος (γονικού) στοιχείου body Κείμενο ίσο με το ροκαθορισμένο μέγεθος (16px) του περιβάλλοντος (γονικού) στοιχείου body

11 CSS – Cascading Style Sheets (Ιδιότητα font-size – παράδειγμα 2o) body {font-size:10px} p.double {font-size:200%} p.half {font-size:1.5em} p.stndrd {font-size:16px} Κείμενο δύο φορές μεγαλύτερο από το (6px) του περιβάλλοντος (γονικού) στοιχείου body, δηλαδή 12px Κείμενο μιάμιση φορά μεγαλύτερο από το μέγεθος (16px) του περιβάλλοντος (γονικού) στοιχείου body, δηλαδή 9px Κείμενο ίσο με το καθορισμένο μέγεθος (16px)

12 CSS – Cascading Style Sheets (Ιδιότητα font-variant) ΤιμήΠεριγραφή normalΚανονικά γράμματα small-capsΠεζοκεφαλαία Μετατρέπει τα γράμματα σε πεζοκεφαλαία

13 CSS – Cascading Style Sheets (Ιδιότητα font-variant) p.normal {font-variant:normal} p.small {font-variant:small-caps} Το όνομά μου είναι Γιώργος.

14 CSS – Cascading Style Sheets (Ιδιότητα font-weight) ΤιμήΠεριγραφή normalΚανονικοί χαρακτήρες (προκαθορισμένη τιμή) boldΈντονοι χαρακτήρες bolderΠιο έντονοι χαρακτήρες lighterΛιγότερο έντονοι χαρακτήρες 100, 200, …, 900 Διαβαθμίσεις (400 οι κανονικοί χαρακτήρες, 700 οι έντονοι χαρακτήρες) Καθορίζει έντονους χαρακτήρες

15 CSS – Cascading Style Sheets (Ιδιότητα font) ΤιμήΠεριγραφή τιμή ιδιότητας font-styleΚαθορίζει το στυλ των γραμμάτων (πλάγια ή κανονικά) τιμή ιδιότητας font-variantΚαθορίζει αν οι χαρακτήρες θα είναι πεζοκεφαλαία τιμή ιδιότητας font-weightΚαθορίζει αν οι χαρακτήρες θα είναι έντονοι τιμή ιδιότητας font-familyΚαθορίζει το είδος της γραμματοσειράς (π.χ. Arial, serif) ζευγάρι τιμών font- size/line-height Καθορίζει το μέγεθος γραμματοσειράς και το διάστιχο Καθορίζει όλες τις ιδιότητες γραμματοσειράς σε μία δήλωση

16 CSS – Cascading Style Sheets (Ιδιότητα font – παράδειγμα) p.ex1 {font:15px arial,sans-serif;} p.ex2 {font:italic bold 12px/30px Georgia, serif;} Αυτή η παράγραφος έχει μέγεθος γραμμάτων ίσο με 15px και είδος γραμματοσειράς Arial. Αυτή η παράγραφος έχει πλάγια και έντονα γράμματα, μέγεθος γραμματοσειράς ίσο με 12 εικονοστοιχεία, ύψος γραμμής (διάστιχο) 30 εικονοστοιχεία, και είδος γραμματοσειράς Georgia.

17 CSS – Cascading Style Sheets (Ιδιότητα font – άλλες τιμές) ΤιμήΠεριγραφή captionΓραμματοσειρά που χρησιμοποιείται σε χειριστήρια με λεζάντα (π.χ. κουμπιά κ.λπ.) iconΓραμματοσειρά που χρησιμοποιείται σε εικονίδια ετικετών menuΓραμματοσειρά που χρησιμοποιείται σε πτυσσόμενα μενού message-boxΓραμματοσειρά που χρησιμοποιείται σε πλαίσια διαλόγου small-captionΜικρότερου μεγέθους γραμματοσειρά που χρησιμοποιείται σε χειριστήρια με λεζάντα (π.χ. κουμπιά κ.λπ.) status-barΓραμματοσειρά που χρησιμοποιείται στη γραμμή κατάστασης Καθορίζει όλες τις ιδιότητες γραμματοσειράς σε μία δήλωση

18 CSS – Cascading Style Sheets (Ιδιότητα font – παράδειγμα) Η γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής σε χειριστήρια με ετικέτες. Η γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής σε ετικέτες εικονιδίων. Η γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής σε πτυσσόμενα μενού. Η γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής σε πλαίσια διαλόγου. Μικρότερου μεγέθους γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής σε χειριστήρια με ετικέτες. Η γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής στη γραμμή κατάστασης. Σημείωση: Το αποτέλεσμα των τιμών της ιδιότητας font εξαρτάται από το φυλλομετρητή.


Κατέβασμα ppt "CSS – Cascading Style Sheets (Ιδιότητες γραμματοσειράς - font) Καθορίζουν τα χαρακτηριστικά της γραμματοσειράς του κειμένου των ιστοσελίδων (τύπο, στυλ,"

Παρόμοιες παρουσιάσεις


Διαφημίσεις Google