Τι είναι ένα αρχείο CSS;
Τα CSS (Cascading Style Sheets) είναι αρχεία που περιγράφουν πώς εμφανίζονται τα στοιχεία HTML στην οθόνη, το χαρτί κ.λπ. Με την HTML, μπορείτε να έχετε είτε ενσωματωμένα στυλ είτε να ορίσετε στυλ σε ένα εξωτερικό φύλλο στυλ. Για την ενσωμάτωση των στυλ, το \ </style> χρησιμοποιούνται ετικέτες. Τα εξωτερικά φύλλα στυλ αποθηκεύονται σε αρχεία με επέκταση .css. Με το εξωτερικό CSS, μπορείτε να το συμπεριλάβετε σε πολλές σελίδες HTML για να ενημερώσετε το στυλ αυτών των σελίδων. Ακόμη και ένα μόνο αρχείο CSS μπορεί να χρησιμοποιηθεί για το στυλ ενός πλήρους ιστότοπου.
Σύντομη Ιστορία
Το CSS1 κυκλοφόρησε το 1996 με τον Bert Bos ως συν-συγγραφέα. Η ομάδα εργασίας CSS άρχισε να εργάζεται για τα ζητήματα που δεν αντιμετωπίστηκαν στο CSS1. Αυτό είχε ως αποτέλεσμα τη δημιουργία του CSS2 τον Νοέμβριο του 1997 που δημοσιεύτηκε ως σύσταση του W3C στις 12 Μαΐου 1998. Αυτή η έκδοση πρόσθεσε υποστήριξη για συσκευές ειδικά για μέσα όπως εκτυπωτές, γραμματοσειρές με δυνατότητα λήψης, πίνακες και τοποθέτηση στοιχείων. Τον Ιούνιο του 1999, το CSS3 έγινε η σύσταση του W3C. Αυτό χώρισε την τεκμηρίωση σε ενότητες όπου κάθε λειτουργική μονάδα είχε χαρακτηριστικά επέκτασης που ορίζονται στο CSS2.
Πώς να χρησιμοποιήσετε τα αρχεία CSS
Για να χρησιμοποιήσετε ένα αρχείο CSS, το συμπεριλάβετε στην ενότητα κεφαλής του εγγράφου HTML. Χρησιμοποιείτε την ετικέτα συνδέσμου για να συμπεριλάβετε το αρχείο όπως φαίνεται παρακάτω.
<link rel="stylesheet" type="text/css" href="main.css"/>
το χαρακτηριστικό href της ετικέτας συνδέσμου περιέχει τη διαδρομή προς το αρχείο CSS. Με αυτόν τον τρόπο, τα ισχύοντα στυλ που περιέχονται στο περιλαμβανόμενο αρχείο CSS εφαρμόζονται στο έγγραφο HTML.
Σύνταξη CSS
Ένας κανόνας CSS αποτελείται από δύο στοιχεία, έναν επιλογέα και μια δήλωση. Ένας επιλογέας δείχνει σε ένα στοιχείο στο έγγραφο HTML. Μπορεί να είναι είτε ετικέτα στοιχείου, όνομα κλάσης, όνομα αναγνωριστικού, πολλαπλές ετικέτες που δείχνουν την ιεραρχία, κ.λπ. Μια δήλωση περιέχει τον ορισμό στυλ που αποτελείται από ιδιότητα και τιμή. Η ιδιότητα προσδιορίζει την ιδιότητα του στοιχείου που θέλετε να αλλάξετε και η τιμή ορίζει τη νέα του τιμή. Κάθε κανόνας CSS μπορεί να έχει πολλαπλές δηλώσεις. Το παρακάτω είναι ένα παράδειγμα κανόνα CSS.
h1{
font-weight: 700;
color: forestgreen;
}
Στο παραπάνω παράδειγμα, έχουμε το h1 ως επιλογέα που επιλέγει όλες τις ετικέτες h1 στο έγγραφο HTML. Ο κανόνας έχει δύο δηλώσεις, μία για το βάρος γραμματοσειράς και την άλλη για το χρώμα. font-weight και color είναι ιδιότητες και 700 και forestgreen είναι οι τιμές τους αντίστοιχα.
Παράδειγμα χρήσης CSS
Το παρακάτω δείχνει το παράδειγμα εγγράφου HTML και το φύλλο στυλ που χρησιμοποιήθηκε για το στυλ του. Η εικόνα σύγκρισης προστίθεται επίσης για σύγκριση των μορφοποιημένων και απλών εγγράφων HTML
Έγγραφο HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css" type="text/css">
<title>CSS Test</title>
</head>
<body>
<div class="content-wrapper">
<h1>Test document to test <span class="highlight">CSS</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium officia similique illum magni explicabo,
tempore neque nulla laborum voluptas sint molestias libero et corporis omnis asperiores incidunt,
perferendis
sed aut!</p>
<h2>List of items</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</body>
</html>
Φύλλο στυλ CSS
body{
background-color: lightblue;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.content-wrapper{
padding: 10px 30px;
}
p{
text-align: justify;
}
h1{
text-align: center;
}
.highlight{
font-weight: 700;
color: forestgreen;
}
h1, h2{
font-weight: 400;
}
ul li{
list-style-type: square;
margin-bottom: 10px;
margin-left: 50px;
}
Σύγκριση εξόδου
Η αριστερή πλευρά της εικόνας εμφανίζει το έγγραφο HTML χωρίς τα στυλ που εφαρμόζονται και η δεξιά πλευρά εμφανίζει το έγγραφο HTML με τα στυλ που εφαρμόζονται.
