Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας"

Ἀγλαΐη Μαυρίδης
7 χρόνια πριν
Προβολές:

1 Γραμματοσειρά Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας Γραμματοσειρά κειμένου Με την CSS ιδιότητα font-family ορίζουμε την γραμματοσειρά του κειμένου. Ορισμός γραμματοσειράς font-family: courier Δοκιμάστε να αλλάξετε την γραμματοσειρά βάζοντας στην θέση της Courier, την γραμματοσειρά Tahoma ή Arial ή κάποια άλλη που γνωρίζετε Μια σημαντική δυνατότητα είναι να ορίζουμε παραπάνω από μια γραμματοσειρά, ώστε αν ο υπολογιστής του χρήστη δεν υποστηρίζει την πρώτη στην σειρά γραμματοσειρά, να εφαρμόζεται η επόμενη κ.ο.κ. Ορισμός γραμματοσειράς font-family: Tahoma, Arial, "Times New Roman" Η γραμματοσειρά που θα εφαρμοστεί στο κείμενο των παραγράφων (Επιλογέας p) είναι η Tahoma. Αν ο υπολογιστής του χρήστη δεν την υποστηρίζει, τότε θα εφαρμοστεί η Arial. Αν ούτε η Arial δεν υποστηρίζεται απο τον υπολογιστή του χρήστη τότε θα εφαρμοστεί η γραμματοσειρά Times New Roman Στο στυλ του παραπάνω παραδείγματος είδαμε το Times New Roman γράφεται μέσα σε εισαγωγικά. Στην CSS όταν το όνομα μιας γραμματοσειρά αποτελείται από παραπάνω από μια λέξη, τότε αυτό το εσωκλείουμε σε εισαγωγικά. Στυλ γραμματοσειράς Με την CSS ιδιότητα font-style εμφανίζουμε το κείμενο σε πλάγια μορφή (italics). Οι τιμές που μπορεί να πάρει είναι 3: : όταν θέλουμε να μην εφαρμοστεί κανένα στυλ. italics: όταν θέλουμε να εμφανίσουμε το κείμενο με πλάγιους χαρακτήρες oblique: όταν θέλουμε να εμφανίσουμε το κείμενο με λιγότερο πλάγιους χαρακτήρες απ'ότι γίνεται με την τιμή italics. Δεν χρησιμοποιείται συχνά Στυλ στο κείμενο των επικεφαλίδων h3 { font-style: italic; Μέγεθος γραμματοσειράς Με την CSS ιδιότητα font-size ορίζουμε το μέγεθος της γραμματοσειράς. Οι τιμές που παίρνει η ιδιότητα αυτή, μπορεί να είναι απόλυτες ή σχετικές τιμές:

2 Απόλυτες τιμές: όταν ορίζουμε απόλυτες τιμές, δεν μπορεί ο χρήστης να αλλάξει το μέγεθος του κειμένου της ιστοσελίδας, πράγμα αρνητικό όταν θέλουμε να είναι προσβάσιμη και απο ανθρώπους με προβλήματα όρασης, αν και οι απόλυτες τιμές χρησιμοποιούνται πιο συχνά απο τις σχετικές. Όταν χρησιμοποιούμε τιμές σε pixels (πχ. font-size: 14px;) ή σε em (πχ. font-size: 1.2em;), τότε ορίζουμε απόλυτες τιμές Σχετικές τιμές: με αυτον τον τρόπο ορίζουμε το μέγεθος του κειμένου σε σχέση με το μέγεθος του στοιχείου στο οποίο βρίσκεται το κείμενο. Στην περίπτωση αυτή ο χρήστης μπορεί να αλλάξει το μέγεθος του κειμένου χρησιμοποιώντας τις επιλογές του browser. Όταν χρησιμοποιούμε τιμές με ποσοστό % (πχ. font-size: 80%) ή τιμές όπως smaller (πχ. font-size: smaller) και larger (πχ. font-size: larger), τότε ορίζουμε σχετικές τιμές (δείτε τον πίνακα παρακάτω με όλες τις διαθέσιμες τιμές που μπορεί να πάρει η ιδιότητα font-size) Στην περίπτωση που δεν ορίσουμε μέγεθος για το κείμενο της σελίδας μας, τότε η εξορισμού τιμή είναι 16px ή 1em (16px = 1em) Μέγεθος γραμματοσειράς με απόλυτη τιμή font-size: 20px; font-size: 12px; p.descr { font-size: 1.5em; Αλλάξτε το μέγεθος της γραμματοσειράς χρησιμοποιωντας μεγέθη σε px ή em Δοκίμασε το Μέγεθος γραμματοσειράς με σχετική τιμή font-size: xx-large; font-size: 150%; p.descr { font-size: large; p.descr2 { font-size: small; Αλλάξτε το μέγεθος της γραμματοσειράς χρησιμοποιωντας μεγέθη σε % ή τις τιμές όπως smaller, larger, xx-small κτλ. Δοκίμασε το Ιδιότητες της CSS για την γραμματοσειρά του κειμένου

3 Οι ιδιότητες της CSS για τον ορισμό της γραμματοσειράς ενός κειμένου, μας επιτρέπουν να ορίσουμε τον τύπο της γραμματοσειράς (όπως Tahoma, Times, Courier κτλ.), το μέγεθος της, το στυλ της, κ.α. Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες διαμόρφωσης της γραμματοσειράς του κειμένου: Ιδιότητα Τιμές Περιγραφή Ορίζει τον τύπο της γραμματοσειράς του κειμένου <html> <head> <meta content="text/html; charset=utf-8" /> <title>δοκίμασε το</title> fontfamily font-size Όνομα γραμματοσειράς xx-small x-small small medium large x-large xx-large smaller larger αριθμός σε pixels αριθμός σε % font-family: times font-family: courier p.tahoma { font-family: tahoma <body> <h1>αυτή είναι μια επικεφαλίδα</h1> <p>αυτή είναι μια παράγραφος</p> <p class="tahoma">αυτή είναι μια άλλη παράγραφός</p> </body> </html> Ορίζει το μέγεθος της γραμματοσειράς του κειμένου <html> <head> <meta content="text/html; charset=utf-8" /> <title>δοκίμασε το</title> font-size: x-large font-size: 12px p.verysmall {

4 font-style fontvariant fontweight italic oblique small-caps bold bolder lighter font-size: xx-small <body> <h1>αυτή είναι μια επικεφαλίδα</h1> <p>αυτή είναι μια άλλη επικεφαλίδα</p> <p class="verysmall">αυτή είναι μια παράγραφός</p> </body> </html> Ορίζει το στυλ της γραμματοσειράς του κειμένου = το κείμενο εμφανίζεται χωρίς κανένα απο τα επόμενα δύο στυλ italic = το κείμενο εμφανίζεται με πλάγιους χαρακτήρες oblique = το κείμενο εμφανίζεται με πλάγιους και έντονους χαρακτήρες font-style: font-style: italic h2 { font-style: oblique Εμφανίζει το κείμενο με κεφαλαία font-variant: small-caps Ορίζει την έντονη γραφή της γραμματοσειράς του κειμένου p. { font-weight: p.thick { font-weight: bold p.thicker {

5 font-weight: 900

Σχετικά έγγραφα

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής

Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.