Κεφάλαιο 16 : CSS Ταξινόμηση

• 18 Ιουλίου 2012
• by: Georgios
• in: Web Design

Clear

Μπορείτε να ελένξετε αν ένα στοιχείο επιτρέπει ολισθαίνοντα στοιχεία να βρίσκονται στις άκρες του με την ιδιότητα clear η οποία δηλώνεται με την ακόλουθη μορφή.

clear : value

και οι τιμές που μπορεί να πάρει είναι οι ακόλουθες :

none
both
left
right

Και τι κάνουν αυτές οι τιμές;

None

Αυτή είναι η προεπιλεγμένη τιμή. Ολισθαίνοντα στοιχεία μπορούν να υπάρχουν και στις δυο πλευρές του στοιχείου. Η τιμή none δηλώνεται όπως στο παράδειγμα που ακολουθεί:

clear : none;

Both

Αν ορίσετε την τιμή both, σε ένα στοιχείο, θα έχει ως αποτέλεσμα να μην επιτρέπονται τα ολισθαίνοντα στοιχεία σε καμία από τις δυο πλευρές του στοιχείου. Η τιμή both δηλώνεται όπως στο παράδειγμα που ακολουθεί:

clear : both;

Left

Αν ορίσετε την τιμή left, σε ένα στοιχείο, θα έχει ως αποτέλεσμα να μην επιτρέπονται τα ολισθαίνοντα στοιχεία στην αριστερή πλευρά του στοιχείου. Η τιμή left δηλώνεται όπως στο παράδειγμα που ακολουθεί:

clear : left;

Right

Αν ορίσετε την τιμή right, σε ένα στοιχείο, θα έχει ως αποτέλεσμα να μην επιτρέπονται τα ολισθαίνοντα στοιχεία στην δεξιά πλευρά του στοιχείου. Η τιμή right δηλώνεται όπως στο παράδειγμα που ακολουθεί:

clear : right;

Clip

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

clip : value;

Οι τιμές που μπορεί να πάρει αυτή η ιδιότητα είναι οι ακόλουθες:

auto
shape

Για την ώρα το μόνο shape που αναγνωρίζεται από την ιδιότητα clip είναι το rect (rectangular, ορθογώνιο) και μπορείτε να το χρησιμοποιήσετε όπως και στο παράδειγμα που ακολουθεί:

clip : rect(5px, 12px, 7px, 10px);

Cursor

Αν θέλετε μπορείτε να αλλάξετε τον κέρσορα του ποντικιού σας για κάποιο στοιχείο της σελίδας σας χρησιμοποιώντας την ιδιότητα cursor όπως στο παράδειγμα που ακολουθεί:

cursor : value;

και οι διαθέσιμες τιμές για την ιδιότητα cursor είναι οι ακόλουθες:

[COL size=”one_half”]

auto
crosshair
default
help
move
pointer
text
url
wait

[/COL]

[COL size=’one_half’ last=’last’]

e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize

[/COL]
Επίσης αν θέλετε μπορείτε να χρησιμοποιήσετε ένα δικό σας κέρσορα. Σε αυτή την περίπτωση είναι καλή τακτική να δηλώσετε αμέσως μετά τον δικό σας κέρσορα και ένα προεπιλεγμένο. Για να χρησιμοποιήσετε το δικό σας κέρσορα δηλώστε την ιδιότητα cursor όπως και στο παράδειγμα που ακολουθεί:

cursor : url('custom_cursor.cur'), default;

Display

Αν θέλετε να αλλάξετε τον τρόπο με τον οποίο ένα στοιχείο αναπαριστάτε στη σελίδα σας τότε μπορείτε να χρησιμοποιήσετε την ιδιότητα display δηλώνοντας την όπως τον κώδικα που ακολουθεί:

display : value;

Οι διαθέσιμες τιμές που μπορείτε να χρησιμοποιήσετε για αυτή την ιδιότητα είναι οι ακόλουθες:

block
inline
list-item
none

Και τι αποτέλεσμα έχουν αυτές οι τιμές;

Block

Δημιουργεί μια νέα γραμμή πριν και μετά το στοιχείο.

Inline

Δεν δημιουργεί νέα γραμμή πριν και μετά το στοιχείο

List Item

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

None

Κάνει ένα στοιχείο να μην εμφανίζεται στην σελίδα.

Float

Η ιδιότητα float αλλάζει τον τρόπο που το κείμενο ή/και μια εικόνα εμφανίζονται μέσα σε ένα στοιχείο και μπορείτε να τη δηλώσετε με τον ακόλουθο τρόπο:

float : value;

Ενώ οι τιμές που μπορεί να δεχτεί αυτή η ιδιότητα είναι οι ακόλουθες:

left
right
none

Και τι αποτέλεσμα έχουν αυτές οι τιμές;

Left

Το κείμενο ή και οι εικόνες εμφανίζονται στα αριστερά του  γονικού στοιχείου.

Right

Το κείμενο ή και οι εικόνες εμφανίζονται στα δεξιά του  γονικού στοιχείου.

None

Δεν υπάρχει κάποια αλλαγή στον τρόπο που εμφανίζεται το κείμενο ή και οι εικόνες μέσα στο γονικό στοιχείο.

Overflow

Επίσης αν θέλετε μπορείτε να ελένξετε τη συμπεριφορά του περιεχομένου σε ένα στοιχείο, όταν αυτό υπερβαίνει την ορατή περιοχή του αντικειμένου με την ιδιότητα overflow με την ακόλουθη μορφή:

overflow : value;

και οι τιμές που μπορεί να πάρει είναι οι ακόλουθες :

auto
hidden
visible
scroll

Και τι αποτέλεσμα έχουν αυτές οι τιμές;

Auto

Δημιουργεί αυτόματα μπάρες ολίσθησης για το αντικείμενο όταν το περιεχόμενο υπερβαίνει το πλάτος ή το ύψος του αντικειμένου.

Hidden

Αποκρύπτει το περιεχόμενο που υπερβαίνει το πλάτος ή/και το ύψος του αντικειμένου.

Visible

Εμφανίζει το περιεχόμενο ακόμα και όταν το περιεχόμενο υπερβαίνει το πλάτος και το ύψος τους στοιχείου.

Scroll

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

Visivility

Αν θέλετε να ελέγξετε, αν ένα στοιχείο θα είναι ορατό ή όχι, μπορείτε να δηλώσετε την ιδιότητα visibility όπως στο παράδειγμα που ακολουθεί:

visibility : value;

ενώ οι τιμές που μπορεί να πάρει είναι οι ακόλουθες :

hidden
visible

Z-index

Αν θέλετε να ελένξετε την ταξινόμηση των επιπέδων ορισμένων στοιχείων που είναι τοποθετημένα στην ίδια περιοχή μπορείτε να δηλώσετε την ιδιότητα z-index με τον τρόπο που ακολουθεί

z-index : value;

Οι τιμές που μπορεί να δεχτεί είναι οι ακόλουθες :

auto
ακέραιος

Όσο ποιο μεγάλος είναι ο αριθμός που θα βάλετε στην τιμή, τόσο ποιο ψηλά θα ταξινομηθεί το  αντικείμενο σας στην λίστα.

Προηγούμενο : CSS πλάτος και ύψος
Επόμενο :  CSS Τοποθέτηση στοιχείων