CSS 101 – πρώτα βήματα

Οι ιδιότητες CSS μοιάζουν αρκετά με αυτές των ετικετών HTML. Αν για παράδειγμα θέλουμε να κάνουμε το background μιας σελίδας κόκκινο, στην HTML θα γράφαμε <body bgcolor="#FF0000">
ενώ με CSS έχουμε το ίδιο αποτέλεσμα γράφοντας body { background-color: #ff0000; }
Η βασική σύνταξη του CSS αποτελείται από τρια κομμάτια: selector (που αντιστοιχεί κάθε φορά σε ένα στοιχείο, δηλαδή σε μια ετικέτα HTML, στην προκειμένη περίπτωση το body), property (ιδιότητα του στοιχείου, στην προκειμένη περίπτωση background-color) και value (δηλαδή την τιμή που παίρνει αυτή η ιδιότητα, εδώ #ff0000 που είναι ο δεκαεξαδικός κωδικός του κόκκινου). Για να ορίσουμε ιδιότητες για έναν selector παραθέτουμε μέσα στο άγκιστρο το όνομα της ιδιότητας και μετά από άνω και κάτω τελεία την τιμή του. Δύο διαδοχικές ιδιότητες χωρίζονται με ; π.χ. body { background-color: #ff0000; color: #0000ff;}

Τα φύλλα στυλ μπορούν να εφαρμοστούν σε μια σελίδα HTML με διάφορους τρόπους:

  • inline – δηλαδή μέσα στην ίδια την ετικέτα HTML, χρησιμοποιώντας την ιδιότητα style: <p style="background-color: #ff0000;">
    Η «εντολή» αυτή αφορά μόνο τη συγκεκριμένη ετικέτα p σε αυτήν τη σελίδα. Οι υπόλοιπες παράγραφοι (p) εμφανίζονται με το προκαθορισμένο background-color του browser.
  • embedded – δηλαδή μέσα στη σελίδα HTML, βάζοντας στο head της σελίδας την ετικέτα <style>:
    <html>
    <head>
    <title>Example<title>
    <style type=»text/css»>
    p { background-color: #ff0000; }
    </style>
    </head>
    <body>
    <p>Περιεχόμενο της σελίδας</p>
    <p>Κάθε παράγραφος αυτής της σελίδας έχει κόκκινο background</p>
    </body>
    </html>
    Στην περίπτωση αυτή, όλες οι παράγραφοι της ίδιας σελίδας έχουν τις ιδιότητες που τους καθορίσαμε με CSS.
  • external – με εξωτερικό φύλλο στυλ, το οποίο συνδέουμε χρησιμοποιώντας την ετικέτα <link> στο head της σελίδας:
    <link rel="stylesheet" type="text/css" href="styles/mystyle.css" />*
    όπου mystyle.css είναι το όνομα που έχουμε δώσει στο αρχείο CSS και styles/mystyle.css ή διαδρομή όπου βρίσκεται το αρχείο mystyle.css μέσα στο root directory.
    Το ίδιο αρχείο CSS μπορεί να συνδεθεί σε πολλές σελίδες HTML, ορίζοντας έτσι τη μορφή της ετικέτας <p > ομοιόμορφα σε ένα σάιτ.
    * Το τελικό / στο κλείσιμο της ετικέτας είναι απαραίτητο μόνο αν γράφετε XHTML – στην HTML δεν χρειάζεται

Οι τρεις αυτοί τρόποι μπορούν να χρησιμοποιηθούν ξεχωριστά είτε σε συνδυασμό. Από τους τρείς ο πιο ενδεδειγμένος είναι τα εξωτερικά φύλλα στυλ γιατί βοηθάει ν’αποκτήσουν ενιαία μορφή όλες οι σελίδες του σάιτ, χωρίς να φορτώνεται κάθε μια ετικέτα χωριστά με ιδιότητες που δεν έχουν να κάνουν με τη σημασία της. Είναι πολύ πιο βολικός διότι με μια αλλαγή στην τιμή μπορεί κανείς να τροποποιήσει την ετικέτα σε όλες τις σελίδες – χωρίς να διακινδυνεύει να έχει ξεχάσει κάποια. Επιτρέπει εναλλαγή για διαφορετικές μορφές της ίδιας σελίδας (π.χ. άλλο stylesheet για την οθόνη κι άλλο για εκτύπωση). Και τέλος φτιάχνει πιο «ελαφρές» σελίδες που κατεβαίνουν πιο γρήγορα και καταναλώνουν λιγότερο bandwidth.
Υπάρχει κι άλλος τρόπος σύνδεσης ενός εξωτερικού φύλλου στυλ (με @import), αλλά δεν θα ασχοληθούμε μαζί του προς το παρόν.

Πριν κάνουμε όμως τη βουτιά στα βαθειά κι αρχίσουμε να γράφουμε αρχεία CSS, ας δούμε αν χρειάζεται ειδικό software γι αυτή τη δουλειά. Τα εξωτερικά αρχεία CSS μπορούν να γραφούν σε έναν απλό text editor, όπως είναι το Notepad, σε HTML editors που επιτρέπουν επεξεργασία του πηγαίου κώδικα (όπως π.χ. ο Dreamweaver) είτε σε ειδικούς CSS editors, όπως ο Top Style (που έχει και δωρεάν έκδοση, το Top Style lite, ο οποίος έρχεται και «πακέτο» ως pluggin με τις τελευταίες εκδόσεις του Dreamweaver). Στα πλεονεκτήματα ενός CSS editor συμπεριλαμβάνονται η δυνατότητα αυτόματης συμπλήρωσης της ιδιότητας (auto completion) και η εμφάνιση σε λίστα όλων των δυνατών γι αυτήν τιμών (ιδιότητα που με βολεύει ιδιαίτερα γιατί με γλυτώνει από τα τυπογραφικά λάθη), άμεση παρουσίαση της μορφής του στυλιζαρισμένου στοιχείου σε ξεχωριστό παράθυρο (για να βλέπουμε τι κάναμε), έλεγχο για το κατά πόσον οι εντολές που γράφουμε υποστηρίζεται από διάφορους browser (ο μόνιμος πονοκέφαλος) ή είναι έγκυρες (validation). Γενικά ένας CSS editor μπορεί να χρησιμεύσει ως εργαλείο εκμάθησης στα πρώτα βήματα και για οικονομία χρόνου σε όλες τις περιπτώσεις. Πάντως δεν είναι απαραίτητος, αφού τα αρχεία CSS είναι απλά αρχεία text. Ο Top Style lite είναι ο μοναδικός editor που έχω δοκιμάσει – μια αναζήτηση όμως θα σας δώσει πολλές ακόμα προτάσεις για δωρεάν λύσεις.

Για το τέλος το κερασάκι – τι σημαίνει το cascade στα cascading style sheets; Συγχωρεστε μου την αδυναμία μετάφρασης της λέξης, διάταξη κατά κατιούσα παράθεση λέει το λεξικό. Πρακτικά αναφέρεται στον τρόπο που εφαρμόζονται οι τιμές των ιδιοτήτων στην ιεραρχία της HTML σελίδας. Οι ετικέτες HTML έχουν μια λογική δομή και ιεραρχία γονέα-παιδιών. Για παράδειγμα η ετικέτα body μπορεί να περιέχει ετικέτες div, οι οποίες με τη σειρά τους να περιέχουν ετικέτες p, ul, table κ.λπ. Το body είναι γονέας του κάθε div, που με τη σειρά του είναι γονέας των p, u, table. Μια τιμή που εφαρμόζεται σε κάποια ιδιότητα του γονέα, «κληροδοτείται» και στα παιδιά του, εκτός αν για αυτά οριστεί ξεχωριστά μια άλλη τιμή. Ας πούμε ότι στην ετικέτα body έχουμε ορίσει font-family (γραμματοσειρά) Arial. body { font-family: Arial; }
Η γραμματοσειρά αυτή θα εμφανίζεται και στις div, και κατόπιν στις p, ul, table κ.λ.π. Αν εμείς για κάποιο στοιχείο θέλουμε μια άλλη γραμματοσειρά θα πρέπει να το ορίσουμε ειδικά, π.χ. ul { font-family: "Times New Roman"; }
Το cascade λοιπόν είναι η εφαρμογή των κανόνων των ιδιοτήτων ιεραρχικά από πάνω προς τα κάτω. Αν κάποιο στοιχείο έχει περισσότερες από μια δυνατές τιμές για μια ιδιότητα, υπερισχύει η «κοντινότερη» στο στοιχείο. Δηλαδή η εντολή που δηλώνεται σε embedded style υπερισχύει αυτής που βρίσκεται σε εξωτερικο φύλλο στυλ και το inline υπερισχύει του embedded! Δείτε ένα παράδειγμα στην εικόνα που ακολουθεί κι από κάτω βρείτε τον (σχολιασμένο) πηγαίο κώδικα:

example.gif

<html>
<head>

<title>The Cascade</title>

<style type=»text/css» >
body { background-color: #ffffff; color: #000099; font-family:Verdana; }
ul { color: #cc0000; }
table { background-color:#ccccff; }
p { font-family: «Comic Sans MS»; }
</style>
</head>

<body>
<h1>heading: Αφού δεν έχουμε ορίσει καθόλου τιμές για τις ιδιότητές του, κληρονομεί αυτές που ορίσαμε στον γονέα του body</h1>
<p>Πρώτη παράγραφος. Κληρονομεί background και color από το body, αλλά έχει τη δική του γραμματοσειρά.</p>
<p style=»font-family: ‘Times New Roman’;»>Η δεύτερη παράγραφος παίρνει άλλη γραμματοσειρά γιατί την έχουμε ορίσει inline και έτσι υπερισχύει της embedded.</p>
<ul>
<li>Η λίστα κληρονομεί γραμματοσειρά και background από το body</li>
<li>Το color ορίζεται ειδικά για την ετικέτα ul κόκκινο, και κληροδοτείται στα παιδιά της, τις ετικέτες li </li>
</ul>
<table width=»25%»>
<tr>
<td>table</td>
<td>cells</td>
</tr>
</table>
<p>O πίνακας (table) έχει το δικό του background όπως ορίζεται στο embedded style και κληρονομεί όλα τα υπόλοιπα από το body</p>
</body>
</html>

Για τις ιδιότητες που δεν έχουν οριστεί πουθενά τιμές, ακολουθούνται οι προκαθορισμένες τιμές που έχει ο κάθε browser για να μορφοποιεί την κάθε ετικέτα.

Στο επόμενο κείμενο θα φτιάξουμε ένα stylesheet. Για όσους ανυπομονούν, υπάρχουν και τα tutorial W3schools και Friendly bit

Advertisements

Σχολιάστε

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

Λογότυπο WordPress.com

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

Φωτογραφία Twitter

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

Φωτογραφία Facebook

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

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

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

Σύνδεση με %s

Blog στο WordPress.com.

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