From 109616d2201709e2dd2665095daf66fc094a318c Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:06:59 +0300 Subject: Greek CSS file Greek translation for the CSS --- css-gr.html.markdown | 242 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 242 insertions(+) create mode 100644 css-gr.html.markdown diff --git a/css-gr.html.markdown b/css-gr.html.markdown new file mode 100644 index 00000000..78fb02be --- /dev/null +++ b/css-gr.html.markdown @@ -0,0 +1,242 @@ +--- +language: css +contributors: + - ["Kostas Bariotis", "http://kostasbariotis.com"] +filename: css-gr.html.markdown +--- + +Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας +του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες, σε οπτικά και πολυμεσικά αντικείμενα, σελίδες +γίναν καθημερινότητα. + +Η CSS μας βοηθάει να διαχωρήσουμε το περιεχόμενο της σελίδας μας (HTML) απο την οπτική της περιγραφή. + +Με την CSS ορίζουμε οπτικές ιδιότητες (χρώμα, μέγεθος, κλπ) σε HTML αντικείμενα (H1, div, κλπ). + +```css +/* Σχόλια εμφανίζονται εντός καθέτου-αστερίσκου, όπως εδώ. + Δεν υπάρχουν σχόλια μια γραμμής και πολλών. */ + +/* #################### + ## ΚΑΝΟΝΕΣ + #################### */ + +/* ένας κανόνας χρησιμοποιείτε για να στοχεύσουμε ένα αντικείμενο (selector). +selector { property: value; /* περισσότερες ιδιότητες...*/ } + +/* +Αυτό είναι ενα παράδειγμα αντικειμένου¨ + +
+*/ + +/* Μπορούμε να το στοχεύσουμε με την χρήση CSS κλάσεων */ +.class1 { } + +/* Ή και με τις δύο κλάσεις! */ +.class1.class2 { } + +/* Και με το όνομα του */ +div { } + +/* Ή με το id του */ +#anID { } + +/* Ή με το γεγονός ότι περιέχει ενα attribute */ +[attr] { font-size:smaller; } + +/* Ή οτι το attribute αυτό έχει μια συγκεκριμένη τιμή */ +[attr='value'] { font-size:smaller; } + +/* Ξεκινάει απο το λεκτικό (CSS 3) */ +[attr^='val'] { font-size:smaller; } + +/* Καταλήγει σε αυτο το λεκτικό (CSS 3) */ +[attr$='ue'] { font-size:smaller; } + +/* Περιέχει κάποιο λεκτικό */ +[otherAttr~='foo'] { } +[otherAttr~='bar'] { } + +/* περιέχει το λεκτικό σε λίστα χωρισμένη με παύλες, δηλαδή: "-" (U+002D) */ +[otherAttr|='en'] { font-size:smaller; } + + +/* Μπορούμε να προσθέσουμε μεταξύ τους selectors για να δημιουργήσουμε πιο αυστηρούς. + Δεν βάζουμε κενά ανάμεσα. */ +div.some-class[attr$='ue'] { } + +/* Μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται μέσα σε άλλα. */ +div.some-parent > .class-name { } + +/* Ή κάποιο αντικείμενο απόγονο ανεξαρτήτου του βάθους της σχέσης τους. */ +div.some-parent .class-name { } + +/* ΠΡΟΣΟΧΗ: ο ίδιος selector χωρίς κενά έχει άλλο νόημα. (Άσκηση προς τον αναγνώστη) */ +div.some-parent.class-name { } + +/* Μπορούμε να επιλέξουμε αντικείμενα με βάση το αμέσως επόμενο αντικείμενο στο ίδιο επίπεδο. */ +.i-am-just-before + .this-element { } + +/* Ή οποιοδήποτε αντικείμενο που προηγείτε */ +.i-am-any-element-before ~ .this-element { } + +/* Με την βοήθεια των ψευδο-κλάσεων μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται σε μια + ορισμένη κατάασταση. */ + +/* π.χ. όταν ο κέρσορας είναι πάνω απο ένα αντικείμενο */ +selector:hover { } + +/* ή ένας υπερσύνδεσμος που πατήθηκε */ +selector:visited { } + +/* ή που δεν πατήθηκε */ +selected:link { } + +/* ή ένα αντικείμενο που επιλέχθηκε */ +selected:focus { } + +/* οποιοδήποτε αντικείμενο είναι το πρώτο παιδί των γονέων του */ +selector:first-child {} + +/* οποιοδήποτε αντικείμενο είναι το πρώτοτελευταίο παιδί των γονέων του */ +selector:last-child {} + +/* Όπως και με τις ψευδο-κλάσεις, τα ψευδο-αντικείμενα μας επιτρέπουν τα τροποοιήσουμε συγκεκριμένα + κομμάτια της σελίδας */ + +/* επιλέγει το ψευδο-αντικείμενο ακριβώς πριν απο το αντικείμενο */ +selector::before {} + +/* επιλέγει το ψευδο-αντικείμενο ακριβώς μετά απο τον αντικείμενο */ +selector::after {} + +/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχεία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να + επιλέξουμε όλα τα αντικείμενα */ +* { } /* όλα τα αντικείμενα της σελίδας */ +.parent * { } /* όλους τους απόγονους */ +.parent > * { } /* όλους τους απόγονους πρώτου επιπέδου */ + +/* #################### + ## Ιδιότητες + #################### */ + +selector { + + /* Οι μονάδες μπορούν να είναι είτε απόλυτες είτε σχετικές */ + + /* Σχετικές μονάδες */ + width: 50%; /* ποσοστό επί του πλάτους του γονέα */ + font-size: 2em; /* πολλαπλασιαστής της αρχικής τιμής του αντικειμένου */ + font-size: 2rem; /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχεία */ + font-size: 2vw; /* πολλαπλαστιαστής του 1% του οπτικού πλάτους */ + font-size: 2vh; /* ή τους ύψους */ + font-size: 2vmin; /* οποιοδήποτε απο αυτα τα δύο είναι το μικρότερο */ + font-size: 2vmax; /* ή το μεγαλύτερο */ + + /* Απόλυτες μονάδες */ + width: 200px; /* pixels */ + font-size: 20pt; /* points */ + width: 5cm; /* εκατοστά */ + min-width: 50mm; /* χιλιοστά */ + max-width: 5in; /* ίντσες */ + + /* Χρώματα */ + color: #F6E; /* σύντομη δεκαεξαδική μορφή */ + color: #FF66EE; /* δεκαεξαδική μορφή */ + color: tomato; /* χρώμα με το όνομα του (συγκεκριμένα χρώματα) */ + color: rgb(255, 255, 255); /* τιμή RGB */ + color: rgb(10%, 20%, 50%); /* τιμή RGB με ποσοστά */ + color: rgba(255, 0, 0, 0.3); /* τιμή RGBA (CSS3) σσ. 0 < a < 1 */ + color: transparent; /* όπως και το παραπάνω με a = 0 */ + color: hsl(0, 100%, 50%); /* τιμή hsl με ποσοστά (CSS 3) */ + color: hsla(0, 100%, 50%, 0.3); /* τιμή hsla με ποσοστά και a */ + + /* Εικόνες μπορούν να τοποθετηθούν στον φόντο ενός αντικειμένου */ + background-image: url(/img-path/img.jpg); + + /* Γραμματοσειρές */ + font-family: Arial; + /* εάν η γραμματοσειρα περιέχει κενά */ + font-family: "Courier New"; + /* εάν η πρώτη γραμματοσειρα δε βρεθεί εγκατεστημένη στο Λειτουργικό Σύστυμα, αυτόματα + επιλέγετε η δεύτερη, κ.κ.ε. */ + font-family: "Courier New", Trebuchet, Arial, sans-serif; +} +``` + +## Χρήση + +Αποθηκεύουμε ένα αρχείο CSS με την επέκταση `.css`. + +```xml + + + + + + + +
+
+``` + +## Ειδικότητα των κανόνων (Cascading απο το αγγλικό τίτλο Cascading Style Sheets) + +Ένα αντικείμενο μπορεί να στοχευθεί απο πολλούς κανόνες και μπορεί η ίδια ιδιότητα να +περιλαμβάνετε σε πολλούς κανόνες. Σε αυτές της περιπτώσεις υπερισχύει πάντα ο πιο ειδικός +κανόνας και απο αυτούς, αυτός που εμφανίζετε τελευταίος. + +```css +/* A */ +p.class1[attr='value'] + +/* B */ +p.class1 { } + +/* C */ +p.class2 { } + +/* D */ +p { } + +/* E */ +p { property: value !important; } +``` + +```xml +

+``` + +Η σειρά θα είναι: + +* `E` έχει μεγαλύτερο βάρος λόγο του `!important`. Κάλες πρακτικές λένε να το αποφεύγουμε. +* `F` επόμενο λόγο του inline κανόνα. +* `A` επόμενο λόγο του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. +* `C` επόμενο, λόγο του οτι εμφανίζετε μετα το Β και ας έχει την ίδια ειδικότητα. +* `B` επόμενο. +* `D` is the last one. + +## Συμβατικότητα + +Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει +πάντα να ελεγχουμέ πρωτου τους χρησιμοποιήσουμε. + +## Περισσότερα + +* Έλεγχος συμβατικότητας, [CanIUse](http://caniuse.com). +* CSS Playground [Dabblet](http://dabblet.com/). +* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) +* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) + +## Μελέτη + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) +* [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing +* [CSS-Tricks](https://css-tricks.com) -- cgit v1.2.3 From 46cf508e10f286fd78ea94384e79737627ed1d06 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:07:49 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index 78fb02be..daedfd2c 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -218,12 +218,12 @@ p { property: value !important; } * `A` επόμενο λόγο του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. * `C` επόμενο, λόγο του οτι εμφανίζετε μετα το Β και ας έχει την ίδια ειδικότητα. * `B` επόμενο. -* `D` is the last one. +* `D` τελευταίο. ## Συμβατικότητα Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει -πάντα να ελεγχουμέ πρωτου τους χρησιμοποιήσουμε. +πάντα να ελέγχουμε πρωτου τους χρησιμοποιήσουμε. ## Περισσότερα -- cgit v1.2.3 From 461c5ccfa6e2347ea517ca73b518a352cc40c39e Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:09:45 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 1 + 1 file changed, 1 insertion(+) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index daedfd2c..8198ae83 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -3,6 +3,7 @@ language: css contributors: - ["Kostas Bariotis", "http://kostasbariotis.com"] filename: css-gr.html.markdown +lang: el-gr --- Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας -- cgit v1.2.3 From 2a2dd3abcd5439719a1a353dae9a645fe9921a39 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:13:41 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index 8198ae83..5d8f3454 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -221,14 +221,14 @@ p { property: value !important; } * `B` επόμενο. * `D` τελευταίο. -## Συμβατικότητα +## Συμβατότητα Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει πάντα να ελέγχουμε πρωτου τους χρησιμοποιήσουμε. ## Περισσότερα -* Έλεγχος συμβατικότητας, [CanIUse](http://caniuse.com). +* Έλεγχος συμβατότητας, [CanIUse](http://caniuse.com). * CSS Playground [Dabblet](http://dabblet.com/). * [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) * [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) -- cgit v1.2.3 From 1308f73e706b6d68144dc54b0f23e6ebc497e19f Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:16:11 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index 5d8f3454..240d372f 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -112,7 +112,7 @@ selector::before {} /* επιλέγει το ψευδο-αντικείμενο ακριβώς μετά απο τον αντικείμενο */ selector::after {} -/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχεία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να +/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να επιλέξουμε όλα τα αντικείμενα */ * { } /* όλα τα αντικείμενα της σελίδας */ .parent * { } /* όλους τους απόγονους */ @@ -129,7 +129,7 @@ selector { /* Σχετικές μονάδες */ width: 50%; /* ποσοστό επί του πλάτους του γονέα */ font-size: 2em; /* πολλαπλασιαστής της αρχικής τιμής του αντικειμένου */ - font-size: 2rem; /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχεία */ + font-size: 2rem; /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχία */ font-size: 2vw; /* πολλαπλαστιαστής του 1% του οπτικού πλάτους */ font-size: 2vh; /* ή τους ύψους */ font-size: 2vmin; /* οποιοδήποτε απο αυτα τα δύο είναι το μικρότερο */ -- cgit v1.2.3 From 0f8165d0c8c5f02c6829771edfddc4dd4a2caf01 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:16:56 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index 240d372f..325fb435 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -7,7 +7,7 @@ lang: el-gr --- Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας -του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες, σε οπτικά και πολυμεσικά αντικείμενα, σελίδες +του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες σελίδες, σε οπτικά και πολυμεσικά αντικείμενα, γίναν καθημερινότητα. Η CSS μας βοηθάει να διαχωρήσουμε το περιεχόμενο της σελίδας μας (HTML) απο την οπτική της περιγραφή. -- cgit v1.2.3 From 51f523c29df9547fbbb0ec0915813fcc629f419a Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:27:30 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index 325fb435..764a17cf 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -79,7 +79,7 @@ div.some-parent.class-name { } /* Μπορούμε να επιλέξουμε αντικείμενα με βάση το αμέσως επόμενο αντικείμενο στο ίδιο επίπεδο. */ .i-am-just-before + .this-element { } -/* Ή οποιοδήποτε αντικείμενο που προηγείτε */ +/* Ή οποιοδήποτε αντικείμενο που προηγείται */ .i-am-any-element-before ~ .this-element { } /* Με την βοήθεια των ψευδο-κλάσεων μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται σε μια @@ -189,7 +189,7 @@ selector { Ένα αντικείμενο μπορεί να στοχευθεί απο πολλούς κανόνες και μπορεί η ίδια ιδιότητα να περιλαμβάνετε σε πολλούς κανόνες. Σε αυτές της περιπτώσεις υπερισχύει πάντα ο πιο ειδικός -κανόνας και απο αυτούς, αυτός που εμφανίζετε τελευταίος. +κανόνας και απο αυτούς, αυτός που εμφανίζεται τελευταίος. ```css /* A */ @@ -214,10 +214,10 @@ p { property: value !important; } Η σειρά θα είναι: -* `E` έχει μεγαλύτερο βάρος λόγο του `!important`. Κάλες πρακτικές λένε να το αποφεύγουμε. -* `F` επόμενο λόγο του inline κανόνα. -* `A` επόμενο λόγο του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. -* `C` επόμενο, λόγο του οτι εμφανίζετε μετα το Β και ας έχει την ίδια ειδικότητα. +* `E` έχει μεγαλύτερο βάρος λόγω του `!important`. Κάλες πρακτικές λένε να το αποφεύγουμε. +* `F` επόμενο λόγω του inline κανόνα. +* `A` επόμενο λόγω του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. +* `C` επόμενο, λόγω του οτι εμφανίζεται μετα το Β και ας έχει την ίδια ειδικότητα. * `B` επόμενο. * `D` τελευταίο. -- cgit v1.2.3 From 8908c07652b56033173a0328abd2090583418e79 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:30:50 +0300 Subject: css translation file moved to appropriate folder --- css-gr.html.markdown | 243 --------------------------------------------- el-gr/css-gr.html.markdown | 243 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 243 insertions(+), 243 deletions(-) delete mode 100644 css-gr.html.markdown create mode 100644 el-gr/css-gr.html.markdown diff --git a/css-gr.html.markdown b/css-gr.html.markdown deleted file mode 100644 index 764a17cf..00000000 --- a/css-gr.html.markdown +++ /dev/null @@ -1,243 +0,0 @@ ---- -language: css -contributors: - - ["Kostas Bariotis", "http://kostasbariotis.com"] -filename: css-gr.html.markdown -lang: el-gr ---- - -Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας -του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες σελίδες, σε οπτικά και πολυμεσικά αντικείμενα, -γίναν καθημερινότητα. - -Η CSS μας βοηθάει να διαχωρήσουμε το περιεχόμενο της σελίδας μας (HTML) απο την οπτική της περιγραφή. - -Με την CSS ορίζουμε οπτικές ιδιότητες (χρώμα, μέγεθος, κλπ) σε HTML αντικείμενα (H1, div, κλπ). - -```css -/* Σχόλια εμφανίζονται εντός καθέτου-αστερίσκου, όπως εδώ. - Δεν υπάρχουν σχόλια μια γραμμής και πολλών. */ - -/* #################### - ## ΚΑΝΟΝΕΣ - #################### */ - -/* ένας κανόνας χρησιμοποιείτε για να στοχεύσουμε ένα αντικείμενο (selector). -selector { property: value; /* περισσότερες ιδιότητες...*/ } - -/* -Αυτό είναι ενα παράδειγμα αντικειμένου¨ - -

-*/ - -/* Μπορούμε να το στοχεύσουμε με την χρήση CSS κλάσεων */ -.class1 { } - -/* Ή και με τις δύο κλάσεις! */ -.class1.class2 { } - -/* Και με το όνομα του */ -div { } - -/* Ή με το id του */ -#anID { } - -/* Ή με το γεγονός ότι περιέχει ενα attribute */ -[attr] { font-size:smaller; } - -/* Ή οτι το attribute αυτό έχει μια συγκεκριμένη τιμή */ -[attr='value'] { font-size:smaller; } - -/* Ξεκινάει απο το λεκτικό (CSS 3) */ -[attr^='val'] { font-size:smaller; } - -/* Καταλήγει σε αυτο το λεκτικό (CSS 3) */ -[attr$='ue'] { font-size:smaller; } - -/* Περιέχει κάποιο λεκτικό */ -[otherAttr~='foo'] { } -[otherAttr~='bar'] { } - -/* περιέχει το λεκτικό σε λίστα χωρισμένη με παύλες, δηλαδή: "-" (U+002D) */ -[otherAttr|='en'] { font-size:smaller; } - - -/* Μπορούμε να προσθέσουμε μεταξύ τους selectors για να δημιουργήσουμε πιο αυστηρούς. - Δεν βάζουμε κενά ανάμεσα. */ -div.some-class[attr$='ue'] { } - -/* Μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται μέσα σε άλλα. */ -div.some-parent > .class-name { } - -/* Ή κάποιο αντικείμενο απόγονο ανεξαρτήτου του βάθους της σχέσης τους. */ -div.some-parent .class-name { } - -/* ΠΡΟΣΟΧΗ: ο ίδιος selector χωρίς κενά έχει άλλο νόημα. (Άσκηση προς τον αναγνώστη) */ -div.some-parent.class-name { } - -/* Μπορούμε να επιλέξουμε αντικείμενα με βάση το αμέσως επόμενο αντικείμενο στο ίδιο επίπεδο. */ -.i-am-just-before + .this-element { } - -/* Ή οποιοδήποτε αντικείμενο που προηγείται */ -.i-am-any-element-before ~ .this-element { } - -/* Με την βοήθεια των ψευδο-κλάσεων μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται σε μια - ορισμένη κατάασταση. */ - -/* π.χ. όταν ο κέρσορας είναι πάνω απο ένα αντικείμενο */ -selector:hover { } - -/* ή ένας υπερσύνδεσμος που πατήθηκε */ -selector:visited { } - -/* ή που δεν πατήθηκε */ -selected:link { } - -/* ή ένα αντικείμενο που επιλέχθηκε */ -selected:focus { } - -/* οποιοδήποτε αντικείμενο είναι το πρώτο παιδί των γονέων του */ -selector:first-child {} - -/* οποιοδήποτε αντικείμενο είναι το πρώτοτελευταίο παιδί των γονέων του */ -selector:last-child {} - -/* Όπως και με τις ψευδο-κλάσεις, τα ψευδο-αντικείμενα μας επιτρέπουν τα τροποοιήσουμε συγκεκριμένα - κομμάτια της σελίδας */ - -/* επιλέγει το ψευδο-αντικείμενο ακριβώς πριν απο το αντικείμενο */ -selector::before {} - -/* επιλέγει το ψευδο-αντικείμενο ακριβώς μετά απο τον αντικείμενο */ -selector::after {} - -/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να - επιλέξουμε όλα τα αντικείμενα */ -* { } /* όλα τα αντικείμενα της σελίδας */ -.parent * { } /* όλους τους απόγονους */ -.parent > * { } /* όλους τους απόγονους πρώτου επιπέδου */ - -/* #################### - ## Ιδιότητες - #################### */ - -selector { - - /* Οι μονάδες μπορούν να είναι είτε απόλυτες είτε σχετικές */ - - /* Σχετικές μονάδες */ - width: 50%; /* ποσοστό επί του πλάτους του γονέα */ - font-size: 2em; /* πολλαπλασιαστής της αρχικής τιμής του αντικειμένου */ - font-size: 2rem; /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχία */ - font-size: 2vw; /* πολλαπλαστιαστής του 1% του οπτικού πλάτους */ - font-size: 2vh; /* ή τους ύψους */ - font-size: 2vmin; /* οποιοδήποτε απο αυτα τα δύο είναι το μικρότερο */ - font-size: 2vmax; /* ή το μεγαλύτερο */ - - /* Απόλυτες μονάδες */ - width: 200px; /* pixels */ - font-size: 20pt; /* points */ - width: 5cm; /* εκατοστά */ - min-width: 50mm; /* χιλιοστά */ - max-width: 5in; /* ίντσες */ - - /* Χρώματα */ - color: #F6E; /* σύντομη δεκαεξαδική μορφή */ - color: #FF66EE; /* δεκαεξαδική μορφή */ - color: tomato; /* χρώμα με το όνομα του (συγκεκριμένα χρώματα) */ - color: rgb(255, 255, 255); /* τιμή RGB */ - color: rgb(10%, 20%, 50%); /* τιμή RGB με ποσοστά */ - color: rgba(255, 0, 0, 0.3); /* τιμή RGBA (CSS3) σσ. 0 < a < 1 */ - color: transparent; /* όπως και το παραπάνω με a = 0 */ - color: hsl(0, 100%, 50%); /* τιμή hsl με ποσοστά (CSS 3) */ - color: hsla(0, 100%, 50%, 0.3); /* τιμή hsla με ποσοστά και a */ - - /* Εικόνες μπορούν να τοποθετηθούν στον φόντο ενός αντικειμένου */ - background-image: url(/img-path/img.jpg); - - /* Γραμματοσειρές */ - font-family: Arial; - /* εάν η γραμματοσειρα περιέχει κενά */ - font-family: "Courier New"; - /* εάν η πρώτη γραμματοσειρα δε βρεθεί εγκατεστημένη στο Λειτουργικό Σύστυμα, αυτόματα - επιλέγετε η δεύτερη, κ.κ.ε. */ - font-family: "Courier New", Trebuchet, Arial, sans-serif; -} -``` - -## Χρήση - -Αποθηκεύουμε ένα αρχείο CSS με την επέκταση `.css`. - -```xml - - - - - - - -
-
-``` - -## Ειδικότητα των κανόνων (Cascading απο το αγγλικό τίτλο Cascading Style Sheets) - -Ένα αντικείμενο μπορεί να στοχευθεί απο πολλούς κανόνες και μπορεί η ίδια ιδιότητα να -περιλαμβάνετε σε πολλούς κανόνες. Σε αυτές της περιπτώσεις υπερισχύει πάντα ο πιο ειδικός -κανόνας και απο αυτούς, αυτός που εμφανίζεται τελευταίος. - -```css -/* A */ -p.class1[attr='value'] - -/* B */ -p.class1 { } - -/* C */ -p.class2 { } - -/* D */ -p { } - -/* E */ -p { property: value !important; } -``` - -```xml -

-``` - -Η σειρά θα είναι: - -* `E` έχει μεγαλύτερο βάρος λόγω του `!important`. Κάλες πρακτικές λένε να το αποφεύγουμε. -* `F` επόμενο λόγω του inline κανόνα. -* `A` επόμενο λόγω του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. -* `C` επόμενο, λόγω του οτι εμφανίζεται μετα το Β και ας έχει την ίδια ειδικότητα. -* `B` επόμενο. -* `D` τελευταίο. - -## Συμβατότητα - -Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει -πάντα να ελέγχουμε πρωτου τους χρησιμοποιήσουμε. - -## Περισσότερα - -* Έλεγχος συμβατότητας, [CanIUse](http://caniuse.com). -* CSS Playground [Dabblet](http://dabblet.com/). -* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) -* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) - -## Μελέτη - -* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) -* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/) -* [QuirksMode CSS](http://www.quirksmode.org/css/) -* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) -* [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing -* [CSS-Tricks](https://css-tricks.com) diff --git a/el-gr/css-gr.html.markdown b/el-gr/css-gr.html.markdown new file mode 100644 index 00000000..764a17cf --- /dev/null +++ b/el-gr/css-gr.html.markdown @@ -0,0 +1,243 @@ +--- +language: css +contributors: + - ["Kostas Bariotis", "http://kostasbariotis.com"] +filename: css-gr.html.markdown +lang: el-gr +--- + +Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας +του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες σελίδες, σε οπτικά και πολυμεσικά αντικείμενα, +γίναν καθημερινότητα. + +Η CSS μας βοηθάει να διαχωρήσουμε το περιεχόμενο της σελίδας μας (HTML) απο την οπτική της περιγραφή. + +Με την CSS ορίζουμε οπτικές ιδιότητες (χρώμα, μέγεθος, κλπ) σε HTML αντικείμενα (H1, div, κλπ). + +```css +/* Σχόλια εμφανίζονται εντός καθέτου-αστερίσκου, όπως εδώ. + Δεν υπάρχουν σχόλια μια γραμμής και πολλών. */ + +/* #################### + ## ΚΑΝΟΝΕΣ + #################### */ + +/* ένας κανόνας χρησιμοποιείτε για να στοχεύσουμε ένα αντικείμενο (selector). +selector { property: value; /* περισσότερες ιδιότητες...*/ } + +/* +Αυτό είναι ενα παράδειγμα αντικειμένου¨ + +

+*/ + +/* Μπορούμε να το στοχεύσουμε με την χρήση CSS κλάσεων */ +.class1 { } + +/* Ή και με τις δύο κλάσεις! */ +.class1.class2 { } + +/* Και με το όνομα του */ +div { } + +/* Ή με το id του */ +#anID { } + +/* Ή με το γεγονός ότι περιέχει ενα attribute */ +[attr] { font-size:smaller; } + +/* Ή οτι το attribute αυτό έχει μια συγκεκριμένη τιμή */ +[attr='value'] { font-size:smaller; } + +/* Ξεκινάει απο το λεκτικό (CSS 3) */ +[attr^='val'] { font-size:smaller; } + +/* Καταλήγει σε αυτο το λεκτικό (CSS 3) */ +[attr$='ue'] { font-size:smaller; } + +/* Περιέχει κάποιο λεκτικό */ +[otherAttr~='foo'] { } +[otherAttr~='bar'] { } + +/* περιέχει το λεκτικό σε λίστα χωρισμένη με παύλες, δηλαδή: "-" (U+002D) */ +[otherAttr|='en'] { font-size:smaller; } + + +/* Μπορούμε να προσθέσουμε μεταξύ τους selectors για να δημιουργήσουμε πιο αυστηρούς. + Δεν βάζουμε κενά ανάμεσα. */ +div.some-class[attr$='ue'] { } + +/* Μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται μέσα σε άλλα. */ +div.some-parent > .class-name { } + +/* Ή κάποιο αντικείμενο απόγονο ανεξαρτήτου του βάθους της σχέσης τους. */ +div.some-parent .class-name { } + +/* ΠΡΟΣΟΧΗ: ο ίδιος selector χωρίς κενά έχει άλλο νόημα. (Άσκηση προς τον αναγνώστη) */ +div.some-parent.class-name { } + +/* Μπορούμε να επιλέξουμε αντικείμενα με βάση το αμέσως επόμενο αντικείμενο στο ίδιο επίπεδο. */ +.i-am-just-before + .this-element { } + +/* Ή οποιοδήποτε αντικείμενο που προηγείται */ +.i-am-any-element-before ~ .this-element { } + +/* Με την βοήθεια των ψευδο-κλάσεων μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται σε μια + ορισμένη κατάασταση. */ + +/* π.χ. όταν ο κέρσορας είναι πάνω απο ένα αντικείμενο */ +selector:hover { } + +/* ή ένας υπερσύνδεσμος που πατήθηκε */ +selector:visited { } + +/* ή που δεν πατήθηκε */ +selected:link { } + +/* ή ένα αντικείμενο που επιλέχθηκε */ +selected:focus { } + +/* οποιοδήποτε αντικείμενο είναι το πρώτο παιδί των γονέων του */ +selector:first-child {} + +/* οποιοδήποτε αντικείμενο είναι το πρώτοτελευταίο παιδί των γονέων του */ +selector:last-child {} + +/* Όπως και με τις ψευδο-κλάσεις, τα ψευδο-αντικείμενα μας επιτρέπουν τα τροποοιήσουμε συγκεκριμένα + κομμάτια της σελίδας */ + +/* επιλέγει το ψευδο-αντικείμενο ακριβώς πριν απο το αντικείμενο */ +selector::before {} + +/* επιλέγει το ψευδο-αντικείμενο ακριβώς μετά απο τον αντικείμενο */ +selector::after {} + +/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να + επιλέξουμε όλα τα αντικείμενα */ +* { } /* όλα τα αντικείμενα της σελίδας */ +.parent * { } /* όλους τους απόγονους */ +.parent > * { } /* όλους τους απόγονους πρώτου επιπέδου */ + +/* #################### + ## Ιδιότητες + #################### */ + +selector { + + /* Οι μονάδες μπορούν να είναι είτε απόλυτες είτε σχετικές */ + + /* Σχετικές μονάδες */ + width: 50%; /* ποσοστό επί του πλάτους του γονέα */ + font-size: 2em; /* πολλαπλασιαστής της αρχικής τιμής του αντικειμένου */ + font-size: 2rem; /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχία */ + font-size: 2vw; /* πολλαπλαστιαστής του 1% του οπτικού πλάτους */ + font-size: 2vh; /* ή τους ύψους */ + font-size: 2vmin; /* οποιοδήποτε απο αυτα τα δύο είναι το μικρότερο */ + font-size: 2vmax; /* ή το μεγαλύτερο */ + + /* Απόλυτες μονάδες */ + width: 200px; /* pixels */ + font-size: 20pt; /* points */ + width: 5cm; /* εκατοστά */ + min-width: 50mm; /* χιλιοστά */ + max-width: 5in; /* ίντσες */ + + /* Χρώματα */ + color: #F6E; /* σύντομη δεκαεξαδική μορφή */ + color: #FF66EE; /* δεκαεξαδική μορφή */ + color: tomato; /* χρώμα με το όνομα του (συγκεκριμένα χρώματα) */ + color: rgb(255, 255, 255); /* τιμή RGB */ + color: rgb(10%, 20%, 50%); /* τιμή RGB με ποσοστά */ + color: rgba(255, 0, 0, 0.3); /* τιμή RGBA (CSS3) σσ. 0 < a < 1 */ + color: transparent; /* όπως και το παραπάνω με a = 0 */ + color: hsl(0, 100%, 50%); /* τιμή hsl με ποσοστά (CSS 3) */ + color: hsla(0, 100%, 50%, 0.3); /* τιμή hsla με ποσοστά και a */ + + /* Εικόνες μπορούν να τοποθετηθούν στον φόντο ενός αντικειμένου */ + background-image: url(/img-path/img.jpg); + + /* Γραμματοσειρές */ + font-family: Arial; + /* εάν η γραμματοσειρα περιέχει κενά */ + font-family: "Courier New"; + /* εάν η πρώτη γραμματοσειρα δε βρεθεί εγκατεστημένη στο Λειτουργικό Σύστυμα, αυτόματα + επιλέγετε η δεύτερη, κ.κ.ε. */ + font-family: "Courier New", Trebuchet, Arial, sans-serif; +} +``` + +## Χρήση + +Αποθηκεύουμε ένα αρχείο CSS με την επέκταση `.css`. + +```xml + + + + + + + +
+
+``` + +## Ειδικότητα των κανόνων (Cascading απο το αγγλικό τίτλο Cascading Style Sheets) + +Ένα αντικείμενο μπορεί να στοχευθεί απο πολλούς κανόνες και μπορεί η ίδια ιδιότητα να +περιλαμβάνετε σε πολλούς κανόνες. Σε αυτές της περιπτώσεις υπερισχύει πάντα ο πιο ειδικός +κανόνας και απο αυτούς, αυτός που εμφανίζεται τελευταίος. + +```css +/* A */ +p.class1[attr='value'] + +/* B */ +p.class1 { } + +/* C */ +p.class2 { } + +/* D */ +p { } + +/* E */ +p { property: value !important; } +``` + +```xml +

+``` + +Η σειρά θα είναι: + +* `E` έχει μεγαλύτερο βάρος λόγω του `!important`. Κάλες πρακτικές λένε να το αποφεύγουμε. +* `F` επόμενο λόγω του inline κανόνα. +* `A` επόμενο λόγω του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. +* `C` επόμενο, λόγω του οτι εμφανίζεται μετα το Β και ας έχει την ίδια ειδικότητα. +* `B` επόμενο. +* `D` τελευταίο. + +## Συμβατότητα + +Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει +πάντα να ελέγχουμε πρωτου τους χρησιμοποιήσουμε. + +## Περισσότερα + +* Έλεγχος συμβατότητας, [CanIUse](http://caniuse.com). +* CSS Playground [Dabblet](http://dabblet.com/). +* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) +* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) + +## Μελέτη + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) +* [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing +* [CSS-Tricks](https://css-tricks.com) -- cgit v1.2.3 From ece01620be7c688e86d7fcbbfe59adde8d77e7d0 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:32:54 +0300 Subject: Update css-gr.html.markdown --- el-gr/css-gr.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/el-gr/css-gr.html.markdown b/el-gr/css-gr.html.markdown index 764a17cf..327dc1a0 100644 --- a/el-gr/css-gr.html.markdown +++ b/el-gr/css-gr.html.markdown @@ -137,7 +137,7 @@ selector { /* Απόλυτες μονάδες */ width: 200px; /* pixels */ - font-size: 20pt; /* points */ + font-size: 20pt; /* στιγμες */ width: 5cm; /* εκατοστά */ min-width: 50mm; /* χιλιοστά */ max-width: 5in; /* ίντσες */ -- cgit v1.2.3