NEXTNET - Δωρεάν διαδικτυακές υπηρεσίες & πρωτοπορίες...

Το site χρησιμοποιεί google cookies για τη μελέτη επισκεψιμότητας, με τη περιήγηση αποδέχεστε τα cookies αυτά.

Σύντομη εισαγωγή στα CSS (για αρχάριους)

Τα CSS (Cascading Style Sheets) είναι η γλώσσα που ορίζει πώς θα εμφανίζεται ένα αρχείο HTML στους περιηγητές (browsers). Αν δεν γνωρίζεις HTML τότε δες αυτό το άρθρο-εισαγωγή στη γλώσσα HTML. Με τα CSS ορίζουμε πως θα προβάλλονται (style) τα διάφορα στοιχεία της γλώσσας HTML. Αυτό το άρθρο αποτελεί μια μικρή εισαγωγή στα CSS ενώ στο τέλος του άρθρου δίνονται πηγές για περαιτέρω εκμάθηση.

Άντρας καθισμένος μπροστά από laptop

Τα CSS μπορούν να σε σώσουν από τόνους δουλειάς γιατί μπορείς να ελέγχεις την εμφάνιση πολλών σελίδων μονομιάς. Τα styles ή stylesheets αποθηκεύονται σε αρχεία με τη κατάληξη .css π.χ. mystyle.css - Με τα CSS καθορίζεις το style των σελίδων του site σου δηλαδή το design τους και μπορείς να έχεις διαφορετικές ρυθμίσεις ανάλογα με τη συσκευή (π.χ. αν γίνεται περιήγηση στο site μέσω κινητου) ή ανάλογα με το μέγεθος της οθόνης (δες και αυτό το χρήσιμο άρθρο για το πώς μπορείς να κάνεις το site σου mobile friendly).

Η γλώσσα HTML (δες εδώ μια μικρή εισαγωγή) δεν προοριζόταν να περιλαμβάνει ετικέτες που να καθορίζουν το στυλ μιας ιστοσελίδας! Η HTML απλώς περιγράφει το περιεχόμενο μιας ιστοσελίδας, ας πούμε έτσι:

<h1>Αυτή είναι μια επικεφαλίδα</h1>
<p>Αυτή είναι μια παράγραφος</p>

Όταν αργότερα προστέθηκαν ετικέτες HTML για να ρυθμίσουν την εμφάνιση (π.χ. η ετικέτα <font> για τη γραμματοσειρά ή η ετικέτα <color> για το χρώμα) η ανάπτυξη ιστοσελίδων ήταν ένας εφιάλτης για τους προγραμματιστές (web developers) γιατί οι ετικέτες <font> και <color> έπρεπε να προστεθούν σε κάθε σελίδα ενός site ξεχωριστά. Έτσι αν αποφάσιζες να αλλάξεις design έπρεπε να επέμβεις σε όλες τις σελίδες και σε κάθε ετικέτα! Αυτό, δημιούργησε ένα μεγάλο και ολοφάνερο πρόβλημα...

Για να λύσει το πρόβλημα αυτό η κοινοπραξία του παγκόσμιου ιστού (W3C - World Wide Web Consortium) δημιούργησε τα CSS (Cascading Style Sheets). Με τα CSS δεν χρειαζόταν πια να κάνεις επεμβάσεις σε όλες τις σελίδες ενός site για να αλλάξεις το στυλ!

Ο κώδικας CSS συνήθως αποθηκεύεται σε ένα αρχείο με κατάληξη .css (π.χ. style.css). Με ένα αρχείο CSS μπορείς να αλλάξεις την εμφάνιση ενός ολόκληρου site αλλάζοντας μόνο ένα αρχείο! Μεγάλη σωτηρία για τους web developers...

Σύνταξη κανόνων CSS

Ένας κανόνας CSS αποτελείται από τον επιλογέα (selector) που μας λέει σε ποιό στοιχείο HTML θα εφαρμοστεί ο κανόνας και από την δήλωση ή της δηλώσεις (declarations) που μας λένε τι είδους στυλ θα εφαρμοστεί στον επιλογέα. Η κάθε δήλωση τελειώνει πάντα με τον χαρακτήρα ";" ενώ το σύνολο των δηλώσεων για κάθε επιλογέα περιέχεται ανάμεσα σε αγκύλες "{" και "}" όπως φαίνεται στη παρακάτω εικόνα:

Παράδειγμα σύνταξης κανόνα CSS

Στο παραπάνω παράδειγμα-κανόνα CSS η επικεφαλίδα <h1> θα έχει μέγεθος γραμματοσειράς 14 pixels και πράσινο χρώμα. Ας δούμε ακόμα ένα παράδειγμα:

p {
text-align: center;
color: green;
}

Ο παραπάνω κανόνας CSS μας λέει ότι η κάθε παράγραφος <p> στις σελίδες μας HTML θα έχει στοίχιση στο κέντρο ενώ το κείμενο της παραγράφου θα έχει πράσινο χρώμα. Όπως βλέπουμε οι δηλώσεις τελειώνουν με ";" και περικλείονται από αγκύλες "{" "}".

Τύποι επιλογέα (id και class)

Τι γίνεται όμως στη περίπτωση που δεν θέλουμε όλες οι παράγραφοι να έχουν το ίδιο στυλ; Για παράδειγμα μπορεί να θέλουμε μόνο μια παράγραφος στη σελίδα μας HTML να έχει πράσινο χρώμα και οι υπόλοιπες μαύρο. Σε αυτή την περίπτωση χρησιμοποιούμε τον επιλογέα "id". Ο επιλογέας "id" χρησιμοποιείται για να ορίσουμε το στυλ ενός μόνο στοιχείου HTML! Για παράδειγμα:

#pargreen {
text-align:center;
color: green;
}

Βλέπουμε ότι για να ορίσουμε έναν επιλογέα "id" γράφουμε μια δίεση "#" πριν από το όνομα του επιλογέα (#pargreen). Το όνομα pargreen είναι τυχαίο (δική μου επιλογή) και μπορεί να αλλάξει. Σύμφωνα με τον παραπάνω κανόνα CSS, η παράγραφος που θα επιλέξουμε θα έχει στοίχιση στο κέντρο και χρώμα πράσινο. Για να αντιστοιχίσουμε τώρα τον κανόνα στην παράγραφο γράφουμε στον HTML κώδικα της σελίδας μας:

<p id="pargreen"> Το κείμενο μας πάει εδώ και θα εμφανιστεί πράσινο </p>

Τι γίνεται όμως αν θέλουμε παραπάνω από ένα στοιχεία HTML να έχουν το ίδιο στυλ; Σε αυτή τη περίπτωση χρησιμοποιούμε τον επιλογέα "class". Είδαμε ότι με τον επιλογέα "id" μπορούμε να ορίσουμε το στυλ ενός μόνο στοιχείου HTML. Με τον επιλογέα "class" ορίζουμε το στυλ σε περισσότερα από ένα στοιχεία HTML.

.centergreen {
text-align: center;
color: green;
}

Βλέπουμε ότι για να ορίσουμε τον επιλογέα "class" βάζουμε μια τελεία "." πριν από το όνομα του επιλογέα (Το όνομα centergreen είναι τυχαία δική μου επιλογή και μπορεί να αλλάξει). Στο παραπάνω παράδειγμα όσα στοιχεία HTML έχουν το class="centergreen" θα έχουν στοιχιση στο κέντρο και χρώμα πράσινο. Για να αντιστοιχίσουμε τώρα τα στοιχεία με το class γράφουμε στον κώδικα HTML της σελίδας μας:

<p class="centergreen"> Το κείμενο της παραγράφου εμφανίζεται εδώ και έχει χρώμα πράσινο... </p>

ή

<h1 class="centergreen"> Το κείμενο της επικεφαλίδας εμφανίζεται εδώ και έχει πράσινο χρώμα... </h1>

Μπορούμε να ορίσουμε έναν κανόνα CSS έτσι ώστε μόνο ένα στοιχείο HTML να επηρεάζεται από έναν επιλογέα "class" ως εξής:

p.centergreen {
text-align: center;
color: green;
}

Στο παραπάνω παράδειγμα μόνο τα στοιχεία <p> (παράγραφοι) που έχουν το class="centergreen" θα έχουν στοίχιση στο κέντρο και πράσινο χρώμα ενώ οι παράγραφοι που δεν έχουν το συγκεκριμένο class δεν θα επηρεάζονται από αυτό το στυλ...:

<p class="centergreen"< Η παράγραφος έχει το class "centergreen" και άρα το κείμενο που θα εμφανίζεται εδώ θα έχει στοίχιση στο κέντρο και χρώμα πράσινο... </p>

Ενώ...

<p> Το κείμενο αυτής της παραγράφου δεν επηρεάζεται από τον κανόνα CSS "p.centergreen" </p>

Είναι επίσης δυνατόν ένα στοιχείο HTML να επηρεάζεται από περισσότερες από μια class. Στο παρακάτω παράδειγμα αντιστοιχίζουμε μια παράγραφο <p> με δυο class (centergreen και largefont, τα ονόματα είναι τυχαία):

<p class="centergreen largefont">Το κείμενο αυτής της παραγράφου θα εμφανιστεί με βάση τους κανόνες CSS δυο class</p>

Έχουμε και τη περίπτωση που δυο ή περισσότερα στοιχεία HTML ακολουθούν τους ίδιους κανόνες CSS όπως στο παρακάτω παράδειγμα:

p {
text-align: center;
color: green;
}

h1 {
text-align: center;
color: green;
}

h2 {
text-align: center;
color: green;
}

Σε αυτή τη περίπτωση για να κάνουμε οικονομία στον κώδικα CSS μπορούμε να ομαδοποιήσουμε τα τρια στοιχεία HTML βάζοντας ένα κόμμα "," ανάμεσα στα ονόματα τους ως εξης:

p, h1, h2 {
text-align: center;
color: green;
}

Προσθήκη σχολίων

Πολλές φορές, ειδικά όταν έχουμε πολύ κώδικα CSS ή όταν θέλουμε να προσθέσουμε μια επεξήγηση στον κώδικα ή όταν θέλουμε να θυμόμαστε κάτι για ένα συγκεκριμένο τμήμα κώδικα είναι χρήσιμο να βάζουμε σχόλια ανάμεσα στον κώδικα CSS. Τα σχόλια δεν λαμβάνονται υπόψη από τους περιηγητές (browsers). Τα σχόλια CSS ξεκινάνε με τους χαρακτήρες "/*" και κλείνουν με τους χαρακτήρες "*/". Ας δούμε ένα παράδειγμα:

p {
text-align: center;
/* Αυτό είναι ένα σχόλιο CSS */
color: green;
}

/* Αυτό είναι
ένα σχόλιο CSS
*/

Αυτή λοιπόν ήταν μια σύντομη εισαγωγή (για αρχάριους) στον κόσμο των CSS (Cascading Style Sheets). Υπάρχουν πολλά ακόμα που μπορεί να ειπωθούν για τα CSS και τη μαγεία τους. Αν ενδιαφέρεσαι να μάθεις περισσότερα ρίξε μια ματιά σε αυτό το μάθημα CSS (είναι σε απλά αγγλικά). Θα σε βοηθήσει επίσης αν διαβάσεις το άρθρο μου εισαγωγή στη γλώσσα HTML.


Σου άρεσε το παραπάνω άρθρο; Μοιράσου το με τους φίλους σου...:


Ταξίδι Χρωματισμού στο Ηλιακό μας Σύστημα
Αυτό το μεγάλο σε διαστάσεις βιβλίο θα σου προσφέρει έντονες επιμορφωτικές στιγμές χρωματισμού των πλανητών του ηλιακού μας συστήματος. Όλα ξεκινάνε στη Γη με μια δυνατη επιθυμία για ένα ταξίδι στο Φεγγάρι και καταλήγουν με ένα μεγάλο ταξίδι προς τον Ποσειδώνα... Ένα βιβλίο χρωματισμού για όλες τις ηλικίες...

Απόκτησε το από την CreateSpace

Απόκτησε το από το Amazon

Δες το εσωτερικό του βιβλίου

Ταξίδι Χρωματισμού στο Ηλιακό μας Σύστημα
ΕγγραφήΔΩΡΕΆΝ εγγραφή στις ενημερώσεις NEXTNET
Για να μαθαίνεις μέσω e-mail τα νέα του nextnet.gr (π.χ. όταν δημοσιεύεται κάποιο άρθρο ή κάποια προσφορά) συμπλήρωσε το e-mail σου στη παρακάτω φόρμα. Η εγγραφή είναι 100% δωρεάν! Η διεύθυνση email σου είναι ασφαλής και δεν πρόκειται να πουληθεί ή ενοικιαστεί ή με οποιονδήποτε τρόπο φανερωθεί σε τρίτους. Με την ολοκλήρωση της εγγραφής θα λάβεις ως δώρο 3 χρήσιμα ηλεκτρονικά βιβλία (ebook) που μπορεί να αλλάξουν τη ζωή σου! Μάθε περισσότερα...

Μυστικά ομορφιάς και νεότητας για κάθε ηλικία

Ένα πολλά υποσχόμενο site με θέμα την νεότητα και την ομορφιά που ξεκίνησε κάπως δυναμικά αλλά τελικά δεν προχώρησε όπως θα έπρεπε. Βρίσκεται στην διεύθυνση omorfia.nextnet.gr και περιέχει μερικά άρθρα που θα μπορούσαν να ωφελήσουν μια γυναίκα σε θέματα ομορφιάς και νεότητας.

ΕΠΙΚΟΙΝΏΝΗΣΕ ΜΕ NEXTNET...
...για διαδικτυακά θέματα ή για να πεις τη γνώμη σου... ΚΑΝΕ ΚΛΙΚ ΕΔΩ.

Εφημερίδα ΗΧΩ Φλώρινας
Όλα τα νέα από τις περιοχές Φλώρινας, Αμυνταίου & Πρεσπών (και όχι μόνο)...
Εφημερίδα ηχώ Φλώρινας
Επισκέψου την ιστοσελίδα της εφημερίδας
Ηχώ Φλώρινας blog (2η έκδοση)
Ηχώ Φλώρινας blog (1η έκδοση)
Γινε συνδρομητής!
ΓΙΑ ΝΈΕΣ ΙΣΤΟΣΕΛΊΔΕΣ & BLOGS!
Μόλις έφτιαξες την καινούργια σου ιστοσελίδα ή blog και δεν ξέρεις πως να την κάνεις γνωστή στις μηχανές αναζήτησης όπως το Google κ.α.; Στον μίνι οδηγό που μπορείς να κατεβάσεις εντελώς δωρεάν θα βρεις συμβουλές βήμα προς βήμα για να... πάρει μπρος η ιστοσελίδα σου!

"Κατέβασε" δωρεάν τον χρήσιμο οδηγό PDF

Προώθηση στις μηχανές αναζήτησης...

Λέχοβο Φλώρινας

Το Λέχοβο είναι ένα μαρτυρικό χωριό της Ελλάδας με μεγάλη ιστορία και παράδοση. Μάθε τα πάντα για αυτή την μαγευτική γωνιά της της χώρας μας στη Φλώρινα, γνώρισε τους κατοίκους του χωριού, δες τις ασχολίες, τα εδέσματα τους και τους εορτασμούς που πραγματοποιούνται κάθε χρόνο στο Λέχοβο. Ένα site με πραγματικές φωτογραφίες και αληθινά κείμενα ...
Η επανάσταση του bitcoin είναι εδώ!
Το bitcoin είναι το πιο δημοφιλές ψηφιακό νόμισμα της εποχής μας. Επίσης αποτελεί ευκαιρία για να κερδίσεις χρήματα αφού η τιμή του αυξάνεται συνεχώς. Σου παρουσιάζω μια στρατηγική με την οποία μπορείς κι εσύ να αποκτήσεις (χωρίς εργασία) bitcoin τα οποία έπειτα μπορείς να μετατρέψεις σε ευρώ. Πάρε κι εσύ μέρος στην επανάσταση των ψηφιακών νομισμάτων!

"Κατέβασε" εντελώς δωρεάν τον PDF οδηγό.

Ψηφιακό νόμισμα bitcoin
Καλλιέργεια Λαχανικών Σε Κήπο
Ένα βιβλίο χρήσιμο καλοτυπωμένο, με εικόνες για όσους διαθέτουν κήπο. Το βιβλίο σε διδάσκει πώς να καλλιεργήσεις με επιτυχία 8 βασικά λαχανικά που εντάσσονται στη Μεσογειακή διατροφή: Ντομάτα, Πιπεριά, Αγγούρι, Μαρούλι, Κρεμμύδι, Λάχανο, Κολοκύθα, Καρότο. Απόκτησε το σήμερα στη χαμηλότερη δυνατή τιμή!

Δες το στην CreateSpace

Απόκτησε το από το Amazon

Δες το εσωτερικό του βιβλίου

Καλλιέργεια Λαχανικών σε Κήπο - Ελληνική έκδοση

Φασόλι Πρέσπας

Τα πιο νόστιμα φασόλια που υπάρχουν και παράγονται στον ευλογημένο τόπο των Πρεσπών. Γνωρίστε τον τοπικό παραγωγό, μάθετε για τη διαδικασία παραγωγής (βιολογικά φασόλια), δείτε συνταγές με φασόλια και παραγγείλτε τα όσπρια της αρεσκείας (μαζί με φακή και ρεβύθια). Όλα από τη Πρέσπα...
Δωρεάν στρατηγική κέρδους!
Βγάλε πολλά χρήματα ξεκινώντας με μηδενικό κεφάλαιο και χτίζοντας μια αυτοκρατορία μέσα από μια δωρεάν ιστοσελίδα/blog. Ένα πανέξυπνο και έγκυρο concept για όλους τους χρήστες του internet που θέλουν να ανεξαρτητοποιηθούν οικονομικά... μια για πάντα! Με χρήσιμες συμβουλές βήμα προς βήμα.

Κάνε κλικ εδώ για να κατεβάσεις τον PDF οδηγό.

Απόκτησε θησαυρό
Ζωγράφισε & Χρωμάτισε τους 12 Ολύμπιους Θεούς
Ένα μοναδικό βιβλίο, καλοτυπωμένο με χρήσιμες πληροφορίες για τους 12 Ολύμπιους θεούς και σελίδες για να ζωγραφίσεις και να χρωματίσεις τις φιγούρες τους... Αν εμπνέεσε από το δωδεκάθεο τότε πρέπει να το δεις. Από την Δήμητρα, την Αθηνά και την Αφροδίτη μέχρι τον Δία, τον Άρη και τον Ήφαιστο. Απόκτησε το σήμερα!

Δες το στη CreateSpace

Δες το στο Amazon

Δες το εσωτερικό του βιβλίου

Ζωγράφισε & Χρωμάτισε τους 12 Ολύμπιους Θεούς
Verify your site with eCert by nextnet.gr

Ηχωμαγειρέματα

Παραδοσιακές και όχι μόνο συνταγές μαγειρικής με αναλυτικές περιγραφές και φωτογραφίες. Η Αυγή και οι φίλοι/ες της ετοιμάζουν ένα σωρό τοπικά εδέσματα της Φλώρινας και άλλων περιοχών. Αν σε ενδιαφέρει η μαγειρική, η παράδοση ή ψάχνεις νέες ιδέες για συνταγές ρίξε μια ματιά σε αυτό το πλούσιο site...

ΕΠΣ Φλώρινας

Η επίσημη, καινούργια ιστοσελίδα της Ένωσης Ποδοσφαιρικών Σωματείων Φλώρινας (Ε.Π.Σ.Φ.). Μάθε όλα τα τελευταία νέα για τα τοπικά ποδοσφαιρικά πρωταθλήματα και το κύπελλο συλλόγων ερασιτεχνικού ποδοσφαίρου, δες της νέες δημοσιεύσεις της ΕΠΣ Φλώρινας ή κάνε εγγραφή για να ενημερώνεσαι στο email σου για όλα τα νέα της επίσημης ιστοσελίδας της ΕΠΣ Φλώρινας.

nextnet.gr - Powered by NEXTNET - Επικοινωνία | RSS | Όροι χρήσης | Πολιτική απορρήτου
Τα περιεχόμενα της ιστοσελίδας μπορούν να αντιγραφούν και να χρησιμοποιηθούν ελεύθερα ή να αναδιανεμηθούν διαδικτυακά με τη προϋπόθεση ότι θα υπάρχει ενεργός σύνδεσμος (backlink) προς το nextnet.gr ως ανταπόδωση - NEXTNET - Δωρεάν υπηρεσίες διαδικτύου & πρωτοπορίες...