CSS – Cascading Style Sheets

Τι είναι τα CSS – Cascading Style Sheets

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

Υπάρχουν δύο είδη επιλογέων:
1. Ο επιλογέας id που χρησιμοποιεί το id ενός στοιχείου HTML για να το επιλέξει και πρέπει να είναι μοναδικό μέσα σε μια σελίδα. Για να επιλέξετε ένα στοιχείο με συγκεκριμένη id, πρέπει να γράψετε ένα ( # ) χαρακτήρα, ακολουθούμενο από το id.
2. Ο επιλογέας class που επιλέγει στοιχεία με ένα συγκεκριμένο χαρακτηριστικό. Για να επιλέξετε στοιχεία με μια συγκεκριμένη class, πρέπει να γράψετε μία τελεία (.), ακολουθούμενη από το όνομα της class.

Μπορείτε επίσης να καθορίσετε ότι μόνο συγκεκριμένα στοιχεία HTML θα πρέπει να επηρεαστούν από μια class και ακόμα στοιχεία HTML μπορούν να αναφέρονται σε περισσότερες από μία class. Αν έχετε στοιχεία HTML με την ίδια class θα ήταν καλύτερα να ομαδοποιηθούν οι επιλογείς για την ελαχιστοποίηση του κώδικα(διαχωρίστε κάθε επιλογέα με κόμμα).

Δοκιμάστε!

 

Πως προσθέτουμε CSS, γραμματοσειρές, χρώματα, border, padding, margin

Μπορείτε να δείτε πως προσθέτουμε CSS, πως ορίζουμε και μορφοποιούμε γραμματοσειρές και τι είναι το Box Μοντέλο(border, padding, margin) σε προηγούμενη ανάρτηση. Δείτε ακόμη πως εμφανίζουμε και αλλάζουμε χρώματα σε προηγούμενη ανάρτηση.

 

CSS Backgrounds

CSS Backgrounds

Οι ιδιότητες του background(φόντου) είναι: background-color(χρώμα του φόντου), background-image(εικόνα σαν φόντο), background-repeat(επανάληψη εικόνας οριζόντια ή κάθετα ή χωρίς επανάληψη), background-attachment (εικόνα σε σταθερή θέση), background-position (θέση της εικόνας).

 

Δοκιμάστε!

 

CSS Links

CSS Links

Οι σύνδεσμοι με CSS μπορούν να οριστούν με διάφορους τρόπους(π.χ. color,font-family,background,..). Επιπλέον , μπορούν να οριστούν με διαφορετικό τρόπο ανάλογα σε ποια κατάσταση βρίσκονται(a:link – κανονικός σύνδεσμος, a:visited – σύνδεσμος που έχει επισκεφτεί ο χρήστης, a:hover – σύνδεσμος όταν ο χρήστης μετακινεί τα ποντίκι πάνω του, a:active – σύνδεσμος τη στιγμή που γίνεται κλικ. Κατά τη ρύθμιση του στυλ ανάλογα με την κατάσταση, πρέπει να ακολουθείτε η εξής σειρά δήλωσης -> a:link, a:visited, a:hover, a:active.

Η ιδιότητα text-decoration χρησιμοποιείται για την αφαίρεση της υπογράμμισης από τους συνδέσμους. Η ιδιότητα Background Color χρησιμοποιείται για το χρώμα φόντου των συνδέσμων. Μπορούμε να συνδυάσουμε πολλές ιδιότητες CSS για την εμφάνιση links, όπως κουμπιά.

 

Δοκιμάστε!

 

CSS Lists

CSS Lists

Οι ιδιότητες CSS για λίστες(lists) σας επιτρέπουν να ορίστε διαφορετικούς Markers(circle, square, upper-roman, lower-alpha), μπορείτε ακόμη να ορίστε μια εικόνα και να προσθέστε χρώματα φόντου.

 

Δοκιμάστε!

 

CSS Tables

CSS Tables

Η εμφάνιση ενός πίνακα σε HTML μπορεί να βελτιωθεί σημαντικά με CSS.

Για να καθορίσετε το περίγραμμα ενός πίνακα, χρησιμοποιήστε την ιδιότητα border.

Το πλάτος και το ύψος ενός πίνακα ορίζονται από τις ιδιότητες width και height.

Η ιδιότητα text-align ορίζει την οριζόντια ευθυγράμμιση ( όπως αριστερά , δεξιά ή στο κέντρο ) και η vertical-align ορίζει την κατακόρυφη στοίχιση ( όπως πάνω, κάτω , ή μεσαίο ) του περιεχομένου σε th ή td.

Για να ελέγξετε το χώρο μεταξύ των περιγραμμάτων και του περιεχομένου σε έναν πίνακα , χρησιμοποιήστε την ιδιότητα padding σε td και th.

Προσθέστε border-bottom σε th και td για οριζόντια διαχωριστική γραμμή.

Χρησιμοποιήστε το hover σε tr για να επισημάνετε σειρές του πίνακα όταν περνάει το ποντίκι από πάνω τους.

Για ζέβρα – ριγέ πίνακες , χρησιμοποιήστε το nth-child() και προσθέσετε ένα background-color σε όλες τις ζυγές (ή μονές) σειρές του πίνακα.

Ένας responsive πίνακας θα εμφανίσει μια οριζόντια γραμμή κύλισης , αν η οθόνη είναι πολύ μικρή για να εμφανιστεί το πλήρες περιεχόμενο. Προσθέστε ένα div με overflow-x:aut γύρω από το table για να γίνει responsive.

 

Δοκιμάστε!

 

CSS – Η ιδιότητα display

CSS – Η ιδιότητα display

Η ιδιότητα display είναι η πιο σημαντική ιδιότητα για τον έλεγχο της διάταξης μιας ιστοσελίδας, καθορίζει αν και πώς εμφανίζεται ένα στοιχείo. Κάθε στοιχείο HTML έχει μια προεπιλεγμένη τιμή ανάλογα με τον τύπο του. Η προεπιλεγμένη τιμή για τα περισσότερα στοιχεία είναι το block ή το inline, που μπορούμε να την αλλάξουμε με εντολές CSS.

 

Δοκιμάστε!

 

CSS – Η ιδιότητα position

CSS – Η ιδιότητα position

Η ιδιότητα position, καθορίζει τη θέση ενός στοιχείου(static, relative, fixed or absolute). Τα στοιχεία στη συνέχεια τοποθετούνται χρησιμοποιώντας τις ιδιότητες top, bottom, left, και right(εκτός από την static).

 

Δοκιμάστε!

 

CSS Pseudo-classes

CSS Pseudo-classes

Μία pseudo-class(ψευδή-κατηγορία) χρησιμοποιείται για να ορίσει μια ειδική κατάσταση ενός στοιχείου. Για παράδειγμα , μπορεί να χρησιμοποιηθεί για να αλλάξουμε το στυλ από ένα στοιχείο όταν ο χρήστης περνάει το ποντίκι από πάνω του. Να αλλάξουμε το στυλ από κάποιες συνδέσεις. Να αλλάξουμε το στυλ από ένα στοιχείο όταν εστιάζουμε σε αυτό.

 

Δοκιμάστε!

 

CSS Combinators

CSS Combinators

Με την έννοια combinator εννοούμε την περιγραφή της σχέσης μεταξύ των στοιχείων CSS. Μπορούμε να έχουμε πάνω από ένα στοιχεία που περιλαμβάνουν ένα combinator. Υπάρχουν τέσσερις διαφορετικοί combinators στην CSS3 [descendant selector (το κενό), child selector (>), adjacent sibling selector (+), general sibling selector (~)].

 

Δοκιμάστε!

 

CSS Pseudo-elements

CSS Pseudo-elements

Τα pseudo-elements χρησιμοποιούνται για να αλλάξουν το στυλ ενός μέρους από ένα στοιχείο(το πρώτο γράμμα, ή τη πρώτη γραμμή) ή να προσθέσουν κείμενο πριν και μετά από ένα στοιχείο.

 

Δοκιμάστε!

 

CSS μενού πλοήγησης

CSS μενού πλοήγησης

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

 

Δείτε πως μπορείτε να δημιουργείστε ένα κάθετο μενού πλοήγησης:

Δοκιμάστε!

 

Δείτε πως μπορείτε να δημιουργείστε ένα οριζόντιο μενού πλοήγησης:

Δοκιμάστε!

 

Δείτε πως μπορείτε να δημιουργείστε ένα οριζόντιο fixed(παραμένει στην αρχή της σελίδας ή το τέλος όταν ο χρήστης κάνει scroll) μενού πλοήγησης:

Δοκιμάστε!

 

CSS dropdown μενού

CSS dropdown μενού

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

 

Δοκιμάστε!

 

CSS Tooltips

CSS Tooltips

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

 

Δοκιμάστε!

 

CSS Forms

CSS Forms

Η εμφάνιση μιας HTML φόρμας μπορεί να γίνει πολύ ποιο ωραία με τη χρήση CSS.

 

Δοκιμάστε!

 

CSS3 στρογγυλεμένες γωνίες, εφέ σκιάς

CSS3

Η CSS3 είναι το τελευταίο πρότυπο της CSS. Στις επόμενες αναρτήσεις θα δούμε τα νέα χαρακτηριστικά της CSS3! Μερικά από τα ποιο σημαντικά στοιχεία της CSS3 είναι
οι Selectors, το Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations, Animations, Multiple Column Layout.

 

CSS3 στρογγυλεμένες γωνίες

Με την ιδιότητα border-radius, μπορούμε να κάνουμε στρογγυλεμένες γωνίες.

Δοκιμάστε!

 

CSS3 εφέ σκιάς

Με την CSS3 μπορούμε να προσθέσουμε σκιά σε κείμενα και στοιχεία με τις ιδιότητες text-shadow και box-shadow.

Δοκιμάστε!

 

CSS3 2D/3D Μετασχηματισμοί

CSS3 2D/3D Μετασχηματισμοί

Η CSS3 υποστηρίζει 2D/3D μετασχηματισμούς για να μετακινήσετε, να περιστρέψτε , να μεγεθύνετε , και να τροποποιήστε HTML στοιχεία.

 

CSS3 2D Μετασχηματισμοί

Θα δούμε τις μεθόδους: translate(), rotate(), scale(), skewX(), skewY() και matrix() για 2D μετασχηματισμούς.

Δοκιμάστε!

 

CSS3 3D Μετασχηματισμοί

Θα δούμε τις μεθόδους: rotateX(), rotateY() και rotateZ() για 3D μετασχηματισμούς.

Δοκιμάστε!

 

CSS3 Animations

CSS3 Animations

Μπορείτε να δημιουργείστε εύκολα animations μόνο με CSS3 χωρίς τη χρήση flash ή javascript. Μπορείτε να αλλάξετε όσες CSS ιδιότητες θέλετε, όσες φορές θέλετε. Για να χρησιμοποιήσετε CSS3 animation, θα πρέπει πρώτα να καθορίσετε κάποια keyframes για την κινούμενη εικόνα .Τα Keyframes ορίζουν το στυλ του στοιχείου σε συγκεκριμένες χρονικές στιγμές.

 

Δοκιμάστε!

 

CSS3 εικόνες

CSS3 εικόνες

Σε αυτή την ανάρτηση θα δούμε πως μπορούμε με CSS3 να αλλάξουμε εύκολα την μορφή των εικόνων.

 

Δοκιμάστε!

 

CSS3 κουμπιά

CSS3 κουμπιά

Σε αυτή την ανάρτηση θα δούμε πως μπορούμε με CSS3 να αλλάξουμε εύκολα την μορφή των κουμπιών(buttons).

 

Δοκιμάστε!

 

CSS3 Media Queries

CSS3 Media Queries

Σε αυτή την ανάρτηση θα δούμε πως μπορούμε με media queries να ελέγξουμε το πλάτος και το ύψος ενός παραθύρου ή μία συσκευής, το προσανατολισμό (είναι το tablet/τηλέφωνο σε οριζόντια ή κατακόρυφη λειτουργία;) και την ανάλυση. Με τη χρήση των media queries μπορούμε να έχουμε ένα προσαρμοσμένο στυλ ανάλογα με την συσκευή (tablet, iPhone, Android).

 

Δοκιμάστε!

 

Φιλοξενία ιστοσελίδων και ονόματα(domains).

 

it-838384_1280

Αν θέλουμε να φτιάξουμε την ιστοσελίδα μας πρέπει καταρχάς να αποφασίσουμε που θα τη αποθηκεύσουμε. Δεν μπορούμε να τη αποθηκεύσουμε στον υπολογιστή του σπιτιού μας γιατί δεν θα είναι προσβάσιμη όταν κλείσει ο υπολογιστής μας και μπορεί να εξυπηρετήσει μόνο μικρό αριθμό επισκεπτών. Θα χρειαστούμε μία εταιρεία που θα μας παρέχει τον απαραίτητο χώρο για να την αποθηκεύσουμε. Ακόμη θα χρειαστούμε και ένα όνομα για να μας βρίσκουν, μπορούμε να χρησιμοποιήσουμε την ίδια εταιρεία η κάποια άλλη για να καταχωρίσουμε το όνομα μας(domain).

 

Τι είναι το World Wide Web?
Το Web είναι ένα δίκτυο υπολογιστών σε όλο τον κόσμο. Όλοι οι υπολογιστές μπορούν να επικοινωνούν μεταξύ τους και χρησιμοποιούν ένα πρωτόκολλο επικοινωνίας που ονομάζεται HTTP.

 

Πως λειτουργεί το WWW?
Οι Web πληροφορίες είναι έγγραφα που ονομάζονται ιστοσελίδες και είναι αποθηκευμένες σε υπολογιστές που ονομάζονται διακομιστές. Οι υπολογιστές που βλέπουν τις ιστοσελίδες ονομάζονται πελάτες και βλέπουν τις ιστοσελίδες με τους web browsers. Δημοφιλείς web browsers είναι ο Google Chrome, Firefox και Internet Explorer.

 

Πως ένας web browser ζητάει μία ιστοσελίδα;
Ένας web browser ζητάει μια σελίδα από ένα web server(διακομιστή) με μια τυποποιημένη αίτηση HTTP που περιέχει μια διεύθυνση σε αυτή τη μορφή: http://plinet.net/index.html

 

Πως ένας web browser εμφανίζει μία ιστοσελίδα;
Όλες οι ιστοσελίδες περιέχουν οδηγίες, ο web browser εμφανίζει την ιστοσελίδα διαβάζοντας αυτές τις οδηγίες. Οι πιο κοινές οδηγίες είναι οι ετικέτες HTML(δείτε τα μαθήματα HTML).

 

Τι είναι ένας Web Server?
Για να δημοσιεύσουμε την ιστοσελίδα σας, θα πρέπει να την αντιγράψουμε σε έναν web server και να καταχωρίσουμε το όνομα της ιστοσελίδας μας(domain).

 

Ας δούμε πως μπορούμε να αποθηκεύσουμε την ιστοσελίδα μας και να έχουμε το δικό μας όνομα στο ΠΣΔ(δωρεάν για εκπαιδευτικούς και σχολικές μονάδες). Θα χρειαστούμε δύο προγράμματα, ένα απλό κειμενογράφο για την επεξεργασία του κώδικα της ιστοσελίδας μας, σας προτείνω το Notepad++, και ένα πρόγραμμα για την μεταφορά της ιστοσελίδας μας από τον υπολογιστή μας στο web server, σας προτείνω το filezilla.

 

1. Αν δεν έχετε, ανοίξτε λογαριασμό στο ΠΣΔ.
%ce%ba%ce%b1%cf%84%ce%b1%ce%b3%cf%81%ce%b1%cf%86%ce%ae1

 

2. Δημιουργείστε ένα φάκελο στον υπολογιστή σας(myweb). Ανοίξτε το Notepad++ και γράψτε στην πρώτη γραμμή <!DOCTYPE html> (δηλώνουμε την HTML), επιλέξτε και αντιγράψτε τον κώδικα της ιστοσελίδας που έχουμε αποθηκεύσει στο codepen.io και επικολλήσετε τον κώδικα κάτω από τη γραμμή που γράψατε. Αποθηκεύστε το αρχείο στο φάκελο με το όνομα index.html(όνομα αρχικής ιστοσελίδας).

capture5

3. Συνδεθείτε στο λογαριασμό σας στο ΠΣΔ, και επιλέξτε MySch > Πίνακας Ελέγχου > Στοιχεία δικτυακού τόπου. Μπορείτε να δείτε την Διεύθυνση δικτυακού τόπου(http://users.sch.gr/το όνομα σας) και το FTP url(users.sch.gr/το όνομα σας).

capture1

4. Ανοίξτε τον filezilla επιλέξτε τον Διαχειριστή τοποθεσιών για να δηλώσετε τον web server του ΠΣΔ. Πατήστε ‘Νέα τοποθεσία’, δηλώστε τα στοιχεία όπως φαίνονται στην παρακάτω εικόνα και πατήστε ‘Σύνδεση’.

capture6

5. Στο αριστερό παράθυρο βρίσκονται τα αρχεία του υπολογιστή σας και στο δεξί τα αρχεία του web server. Βρείτε το φάκελο σας στο αριστερό παράθυρο επιλέξτε το αρχείο index.html και κάντε διπλό κλικ για να σταλεί στον web server. Συγχαρητήρια, μόλις ανεβάσατε την πρώτη ιστοσελίδα σας, μπορείτε να τη δείτε στην διεύθυνση ‘http://users.sch.gr/το όνομα σας’.

capture3