type=”email” και type=”url”

Το πεδίο αυτό
είναι το email που, όπως όλα τα καινούργια inputs συμπεριφέρεται σαν type="text"σε όσους browsers δεν υποστηρίζεται. Θα δοκιμάσουμε να δώσουμε το παρακάτω (όχι πολύ όμορφο!) στυλ και θα περιμένουμε να αποκτήσει ένα εκτυφλωτικό πράσινο border σε όλους τους σύγχρονους browsers.

input[type="text"]	{ border:1px solid #f00; }
input[type="email"],
input[type="number"],
input[type="range"],
input[type="search"],
input[type="url"]	{ border:1px solid #0f0; }

Firefox 4–5, Chrome 12, Opera 11, Internet Explorer 9 και -περιέργως- 8 μια χαρά, στον Internet Explorer 7 το border είναι κόκκινο. Δουλεύει περίπου όπως μας υποσχέθηκαν! Θα περίμενα να εμφανιστεί το κόκκινο border και στον IE 8 αλλά, φαίνεται πως ναι μεν δεν αναγνωρίζει το attribute type="email" αλλά του δίνει το κατάλληλο στυλ. Ο IE 7 «δημιουργεί» ένα type="text" attribute που είναι το default type για τα inputs και του δίνει τα αντίστοιχα στυλ.

Το ίδιο συμβαίνει και στο πεδίο url:

type="number"

Το number
συμπεριφέρεται με τον ίδιο τρόπο — πράσινο border σε όλους τους browsers, κόκκινο στον IE 7. Ο Chrome και ο Opera προσθέτουν 2 άσχημα μικρά κουμπιά-βελάκια στην δεξιά άκρη του πεδίου για τον έλεγχο της τιμής του, ενώ μπορoύμε α αλλάξουμε αυτή την τιμή και με τα βελάκια του πληκτρολογίου· αυτά όμως είναι ήδη καταγεγραμμένα, δεν έχει μείνει κάτι να προσθέσω!

type="range"

input[type="range"] {
	border:0 none;
	background-color:#009;
	color:#fff;
	width:60px;
	height:16px;
}

Το border δεν το χρειαζόμαστε — άλλωστε δεν εμφανίζεται καν σε Chrome και μάλλον είναι καλύτερα έτσι. Το background-color αγνοείται από τους browsers που σχεδιάζουν sliders αντί για inputs, όπως επίσης και το color, αφού δεν υπάρχει κείμενο να πάρει χρώμα. Οι περισσότεροι browsers σέβονται τις διαστάσεις που ζήτησα εκτός από τον Chrome που αδιαφορεί για το ύψος. Στον Opera βέβαια το ύψος ενδέχεται να δημιουργήσει πρόβλημα αφού μπορεί το χειριστήριο να γίνει τόσο μικρό που να είναι άχρηστο! Η γνώμη μου είναι -ντρέπομαι που το λέω- να χρησιμοποιήσετε jQuery UI για αυτή τη δουλειά (ή κάποιο άλλο Javascript) αφού οι διαφορές δεν είναι μόνο οπτικές αλλά και λειτουργικές.

type="date"

Για την ακρίβεια, όχι μόνο date αλλά και διάφορες παραλλαγές ημερομηνίας και ώρας. Ξεχάστε το καλύτερα, μόνο ο Opera κάνει κάτι χρήσιμο με αυτά τα πεδία ενώ ο Chrome εμφανίζει τα άσχημα μικρά βελάκια του number που δεν βοηθούν καθόλου στη συμπλήρωση του πεδίου. Καλύτερα να μείνουμε στην Javascript για λίγο ακόμα.

type="search"

Το search
δεν έχει κάποια ιδιαιτερότητα εκτός από το x που εμφανίζεται στην δεξιά μεριά σε Webkit browsers και μου επιτρέπει να καθαρίσω το πεδίο.

type="color"

Επίλογος

Μπορούμε από τώρα, άφοβα, να εντάξουμε τα email, url, number και search στον κώδικά μας αφού είναι σίγουρο πως οι browsers σιγά-σιγά θα χρησιμοποιήσουν αυτά τα πεδία για να διευκολύνουν τον χρήστη, όπως π.χ. κάνει το iOS με τα email, url και number, ενώ δεν δημιουργούν προβλήματα σε παλιότερους browsers. Χρειάζεται λίγες γραμμές παραπάνω CSS αλλά αυτό δεν είναι πρόβλημα. Για τα υπόλοιπα πεδία, range, date (και παραλλαγές) και color, εγώ δηλώνω μάλλον επιφυλακτικός αφού η εμφάνιση διαφέρει πολύ από browser σε browser και ίσως τελικά να χρειαστείτε περισσότερη Javascript. Ίσως να είναι νωρίς ακόμα, θα δούμε!

Αναλυτικότερα

Από τα 228 σχόλια που έγιναν συνολικά, τα 173 ήταν έγκυρα και καταμετρήθηκαν.
Οι ψήφοι αναλυτικά:

• 64 για το ΝtamaΚoupa
• 59 για το DesignDots
• 17 για το Plakamaskaneis

Για τις υπόλοιπες ιστοσελίδες οι ψήφοι κυμαίνονταν από 2 εώς 6 ψήφους.

Οι Νικητές

Αναλυτικότερα τα δώρα που κερδίζουν οι 173 συμμετέχοντες:

5 πακέτα Web Hosting από την TopHost.gr:
1 PLATINUM

• Nina

2 DELUXE

• Znikos
• CJ

3 ECONOMY

• ΚΙΚΗ ΟΙΚΟΝΟΜΙΔΟΥ
• Alextsits
• stefanos

20 κουπόνια δωρεάν κατοχύρωσης .EU domains από την TopHost.gr

• Stefaniespyro
• nikos
• Faidra1997
• Mike the great
• Johnmast
• Katia 2105
• Kostastsats
• Bombο
• eevi66
• aetios
• Krmaria
• Highlanderi
• Labros66s
• pinelopi
• Georgia
• Zachosgeorge03
• Rodoula4ever97
• Dinos
• Johnb
• Terrys Lalos

2 Assassin’s Creed Brotherhood για PC

• A-ni-ka
• conn_art

3 Συνδρομές στο ElegantThemes.com

• Marinaki_b
• Paoktsis17
• Tsoutsas7

20 Δωρεάν συνδρομές, διάρκειας 1 μήνα, για το GreekTuts

• GeoPas
• Makriefi
• Frank
• Yayastam
• MiKe-Dee
• ΜΙΧΑΛΗΣ ΦΙΛΟΣ
• Dr Melenios
• Amalia
• Vikaki_kok
• Thanos
• Ulq
• E X Core
• Nikos
• geo zachos
• Romaninho A
• Ren
• Kouklara89
• AnaC
• code_red
• Ice George

5 Δωρεάν συνδρομές, διάρκειας 6 μηνών, για το GreekTuts

• Fotis
• Alicerapti7
• Vagelis
• Natasadim8
• Costasthecook

Οι νικητές θα ενημερωθούν μέσα στις επόμενες ημέρες για την παραλαβή των δώρων τους.

ΠΡΟΣΟΧΗ: Τα κουπόνια κατοχύρωσης domain ισχύουν μέχρι σήμερα (30/6/2011) στις 24:00 ! Επίσης οι 25 νικητές των συνδρομών για το GreekTuts πρέπει να επικοινωνήσουν μαζί μας για να δημιουργήσουμε τους λογαριασμούς τους.

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

Θέλουμε να σας ευχαριστήσουμε όλους για την συμμετοχή σας στα φετινά CSS Awards, και να δώσουμε συγχαρητήρια στις 10 καλύτερες ιστοσελίδες για φέτος ! Ραντεβού ξανά τον Ιανουάριο για τα GreekTuts CSS Awards 2012 !

Επίσης θέλουμε να ευχαριστήσουμε τους χορηγούς μας για τα πλούσια δώρα !

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

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

Τι είναι τα GreekTuts Sessions

Τα GreekTuts Sessions είναι μια σειρά από προσωπικούς online εκπαιδευτικούς οδηγούς που θα ξεκινήσουν από τον Σεπτέμβριο. H διεξαγωγή αυτών των οδηγών θα γίνει μέσω μιας online πλατφόρμας e-learning, που σας προσφέρει δυνατότητα αλληλεπίδρασης με τον παρουσιαστή σας. Οι εκπαιδεύσεις είναι προσωπικές, πράγμα που σημαίνει ότι έχετε την δυνατότητα να μάθετε όλα όσα χρειάζεστε από το σπίτι σας, τις ώρες και μέρες που σας βολέυουν.

Κατά την παρουσίαση, θα μπορείτε να δείτε σε video την εκπαίδευση και να κάνετε ερωτήσεις όσο συχνά χρειαστεί. Το μόνο εργαλείο που θα χρειαστείτε είναι ο αγαπημένος σας browser, και πολύ όρεξη για μάθηση.

Επίσης, μετά την ολοκλήρωση των εκπαιδεύσεων, θα μπορείτε να έχετε πλήρη πρόσβαση στα video αλλά και σε όλο το εκπαιδευτικό υλικό, με τους κωδικούς σας για πάντα.

Πακέτα Εκπαιδεύσεων

Σας προσφέρουμε 2 διαφορετικά πακέτα συμμετοχής στις εκπαιδεύσεις, για να διαλέξετε αυτό που σας συμφαίρει και σας βολέυει.

• Πλήρες Πακέτο – Για παρακολούθηση όλης της σειράς
• Συγκεκριμένο Κεφάλαιο – Για παρακολούθηση ενός συγκεκριμένου κεφαλαίου

* Οι τιμές των 2 πακέτων θα ανακοινωθούν σύντομα.

Περιεχόμενα Online Εκπαιδεύσης

Κεφάλαιο 1 – HTML & CSS

Σε αυτό το κεφάλαιο θα καλύψουμε όλες τις βασικές έννοιες για την γλώσσας προγραμματισμού του internet, την HTML, και θα δούμε όλα όσα χρειάζεται για το πώς μπορούμε να δώσουμε μορφοποίηση και στύλ στις σελίδες μας, με την χρήση των CSS.

Κεφάλαιο 2 – Javascript & jQuery

Σε αυτό το κεφάλαιο θα καλύψουμε όλες τις βασικές λειτουργίες για την Javascript και θα δούμε πως μπορούμε έυκολα και γρήγορα να κάνουμε το περιεχόμενο της ιστοσελίδας μας πιο ενδιαφέρον και διαδραστικό για τον χρήστη. Επίσης θα δούμε τα πάντα για την διάσημη βιβλιοθήκη jQuery

Κεφάλαιο 3 – Front End Design

Σε αυτό το κεφάλαιο θα δούμε όλες τις βασικές αρχές που πρέπει να ακολουθούμε κατά την διάρκεια σχεδιασμού μιας ιστοσελίδας, και ποιά είναι τα λάθη που πρέπει να αποφέυγουμε. Επίσης θα δούμε και θα αναλύσουμε ποιά είναι τα διάφορα styles και trends που ακολουθούνται από designers σε όλο τον κόσμο.

Κεφάλαιο 4 – WordPress

Σε αυτό το κεφάλαιο θα μάθουμε για πάντα για το WordPress. Από το πως θα στήσουμε ένα δικό μας απλό blog, μέχρι πως θα δημιουργήσουμε μια κομψή και περίπλοκη ιστοσελίδα χρησιμοποιώντας το WordPress. Τέλος θα δούμε την δομή ενός θέματος και ενός plugin και θα μάθουμε τα βασικά για την δημιουργία του δικού σας θέματος και του δικού σας Plugin.

Κεφάλαιο 5 – SEO & Promotion

Σε αυτό το κεφάλαιο θα μιλήσουμε για τις μηχανές αναζήτησεις και για το πώς μπορούμε να ανεβάσουμε την ιστοσελίδα μας ψηλά στις λίστες αποτελεσμάτων. Θα δούμε διάφορες τεχνικές προαγωγής της σελίδας μας, και όλα όσα πρέπει να αποφύγουμε κατά την προσπάθεια του Search Engine Optimization.

Φόρμα Εκδήλωσης Ενδιαφέροντος

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

[contact-form-7]

Επισκεφτείτε την gallery τώρα πατώντας εδώ

Ψηφοφορία

Στην κεντρική σελίδα με την gallery, θα βρείτε ένα πλήθος από καρδούλες κάτω από την κάθε ιστοσελίδα. Χρησιμοποιώντας το ποντίκι σας μπορείτε να δώσετε στην αγαπημένη σας ιστοσελίδα τις περισσότερες καρδούλες.

Επίσης κάτω από κάθε ιστοσελίδα, υπάρχει και ένας σύνδεσμος για να κάνετε Like στο Facebook και να καλέσετε όλους τους φίλους σας να ψηφίσουν και αυτοί

Τα Βραβεία

Στο τέλος του Ιουνίου 2011 θα βραβεύσουμε τις 10 καλύτερες Ελληνικές ιστοσελίδες.

To πρώτο στάδιο των βραβείων θα διαρκέσει μέχρι την Κυριακή 1η Μαϊου. Στο πρώτο στάδιο, θα μπορείτε να αποστείλετε τις αγαπημένες σας ιστοσελίδες ή αυτές που δημιουργήσατε εσείς, και οι επισκέπτες μας θα μπορούν να τις ψηφίζουν. Οι 20 καλύτερες ιστοσελίδες θα περάσουν στο δεύτερο στάδιο των GreekTuts CSS Awards.

Στο δευτερο στάδιο, οι 20 καλύτερες ιστοσελίδες (οι 20 πιο αγαπημένες μεταξύ των επισκεπτών μας) θα μπορούν να συνεχίσουν να ψηφίζονται σε έναν διαφορετική σελίδα που θα περιέχει μόνο αυτές.

Τέλος την Πέμπτη 30 Ιουνίου θα αναδειχθούν οι 10 καλύτερες ιστοσελίδες, οι οποίες με την σειρά που πήραν στον διαγωνισμό θα λάβουν και τον κατάλληλο τίτλο

Τα δώρα θα ανακοινωθούν σύντομα

Δώρα και συμμετοχές

Τα δώρα που κερδίζουν όσοι συμμετέχουν στην ψηφοφορία και οι χορηγοί, θα ανακοινωθούν σύντομα

! Παράταση !

Δίνουμε παράταση μέχρι την Τρίτη 10 Μαϊου για τις συμμετοχές στα GreekTuts CSS Awards ! Μπές και εσύ τώρα, ψήφισε την αγαπημένη σου ιστοσελίδα ή στείλε μας την δική σου, και πάρε μέρος στον διαγωνισμό !

#container p + span {
color: #f9f9f9;
text-decoration:underline;
}

Κάνοντας αυτή την επιλογή, θα επιλέξουμε μόνο το πρώτο span που θα βρεθεί μέσα σε μια παράγραφο στο div container, και θα του δώσουμε λευκό χρώμα, και υπογράμμιση. Γενικότερα ο επιλογέας “+” επιλέγει μόνο το πρώτο στοιχείο που βρίσκεται μεσα σε ένα άλλο. Στην συγκεκριμένη περίπτωση το πρώτο span που θα βρεθεί μέσα σε μια παράγραφο.

2. Ο επιλογέας “:not”

div:not(.sidebar) {
color: #f9f9f9;
text-decoration:underline;
}

Κάνοντας αυτήν την επιλογή, θα επιλέξουμε όλα τα divs στην σελίδα μας, εκτός από αυτό που έχει class=”sidebar”. Γενικότερα με τον selector “:not” μπορούμε να εξαιρέσουμε από την επιλογή μας συγκεκριμένα στοιχεία.

3. Ο επιλογέας “:after”

#container p:after{
height:1px;
width:100%;
border:1px solid #000;
clear: both;
display:block;
}

Κάνοντας αυτήν την επιλογή, θα προστεθεί μετά από κάθε παράγραφο στο div container ένα “κουτί” ύψους ενός pixel και με border 1 pixel. Με άλλα λόγια κάτω από κάθε παράγραφο στην σελίδα μας θα υπάρχει μια μάυρη οριζόντια γραμμή. Η έκφραση “:after” απλά προσθέτει περιεχόμενο ακριβώς μετά από την επιλογή μας.

4. Ο επιλογέας “[title]“

a[title]{
color:#000;
text-decoration:underline;
}

Κάνοντας την παραπάνω επιλογή, θα διαλέξουμε όλα τα anchor tags στην σελίδα μας που περιέχουν το attribute “title” και θα τους δώσουμε μαύρο χρώμα και υπογράμμιση.

5. Ο επιλογέας “[href=]“

a[href="http://www.greektuts.net"] {
color: #5EB7CB;
text-decoration:underline;
}

Κάνοντας την παραπάνω επιλογή, θα επιλέξουμε όλους τους συνδέσμους(anchor tags) στην σελίδα μας που οδηγούν στο GreekTuts.net και θα τους δώσουμε γαλάζιο χρώμα και υπογράμμιση.

6. Ο επιλογέα “[href$=]“

a[href$=".jpg"]{
background: url(images/photo-icon.png) no-repeat scroll left center;
padding-left:15px;
}

Με την παραπάνω επιλογή, επιλέγουμε όλους τους συνδέσμους(anchor tags) στην σελίδα μας, που οδηγούν σε εικόνα ή έχουν κάπου μέσα στο href την κατάληξη .jpg, και θα προσθέσουμε ένα μικρό εικονίδιο δίπλα από το link. Προσοχή γιατί στο συγκεκριμένο παράδειγμα ψάχνουμε μόνο για συνδέσμους που οδηγούν σε εικόνες με κατάληξη .jpg. Για άλλους τύπους εικόνων πρέπει να γράψουμε άλλον επιλογέα.

7. Ο επιλογέας “:first-child”

#list ul li:first-child{
border-top:none;
}

Κάνοντας την παραπάνω επιλογή, επιλέγουμε τον πρώτο απόγονο από την unordered list. Δηλαδή αν μέσα στο “ul” υπάρχουν πολλά “li” και έχουμε βάλει να έχουν όλα border στην κορυφή, με την παραπάνω επιλογή φροντίζουμε το πρώτο “li” να μην έχει border στην κορυφή.

8. Ο επιλογέας “:last-child

#list ul li:last-child{
border-top:none;
}

Η παραπάνω επιλογή λειτουργεί ακριβώς όπως και το παράδειγμα 7, μόνο που εδώ επιλέγουμε μόνο το τελευταίο απόγονο.

9. Ο επιλογέας “>”

.menu > ul{
color:#fff;
}

H παραπάνω επιλογή λειτουργεί περίπου όπως και η επιλογή στο παράδειγμα 1, αλλά στην συγκεκριμένη περίπτωση επιλέγει μόνο όσα anchor tags είναι άμεσοι απόγονοι του div με class=”menu”. Αν δηλαδή έχουμε μέσα στο div μια unordered list με πολλά list items και κάποια από αυτά έχουν μέσα άλλα unordered lists, ο παραπάνω επιλογέας δε θα επιλέξει τα εμφωλευμένα “ul”.

10. Ο επιλογέας “*”

*{
margin:0;
padding:0;
}

Κλείνοντας ας δούμε έναν από τους πιο απλούς επιλογείς. Το “*” επιλέγει όλα τα στοιχεία στην σελίδα μας. Το συγκεκριμένο παράδειγμα επιλέγει όλη την σελίδα και βγάζει τα margins και τα paddings που μπορεί να βάζουν ως default οι διάφοροι browsers. Αυτό είναι επίσης γνωστό και ώς ένα πολύ απλό CSS Reset.

Δομικά Στοιχεία του Box Model

To Box Model αποτελείται από το Περιεχόμενο που βρίσκεται μέσα του, από το Padding από το Border και από το Margin. Ας δούμε πρώτα σε ένα γράφιμα το πώς είναι δομημένο το Box Model και στην συνέχεια θα εξηγήσουμε τις διάφορες ιδιότητες που μπορεί να πάρει.

Περιεχόμενο : Το περιεχόμενο είναι το HTML κομμάτι της σελίδας μας που περιέχεται μέσα σε κάθε Box.
Padding : Το Padding είναι η απόσταση που θέλουμε να δώσουμε στο εσωτερικό του κουτιού μας, δηλαδή ανάμεσα στο περίγραμμα του και το περιεχόμενο του.

Border : Το Border είναι το περίγραμμα που θέλουμε να δώσουμε στο κουτί μας.

Margin : Τέλος το Margin είναι η απόσταση που θέλουμε να δώσουμε στο κουτί μας από τα υπόλοιπα κουτιά στην σελίδα μας.

Ύψος και Πλάτος

Όταν έχουμε να κάνουμε με Boxes, μπορούμε να ορίσουμε το ύψος ή και το πλάτος που θέλουμε να έχει το στοιχείο μας. Προσοχή όμως, το ύψος και το πλάτος που θα ορίσουμε θα ορίσει το ύψος και το πλάτος του περιεχομένου μας και όχι των άλλως ιδιοτήτων (margin,padding,border.)

Μορφοποίηση του Box Model

Ας δούμε ένα παράδειγμα μορφοποίησης ενός Box

Έστω ότι έχουμε τον εξής HTML κώδικα

<div class="testbox">
<p>This is a paragraph inside a box</p>
</div>

Ας δούμε τι ιδιότητες μπορούμε να ορίσουμε στο box μας

.testbox { margin:5px 2px 5px 2px; padding: 4px; border:1px solid #c9c9c9; height:250px; width:400px; }

Με τις παραπάνω ιδιότητες, το περιεχόμενο μας θα έχει ύψος 250pixels και πλάτος 400 pixels. Το περίγραμμα(border) θα είναι πάχους 1pixel σε όλες τις πλευρές ενώ το περιεχόμενο θα απέχει από το περίγραμμα 4 pixels (padding) σε όλες τις πλευρές. Τέλος το κουτί μας θα απέχει(margin) από τα υπόλοιπα στοιχεία τις σελίδας μας 5pixels από πάνω και από κάτω, και 2pixels από αριστερά και δεξιά.

Στο επόμενο μέρος…

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

Σύνδεσμοι

Οι σύνδεσμοι (links) είναι μακράν τα πιο σημαντικά στοιχεία που υπάρχουν στην HTML αφού ουσιαστικά είναι αυτά που κάνουν τις σελίδες μας διαδραστικές. Στην HTML οι σύνδεσμοι δημιουργούνται χρησιμοποιόντας τα <a> (anchor) tags με τον εξής τρόπο:

<a href="http://www.greektuts.net">Σύνδεσμος</a>

Το παραπάνω στοιχείο θα εμφανίσει στον φυλλομετρητή μας την λέξη “Σύνδεσμος” στην οποία αν κάνουμε κλικ θα μας μεταφέρει στην ιστοσελίδα που έχουμε ορίσει (σε αυτό το παράδειγμα στο GreekTuts).

Όλοι οι φυλλομετρητές (browsers) έρχονται με κάποια προεγκατεστημένα στύλ για στοιχεία στα οποία μπορεί εμείς να μην έχουμε δώσει μορφοποίηση. Έτσι αν γράψουμε το παραπάνω παράδειγμα και το δούμε σε κάποιον browser πρίν δώσουμε στύλ, κατά πάσα πιθανότητα η λέξη “Σύνδεσμος” θα είναι μωβ και υπογραμμισμένη.

Ας δούμε λοιπόν πως μπορούμε να δώσουμε στύλ σε αυτό το στοιχείο. Για να στοχεύσουμε το anchor tag του παραδείγματος με τα CSS θα γράψουμε:

a { color:#000; text-decoration:none; }

H παραπάνω γραμμή θα δώσει στον σύνδεσμο μάυρο χρώμα και θα απομακρύνει την υπογράμμιση.

Επειδή τα anchor tags έχουν πολλές καταστάσεις λοιπόν ας δούμε και τις υπόλοιπες δυνατότητες που μας δίνουν τα CSS.

a:hover { text-decoration:underline; }

O σύδεσμος θα υπογραμιστεί όταν περάσουμε το mouse από πανω του

a:visited { color:red; }

Ο σύνδεσμος θα πάρει κόκκινο χρώμα αν τον έχουμε ξαναπατήσει

a:active { color:green; }

Ο σύνδεσμος θα πάρει στιγμιαία πράσινο χρώμα όταν κάνουμε κλίκ πάνω του

Ας δούμε για τέλος πώς μπορούμε να στοχεύσουμε το link μας αν αυτό βρίσκεται μέσα σε μια παράγραφο με κλάση όπως για παράδειγμα

<p class="test">This is a <a href="http://greektuts.net">link</a> </p>

και θα το στοχεύσουμε με τα CSS με τον εξής τρόπο:

p.test a { color:#000; text-decoration:none; }

Παράγραφοι

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

Αν λοιπόν για παράδειγμα έχουμε μια παράγραφο

<p>Αυτή είναι μια μικρή παράγραφος</p>

μπορούμε να της δώσουμε στύλ με τον εξής τρόπο

p { color:#000; text-align:justify; font-size:14px; font-family:Tahoma,Arial; }

O παραπάνω CSS κώδικας θα δώσει στην παράγραφο μας μαύρο χρώμα, μέγεθος γραμματοσειράς 14 εικονοστοιχεία, Tahoma γραμματοσειρά με δευτερεύουσα γραμματοσειρά τα Arial, και τέλος θα κάνει πλήρη στοίχηση του κειμένου.

Αν λοιπόν η παράφραφος μας έχει κάποια κλάση όπως για παράδειγμα

<p class="weird">Αυτή είναι μια περίεργη παράγραφος</p>

μπορούμε να την στοχεύσουμε με τα CSS γράφοντας:

p.weird { color:hotPink; font-size:20px; }

Backgrounds

Χρησιμοποιόντας τα CSS μπορούμε να δώσουμε χρώμα και εικόνα στο παρασκήνιο της σελίδας μας ή κάποιου στοιχείου της. Ας δούμε λοιπόν πιο αναλυτικά.

Έστω ότι έχουμε την εξής HTML σελίδα

<html>
<body>
   <h1>Επικεφαλίδα</h1>
   <p>Παράγραφος</p>
</body>
</html>

Για να δώσουμε χρώμα παρασκηνίου γράφουμε

body { background-color:#f9f9f9; }

Απλό έτσι; Ας δούμε πως μπορούμε να δώσουμε μια εικόνα ως παρασκήνιο και να την κάνουμε να επαναλαμβάνεται στον άξονα των Χ

body { background:url(image.jpg) repeat-x scroll top center #fff; }

όπου σαν ιδιότητα του URL βάζουμε το μονοπάτι της εικόνας που θέλουμε να χρησιμοποιήσουμε. Οι τιμές Top και Center δηλώνουν πως η εικόνα μας θα τοποθετηθεί στην κορυφή της ιστοσελίδας χωρίς να αφήνει κανένα κενό. Τέλος ο δεκαεξαδικός κωδικός χρώματος υποδηλώνει το χρώμα που θα έχει η υπόλοιπη σελίδα που δεν καλύπτεται από την εικόνα (στο συγκεκριμένο παράδειγμα άσπρο)

Στο επόμενο μέρος

Στο επόμενο μέρος θα επικεντρωθούμε στο Box Model και θα εξηγήσουμε πως χρησιμοποιείται. Θα δούμε παραδείγματα και αναλυτικές μεθόδους χρήσης του

Κατά την διάρκεια που γράφουμε HTML κώδικα, χρειάζεται να “ντύνουμε” τον κώδικα μας με κάποια στοιχεία τα οποία θα μας βοηθήσουν να δώσουμε στύλ και να μορφοποιήσουμε όπως θέλουμε τον κώδικα μας χρησιμοποιώντας CSS. Τα στοιχεία αυτά, τα οποία είναι γνωστά ως selectors (επιλογείς) , χωρίζονται σε δύο κατηγορίες. Στα Classes και στα Ids.

Σύνταξη Των Στοιχείων Id

Τα Ids είναι μοναδικά στοιχεία που προσθέτουμε σε ένα div στον HTML κώδικα μας. Όταν λέμε μοναδικά εννοούμε πως δηλώνουν στοιχεία που θα εμφανιστούν μια και μοναδική φορά σε μία σελίδα. Για παράδειγμα:

<div id="logo">
   <a href="/home.html"><img src="/images/logo.png" /></a>
</div>

Το στοιχείο id=logo θα εμφανίζεται μόνο μια φορά στην σελίδα μας και αυτό είναι στην κορυφή. Έτσι καλό είναι να του δώσουμε Id και όχι Class.

Για να δώσουμε στύλ στους Id selectors όταν γράφουμε CSS, χρησιμοποιούμε την δίαιση (#).  Έτσι για παράδειγμα, για το στοιχείο id=logo θα γράψουμε:

#logo { margin-left:10px; position:relative; }

Σύνταξη Tων Στοιχείων Class

Τα Classes χρησιμοποιούνται διαφορετικά από τα Ids και συνήθως τα εφαρμόζουμε σε στοιχεία τα οποία θέλουμε να κατηγοριοποιήσουμε και να κατατάξουμε. Με άλλα λόγια, το χρησιμοποιούμε σε στοιχεία στα οποία θέλουμε να έχουν όλα την ίδια μορφοποίηση, ενώ θα εμφανίζονται όσες φορές θέλουμε στην σελίδα μας. Για παράδειγμα λοιπόν

<p class="description">
   Lorem Ipsumis simply dummy text of the printing and  typesetting industry.
   Lorem Ipsum has been the industry's standard dummy  text ever since the 1500s
</p>

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

Για να δώσουμε στύλ στους Class selectors όταν γράφουμε CSS, χρησιμοποιούμε την τελεία (.). Έτσι για παράδειγμα, για το στοιχείο class=description γράφουμε:

p.description { font-size:12px; color:#c9c9c9; }

Σύνδεση CSS Με HTML

Αφού εξηγήσαμε τον τρόπο με τον οποίο δίνουμε στύλ στα διάφορα στοιχεία στην σελίδα μας, τώρα θα δούμε πως ακριβώς γίνετε η σύνδεση των CSS με το HTML αρχείο μας.

Υπάρχουν τρείς τρόποι για να δώσουμε στύλ και μορφοποίηση στα στοιχεία της HTML σελίδας μας.

Δήλωση Στο Head

Ο πρώτος είναι να γράψουμε όλο τον CSS κώδικα μας στο <head> μέρος της ιστοσελίδας μας. Ας δούμε ένα παράδειγμα:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen, projection">
   p.description { font-size:12px; color:#c9c9c9; }
</style>
<title>Test</title>
</head>
<body>
</body>
</html>

Με τον παραπάνω τρόπο, δίνουμε σε όλες τις παραγράφους που έχουν class=description χρώμα και μέγεθος γραμματοσειράς.

Inline

Ο δεύτερος είναι να γράψουμε τον CSS κώδικα μέσα στο HTML στοιχείο μας. Αυτός ο τρόπος είναι γνωστός ως Inline Styling. Ας δούμε ένα παράδειγμα

<p style="font-size:12px; color:#c9c9c9">
   Lorem Ipsum is  simply dummy text of the printing and  typesetting industry.
   Lorem Ipsum  has been the industry's standard dummy  text ever since the 1500s
</p>

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

Εξωτερικό Αρχείο

Τέλος, ο πιό διαδεδομένος τρόπος είναι να συμπεριλάβουμε στο <head> μέρος της ιστοσελίδας μας ένα νέο εξωτερικό που θα έχει κατάληξη .css, στο οποίο θα περιλαμβάνεται όλος ο CSS κώδικας μας. Ας δούμε ένα παράδειγμα:

<head>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Στο επόμενο μέρος…

Αφού είδαμε αναλυτικά ότι χρειαζόμαστε για τα Ids και τα Classes, αλλά και το πώς τα συνδέουμε με τον HTML κώδικα μας, στο επόμενο μέρος θα δούμε πιο αναλυτικά πράγματα που μπορούμε να κάνουμε με τα CSS όπως να δώσουμε εικόνες παρασκηνίου, να δημιουργήσουμε μορφοποιημένα κείμενα και άλλα πολλά.

Βήμα 1

Σχεδιάζουμε στο Photoshop (ή σε όποιο άλλο πρόγραμμα της αρεσκείας μας) τις δύο εικόνες που θα χρησιμοποιήσουμε ως παρασκήνιο στα κουμπιά μας

Δημιουργούμε ένα νέο κενό έγγραφο διαστάσεων 300px x 66px

Βήμα 2

Χρησιμοποιοώντας το Rounded Rectangle Tool και βάζοντας 5px radius καλύπτουμε το μισό της εικόνας μας με ένα παραλληλόγραμμο με τον εξής τρόπο

Βήμα 3

Ανοίγουμε τα Blending Options και βάζουμε τις παρακάτω επιλογές

Βήμα 4

Κάνουμε Duplicate το επιλεγμένο Layer (δεξί κλικ στο layer και Duplicate Layer) και ανοίγουμε τα Blending Options του νέου layer. Στις παραπάνω επιλογές απλά επιλέγουμε το κουτάκι Reverse και στο Gradient Overlay και στο Stroke. Αμέσως μετά, φέρνουμε το νέο Layer μας ακριβώς από κάτω από το πρώτο, και έτσι γεμίζουμε την εικόνα μας με 2 αντίθετες κατά τον άξονα Χ εικόνες. Τέλος αποθηκεύουμε την εικόνα μας με το όνομα bg_button_span.gif

Βήμα 5

Δημιουργούμε μια νέα εικόνα μεγέθους 18px x 66px και επαναλαμβάνουμε τα παραπάνω βήματα μέχρι να φτάσουμε στο εξής αποτέλεσμα

Αποθηκεύουμε την εικόνα αυτή με το όνομα bg_button_a.gif

Βήμα 6

Τώρα ας ξεκινήσουμε να γράφουμε τον κώδικα μας. Ξεκινάμε δημιουργώντας 2 νέα αρχεία, με τα ονόματα index.html και style.css. Ανοίγουμε το index.html με τον αγαπημένο μας text editor και γράφουμε:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css"  media="screen" />
<title>Buttons Test</title>
</head>
<body>
</body>
</html>

Με τον παραπάνω κώδικα δημιουργήσαμε την σελίδα μας, και την συνδέσαμε με το αρχείο style.css στο οποίο θα προσθέσουμε τα διάφορα styles που χρειάζονται

Βήμα 7

Τώρα ανοίγουμε το style.css και γράφουμε

body    {width:960px;margin:0 auto;}
.clear {
overflow: hidden;
width: 100%;
}

Με τον παραπάνω κώδικα δημιουργήσαμε τα βασικά styles που χρειζόμαστε.

Βήμα 8

Τώρα ήρθε η ώρα να δημιουργήσουμε το κουμπί μας. Μέσα στο <body> του αρχείου index.html θα προσθέσουμε τον εξής κώδικα

<a href="#"><span>Blue Button</span></a>

Με τον παραπάνω κώδικα δημιουργούμε ένα νέο σύνδεσμο (Anchor) και μέσα προσθέτουμε ένα <span>

Βήμα 9

Ας δώσουμε τώρα style στο στοιχείο που δημιουργήσαμε. Στο αρχείο style.css γράφουμε

a {
background: transparent url('images/bg_button_a.gif') no-repeat scroll top right;
color: #fff;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 33px;
margin-right: 6px;
padding-right: 18px;
text-decoration: none;
outline:0;
}
a span {
background:url("images/bg_button_span.gif") no-repeat scroll 0 0 transparent;
display:block;
line-height:24px;
padding:4px 0 5px 18px;
}
a:hover {
background-position: bottom right;
color: #fff;
outline: none;
}
a:hover span {
background-position: bottom left;
padding: 5px 0 4px 18px;
}

Με τον παραπάνω κώδικα δώσαμε όλες τις ιδιότητες που χρειάζεται στο στοιχείο που δημιουργήσαμε. Του δώσαμε εικόνα παρασκηνίου για το Anchor και για το Span, του δώσαμε χρώμα κειμένου, ύψος και πλάτος, καθώς και όλες τις ιδιότητες που χρειάζεται για να δουλέυει σαν κουμπί.

Αποτέλεσμα

Πειραματιστείτε με διαφορετικά χρώματα στις εικόνες σας και με μεγαλύτερους τίτλους στα κουμπιά σας και σίγουρα θα φτάσετε στο αποτέλεσμα που θεωρείτε εσείς ικανοποιητικό. Κατεβάστε τα αρχεία που ακολουθούν και δείτε και τις διάφορες άλλες δυνατότες που έχουμε χρησιμοποιώντας αυτή τη μέθοδο.

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

CSS σημαίνει Cascading Style Sheets. Και τι σημαίνει αυτό; Ας το πάρουμε από την αρχή.

Η γνωστή σε όλους μας γλώσσα προγραμματισμού ιστοσελίδων και εφαρμογών, η HTML, χρησιμοποιείται για την δημιουργία και την περιγραφή στοιχείων σε μια ιστοσελίδα. Όταν λοιπόν εμείς διαβάζουμε ένα κείμενο, όπως αυτό που διαβάζεται αυτήν την στιγμή, o browser μας, δεν το “διαβάζει” όπως και εμείς. Συνήθως τα κείμενα που βρίσκονται σε μια ιστοσελίδα, είναι περιτρυγυρισμέμα σε paragraph tags. Τα Tags είναι ο τρόπος που χρησιμοποιείται για να περιγράψουμε αντικείμενα. Έτσι, ότι βρίσκεται ανάμεσα σε tags, παίρνει και τις αντίστοιχες ιδιότητες.

Αν λοιπόν το κείμενο “Lorem ipsum dolor sit amet, consectetur adipiscing elit.” το γράψουμε <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>, αυτό θα πάρει τις ιδιότητες της παραγράφου, ενώ αν το γράψουμε <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b> θα γίνει bold.

Ωραία ως εδώ. Τι γίνεται όμως όταν θέλουμε αυτό το κείμενο να έχει μεγαλύτερο μέγεθος από κάποιο άλλο στοιχείο paragraph στην ιστοσελίδα μας; H ακόμα χειρότερα άμα θέλουμε να έχουμε 8 διαφορετικά είδη παραγράφων και τίτλων; Εδώ έρχονται και συμπληρώνουν τα CSS. Μέσα από τους selectors (επιλογέας) μπορούμε να “στοχεύσουμε ” στοιχεία στην HTML σελίδα, και να τους δώσουμε στυλ.

Σύνταξη – Δομή

Για να στοχεύσουμε λοιπόν τα διάφορα στοιχεία στην σελίδα μας, πρέπει να γνωρίζουμε την δομή και την σύνταξη μιας CSS εντολής. Ας δούμε καλύτερα σε ένα γράφιμα

Το παραπάνω παράδειγμα, “στοχεύει” όλα τα στοιχεία H1 στην ιστοσελίδα μας. H1 είναι ο μεγαλύτερος σε μέγεθος τίτλος σε ένα κείμενο. Αρχίζοντας λοιπόν, σαν selector, χρησιμοποιούμε το όνομα του tag που θέλουμε να αλλάξουμε. Αφήνουμε ένα κενό, και  ανοίγουμε αγκύλες. Ότι περιέχεται μέσα στις αγκύλες είναι η δήλωση μας . Χρησιμοποιόντας την ιδιότητα (property) color στοχεύουμε το χρώμα του κειμένου. Αμέσως μετά την ιδιότητα βάζουμε άνω και κάτω τελείες και δίνουμε την τιμή μας. Για να κλείσουμε την πρώτη δήλωση, χρησιμοποιούμε το ελληνικό ερωτηματικό (semicolon). Στην δεύτερη δήλωση, χρησιμοποιούμε την ιδιότητα font-size, η οποία αλλάζει το μέγεθος του κειμένου. Βάζουμε άνω και κάτω τελείες και δίνουμε την τιμή που θέλουμε να έχει σε pixels. Κλείνουμε με ελληνικό ερωτηματικό, και με την ανάποδη αγκύλη.

Χρησιμοποιόντας λοιπόν τα CSS μπορούμε να επιλέξουμε όλα τα στοιχεία της ιστοσελίδας μας, και να τους δώσουμε ζωή. Δείτε τον κώδικα ζωντανά μέσω του w3scholls.com χρησιμοποιόντας τον σύνδεσμο που ακολουθεί

Id και Class

Επειδή τα tags της HTML είναι περιορισμένα, τα CSS μας δίνουν την δυνατότητα να δηλώσουμε τα δικά μας μοναδικά ή μη στοιχεία, και να τους δώσουμε στύλ. Αυτό το κάνουμε χρησιμοποιόντας μέσα στα division tags της HTML (τα γνωστά divs) , ID και CLASS. Πως το κάνουμε αυτό; Ας δούμε ένα γράφιμα.

Στα παραπάνω παραδείγματα, βλέπουμε πως μπορούμε να “τυλίξουμε” την παράγραφο μας μέσα σε divs, και να επιλέξουμε ακριβώς αυτό που θέλουμε για να του δώσουμε στύλ. Στην πρώτη περίπτωση μπορεί να θέλουμε να βάλουμε το κείμενο στο κέντρο αλλά να μην θέλουμε το ίδιο για όλα τα <p> tags της σελίδας μας. Έτσι γράφουμε

.test { color: black; text-align:center;}

Αυτό θα επιλέξει όλο το div και θα μετακινίσει το κείμενο του στο κέντρο, χωρίς να επιρεάσει άλλα paragraphs στην σελίδα.

Αν θέλουμε να επιλέξουμε την παράγραφο που υπάρχει μέσα στο div, γράφουμε

.test p { color: black; text-align:left;}

Γενικότερα, όταν θέλουμε να επιλέξουμε στοιχεία μέσα σε divs, γράφουμε αναλυτικά όλο το “μονοπάτι” μέχρι να φτάσουμε σε αυτά. Ας δούμε για παράδειγμα το 3 κώδικα στο γράφιμα παραπάνω. Έχουμε ένα paragraph μέσα σε ένα div μέσα σε ένα id. Για να επιλέξουμε και να δώσουμε στυλ μόνο στην παράγραφο, γράφουμε

#test .test p { color:white; }

Παρατηρήστε ότι έχουμε το ίδιο όνομα στο class και στο id μας. Αυτό δεν πειράζει καθόλου. Τα ID και τα Classes είναι διαφορετικά στοιχεία και έτσι επιτρέπεται να έχουν το ίδιο όνομα.

ΠΡΟΣΟΧΗ: Το σωστό είναι όταν χρησιμοποιούμε ID να μην εμφανίζουμε το ίδιο στοιχείο πάνω από μια φορά στην σελίδα μας. Τα ID δηλώνουν μοναδικά στοιχεία. Το αντίθετο συμβαίνει με τα Classes. Μπουρούμε να έχουμε απεριόριστα αντίγραφα του class μέσα στην σελίδα μας.

Cascading

Και τι πάει να πεί Cascading; Είναι αναφορά στο φαινόμενο του καταράχτη, και ουσιαστικά δείχνει την κληρονομικότητα που έχουν τα στοιχεία των CSS. Και πως εφαρμόζεται αυτό;

Στο τρίτο παράδειγμα που γράψαμε παραπάνω, αν γράψουμε

#test .test p { color:white; }

θα “στοχεύσουμε” την παράγραφο κατευθείαν, και θα της δώσουμε στύλ συγκεκριμένα. Αν όμως δώσουμε στύλ στο ID τι θα συμβεί;

#test { color:white; }

Ακριβώς το ίδο. Όλα τα στοιχεία που περιέχονται μέσα στο ID αυτό θα κληρονομίσουν την ιδιότητα να έχουν λευκό χρώμα στα γράμματα.

Στο επόμενο μέρος…

Αφού κάναμε μια εισαγωγή στα CSS, στο επόμενο μέρος θα δούμε πιο αναλυτικά πράγματα που μπορούμε να κάνουμε με τις επιλογές, τα Ids και τα Classes, και θα ξεκινήσουμε να δίνουμε στύλ σε στοιχεία. Μέχρι τότε, περιμένουμε να ακούσουμε τις απόψεις σας και τις πρακτικές σας πάνω σε θέματα χρήσης των CSS.