CSS μάθημα

css μάθημα

Μια σύντομη εισαγωγή στην css

Ένα γρήγορο μάθημα για τη Γλώσσα Σχεδιασμού CSS του Διαδικτύου.

CSS Μάθημα : Τα CSS  – το όνομα προέρχεται από τα αρχικά των λέξεων (Cascading Style Sheets)- είναι αυτά που κάνουν τις ιστοσελίδες να φαίνονται όμορφες και εμφανίσιμες. Είναι ένα ουσιαστικό μέρος της σύγχρονης κατασκευής ιστοσελίδων και μια απαραίτητη δεξιότητα για κάθε σχεδιαστή και προγραμματιστή Ιστού.

Το CSS είναι μια γλώσσα που περιγράφει τη μορφοποίηση ενός εγγράφου HTML. Το CSS περιγράφει τον τρόπο με τον οποίο θα παρουσιαστούν στο φυλλομετρητή / browser τα στοιχεία της γλώσσας HTML.

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

Για ποιο λόγο να χρησιμοποιήσω CSS;

Το CSS χρησιμοποιείται για να καθορίσουμε τη μορφοποίηση του περιεχομένου των ιστοσελίδων. Βλέπετε οι δημιουργοί της γλώσσας HTML ποτέ δεν εισήγαγαν ετικέτες για να καθορίσουν τη μορφοποίηση των ιστοσελίδων Η γλώσσα HTML δημιουργήθηκε για να περιγράψει το περιεχόμενο μιας ιστοσελίδας.

Σε αυτό το μάθημα, θα σας δώσουμε μια γρήγορη εισαγωγή που θα σας βοηθήσει να ξεκινήσετε με τα CSS. Υποθέτουμε ότι έχετε μια βασική κατανόηση της HTML, αλλά εκτός από αυτό δεν υπάρχουν άλλες προϋποθέσεις για αυτό το σεμινάριο.

Ξεκινώντας

Ας ξεκινήσουμε μαθαίνοντας πώς μπορούμε να συμπεριλάβουμε τα CSS στα έργα μας. Υπάρχουν συνήθως τρεις τρόποι για να το κάνουμε αυτό.

  1. Ενσωματωμένα CSS

Αρχικά, μπορούμε να συμπεριλάβουμε τα CSS απευθείας στα στοιχεία HTML μας. Για αυτό, χρησιμοποιούμε το στυλ του χαρακτηριστικού και στη συνέχεια του παρέχουμε ιδιότητες. 

<h1 style=”color: blue”> Hello world! </h1>

Εδώ του δίνουμε την ιδιότητα του χρώματος και ορίζουμε την τιμή σε μπλε, με αποτέλεσμα τα εξής:

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

Αυτός είναι ο λόγος για τον οποίο δημιουργήθηκε η δεύτερη μέθοδος που περιλαμβάνει CSS.

  1. Εσωτερικά CSS

 Ο άλλος τρόπος για να συμπεριλάβετε τα CSS είναι να χρησιμοποιήσετε το στοιχείο στυλ στην ενότητα κεφαλής του εγγράφου HTML. Αυτό ονομάζεται εσωτερικό στυλ.

<head> 

    <style> 

        h1 { 

            color: blue; 

        } 

    </style> 

</head>

 

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

  1. Εξωτερικά CSS

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

 

<head>

<link rel=”stylesheet” href=”style.css”>

</head>

Στον παραπάνω κώδικα έχουμε συμπεριλάβει το σύνδεσμο του αρχείου style.css χρησιμοποιώντας το στοιχείο σύνδεσης. Στη συνέχεια, γράφουμε όλο το CSS μας σε ένα ξεχωριστό φύλλο στυλ που ονομάζεται style.css, έτσι ώστε να είναι εύκολα διαχειρίσιμο.

h1 { 

   color: blue; 

}

Αυτό το φύλλο στυλ μπορεί επίσης να εισαχθεί σε άλλα αρχεία HTML, επομένως αυτό είναι εξαιρετικό για επαναχρησιμοποίηση.

Επιλογείς CSS

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

  1. Στοιχείο

 Ο πρώτος τρόπος για να επιλέξετε ένα στοιχείο HTML είναι απλά χρησιμοποιώντας το όνομα, το οποίο κάναμε παραπάνω. Ας δούμε πώς λειτουργεί:

 

h1 { 

    font-size: 20px; 

p { 

    color: green; 

div { 

    margin: 10px; 

}

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

  1. Κλάση ( Class ) 

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

Ας το δούμε στην πράξη:

 

<div class=’container’> 

    <h1> Αυτή είναι μια επικεφαλίδα </h1> 

</div>

 

.container { 

    margin: 10px; 

}

Στον παραπάνω κώδικα, έχουμε εκχωρήσει την κλάση του κοντέινερ στο στοιχείο div. Στο φύλλο στυλ, επιλέγουμε την κλάση μας χρησιμοποιώντας. μορφή className και δίνοντάς του περιθώριο 10px.

  1. Αναγνωριστικό ( id ) 

 Όπως και οι κλάσεις, μπορούμε επίσης να χρησιμοποιήσουμε αναγνωριστικά για να επιλέξουμε στοιχεία HTML και να εφαρμόσουμε στυλ σε αυτά. Η μόνη διαφορά μεταξύ κλάσης και αναγνωριστικού είναι ότι ένα αναγνωριστικό μπορεί να αντιστοιχιστεί σε ένα μόνο στοιχείο HTML.

<div> 

    <p id=’para1′> Αυτή είναι μια παράγραφος </p> 

</div>

 

#para1 { 

    color: green; 

    font-size: 16px; 

}

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

Γραμματοσειρές & Χρώματα

 Η CSS μας παρέχει κυριολεκτικά εκατοντάδες επιλογές για να παίξουμε με γραμματοσειρές και χρώματα και να κάνουμε τα HTML στοιχεία μας να φαίνονται όμορφα. Μπορούμε να επιλέξουμε από δύο τύπους ονομάτων οικογένειας γραμματοσειρών:

  1. Γενική οικογένεια: μια ομάδα οικογενειών γραμματοσειρών με παρόμοια εμφάνιση (όπως “Serif” ή “Monospace”)
  2. Οικογένεια γραμματοσειρών: μια συγκεκριμένη οικογένεια γραμματοσειρών (όπως «Times New Roman» ή «Arial»)

Για χρώματα , μπορούμε να χρησιμοποιήσουμε προκαθορισμένα ονόματα χρωμάτων ή τιμές RGB, HEX, HSL, RGBA, HSLA.

Στο CSS τα χρώματα μπορούν να προσδιοριστούν με τους παρακάτω τρόπους: με ένα έγκυρο όνομα χρώματος

  • για παράδειγμα «red»
  • με μια RGB τιμή – για παράδειγμα «rgb(255, 0, 0)»
  • με εξαδικές HEX τιμές – για παράδειγμα «#ff0000»

DIV και container

Όπως μπορείτε να δείτε στο παρακάτω παράδειγμα, έχουμε ένα στοιχείο div με την κλάση του κοντέινερ. Μέσα σε αυτό το div, υπάρχει μια ετικέτα h1 με κάποιο κείμενο μέσα της.

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

Τέλος, επιλέγουμε την κλάση .heading1 – η οποία εφαρμόζεται στην ετικέτα h1- και της δίνουμε τα χαρακτηριστικά της γραμματοσειράς-οικογένειας και του χρώματος.

<div class=’container’>

<h1 class=’heading1′>

To css είναι εξαιρετικό!

</h1>

</div>

.container {

width: 500px;

height: 100px;

background-color: lightcyan;

text-align: center;

}

 

.heading1 {

font-family: ‘Courier New’;

color: tomato;

}

Σημείωση:

 

Επισκεφθείτε τον ακόλουθο σύνδεσμο

https://www.w3schools.com/cssref/default.asp

Στην αριστερή στήλη εντοπίστε τη λίστα από όλα τα css properties που μπορείτε να εφαρμόσετε στα περιεχόμενα της ιστοσελίδας σας. Σε κάθε ιδιότητα σαν δίνεται η δυνατότητα να “τρέξετε” μια δοκιμαστική εφαρμογή της ιδιότητας, ώστε να κατανοήσετε τη λειτουργία της.