Web Design: Μορφοποίηση HTML γεμίσματος με CSS Padding

Η ιδιότητα CSS padding προσδιορίζει το γέμισμα και στις τέσσερις πλευρές του στοιχείου εσωτερικά του περιγράμματος και μπορεί να εφαρμοστεί σχεδόν σε οποιαδήποτε ετικέτα HTML με την δυνατότητα ότι κάθε πλευρά μπορεί να έχει την δική της τιμή και με την προϋπόθεση ότι αυτή δεν είναι αρνητική (π.χ. -10px). Με πιο απλά λόγια, είναι το εσωτερικό κενό που δημιουργείται μετάξυ στοιχείου και περιγράμματος. Λειτουργεί αντίθετα με την ιδιότητα CSS Margin η οποία προσδιορίζει το κενό εξωτερικά του περιγράμματος. Μπορείτε να επεξεργαστείτε όλες τις πλευρές ενός στοιχείου είτε δίνοντας μια ενιαία τιμή για όλες τις πλευρές είτε ξεχωριστή τιμή για κάθε πλευρά. Οι τιμές είναι δυνατό να οριστούν σε ποσοστό της εκατό %, px ή em, και οι τρόποι εφαρογής έχουν ως εξής:

Web Design: Μορφοποίηση του περιθωρίου με CSS Margin

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

Web Design: Μορφοποίηση περιγράμματος με CSS Border

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

Web Design: Μορφοποίηση της εικόνας του δρομέα με CSS Cursor

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

Web Design: Μορφοποιήση των HTML θέσεων με CSS Position

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

Web Design: Κατάλογος βασικών ιδιοτήτων CSS

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

Web Design: Μορφοποίηση HTML κειμένου με CSS Text

Σε αυτή την ανάρτηση αναλύεται ο τρόπος με τον οποίο μπορεί να μορφοποιηθεί το κείμενο με την CSS Text ιδιότητα σε αντίθεση με προηγούμενη ανάρτηση όπου γίνεται αναλυτική αναφορά σχετικά με την μορφοποίηση της CSS Font ιδιότητας η οποία καλύπτει και το μεγαλύτερο μέρος των τρόπων μορφοποίησης της γραμματοσειράς.

Web Design: Μορφοποίηση HTML πινάκων με CSS

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

Web Design: Μορφοποίηση λίστας HTML με CSS Lists

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

Web Design: Μορφοποίηση της διατάξης της εικόνας με CSS Float

Η ιδιότητα CSS Float είναι πολύ σημαντική για την διάταξη περιεχομένου που συνδυάζει εικόνα και κείμενο καθώς επιτρέπει την ακριβή τοποθέτηση ενός HTML στοιχείου στην ιστοσελίδα ορίζοντας την πλευρά γύρω από την οποία τα υπόλοιπα στοιχεία θα κυλίσουν, σε αντίθεση με την ιδιότητα CSS text-align που ευθυγραμμίζει μόνο το κείμενο.