From 109616d2201709e2dd2665095daf66fc094a318c Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:06:59 +0300 Subject: [PATCH 1/9] 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) From 46cf508e10f286fd78ea94384e79737627ed1d06 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:07:49 +0300 Subject: [PATCH 2/9] 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` τελευταίο. ## Συμβατικότητα Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει -πάντα να ελεγχουμέ πρωτου τους χρησιμοποιήσουμε. +πάντα να ελέγχουμε πρωτου τους χρησιμοποιήσουμε. ## Περισσότερα From 461c5ccfa6e2347ea517ca73b518a352cc40c39e Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:09:45 +0300 Subject: [PATCH 3/9] 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 --- Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας From 2a2dd3abcd5439719a1a353dae9a645fe9921a39 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:13:41 +0300 Subject: [PATCH 4/9] 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/) From 1308f73e706b6d68144dc54b0f23e6ebc497e19f Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:16:11 +0300 Subject: [PATCH 5/9] 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; /* οποιοδήποτε απο αυτα τα δύο είναι το μικρότερο */ From 0f8165d0c8c5f02c6829771edfddc4dd4a2caf01 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:16:56 +0300 Subject: [PATCH 6/9] 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) απο την οπτική της περιγραφή. From 51f523c29df9547fbbb0ec0915813fcc629f419a Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:27:30 +0300 Subject: [PATCH 7/9] 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` τελευταίο. From 8908c07652b56033173a0328abd2090583418e79 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:30:50 +0300 Subject: [PATCH 8/9] css translation file moved to appropriate folder --- css-gr.html.markdown => el-gr/css-gr.html.markdown | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename css-gr.html.markdown => el-gr/css-gr.html.markdown (100%) diff --git a/css-gr.html.markdown b/el-gr/css-gr.html.markdown similarity index 100% rename from css-gr.html.markdown rename to el-gr/css-gr.html.markdown From ece01620be7c688e86d7fcbbfe59adde8d77e7d0 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:32:54 +0300 Subject: [PATCH 9/9] 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; /* ίντσες */