Πώς να προσθέσετε CSS

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

Τα τρία τρόποι χρήσης του CSS

Υπάρχουν τρία τρόποι για την εισαγωγή φυλλογραφικών αρχείων CSS:

  • Εξωτερικό CSS
  • Εσωτερικό CSS
  • Inline CSS

Εξωτερικό CSS

Με τη χρήση εξωτερικών φυλλογραφικών αρχείων CSS, μπορείτε να αλλάξετε την εμφάνιση ολόκληρου του ιστοτόπου με μια απλή τροποποίηση ενός αρχείου!

Κάθε σελίδα HTML πρέπει να περιέχει αναφορά σε αρχείο εξωτερικού φυλλογραφικού αρχείου μέσα στο στοιχείο <link> του τμήματος head.

παράδειγμα

Η εξωτερική μορφή ορίζεται στο τμήμα <head> της σελίδας HTML μέσω του στοιχείου <link>:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Δοκιμάστε το Διάθεσθε

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

Το εξωτερικό αρχείο .css δεν πρέπει να περιέχει καμία ετικέτα HTML.

"mystyle.css" είναι το εξής:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  κόκκινο:
  margin-left: 20px;
}

Σημείωση:μη προσθέστε κενά μεταξύ της αξίας του atributo και της μονάδας (π.χ., margin-left: 20 px;()). Η σωστή γραφή είναι:margin-left: 20px;

Εσωτερικό CSS

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

Το εσωτερικό στυλ ορίζεται στο στοιχείο <style> εντός της ενότητας <head>.

παράδειγμα

Το εσωτερικό στυλ ορίζεται στο στοιχείο <style> εντός της ενότητας <head> της σελίδας HTML.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  κόκκινο:
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Δοκιμάστε το Διάθεσθε

Inline CSS

Το inline CSS (έτσι και αλλιώς inline στυλ) μπορεί να χρησιμοποιηθεί για την εφαρμογή μοναδικών στυλ σε ένα στοιχείο.

Για να χρησιμοποιήσετε inline στυλ, προσθέστε το atributo "style" στο σχετικό στοιχείο. Το atributo "style" μπορεί να περιέχει οποιοδήποτε CSS atributo.

παράδειγμα

Το inline στυλ ορίζεται στο atributo "style" του σχετικού στοιχείου.

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Αυτό είναι ένα τίτλος</h1>
<p style="color:red;">Αυτό είναι ένα παράγραφος.</p>
</body>
</html>

Δοκιμάστε το Διάθεσθε

Σημείωση:το inline στυλ χάνει πολλά πλεονεκτήματα του φύλλου στυλ (από το συνδυασμό περιεχομένου με παρουσίαση). Χρησιμοποιήστε αυτόν τον τρόπο με προσοχή.

μπορεί να υπάρχουν πολλαπλά φύλλα στυλ

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

αποτελέσματαεξωτερικό φύλλο στυλτο στοιχείο <h1> έχει οριστεί ως εξής:

h1 {
  κόκκινο:
}

αποτελέσματαεσωτερικό φύλλο στυλτο στοιχείο <h1> έχει οριστεί ως εξής:

h1 {
  χρώμα: πορτοκαλί;    
}

παράδειγμα

αν το εσωτερικό στυλ συνδέεται με εξωτερικό φύλλο στυλμετάτο στοιχείο <h1> θα είναι πορτοκαλί αν οριστεί:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  χρώμα: πορτοκαλί;
}
</style>
</head>

Δοκιμάστε το Διάθεσθε

παράδειγμα

αλλά αν συνδέεται με εξωτερικό φύλλο στυλπρινΟρίζει το εσωτερικό στυλ, ο στοιχείο <h1> θα είναι σκούρο μπλε:

<head>
<style>
h1 {
  χρώμα: πορτοκαλί;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Δοκιμάστε το Διάθεσθε

Κατάταξη Στρώσεων

Όταν οριστεί περισσότεροι στυλ για έναν στοιχείο HTML, ποιο στυλ θα χρησιμοποιηθεί;

Όλα τα στυλ στη σελίδα θα ακολουθούν τους παρακάτω κανόνες "κατάταξη" σε νέο "υπόθετο" φύλλο στυλ, όπου η πρώτη προτεραιότητα είναι η υψηλότερη:

  1. Στυλ εντός κειμένου (στο στοιχείο HTML)
  2. Εξωτερικά και Εσωτερικά Φύλλα Στυλ (στο τμήμα head)
  3. Προεπιλεγμένα Στυλ Περιηγητή

Επομένως, οι στυλ εντός κειμένου έχουν την υψηλότερη προτεραιότητα και καλύπτουν τους εξωτερικούς και εσωτερικούς στυλ καθώς και τους προεπιλεγμένους στυλ του περιηγητή.

Δοκιμάστε το Διάθεσθε