e-Learning Education

5. Στυλ κειμένου με CSS

Σχετικά με τα Στυλ κειμένου με CSS

Στυλ κειμένου με cssΣε προηγούμενο μάθημα html είδαμε πώς να εφαρμόζουμε εσωτερικό στυλ σε κείμενο οποιασδήποτε html ετικέτας. Στο μάθημα αυτό θα δούμε παραδείγματα εφαρμογής Στυλ κειμένου με CSS κανόνες.

 

 

Χρώμα κειμένου – color

Το χρώμα στο web ορίζεται με τρεις τρόπους:

  • Με δεκαεξαδική τιμή: “ff0000”
  • Χρωματικό μοντέλο RGB – Συνδυασμός τιμών των χρωμάτων Red, Green, Blue με τιμές 0-255. Παράδειγμα: rgb(255,0,0).
  • Όνομα χρώματος: Red

Μπορούμε να ορίσουμε με κανόνες css το χρώμα του κειμένου στις ετικέτες που θέλουμε. Έστω το ακόλουθο παράδειγμα:

 

Στυλ κειμένου με CSSΣτο παράδειγμα αυτό έχει οριστεί ένα εσωτερικό στυλ κανόνων style με τρεις κανόνες css έναν για κάθε ετικέτα. Για την ετικέτα του σώματος της σελίδας, body, έχει οριστεί κόκκινο χρώμα κειμένου. Αυτό σημαίνει ότι το χρώμα κειμένου της σελίδας θα είναι εξ’ ορισμού κόκκινο εάν δεν επηρεάζεται από άλλον κανόνα. Βλέπουμε λοιπόν ότι η 1η παράγραφος παίρνει αυτόματα το οριζόμενο χρώμα της ετικέτας body.

Ο κανόνας h1 αφορά το χρώμα της ετικέτας της κεφαλίδας 1. Αυτόματα λοιπόν, η κεφαλίδα 1 θα έχει χρώμα πράσινο. Ο κανόνας p.myclass αφορά την ετικέτα παραγράφου αλλά με μια σημαντική διαφορά. Επειδή θέλουμε να εφαρμόσουμε το μπλε χρώμα σε όποια παράγραφο θελήσουμε και όχι σε όλες, ορίζουμε μια κλάση, για παράδειγμα myclass, έτσι ώστε να την καλέσουμε όποτε θελήσουμε να εφαρμόσουμε την συγκεκριμένη μορφοποίηση. Περισσότερα για τις κλάσεις έχουμε μιλήσει σε παλιότερο μάθημα.

 

Στοίχιση κειμένου – text-align

Ένα από τα συχνά χρησιμοποιούμενα στυλ κειμένου με CSS είναι η στοίχιση. Την στοίχιση του κειμένου, οριζόντια, την ορίζουμε με την ιδιότητα text-align. Οι τιμές που παίρνει είναι left, justify, right. Ας δούμε το επόμενο παράδειγμα:

Στυλ κειμένου με CSSΗ καλύτερη εφαρμογή στοίχισης κειμένου είναι με την χρήση παραγράφων. Για να το πετύχουμε αυτό, μέσα στο εσωτερικό στυλ css ορίζουμε 3 κλάσεις παραγράφου. Σε κάθε κλάση καλούμε την ιδιότητα text-align θέτοντας την αντίστοιχη τιμή. Στο κυρίως σώμα της σελίδας, body, και σε κάθε παράγραφο p, καλούμε την αντίστοιχη κλάση ώστε να δώσουμε την στοίχιση που θέλουμε στο κείμενο.

 

Διακόσμηση κειμένου – text-decoration

Η ιδιότητα text-decoration διακοσμεί το κείμενο με:

  • Άνω γραμμή, overline
  • Γραμμή διαγραφής, line-through
  • Υπογράμμιση, underline

Ας δούμε το ακόλουθο παράδειγμα:

Στυλ κειμένου με CSS

Σε αυτό το παράδειγμα ορίζουμε 3 κανόνες css για τις 3 πρώτες html ετικέτες κεφαλίδων. Για κάθε μια ετικέτα κεφαλίδας, η ιδιότητα text-decoration παίρνει και μια διαφορετική τιμή. Στην συνέχεια στο κυρίως σώμα της σελίδας χρησιμοποιούμε τις αντίστοιχες ετικέτες κεφαλίδων οπότε και οι κανόνες css εφαρμόζονται αυτόματα.

 

Μετατροπή κειμένου – text-transform

Ακόμα ένα χαρακτηριστικό στα στυλ κειμένου με CSS είναι η μετατροπή του. Η ιδιότητα text-transform μετατρέπει το κείμενο σε:

  • Μικρά γράμματα, lowercase
  • Κεφαλαία γράμματα, uppercase
  • Το πρώτο γράμμα κάθε λέξης κεφαλαίο, capitalize

Ας δούμε το ακόλουθο παράδειγμα:

Στυλ κειμένου με CSS

Σε αυτό το παράδειγμα ακολουθούμε την ίδια μέθοδο με αυτή της στοίχισης του κειμένου. Δημιουργούμε 3 κανόνες css για την ίδια ετικέτα παραγράφου p. Για κάθε κανόνα ορίζουμε μια κλάση. Σε κάθε κανόνα υπάρχει και μια διαφορετική τιμή για την ιδιότητα text-decoration. Στην συνέχεια στο κυρίως σώμα της σελίδας χρησιμοποιούμε τρείς παραγράφους. Σε κάθε παράγραφο καλούμε την αντίστοιχη κλάση παραγράφου. Με τον τρόπο αυτό εφαρμόζεται η αντίστοιχη μορφοποίηση.

 

Εσοχή κειμένου – text-indent

Η ιδιότητα text-indent ωθεί το κείμενο της πρώτης γραμμής μιας παραγράφου x pixels δεξιά. Μπορούμε να ορίσουμε και αρνητική τιμή. Στην περίπτωση αυτή, το κείμενο θα ωθήσουμε το κείμενο αριστερά.

Στυλ κειμένου με CSS

 

Επίλογος στα στυλ κειμένου

Σε αυτό το μάθημα είδαμε τα βασικά στυλ κειμένου με CSS τα οποια υλοποιούνται με κανόνες css. Περισσότερα στυλ κειμένου και παραδείγματα μπορούμε να δούμε στο http://www.w3schools.com/css/css_text.asp