Τα αρχικά CSS προκύπτουν από τα αρχικά των λέξεων Cascading Style Sheets.
Το CSS περιγράφει τον τρόπο με τον οποίο τα στοιχεία της γλώσσας HTML εμφανίζονται σε υπολογιστή, χαρτί ή οποιοδήποτε άλλο μέσο αναπαράστασης.
Στο html.gr έχουμε αφιερώσει ξεχωριστή ενότητα για το CSS. Μπορείτε να ξεκινήσετε διαβάζοντας μια εισαγωγή στο CSS
Κέρδος για τον κατασκευαστή ιστοσελίδων
Το CSS μας βοηθάει να γλιτώσουμε πολλή δουλειά κατά την κατασκευή μιας ιστοσελίδας. Μας δίνει τη δυνατότητα με ένα μόνο αρχείο να καθορίσουμε με ποιό τρόπο θα εμφανιστεί ολόκληρος ο ιστότοπος που μπορεί να περιέχει χιλιάδες σελίδες html. Αυτό αποτελεί πολύ μεγάλη βοήθεια για όσους ασχολούνται με την κατασκευή ιστοσελίδων.
Προσθήκη css στην html
Το CSS μπορεί να προστεθεί σε μια σελίδα HTML με τρεις τρόπους:
- Inline – χρησιμοποιούμε το χαρακτηριστικό style για να καθορίσουμε τη μορφοποίηση των στοιχείων HTML.
- Internal – χρησιμοποιούμε την ετικέτα <style> στην ενότητα <head> της σελίδας html.
- Εξωτερικά αρχεία CSS (External CSS) – χρησιμοποιούμε εξωτερικό αρχείο CSS.
Ο πιο συνηθισμένος τρόπος για να κάνουμε προσθήκη CSS, είναι να προσθέσουμε ένα ξεχωριστό αρχείο CSS. Ωστόσο, στο συγκεκριμένο άρθρο θα χρησιμοποιοήσουμε τις μεθόδους inline και internal, διότι είναι ευκολότερο για εμάς να κάνουμε την παρουσίαση της χρήσης css, αλλά και ευκολότερο για τον αναγνώστη να την κατανοήσει.
Inline CSS
Το inline CSS χρησιμοποιείται για να εφαρμόσουμε μια συγκεκριμένη μορφοποίηση σε ένα μεμονωμένο στοιχείο HTML.
Στο inline CSS χρησιμοποιούμε το χαρακτηριστικό style για να καθορίσουμε τη μορφοποίηση του HTML στοιχείου.
Στο ακόλουθο παράδειγμα χρησιμοποιούμε inline CSS για να καθορίσουμε οτι το χρώμα κειμένου μιας κεφαλίδας <h1> θα είναι μπλε:
—————————–
<h1 style=”color:blue;”>This is a Blue Heading</h1>
—————————–
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
Internal CSS
Το internal CSS χρησιμοποιείται για να καθορίσουμε τη μορφοποίηση μιας συγκεκριμένης σελίδας HTML.
Internal CSS
Στο internal CSS χρησιμοποιούμε την ετικέτα <style> στην ενότητα <head> της σελίδας html, όπως στο παράδειγμα:
—————————–
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
—————————–
Το αποτέλεσμα φαίνεται στην εικόνα:
Εξωτερικά αρχεία CSS (External CSS)
Ένα εξωτερικό αρχείο CSS χρησιμοποιείται για να καθορίσουμε τη μορφοποίηση πολλών σελίδων HTML.
Με ένα εξωτερικό αρχείο CSS, μπορούμε να αλλάξουμε την εμφάνιση ενός ολόκληρου ιστότοπου, χρησιμοποιώντας μόνο ένα αρχείο!
Για να χρησιμοποιήσουμε ένα εξωτερικό αρχείο CSS πρέπει να προσθέσουμε ένα σύνδεσμο (link) στην περιοχή <head> της σελίδας HTML, όπως στο παράδειγμα που ακολουθεί:
—————————–
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
—————————–
Το εξωτερικό αρχείο CSS μπορεί να δημιουργηθεί χρησιμοποιώντας ένα απλό επεξεργαστή κειμένου. Το αρχείo css δεν πρέπει να περιέχει εντολές html, και πρέπει να αποθηκευτεί με κατάληξη .css.
Ακολουθεί παράδειγμα που δείχνει πως θα μπορούσε να είναι το περιεχόμενο του αρχείου “styles.css”:
—————————–
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
—————————–
Γραμματοσειρές στο CSS
Η ιδιότητα CSS color καθορίζει το χρώμα της γραμματοσειράς που θα χρησιμοποιηθεί.
Η ιδιότητα CSS font-family καθορίζει τη γραμματοσειρά που θα χρησιμοποιηθεί.
Η ιδιότητα CSS font-size καθορίζει το μέγεθος της γραμματοσειράς που θα χρησιμοποιηθεί.
Ακολουθεί παράδειγμα που δείχνει τις ιδιότητες γραμματοσειράς στο css
—————————–
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
—————————–
Στην παρακάτω εικόνα βλέπουμε το αποτέλεσμα:
Περιγράμματα στο CSS
Η ιδιότητα CSS border καθορίζει τη μορφοποίηση του περιγράμματος γύρω από ένα στοιχείο HTML. Αυτό φαίνεται στο παράδειγμα:
—————————–
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
—————————–
Και το αποτέλεσμα φαίνεται στην εικόνα:
Αποστάσεις στο CSS
Η ιδιότητα CSS padding καθορίζει τις αποστάσεις (κενά) ανάμεσα στο κείμενο και στο περίγραμμα. Ακολουθεί παράδειγμα που δείχνει τη χρήση της ιδιότητας CSS padding:
—————————–
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
—————————–
Και το αποτέλεσμα φαίνεται στην εικόνα:
Περιθώρια CSS
Η ιδιότητα CSS margin καθορίζει το περιθώριο (κενό) έξω από το περίγραμμα. Αυτό φαίνεται στο ακόλουθο παράδειγμα:
—————————–
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
—————————–
Και το αποτέλεσμα φαίνεται στην εικόνα:
Η ιδιότητα id
Για να καθορίσουμε τη μορφοποίηση ενός συγκεκριμένου στοιχείου, προσθέτουμε σε αυτό την ιδιότητα id:
—————————–
<p id=”p01″>I am different</p>
—————————–
Στη συνέχεια μπορούμε να καθορίσουμε τη μορφοποίηση του συγκεκριμένου στοιχείου μέσω css:
—————————–
#p01 {
color: blue;
}
—————————–
Η ιδιότητα class
Για να καθορίσουμε τη μορφοποίηση ενός συγκεκριμένου τύπου στοιχείων, προσθέτουμε σε αυτά την ιδιότητα class:
—————————–
<p class=”error”>I am different</p>
—————————–
Στη συνέχεια μπορούμε να καθορίσουμε τη μορφοποίηση του συγκεκριμένου τύπου στοιχείων μέσω css:
—————————–
p.error {
color: red;
}
—————————–
Μπορείτε να μάθετε περισσότερα για τη σύνταξη του id και του class διαβάζοντας το σχετικό άρθρο μας που αναφέρεται στη σύνταξη css.
