wlearn.gr
  • Αρχική
  • AI
  • How-to
  • Σειρές Μαθημάτων
  • Αρθρα
  • Αφιερώματα
  • Νέα στο Διαδίκτυο
  • W-People
  • Επικοινωνία

AI

  • Ειδήσεις και Άρθρα
  • Απόψεις
  • Chatbots
  • Δοκιμές προϊόντων
  • Η ενότητα AI

Σειρές Μαθημάτων

  • Μαθήματα HTML
  • Μαθήματα HTML5
  • Μαθήματα CSS
  • Μαθήματα AJAX
  • Μαθήματα XHTML

Σχετικά με το WLearn.gr

  • Website logs
  • Το WLearn.gr
  • Σχεδιασμός του WLearn.gr
  • Ακης Καργιοφύλλης
  • Επικοινωνία
  • Πως και πότε δημιουργήθηκε το wlearn.gr (επετειακό άρθρο για τα 18 χρόνια ζωής του wlearn.gr)
  • Πολιτική Απορρήτου & Συμμόρφωση GDPR

Μαθήματα CSS

Box model

Λεπτομέρειες
Δημιουργήθηκε : 30 Νοεμβρίου 2011
Στο σημείο αυτό υπενθυμίζω τι είναι στοιχείο μιας ιστοσελίδας.:
Στοιχείο είναι ένα οποιοδήποτε μέρος της HTML σελίδας, όπως: μια εικόνα, μια παράγραφος, μια λίστα, μια επιλογή μιας λίστας, μια επικεφαλίδα, ένα κείμενο ή μια λέξη που βρίσκεται μέσα σε ετικέτες διαμόρφωσης κτλ.

Κάθε στοιχείο λοιπόν, έχει 3 ιδιότητες που αφορούν την σχέση τους με τα υπόλοιπα γειτονικά στοιχεία, αλλά και την εμφάνιση τους:
  • ο κενός χώρος μεταξύ του πλαισίου και των γειτονικών στοιχείων (margin)
  • το πλαίσιο (border)
  • ο κενός χώρος μεταξύ του περιεχομένου του στοιχείου και του πλαισίου του (padding)

Η w3.org, η οποία ανέπτυξε και διαχειρίζεται τα πρότυπα της CSS και της HTML, ομαδοποίησε αυτές τις ιδιότητες χρησιμοποιώντας τον ορισμό Box model, ο οποίος απεικονίζεται παρακάτω:

  • Το margin (η περιοχή με άσπρο, ή αν θέλετε διαφανές, χρώμα) καθορίζει την περιοχή έξω από το πλαίσιο (border) του στοιχείου. Ο χώρος αυτός δεν έχει χρώμα, καθώς είναι πάντα transparent (διαφανές)
  • Το border (η περιοχή με κόκκινο χρώμα) ορίζει το πάχος και το χρώμα του πλαισίου γύρω απο το στοιχείο
  • Το padding ((η περιοχή με πορτοκαλί χρώμα)) ορίζει την περιοχή μεταξύ του πλαισίου (border) και του περιεχομένου του στοιχείου. Η περιοχή αυτή μπορεί να έχει background ένα χρώμα ή μια εικόνα
  • Το περιεχόμενο (η περιοχή με κίτρινο χρώμα) είναι το κείμενο ή η εικόνα

Width και height ενός στοιχείου

Είναι σημαντικό να κατανοήσουμε ότι όταν ορίζουμε τις διαστάσεις ενός στοιχείου με css, στην ουσία ορίζουμε τις διαστάσεις της περιοχής του περιεχομένου, χωρίς να υπολογίζονται οι περιοχές των padding, margin και border. Για παράδειγμα στο παρακάτω στυλ ορίζουμε το μήκος, το ύψος και το πλαίσιο ενός div, καθώς και τις τιμές padding και margin του div (μην ανησυχείτε αν δεν καταλάβετε κάποια από τις ιδιότητες του παρακάτω στυλ, καθώς θα τις δούμε αναλυτικά σε επόμενες ενότητες):
Width και height
div.example {
width: 340px;
height: 55px;
border: 5px solid yellow;
padding: 15px;
margin: 20px;
}
Παίξτε με τις τιμές των ιδιοτήτων του στυλ και δείτε το αποτέλεσμα
Δοκίμασε το

Το πραγματικό μήκος του στοιχείου είναι:
width = 340px +
5px (αριστερό πλαίσιο) +
5px (δεξί πλαίσιο) +
15px (αριστερό padding) +
15px (δεξί padding) +
20px (αριστερό margin) +
20px (δεξί margin) = 420px

Ενώ το πραγματικό ύψος του ίδιου στοιχείου είναι:
height = 55px +
5px (πάνω πλαίσιο) +
5px (κάτω πλαίσιο) +
15px (πάνω padding) +
15px (κάτω padding) +
20px (πάνω margin) +
20px (κάτω margin) = 135px

Γενικά, για να υπολογίσουμε το πραγματικό μήκος (width) ενός στοιχείου χρησιμοποιούμε τον παρακάτω τύπο:
width = width + αριστερό padding + δεξί padding + αριστερό border + δεξί border + αριστερό margin + δεξί margin

ενώ για να υπολογίσουμε το πραγματικό ύψος (height) ενός στοιχείου χρησιμοποιούμε τον παρακάτω τύπο:
height = height + πάνω padding + κάτω padding + πάνω border + κάτω border + πάνω margin + κάτω margin

Σε επόμενη ενότητα θα δούμε πως ορίζουμε διαφορετικά μεγέθη για τις τέσσερεις πλευρές των ιδιοτήτων (δηλαδή, padding-left, padding-bottom, border-right, margin-top κτλ.)

Συμπεριφορά του IE8 και παλαιότερων εκδόσεων του Internet Explorer

Το παραπάνω παράδειγμα δεν δουλεύει σωστά στον Internet Explorer 8 και σε παλαιότερες εκδόσεις του ίδιου browser. Για να αποφύγετε το πρόβλημα ασυμβατότητας θα πρέπει να προσθέσετε στην κορυφή του html αρχείου σας την ετικέτα doctype όπως φαίνεται στο παράδειγμα:

Σωστός τρόπος στον IE8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

Παραδείγματα

Γειτνίαση δύο παραγράφων
Σε αυτό το παράδειγμα θα δούμε πως η τιμή padding επηρεάζει την απόσταση μεταξύ δύο παραγράφων. Προσπαθήστε να παίξετε με την τιμή του padding, αλλά και να προσθέσετε την ιδιότητα margin στο στυλ.

Ψευδοστοιχεία (Pseudo-elements)

Λεπτομέρειες
Δημιουργήθηκε : 07 Δεκεμβρίου 2007
Τα ψευδοστοιχεία της CSS χρησιμοποιούνται για να προσθέσουν εφέ σε ορισμένα στοιχεία της σελίδας μας

Σύνταξη ψευδοστοιχείων

Η σύνταξη των ψευδοστοιχείων είναι η παρακάτω:
Σύνταξη ψευδοστοιχείων
επιλογέας:ψευδοστοιχείο {
ιδιότητα: τιμή;
}

Σύνταξή με την τιμή class:
Σύνταξη ψευδοστοιχείων με την τιμή class
επιλογέας.τιμή_της_ιδιότητας_class:ψευδοστοιχείο {
ιδιότητα: τιμή;
}

Τα ψευδοστοιχεία είναι τα παρακάτω :
  • :first-line, xρησιμοποιείται για να προσθέσει στυλ στην πρώτη γραμμή του κειμένου του στοιχείου που αναφέρετε ο επιλογέας του στυλ
  • :first-letter, xρησιμοποιείται για να προσθέσει στυλ στον πρώτο γράμμα του κειμένου του στοιχείου που αναφέρετε ο επιλογέας του στυλ

Το ψευδοστοιχείο :first-line

Το ψευδοστοιχείο :first-line xρησιμοποιείται για να προσθέσει στυλ στην πρώτη γραμμή του κειμένου του στοιχείου που αναφέρεται ο επιλογέας του στυλ

Στο παρακάτω παράδειγμα, η πρώτη γραμμή της παραγράφου θα εμφανιστεί με μπλε χρώμα:
Χρήση ψευδοστοιχείου για την πρώτη γραμμή μιας παραγράφου
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
p:first-line {
color:#0000ff;
font-variant:small-caps
}
</style>
</head>
<body>
<p>Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. </p>

</body>
</html>
Δοκίμασε το
Δεν μπορούμε να χρησιμοποιήσουμε όλες τις ιδιότητες CSS σε ένα στυλ με το ψευδοστοιχείο :first-line. Οι επιτρεπτές ιδιότητες είναι οι παρακάτω:
  • Όλες οι ιδιότητες της γραμματοσειράς
  • Όλες οι ιδιότητες του φόντου
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Το ψευδοστοιχείο :first-letter

Το ψευδοστοιχείο :first-letter xρησιμοποιείται για να προσθέσει στυλ στον πρώτο χαρακτήρα του κειμένου του στοιχείου που αναφέρεται ο επιλογέας του στυλ

Στο παρακάτω παράδειγμα, ο πρώτος χαρακτήρας της παραγράφου, θα εμφανιστεί με μπλε χρώμα:
Χρήση ψευδοστοιχείου για τον πρώτο χαρακτήρα
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
p.paragr1:first-letter {
color:#0000ff;
font-variant:small-caps
}
</style>
</head>
<body>
<p class="paragr1" >Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. </p>

</body>
</html>
Δοκίμασε το
Δεν μπορούμε να χρησιμοποιήσουμε όλες τις ιδιότητες CSS σε ένα στυλ με το ψευδοστοιχείο :first-letter. Οι επιτρεπτές ιδιότητες είναι οι παρακάτω:
  • Ιδιότητες γραμματοσειράς
  • Ιδιότητες του φόντου
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Χρήση και των δύο ψευδοστοιχείων σε ένα στοιχείο της σελίδας

Μπορούμε να εφαρμόσουμε και τα δύο ψευδοστοιχεία σε ένα στοιχείο της σελίδας μας. Για παράδειγμα, αν θέλουμε να εφαρμόσουμε ένα στυλ στην πρώτη γραμμή της παραγράφου και ταυτόχρονα ένα άλλο στυλ για τον πρώτο χαρακτήρα της ίδιας παραγράφου, τότε θα γράψουμε:
Στυλ για την πρώτη γραμμή μιας παραγράφου και για τον πρώτο χαρακτήρα
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
p:first-letter {
color:Red
font-size:30px;
}
p:first-line {
color:#0000ff;
font-variant:small-caps
}
</style>
</head>
<body>
<p>Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. </p>

</body>
</html>
Δοκίμασε το

Ψευδοκλάσεις (Pseudo-classes)

Λεπτομέρειες
Δημιουργήθηκε : 07 Δεκεμβρίου 2007
Οι ψευδοκλάσεις της CSS χρησιμοποιούνται για να προσθέσουν εφέ σε ορισμένα στοιχεία της σελίδας μας

Σύνταξη ψευδοκλάσεων

Η σύνταξη των ψευδοκλάσεων είναι η παρακάτω:
Σύνταξη ψευδοκλάσεων
επιλογέας:ψευδοκλάση {
ιδιότητα: τιμή;
}
Σύνταξή με την τιμή class:
Σύνταξη ψευδοκλάσεων με την τιμή class
επιλογέας.τιμή_της_ιδιότητας_class:ψευδοκλάση {
ιδιότητα: τιμή;
}
Μερικές από τις ψευδοκλάσεις είναι οι :
  • :link, εφαρμόζεται το στυλ με την ψευδοκλάση αυτή, όταν ο χρήστης δεν έχει επισκεφθεί παλαιότερα τον σύνδεσμο
  • :visited, εφαρμόζεται το στυλ με την ψευδοκλάση αυτή, όταν ο χρήστης έχει επισκεφθεί παλαιότερα τον σύνδεσμο
  • :hover, εφαρμόζεται το στυλ με την ψευδοκλάση αυτή, όταν ο χρήστης τοποθετεί τον δείκτη του ποντικιού του επάνω απο τον σύνδεσμο
  • :active, εφαρμόζεται το στυλ με την ψευδοκλάση αυτή, όταν ο χρήστης έχει πατημένο το αριστερό κλικ του ποντικιού του επάνω στον σύνδεσμο

Χρήση των ψευδοκλάσεων στους συνδέσμους

Παραδείγματα

Ψευδοκλάσεις στους συνδέσμους
Με την χρήση των ψευδοκλάσεων στους συνδέσμους, μπορούμε να προσθέσουμε εφέ σ"αυτούς

Θέση Στοιχείων

Λεπτομέρειες
Δημιουργήθηκε : 07 Δεκεμβρίου 2007
Στην ενότητα αυτή θα δούμε πως τοποθετούμε ένα στοιχείο σε συγκεκριμένη θέση μέσα στην σελίδα μας, ανεξάρτητα που αυτό είναι τοποθετημένο στον πηγαίο κώδικα HTML και ανεξάρτητα απο τα άλλα γειτονικά στοιχεία της σελίδας.

Ιδιότητες της CSS για την θέση των στοιχείων

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες ορισμού της θέσης ενός στοιχείου μέσα στην σελίδα και σε σχέση με τα γειτονικά του στοιχεία:
Ιδιότητα Τιμές Περιγραφή
bottom auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει την απόσταση μεταξύ του κατώτερου σημείου του στοιχείου και της κάτω πλευράς του παραθύρου του browser
Δοκίμασε το
Σημείωση: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε την ιδιότητα position με την τιμή absolute
clear left
right
both
none
Ορίζει την πλευρά ενός στοιχείου στην οποία δεν επιτρέπεται να εμφανίζονται άλλα στοιχεία.

left = στην αριστερή πλευρά του στοιχείου δεν εμφανίζεται άλλο στοιχείο
right = στην δεξιά πλευρά του στοιχείου δεν εμφανίζεται άλλο στοιχείο
both = στην δεξιά και στην αριστερή πλευρά του στοιχείου δεν εμφανίζεται άλλο στοιχείο
none = τα γειτονικά στοιχεία εμφανίζονται κανονικα
Δοκίμασε το
clip rect(σημειοx1, σημειοy1, σημειοx2, σημειοy2)
auto
Ορίζει ένα σχήμα το οποίο ορίζει την επιφάνεια του στοιχείου που θα εμφανίζεται. Η τιμή που πέρνει η ιδιότητα clip είναι η rect(σημειοx1, σημειοy1, σημειοx2, σημειοy2) η οποία ορίζει το ορθογώνιο σχήμα.
Δοκίμασε το
Σημείωση: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε την ιδιότητα position με την τιμή absolute
display none
block
inline
list-item
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
Ορίζει την εμφάνιση του στοιχείου

none: το στοιχείο δεν εμφανίζεται καθόλου
block: το στοιχείο εμφανίζεται σαν μπλοκ αφήνοντας μια γραμμή κενή πριν και μετά το στοιχείο αυτό
inline: το στοιχείο εμφανίζεται κανονικά (default) χωρίς την κενή γραμμή πριν και μετά το στοιχείο αυτό
list-item: το στοιχείο εμφανίζεται σαν επιλογή λίστας
table: το στοιχείο εμφανίζεται σαν πίνακα (όπως <table>) αφήνοντας μια γραμμή κενή πριν και μετά το στοιχείο αυτό
inline-table: το στοιχείο εμφανίζεται σαν πίνακα (όπως <table>) χωρίς την κενή γραμμή πριν και μετά το στοιχείο αυτό
table-row-group: το στοιχείο εμφανίζεται σαν ομάδα γραμμών ενός πίνακα (όπως <tbody>)
table-header-group: το στοιχείο εμφανίζεται σαν ομάδα γραμμών ενός πίνακα (όπως <thead>)
table-footer-group: το στοιχείο εμφανίζεται σαν ομάδα γραμμών ενός πίνακα (όπως <tfoot>)
table-row: το στοιχείο εμφανίζεται σαν γραμμή πίνακα (όπως <tr>)
table-column-group: το στοιχείο εμφανίζεται σαν ομάδα στυλών πίνακα (όπως <colgroup>)
table-column: το στοιχείο εμφανίζεται σαν μια στήλη κελιών πίνακα (όπως <col>)
table-cell: το στοιχείο εμφανίζεται σαν ένα κελί πίνακα (όπως <td> και <th>)
table-caption: το στοιχείο εμφανίζεται σαν τίτλος πίνακα (όπως <caption>)
Δοκίμασε το
float left
right
none
Ορίζει την θέση ενός στοχείου σε σχέση με το γειτονικό του στοιχείο
Δοκίμασε το
left auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει την απόσταση μεταξύ του αριστερότερου σημείου του στοιχείου και της αριστερής πλευράς του παραθύρου του browser
Δοκίμασε το
Σημείωση: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε την ιδιότητα position με την τιμή absolute
overflow visible
hidden
scroll
auto
Ορίζει τον τρόπο που θα διαχειριστεί ο browser το περιεχόμενο, όταν αυτό υπερβαίνει το όριο της περιοχής στην οποία βρίσκεται (είτε είναι σε κελί ενός πίνακα, είτε είναι σε μια περιοχή κειμένου, κτλ).
visible = το μέρος του περιεχομένου που υπερβαίνει το όριο της περιοχής, θα εμφανίζεται.
hidden = το μέρος του περιεχομένου που υπερβαίνει το όριο της περιοχής, δεν θα εμφανίζεται.
scroll = όταν το περιεχόμενο υπερβαίνει την περιοχή στην οποία βρίσκεται, τότε θα εμφανίζονται οι μπάρες κύλισης
Δοκίμασε το
position static
relative
absolute
fixed
Ορίζει τον τρόπο που θα λειτουργήσουν οι ιδιότητες left, top, right, bottom

static = το στοιχείο τοποθετείται με βάση την κανονική "ροή" των περιεχομένων της σελίδας. Όταν θέτουμε την τιμή static, τότε οι ιδιότητες left, top, right, bottom δεν τις συμπεριλαμβάνουμε στο στυλ

relative = αν προσθέσουμε στο στυλ το left: 40px, ο browser θα αφήσει κενό 40 pixels αριστερά του στοιχείου. Αν προσθέσουμε στο στυλ το top: 94px, ο browser θα αφήσει κενό 94 pixels από την πάνω πλευρά του στοιχείου. Αν προσθέσουμε στο στυλ το right: 34px, ο browser θα αφήσει κενό 34 pixels δεξιά του στοιχείου. Αν προσθέσουμε στο στυλ το bottom: 7px, ο browser θα αφήσει κενό 7 pixels από την κάτω του στοιχείου.
Δοκίμασε το

absolute = ορίζει την ακριβή θέση που θα εμφανιστεί το στοιχείο ανεξάρτητα την κανονική θέση του μέσα στην σελίδα. Η θέση καθορίζεται από δύο τιμές: την οριζόντια τιμή (left) και την κάθετη τιμή (top). Αν δηλαδή προσθέσουμε στο στυλ το left: 40px και το top:100px, τότε ο browser θα τοποθετήσει το στοιχείο στο σημείο με συντεταγμένες 40,100 της οθόνης του browser.
Δοκίμασε το

fixed = λειτουργεί όπως ακριβώς η τιμή absolute, με την διαφορά ότι σε περίπτωση που το περιεχόμενο της σελίδας σκρολάρει, το στοιχείο παραμένει σταθερό
Δοκίμασε το
right auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει την απόσταση μεταξύ του δεξιότερου σημείου του στοιχείου και της δεξιάς πλευράς του παραθύρου του browser
Δοκίμασε το
Σημείωση: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε την ιδιότητα position με την τιμή absolute
top auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει την απόσταση μεταξύ του πιο πάνω σημείου του στοιχείου και της πάνω πλευράς του παραθύρου του browser
Δοκίμασε το
Σημείωση: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε την ιδιότητα position με την τιμή absolute
vertical-align baseline
sub
super
top
text-top
middle
bottom
text-bottom
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει την κάθετη στοίχιση των γειτονικών στοιχείων
baseline: τα γειτονικά στοιχεία τοποθετούνται στην ίδια ευθεία με την κάτω πλευρά του στοιχείου
sub
: τα γειτονικά στοιχεία τοποθετούνται σαν μαθηματική βάση του στοιχείου
super: τα γειτονικά στοιχεία τοποθετούνται σαν μαθηματικός εκθέτης του στοιχείου
top: τα γειτονικά στοιχεία τοποθετούνται στην ίδια ευθεία με την πάνω πλευρά του στοιχείου
text-top: τα γειτονικά στοιχεία τοποθετούνται στην ίδια ευθεία με την πάνω πλευρά του στοιχείου
middle: τα γειτονικά στοιχεία τοποθετούνται στην μέση της κάθετης πλευράς του στοιχείου
bottom: τα γειτονικά στοιχεία τοποθετούνται στην ίδια ευθεία με την κάτω πλευρά του στοιχείου
text-bottom: τα γειτονικά στοιχεία τοποθετούνται στην ίδια ευθεία με την κάτω πλευρά του στοιχείου
αριθμός σε pixels: τα γειτονικά στοιχεία τοποθετούνται σε καθορισμένη απόσταση (σε pixels) κάτω από το στοιχείο
αριθμός σε cm: τα γειτονικά στοιχεία τοποθετούνται σε καθορισμένη απόσταση (σε cm) κάτω από το στοιχείο
αριθμός σε %: τα γειτονικά στοιχεία τοποθετούνται σε καθορισμένη απόσταση (σε %) κάτω από το στοιχείο
Δοκίμασε το
visibility visible
hidden
collapse
Ορίζει αν θα εμφανίζεται ή όχι ένα στοιχείο, χωρίς να αλλάζει η διάταξη των στοιχείων μέσα στην οθόνη. Η τιμή collapse όταν χρησιμοποιείται σε πίνακα, αφαιρεί το περιεχόμενο των κελιών ή των γραμμών
Δοκίμασε το

Παραδείγματα

Στοίχηση εικόνας και κειμένου
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε την στοίχηση μιας εικόνας σε σχέση με το γειτονικό του κείμενο float)

Στοίχηση του πρώτου γράμματος της παραγράφου στα αριστερά
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε την στοίχηση του πρώτου γράμματος μιας παραγράφου σε σχέση με την υπόλοιπη παράγραφο (ιδιότητα float)

Ορισμός σχήματος ενός στοιχείου
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε ένα σχήμα το οποίο θα ορίζει την επιφάνεια του στοιχείου που θα εμφανίζεται (ιδιότητα clip)

Εμφάνιση παραγράφων σαν inline
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να εμφανίσουμε τρεις παραγράφους στην ίδια γραμμή (ιδιότητα display)

Εμφάνιση λέξεων σαν block
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να εμφανίσουμε δύο λέξεις σαν διαφορετικό μπλοκ (ιδιότητα display)

Διαστάσεις

Λεπτομέρειες
Δημιουργήθηκε : 07 Δεκεμβρίου 2007
Στην ενότητα αυτή θα δούμε με ποιόν τρόπο ορίζουμε τις διαστάσεις διάφορων στοιχείων, με χρήση CSS

Ιδιότητες της CSS για τις διαστάσεις των στοιχείων

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

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες ορισμού διαστάσεων:
Ιδιότητα Τιμές Περιγραφή
height auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το ύψος του στοιχείου
Δοκίμασε το
max-height none
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το μέγιστο ύψος που θα έχει ένα στοιχείο
Δοκίμασε το
max-width none
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το μέγιστο μήκος που θα έχει ένα στοιχείο
Δοκίμασε το
min-height none
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το ελάχιστο ύψος που θα έχει ένα στοιχείο
Δοκίμασε το
min-width none
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το ελάχιστο μήκος που θα έχει ένα στοιχείο
Δοκίμασε το
width auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το μήκος του στοιχείου
Δοκίμασε το

Παραδείγματα

Διαστάσεις πίνακα
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε τις διαστάσεις ενός πίνακα

Διαστάσεις εικόνας
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε τις διαστάσεις μιας εικόνας

Διαστάσεις ενός τμήματος <div>
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε τις διαστάσεις ενός τμήματος <div>

Δείκτης Ποντικιού

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

Ιδιότητες της CSS για ν δείκτη του ποντικιού

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες ορισμού του στυλ των λιστών:
Ιδιότητα Τιμές Περιγραφή
cursor url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
Με την ιδιότητα αυτή αλλάζουμε τον κερσορα του ποντικιού
Δοκίμασε το

Παραδείγματα

Ορισμός του στυλ ενός συνδέσμου
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε στυλ για κάθε μια κατάσταση (hover, visited, active) ενός συνδέσμου. Όταν τοποθετείτε το ποντίκι σας επάνω στον σύνδεσμο, αλλάζει ο κέρσορας
©Copyright από το 2005 εώς σήμερα, Ορθόδοξος Χ. Καργιοφύλλης
Επικοινωνία με το wlearn.gr στο info@wlearn.gr
Web hosting by ip.gr