Όταν ένα πρόγραμμα περιήγησης διαβάζει ένα φύλλο στυλ, θα μορφοποιήσει το έγγραφο HTML σύμφωνα με τις πληροφορίες στο φύλλο στυλ.
Υπάρχουν τρεις τρόποι εισαγωγής ενός φύλλου στυλ:
Εξωτερικό CSS
Εσωτερικό CSS
Ενσωματωμένο CSS
Με ένα εξωτερικό φύλλο στυλ, μπορείτε να αλλάξετε την εμφάνιση ενός ολόκληρου ιστότοπου αλλάζοντας μόνο ένα αρχείο!
Κάθε σελίδα HTML πρέπει να περιλαμβάνει μια αναφορά στο εξωτερικό αρχείο φύλλου στυλ μέσα το στοιχείο , μέσα στην ενότητα κεφαλής.
Τα εξωτερικά στυλ ορίζονται στο στοιχείο , μέσα στην ενότητα <head> μιας σελίδας HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Ένα εξωτερικό φύλλο στυλ μπορεί να γραφτεί σε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου και πρέπει να αποθηκευτεί με επέκταση .css.
Το εξωτερικό αρχείο .css δεν πρέπει να περιέχει ετικέτες HTML.
Δείτε πώς φαίνεται το αρχείο "mystyle.css":
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}Σημείωση: Μην προσθέτετε κενό μεταξύ της τιμής ιδιότητας (20) και της μονάδας (px):
Λάθος (κενό):
margin-left: 20 px;Σωστό (χωρίς κενό):
margin-left: 20px;Ένα εσωτερικό φύλλο στυλ μπορεί να χρησιμοποιηθεί εάν μία μεμονωμένη σελίδα HTML έχει μοναδικό στυλ.
Το εσωτερικό στυλ ορίζεται μέσα στο στοιχείο <style>, μέσα στην κεφαλή Ενότητα.
Τα εσωτερικά στυλ ορίζονται στο στοιχείο <style>, μέσα στην ενότητα <head> μιας σελίδας HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Ένα ενσωματωμένο στυλ μπορεί να χρησιμοποιηθεί για την εφαρμογή ενός μοναδικού στυλ για ένα μεμονωμένο στοιχείο.
Για να χρησιμοποιήσετε ενσωματωμένα στυλ, προσθέστε το χαρακτηριστικό στυλ στο σχετικό στοιχείο. ο Το χαρακτηριστικό στυλ μπορεί να περιέχει οποιαδήποτε ιδιότητα CSS.
Τα ενσωματωμένα στυλ ορίζονται στο χαρακτηριστικό "style" του σχετικού στοιχείο:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Συμβουλή: Ένα ενσωματωμένο στυλ χάνει πολλά από τα πλεονεκτήματα ενός φύλλου στυλ (με ανάμειξη περιεχόμενο με παρουσίαση). Χρησιμοποιήστε αυτή τη μέθοδο με φειδώ.
Εάν ορισμένες ιδιότητες έχουν οριστεί για τον ίδιο επιλογέα (στοιχείο) σε διαφορετικά φύλλα στυλ, θα χρησιμοποιηθεί η τιμή από το φύλλο στυλ τελευταίας ανάγνωσης.
Ας υποθέσουμε ότι ένα εξωτερικό φύλλο στυλ έχει το ακόλουθο στυλ για το στοιχείο <h1>:
h1
{
color: navy;
}Στη συνέχεια, ας υποθέσουμε ότι ένα εσωτερικό φύλλο στυλ έχει επίσης το ακόλουθο στυλ για το στοιχείο <h1>:
h1
{
color: orange;
}Εάν το εσωτερικό στυλ οριστεί μετά τον σύνδεσμο προς το εξωτερικό φύλλο στυλ, τα στοιχεία <h1> θα είναι "πορτοκάλι":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
Ωστόσο, εάν το εσωτερικό στυλ οριστεί πριν από τη σύνδεση με το εξωτερικό φύλλο στυλ, τα στοιχεία <h1> θα είναι "ΠΟΛΕΜΙΚΟ ΝΑΥΤΙΚΟ":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
Τι στυλ θα χρησιμοποιηθεί όταν έχουν καθοριστεί περισσότερα από ένα στυλ για ένα στοιχείο HTML;
Όλα τα στυλ σε μια σελίδα θα "καταρράξουν" σε ένα νέο "εικονικό" στυλ φύλλο σύμφωνα με τους ακόλουθους κανόνες, όπου το νούμερο ένα έχει την υψηλότερη προτεραιότητα:
Ενσωματωμένο στυλ (μέσα σε ένα στοιχείο HTML)
Εξωτερικά και εσωτερικά φύλλα στυλ (στο τμήμα κεφαλής)
Προεπιλογή προγράμματος περιήγησης
Έτσι, ένα ενσωματωμένο στυλ έχει την υψηλότερη προτεραιότητα και θα παρακάμψει το εξωτερικό και εσωτερικά στυλ και προεπιλογές προγράμματος περιήγησης.
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>
</body>
</html>