CSS 101 – Γράφοντας κείμενο

Σημείωση: Στα επόμενα παραδείγματα για λόγους συνοχής (και για να μπορείτε να κάνετε copy/paste όλου του περιεχομένου για να φανεί το παράδειγμα στον δικό σας browser) τα φύλλα στυλ θα είναι ενσωματωμένα (embedded) – δηλαδή μέσα στο head της σελίδας HTML στην ετικέτα <style>.

Το κείμενο είναι συνήθως το πρώτο κομμάτι της σελίδας πάνω στο οποίο σκεφτόμαστε να επέμβουμε – εξοικειωμένοι οι περισσότεροι με τους επεξεργαστές κειμένου. Τα φύλλα στυλ μας δίνουν τη δυνατότητα να διαμορφώσουμε την εμφάνιση ολόκληρης κατηγορίας ετικετών, είτε κομματιών της. Μπορούμε δηλαδή να καθορίσουμε τη γραμματοσειρά, το μέγεθος, το χρώμα, τη στοίχιση κ.λπ. έτσι ώστε να είναι ίδιες για όλες τις παραγράφους του κειμένου, αρκεί να ορίσουμε τις αντίστοιχες ιδιότητες στυλ για την ετικέτα μεγαλύτερη <p>.
Σύμφωνα με το CSS1 υπάρχουν 5 ιδιότητες της κατηγορίας font που μπορεί να ορίσει κανείς:

  1. font-family
  2. font-style
  3. font-variant
  4. font-weight
  5. font-size

Για να καθορίσουμε π.χ. τη γραμματοσειρά, χρησιμοποιούμε την ιδιότητα font-family. Η εντολή
p { font-family: Arial; }
έχει αποτέλεσμα όλες οι παράγραφοι της σελίδας να είναι σε γραμματοσειρά Arial. Αν καθορίσουμε τη γραμματοσειρά στο στοιχείο body, κάθε στοχείο που βρίσκεται μέσα στην ετικέτα body θα «κληρονομήσει» αυτήν την ιδιότητα (λόγω του cascade), εκτός αν προσδιορίσουμε γι αυτό μια άλλη γραμματοσειρά.
Στο παρακάτω παράδειγμα θα δούμε μια εφαρμογή αυτού του κανόνα.

<html>
<head>
<title>Παράδειγμα εφαρμογής της ιδιότητας font-family</title>

<style type=»text/css»>
<!–
body { font-family: Arial, Helvetica, sans-serif; }
h1 { font-family: «Times New Roman», Times, serif; }
p { font-family: «Courier New», Courier, monospace; }
em { font-family: «Comic Sans MS», cursive; }
–>
</style>
</head>

<body>
<h1>Παράδειγμα εφαρμογής της ιδιότητας font-family</h1>

Αυτό το κείμενο, επειδή είναι μέρος του στοιχείου body και δεν περικλείεται σε κάποια άλλη ετικέτα, θα πρέπει να εμφανίζεται σε γραμματοσειρά Arial. Το heading (Παράδειγμα εφαρμογής της ιδιότητας font-family) θα πρέπει να εμφανίζεται σε γραμματοσειρά Times New Roman.

<p>Αυτό το τμήμα, που περικλείεται από ετικέτα p (παραγράφου) θα πρέπει να εμφανίζεται σε γραμματοσειρά Courier New.</p>
<em>ενώ αυτό το τμήμα θα πρέπει να εμφανίζεται σε γραμματοσειρά Comic Sans MS</em>
</body>
</html>

Να πώς θα φαίνεται:

example11.jpg

Πρωτόλειο ακόμα, αλλά θα γίνει πιο εντυπωσιακό σιγά σιγά.

Advertisements

Σχολιάστε

Εισάγετε τα παρακάτω στοιχεία ή επιλέξτε ένα εικονίδιο για να συνδεθείτε:

Λογότυπο WordPress.com

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό WordPress.com. Αποσύνδεση / Αλλαγή )

Φωτογραφία Twitter

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Twitter. Αποσύνδεση / Αλλαγή )

Φωτογραφία Facebook

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Facebook. Αποσύνδεση / Αλλαγή )

Φωτογραφία Google+

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Google+. Αποσύνδεση / Αλλαγή )

Σύνδεση με %s

Δημιουργήστε ένα δωρεάν ιστότοπο ή ιστολόγιο στο WordPress.com.

Αρέσει σε %d bloggers: