mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 17:41:41 +00:00
241 lines
11 KiB
Markdown
241 lines
11 KiB
Markdown
---
|
||
contributors:
|
||
- ["Kostas Bariotis", "http://kostasbariotis.com"]
|
||
filename: css-gr.css
|
||
---
|
||
|
||
Η αρχική μορφή του Παγκόσμιου Ιστού αποτελείτο απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας
|
||
του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες σελίδες, σε οπτικά και πολυμεσικά αντικείμενα,
|
||
έγιναν καθημερινότητα.
|
||
|
||
Η CSS μας βοηθάει να διαχωρήσουμε το περιεχόμενο της σελίδας μας (HTML) απο την οπτική της περιγραφή.
|
||
|
||
Με την CSS ορίζουμε οπτικές ιδιότητες (χρώμα, μέγεθος, κλπ) σε HTML αντικείμενα (H1, div, κλπ).
|
||
|
||
```css
|
||
/* Τα σχόλια εμφανίζονται εντός καθέτου-αστερίσκου, όπως εδώ.
|
||
Δεν υπάρχουν σχόλια μια γραμμής και πολλών. */
|
||
|
||
/* ####################
|
||
## ΚΑΝΟΝΕΣ
|
||
#################### */
|
||
|
||
/* ένας κανόνας χρησιμοποιείται για να στοχεύσουμε ένα αντικείμενο (selector). */
|
||
selector { property: value; /* περισσότερες ιδιότητες...*/ }
|
||
|
||
/*
|
||
Αυτό είναι ενα παράδειγμα αντικειμένου
|
||
<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />
|
||
*/
|
||
|
||
/* Μπορούμε να το στοχεύσουμε με την χρήση 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; /* στιγμες */
|
||
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
|
||
<!-- Πρέπει να συμπεριλάβουμε το αρχείο στην επικεφαλίδα(head) ενος HTML αρχείου.
|
||
σσ. http://stackoverflow.com/questions/8284365 -->
|
||
<link rel='stylesheet' type='text/css' href='path/to/style.css' />
|
||
|
||
<!-- Μπορούμε να το ενσωματώσουμε -->
|
||
<style>
|
||
a { color: purple; }
|
||
</style>
|
||
|
||
<!-- Ή απευθείας σε κάποιο αντικείμενο (inline) -->
|
||
<div style="border: 1px solid red;">
|
||
</div>
|
||
```
|
||
|
||
## Ειδικότητα των κανόνων (Cascading απο το αγγλικό τίτλο Cascading Style Sheets)
|
||
|
||
Ένα αντικείμενο μπορεί να στοχευθεί απο πολλούς κανόνες και μπορεί η ίδια ιδιότητα να
|
||
περιλαμβάνετε σε πολλούς κανόνες. Σε αυτές της περιπτώσεις υπερισχύει πάντα ο πιο ειδικός
|
||
κανόνας και απο αυτούς, αυτός που εμφανίζεται τελευταίος.
|
||
|
||
```css
|
||
/* A */
|
||
p.class1[attr='value']
|
||
|
||
/* B */
|
||
p.class1 { }
|
||
|
||
/* C */
|
||
p.class2 { }
|
||
|
||
/* D */
|
||
p { }
|
||
|
||
/* E */
|
||
p { property: value !important; }
|
||
```
|
||
|
||
```xml
|
||
<p style='/*F*/ property:value;' class='class1 class2' attr='value' />
|
||
```
|
||
|
||
Η σειρά θα είναι:
|
||
|
||
* `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)
|