Basic HTML Version
Linux Inside
73
Πρέπει να προσέξουμε τις διαστάσεις αυτών των δύο ιδιοτή-
των καθώς και των padding, margin, γιατί, αν δεν έχουμε υπο-
λογίσει καλά τις τιμές των pixels, θα έχουμε πρόβλημα με τη
στοίχιση των πλαισίων τους. Εδώ να σημειώσουμε ότι η διαστα-
σιολόγηση των στοιχείων στην CSS μπορεί, εκτός από px
(pixel), να γίνει και με άλλους τρόπους – για να είναι πιο εύκολα
αντιληπτό το παράδειγμά μας, εμείς θα χρησιμοποιήσουμε τα
px. Άλλη μία πολύ βασική ιδιότητα είναι η display, με την οποία
ένα στοιχείο εμφανίζεται σαν να ήταν τμήμα μιας γραμμής
(inline) ή σαν ένα ξεχωριστό μπλοκ (block). Με την ιδιότητα
float ορίζουμε τη στοίχιση ενός αντικειμένου σε σχέση με το
πλαίσιο που το περιβάλλει. Κάθε στοιχείο της html περιβάλλε-
ται από ένα πλαίσιο που εκ των προτέρων είναι αόρατο. Αν θέ-
λουμε, μπορούμε να το εμφανίσουμε και να του δώσουμε ένα
συγκεκριμένο χρώμα ή στυλ – εμείς αυτό το έχουμε κάνει πιο
πάνω με τις ιδιότητες border-style και border-color.
Ας εισαγάγουμε τώρα ακόμα μερικά στοιχεία html και πε-
ριεχόμενο, για να παρουσιάσουμε και κάποιες άλλες ιδιότη-
τες.
<div id="logo">
<img src="images/logo.png" alt="" />
</div> <!--κλείσιμο του logo-->
<div id="moto">
<h1 class="centerparag">...η έγκυρη ενημέρωση σας</h1>
</div><!--κλείσιμο του moto-->
<div id="navigation">
<ul>
<li><a href="#">Αρχική</a></li>
<li><a href="#">Ειδήσεις</a></li>
<li><a href="#">Αθλητικά</a></li>
<li><a href="#">Επικοινωνία</a></li>
</ul>
</div><!-- κλείσιμο του navigation -->
<div id="maincontent">
<h2>Lorem Ipsum</h2>
<p>Το Lorem Ipsum είναι απλά ένα κείμενο... </p>
</div><!-- κλείσιμο του maincontent -->
<div id="footer">
<p class="centerparag boit">Προκόπης Μελάχρης για το
Linuxinside</p>
</div><!-- κλείσιμο του footer -->
Παραπάνω διαμορφώσαμε την ετικέτα p έτσι, ώστε να έχει
κάποιες συγκεκριμένες ιδιότητες όπου εμφανίζεται, υπάρ-
χουν όμως περιπτώσεις που ίσως χρειαστεί να υπάρξει επι-
πλέον μορφοποίηση σε κάποιες μόνο από τις ετικέτες. Σε αυ-
τή την περίπτωση ορίζουμε μία κλάση (class) με τις ιδιότητες
που μας ενδιαφέρουν και την καλούμε μέσα στο tag του στοι-
χείου που μας ενδιαφέρει με την ιδιότητα class. Κάθε στοι-
χείο μπορεί να συσχετιστεί με πολλές κλάσεις, αρκεί αυτές να
είναι χωρισμένες μεταξύ τους με κενό. Για τις ανάγκες του
blog χρειάστηκε να ορίσουμε τις κλάσεις centerparag και boit:
.centerparag{
text-align:center;
}
.boit{
font-style:italic;
font-weight:bold;
}
Όπως παρατηρούμε, η σύνταξή τους αποτελείται από μία
τελεία, ακολουθούμενη από το επιθυμητό όνομα.
Αυτό που έχει μείνει τώρα για να ολοκληρώσουμε το έργο
μας είναι να γράψουμε τις ιδιότητες για το μενού. Τα στοιχεία
του μενού δεν είναι τίποτε άλλο από απλούς υπερσυνδέ-
σμους. Για να τους ορίσουμε ιδιότητες, όμως, θα χρησιμοποι-
ήσουμε τις ψευδοκλάσεις. Οι ψευδοκλάσεις αποτελούνται
από το όνομα του στοιχείου html, ακολουθούμενο από : και
την ενέργεια που εκτελεί.
a,a:link,a:visited,a:hover{
text-decoration:none;
}
#navigation li{
display:inline-block;
font-weight:bold;
background-color:#FC0;
float: left;
height: 25px;
padding: 2px 10px 2px 10px;
margin:0 5px 0 5px;
list-style:none;
}
#navigation li:hover{
display:inline-block;
background-color:#42CBE8;
float: left;
height: 25px;
padding: 2px 10px 2px 10px;
margin:0 5px 0 5px;
list-style:none;
Αυτό ήταν! Το template του ειδησεογραφικού μας blog εί-
ναι έτοιμο. Μπορεί να μην διεκδικεί κάποιο βραβείο σχεδία-
σης (άλλωστε, δεν ήταν αυτός ο στόχος), αλλά καταφέραμε
να δούμε κάποια εισαγωγικά πράγματα πάνω στην CSS, τα
οποία είναι πολύ χρήσιμα για όποιον θέλει να κάνει τα πρώτα
του βήματα στο Web design. •
Linux Labs - CSS
Η τελική μορφή του blog.
Σύνδεσμοι
[1] Εισαγωγικά μαθήματα: http://www.w3schools.com/css
[2] Τι είναι η CSS: http://goo.gl/G52dw
[3] Tutorials & Demos: https://developer.mozilla.org/en/CSS
[4] Οδηγός για αρχάριους: http://goo.gl/4L74j