Style Sheets Ιστού
CSS συμβουλές και κόλπα

(Αυτή η σελίδα χρησιμοποιεί CSS style sheets)

Το παρόν έγγραφο είναι μετάφραση του άρθρου «Cascading Style Sheets. CSS tips & tricks».
Αυθεντική εκδοχή του εγγράφου βρίσκεται μόνο στην ιστοσελίδα W3C www.w3.org/Style/Examples/007/maps
Η παρούσα μετάφραση ΔΕΝ είναι επίσημο έγγραφο της W3C.
Όλα τα κοπιράιτ ανήκουν στη W3C.
Το παρόν έγγραφο μπορεί να έχει λάθη της μετάφρασης και εσφαλμένη εκτύπωση.
Συγγραφέας: Dimitris Papadopoulos
Το έγγραφο μεταφράστηκε με υποστήριξη:

Μενού-κομφετί

Οι ζωηρόχρωμες επιλογές που βλέπετε παρακάτω είναι απλά ένα DIV στοιχείο με μερικά στοιχεία P μέσα. Η οπτική επίδραση οφείλεται στο γεγονός ότι κάθε στοιχείο P τοποθετείται χωριστά και έχει την δικιά της γραμματοσείρα και το χρώμα της. Λειτουργεί καλύτερα με τα σύντομα κείμενα, επειδή η οπτική επίδραση είναι βασισμένη στην επικάλυψη, αλλά εάν το κείμενο είναι πάρα πολύ μακρύ, επικαλύπτει τόσο πολύ που γίνεται δύσκολο για ανάγνωση.

Το style sheet επιτρέπει επιλογές μέχρι 10 στοιχείων, το παράδειγμα επάνω χρήσιμοποιεί 8. Εδώ είναι η πηγή HTML του παραπάνω παραδείγματος:

<div class="map">
<p id="p1"><a rel="nofolow" href="../../CSS/#news">What's new?</a>
<p id="p2"><a rel="nofolow" href="../../CSS/#learn">Learning CSS</a>
<p id="p3"><a rel="nofolow" href="../../CSS/#browsers">CSS Browsers</a>
<p id="p4"><a rel="nofolow" href="../../CSS/#editors">Authoring Tools</a>
<p id="p10"><a rel="nofolow" href="../../CSS/#specs">Specs</a>
<p id="p6"><a rel="nofolow" href="../../CSS/Test">CSS1 Test Suite</a>
<p id="p9"><a rel="nofolow" href="/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a rel="nofolow" href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Σημειώστε την κλάσση "map" στο στοιχείο DIV, η οποία το μετατρέπει σ’ έναν φορέα για το μενού, και τις ιδιότητες ID πάνω στα P. Το κάθε στοιχείο P πρέπει έχει ένα (διαφορετικό) ID ονομαζόμενο p1, p2... ή p10. Δεν είναι απαραίτητο να χρησιμοποιηθούν τα ID στη σειρά (όπως παρουσιάζει το παράδειγμα). Μπορείτε να χρησιμοποιήσετε το style sheet αντιγράφοντας το στο δικό σας style sheet ή χρησιμοποιόντας @import ή ένα στοιχείο LINK στην εισαγωγή map.css κατ’ευθείαν από τη W3C περιοχή: είτε

@import "http://www.w3.org/Style/map.css";

or

<link rel="stylesheet" rel="nofolow" href="http://www.w3.org/Style/map.css">

Επεξήγηση των style sheet

Παρακάτω φαίνεται πώς λειτουργεί το style sheet. Αρχίζει με τον καθορισμό ενός στοιχείου DIV με την κλάσση "map". Δημιουργεί ένα υψηλό διάστημα 190px στο οποίο θα τοποθετηθεί το περιεχόμενο των στοιχείων P. Στο κάθε ένα από τα στοιχεία με ID από p1 έως p10 δίνεται έπειτα ένα χρώμα και μια γραμματοσείρα, και κάθε στοιχείο τοποθετείται μέσα στο διάστημα που δημιουργείται από το DIV με τη βοήθεια της ιδιότητας 'margin': ένα αρνητικό πάνω περιθώριο κινεί το στοιχείο επάνω στο διάστημα DIV και ένα θετικό κατώ περιθώριο σιγουρεύει πως το επόμενο στοιχείο ξεκινά πάλι στο κατώ σημείο του DIV.

(Η αδυναμία του style sheet είναι ότι τα κάνει όλα σε πίξελ. Μπορείτε να θέλετε να το αλλάξετε σε ποσοστιαία χρήση αντ' αυτού, εάν έχετε έναν πλοηγό που εκτελεί το CSS αρκετά καλά.)

DIV.map {                        /* Reserve some room for the links */
  padding-top: 190px;
  margin-left: -2em;             /* Adapt this to your own page... */
  margin-right: -2em;            /* Adapt this to your own page... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

Φυσικά, είστε ελεύθεροι να αλλάξετε το style sheet για να δοκιμάσετε διαφορετικές γραμματοσειρές, χρώματα και θέσεις, ή για να δημιουργήσετε τους πρόσθετους κανόνες διαμόρφωσης για περισσότερα από 10 στοιχεία. Επίσης ρίξτε μια ματιά στα αριστερά και δεξιά περιθώρια του DIV: έχουν γίνει αρνητικά, έτσι ώστε το μενού είναι ευρύτερο από το περικυκλόμενο κείμενο, αλλά στη σελίδα σας το περιθώριο μπορεί να μην είναι αρκετά πλατύ για αυτό, και έτσι να πρέπει να αφαιρεσετε αυτούς τους κανόνες.

Εάν δοκιμάζετε αυτή την διαμόρφωση, μπορείτε να παρατηρήσετε πως δεν λειτουργεί πάρα πολύ καλά σε Netscape 4. Αυτό είναι ελάττωμα του Netscape 4, φυσικά. Παρ’ όλα αυτά, το map-ns.css είναι ένα παρόμοιο style sheet και που φαίνεται να λειτουργεί ΕΝΤΑΞΕΙ σε εκείνο τον πλοηγό. Το ακόλουθο κόλπο στην επικεφαλίδα του εγγράφου HTML σας θα επιτρέψει στην έκδοση για Netscape 4 και για τις περαιτέρω εκδόσεις τις καλύτερες πραγματοποιήσεις CSS να συνυπάρχουν:

<link rel="nofolow" href="map-ns.css" rel="stylesheet" type="text/css">
<link rel="nofolow" href="map.css" rel="stylesheet" type="text/css" media="all">

Η σωστή πραγματοποίηση CSS θα μπορεί να διαβάζει και τα δύο style sheets, αλλά οι κανόνες στο δεύτερο θα προέχουν έναντι αυτών του πρώτου, έτσι ώστε πέρα από μια λίγη άσκοπη δουλειά, δεν υπάρχουν αλλαγές. Το Netscape 4 όμως, δεν θα φορτώσει το δεύτερο style sheet, εξ αιτίας μιας ιδιότητας του "media" την οποία αυτό δεν θα καταλαβαίνει.

Επίσης, μπορεί να αναρωτηθήκατε γιατί τα στοιχεία έχουν τοποθετηθεί με τον τρόπο των (αρνητικών) περιθωρίων, την ώρα που αυτό φαίνεται να ταιριάζει για τις ιδιότητες της απολύτου θέσης. Πράγματι, μπορείτε να το κάνετε με 'position' και 'left' & 'right'. Ο λόγος που αυτό το style sheet χρησιμοποιεί περιθώρια αντί γιαυτό, είναι ότι μ’ αυτόν τον τρόπο δουλεύει σε πλοηγούς οι οποίοι χρησιμοποιούν CSS1 μόνο.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Δημιουργία 5 May 2001;
Τελευταία ανανέωση $Date: 2008/01/11 18:26:30 $ GMT