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) σε προηγούμενη ανάρτηση. Δείτε ακόμη πως εμφανίζουμε και αλλάζουμε χρώματα σε προηγούμενη ανάρτηση.

 

HTML χρώματα, σύνδεσμοι, εικόνες.

flower-302889_1280

HTML Χρώματα

Οι τηλεοράσεις και οι οθόνες υπολογιστών εμφανίζουν τα χρώματα συνδυάζοντας το κόκκινο, πράσινο και μπλε.
Τα χρώματα μπορούν να καθοριστούν με τους παρακάτω τρόπους:

1. Με τη χρήση των ονομάτων τους(π.χ. Red, Orange, Yellow, Cyan, Blue).

2. Με τη χρήση του τύπου: RGB (red, green, blue ). Κάθε παράμετρος (red, green, blue ) ορίζει την ένταση του χρώματος μεταξύ 0 και 255 .
Για παράδειγμα ,  rgb ( 255,0,0 ) εμφανίζεται ως κόκκινο , γιατί το κόκκινο έχει την υψηλότερη τιμή ( 255) ενώ το πράσινο και το μπλε είναι 0.

3. Με τη χρήση δεκαεξαδικών τιμών χρώματος σε μορφή : #RRGGBB , όπου RR (κόκκινο ) , GG ( πράσινο) και ΒΒ ( μπλε) είναι οι δεκαεξαδικές τιμές μεταξύ 00 και FF.
Για παράδειγμα , #FF0000 εμφανίζεται ως κόκκινο , γιατί το κόκκινο είναι στην υψηλότερη τιμή του ( FF) ενώ το πράσινο και το μπλε είναι 0.

Δοκιμάστε!

 

HTML Σύνδεσμοι

Ένας σύνδεσμος είναι ένα κείμενο ή μια εικόνα που μπορείτε να κάνετε κλικ για να πάτε σε ένα άλλο έγγραφο.
Οι σύνδεσμοι ορίζονται με την ετικέτα <a>.

Δοκιμάστε!


HTML Εικόνες

Στην HTML , οι εικόνες δηλώνονται  με την < img> .

Δοκιμάστε!

Καλή επιτυχία.