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

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

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

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


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

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

2 CSS – Cascading Style Sheets (Ιδιότητα color) Καθορίζει το χρώμα του κειμένου ΤιμήΠεριγραφή Χρώμαόνομα χρώματος (π.χ. red) τιμή rgb (π.χ. rgb(255,0,0)) δεκαεξαδική τιμή (π.χ. #ff0000)

3 CSS – Cascading Style Sheets (Ιδιότητα color - παράδειγμα εφαρμογής χρώματος σε κείμενο) h1 {color: green} h2 {color: #dda0dd} p {color: rgb(0,0,255)} Επικεφαλίδα επιπέδου 1 Επικεφαλίδα επιπέδου 2 Απλή παράγραφος

4 CSS – Cascading Style Sheets (Ιδιότητα direction) Καθορίζει την κατεύθυνση του κειμένου ΤιμήΠεριγραφή ltrΑπό αριστερά προς τα δεξιά (εξορισμού τιμή) rtlΑπό δεξιά προς τα αριστερά

5 CSS – Cascading Style Sheets (Ιδιότητα direction) h1 {direction: rtl} h2 {direction: ltr} Επικεφαλίδα επιπέδου 1 Επικεφαλίδα επιπέδου 2 Απλή παράγραφος

6 CSS – Cascading Style Sheets (Ιδιότητα line-height) Καθορίζει την απόσταση μεταξύ των γραμμών του κειμένου ΤιμήΠεριγραφή normalΚανονική απόσταση (εξορισμού τιμή) αριθμόςΗ απόσταση καθορίζεται από το γινόμενο του αριθμού επί το μέγεθος της γραμματοσειράς τιμήΣταθερή απόσταση ίση με την τιμή σε pixel %Ποσοστό επί τοις εκατό του μεγέθους της γραμματοσειράς

7 CSS – Cascading Style Sheets (Ιδιότητα line-height – ποσοστό % του μεγέθους γραμματοσειράς) p.small {line-height: 90%} p.big {line-height: 200%} Αυτή είναι μια παράγραφος με τυπικό διάστιχο. Το εξορισμού διάστιχο στους περισσότερους φυλλομετρητές είναι από 110% έως 120% του μεγέθους της γραμματοσειράς. Αυτή είναι μια παράγραφος με μικρότερο διάστιχο, ίσο με το 90% του μεγέθους της γραμματοσειράς. Αυτή είναι μια παράγραφος με μεγαλύτερο διάστιχο, ίσο με 200% της γραμματοσειράς.

8 CSS – Cascading Style Sheets (Ιδιότητα line-height – τιμή διάστιχου σε εικονοστοιχεία) p.small {line-height: 10px} p.big {line-height: 30px} Αυτή είναι μια παράγραφος με τυπικό διάστιχο. Το εξορισμού διάστιχο στους περισσότερους φυλλομετρητές είναι περίπου 20 εικονοστοιχεία (pixel). Αυτή είναι μια παράγραφος με μικρότερο διάστιχο, ίσο με το 10 εικονοστοιχεία (pixel). Αυτή είναι μια παράγραφος με μεγαλύτερο διάστιχο, ίσο με 30 εικονοστοιχεία (pixel).

9 CSS – Cascading Style Sheets (Ιδιότητα line-height – αριθμητικός συντελεστής διάστιχου) p.small {line-height: 0.5} p.big {line-height: 2} Αυτή είναι μια παράγραφος με τυπικό διάστιχο. Το εξορισμού διάστιχο στους περισσότερους φυλλομετρητές υπολογίζεται περίπου με συντελεστή 1. Αυτή είναι μια παράγραφος με μικρότερο διάστιχο, που υπολογίζεται με συντελεστή 0.5. Αυτή είναι μια παράγραφος με μεγαλύτερο διάστιχο, που υπολογίζεται με συντελεστή 2.

10 CSS – Cascading Style Sheets (Ιδιότητα letter-spacing) Καθορίζει την απόσταση μεταξύ των γραμμάτων του κειμένου (δέχεται και αρνητικές τιμές) ΤιμήΠεριγραφή normalΚανονική απόσταση (εξορισμού τιμή) τιμήΣταθερή απόσταση ίση με την τιμή σε pixel ή σε εκατοστά

11 CSS – Cascading Style Sheets (Ιδιότητα letter-spacing) h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} Επικεφαλίδα επιπέδου 1 Επικεφαλίδα επιπέδου 4

12 CSS – Cascading Style Sheets (Ιδιότητα text-align) Καθορίζει τη στοίχιση του στοιχείου html ΤιμήΠεριγραφή leftΑριστερή στοίχιση rightΔεξιά Στοίχιση centerΣτοίχιση στο κέντρο justifyΠλήρης στοίχιση (ευθυγράμμιση με το δεξιό και το αριστερό περιθώριο)

13 CSS – Cascading Style Sheets (Ιδιότητα text-align) h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} p {text-align: justify} Επικεφαλίδα επιπέδου 1 Επικεφαλίδα επιπέδου 2 Επικεφαλίδα επιπέδου 3 Αυτή είναι μια παράγραφος με πλήρη στοίχιση. Το κείμενο ευθυγραμμίζεται και με το αριστερό και με το δεξιό περιθώριο. Μικρύνετε το παράθυρο του φυλλομετρητή ώστε η ευθυγράμμιση να φανεί καλύτερα.

14 CSS – Cascading Style Sheets (Ιδιότητα text-decoration) Χρησιμεύει στη «διακόσμηση» του κειμένου ΤιμήΠεριγραφή noneΕξορισμού τιμή. Κανονικό κείμενο underlineΥπογράμμιση overlineΕπιγράμμιση line-throughΔιαγράμιση blinkΤο κείμενο αναβοσβήνει (δεν λειτουργεί στον Internet Explorer)

15 CSS – Cascading Style Sheets (Ιδιότητα text-decoration) h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration: blink} Επικεφαλίδα επιπέδου 1 Επικεφαλίδα επιπέδου 2 Επικεφαλίδα επιπέδου 3 Επικεφαλίδα επιπέδου 4

16 CSS – Cascading Style Sheets (Ιδιότητα text-indent) Δημιουργεί εσοχή πρώτης γραμμής στο κείμενο (δέχεται και αρνητικές τιμές για δημιουργία προεξοχής) ΤιμήΠεριγραφή τιμήΚαθορίζει σταθερή εσοχή ίση με την τιμή σε εικονοστοιχεία ή εκατοστά %Εσοχή ίση με το ποσοστό % του πλάτους του γονικού στοιχείου

17 CSS – Cascading Style Sheets (Ιδιότητα text-indent) p {text-indent: 1cm} Αυτή είναι μια παράγραφος κειμένου με εσοχή πρώτης γραμμής ίση με 1 εκατοστό. Μικρύνετε το παράθυρο του φυλλομετρητή για να φανεί καλύτερα η εσοχή.

18 CSS – Cascading Style Sheets (Ιδιότητα text-transform) Μετατρέπει τα γράμματα του κειμένου σε κεφαλαία ή μικρά ΤιμήΠεριγραφή noneΕξορισμού τιμή. Κανονικό κείμενο. capitalizeΤα πρώτα γράμματα όλων των λέξεων κεφαλαία uppercaseΌλα τα γράμματα κεφαλαία lowercaseΌλα τα γράμματα μικρά

19 CSS – Cascading Style Sheets (Ιδιότητα text-transform) p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} Αυτό είναι το κείμενο μιας παραγράφου

20 CSS – Cascading Style Sheets (Ιδιότητα white-space) Χειρίζεται τον κενό χώρο (διαστήματα και γραμμές) σε ένα στοιχείο html ΤιμήΠεριγραφή normalΕξορισμού τιμή. Ο κενός χώρος αγνοείται από το φυλλομετρητή. preΟ κενός χώρος διατηρείται ως έχει. nowrapΤο κείμενο δεν αναδιπλώνεται μέχρι να εντοπιστεί ετικέτα

21 CSS – Cascading Style Sheets (Ιδιότητα white-space – παράδειγμα μη αναδίπλωσης κειμένου) p {white-space: nowrap} Αυτή η παράγραφος κειμένου δεν αναδιπλώνεται ποτέ όσο κι αν μικρύνουμε το παράθυρο του φυλλομετρητή.

22 CSS – Cascading Style Sheets (Ιδιότητα white-space – παράδειγμα διατήρησης κενού χώρου) p {white-space: pre} Αυτή η παράγραφος κειμένου διατηρεί τα κενά διαστήματα, τις αλλαγές γραμμών και τις κενές γραμμές.

23 CSS – Cascading Style Sheets (Ιδιότητα word-spacing) Μεταβάλλει την απόσταση μεταξύ των λέξεων (δέχεται και αρνητικές τιμές) ΤιμήΠεριγραφή normalΕξορισμού τιμή. Κανονική απόσταση μεταξύ των λέξεων. απόστασηΜια τιμή απόστασης σε εικονοστοιχεία ή εκατοστά.

24 CSS – Cascading Style Sheets (Ιδιότητα word-spacing) p { word-spacing: 30px } Οι λέξεις αυτού του κειμένου απέχουν μεταξύ τους κατά 30 εικονοστοιχεία.

25 CSS – Cascading Style Sheets (Ιδιότητα text-shadow) Δημιουργεί σκιά στα γράμματα του κειμένου Δέχεται τρεις παραμέτρους: την οριζόντια μετατόπιση και την κατακόρυφη μετατόπιση, και το χρώμα της σκιάς π.χ. p {text-shadow: 0.1cm 0.1cm red}

26 CSS – Cascading Style Sheets (Ιδιότητα text-shadow) p {text-shadow: 0.1cm 0.1cm red } Οι λέξεις αυτού του κειμένου έχουν κόκκινη σκιά.

27 CSS – Cascading Style Sheets (Ιδιότητα vertical-align) Καθορίζει την κατακόρυφη στοίχιση ενός στοιχείου ΤιμήΠεριγραφή απόστασηΜετατόπιση κατά την καθοριζόμενη απόσταση (και αρνητικές τιμές) %Μετατόπιση κατά το καθοριζόμενο ποσοστό σε σχέση με την ιδιότητα line-height (και αρνητικές τιμές) baselineΣτοίχιση της γραμμής βάσης του στοιχείου με τη γραμμή βάσης του γονικού στοιχείου (προεπιλεγμένη τιμή) subΣτοίχιση του στοιχείου σαν να ήταν δείκτης

28 CSS – Cascading Style Sheets (Ιδιότητα vertical-align) ΤιμήΠεριγραφή superΣτοίχιση του στοιχείου σαν να ήταν εκθέτης topΤο πάνω μέρος του στοιχείου στοιχίζεται με το πάνω μέρος του ψηλότερου στοιχείου της γραμμής text-topΤο πάνω μέρος του στοιχείου στοιχίζεται με το πάνω μέρος της γραμματοσειράς του γονικού στοιχείου middleΤο στοιχείο τοποθετείται στη μέση του γονικού στοιχείου bottomΤο κάτω μέρος του στοιχείου στοιχίζεται με το χαμηλότερο στοχείο της γραμμής text-bottomΤο κάτω μέρος του στοιχείου στοιχίζεται με το κάτω μέρος της γραμματοσειράς του γονικού στοιχείου

29 CSS – Cascading Style Sheets (Ιδιότητα vertical-align) img.tp {vertical-align:top} img.mddl {vertical-align:middle} img.bttm {vertical-align:bottom} Μια εικόνα μέσα σε παράγραφο με κατακόρυφη στοίχιση top. Μια εικόνα μέσα σε παράγραφο με κατακόρυφη στοίχιση middle. Μια εικόνα μέσα σε παράγραφο με κατακόρυφη στοίχιση bottom.


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

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


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