Η ετικέτα link
Η ετικέτα link συνδέει αρχεία CSS σε μια HTML
σελίδα. Επιπλέον, η link συνδέει
μερικά άλλα αρχεία, για παράδειγμα, το εικονίδιο favicon.
(Το εικονίδιο favicon είναι η μικρογραφία του ιστότοπου, η οποία
είναι ορατή στην καρτέλα του προγράμματος περιήγησης. Μπορεί επίσης να
εμφανίζεται σε ορισμένες μηχανές αναζήτησης δίπλα στους ιστότοπους, για παράδειγμα στο Yandex).
Αυτή η ετικέτα έχει πολλά χαρακτηριστικά και μπορούν να λάβουν ποικίλες τιμές, ωστόσο στην πραγματική ζωή σχεδόν δεν χρησιμοποιούνται όλα. Το πιο δημοφιλές είναι η σύνδεση CSS και η προσθήκη favicon.
Πώς να συνδέσετε CSS:
<link rel="stylesheet" href="style.css">
Πώς να συνδέσετε favicon:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
Η ετικέτα link δεν απαιτεί ετικέτα κλεισίματος.
Χαρακτηριστικά
| Χαρακτηριστικό | Περιγραφή |
|---|---|
href |
Η διαδρομή προς το αρχείο που θα συνδεθεί. |
media |
Ο τύπος της συσκευής για την οποία θα πρέπει να συνδεθεί το αρχείο. Αυτό σημαίνει ότι μπορείτε να συνδέσετε ένα αρχείο CSS μόνο για μεγάλες οθόνες (τιμή screen)
ή μόνο για μικρές οθόνες: για κινητά ή tablet (τιμή handheld).
Πιθανές τιμές: all, braille, handheld, print, screen, speech, projection, tty, tv.
Δείτε περισσότερες πληροφορίες παρακάτω.
|
rel |
Ο τύπος του αρχείου που συνδέεται.
Πιθανές τιμές: stylesheet | alternate.
Η τιμή stylesheet υποδεικνύει ότι συνδέεται ένα αρχείο CSS,
η τιμή alternate χρησιμοποιείται, για παράδειγμα, για να υποδείξει έναν σύνδεσμο
προς ένα αρχείο σε μορφή XML που περιγράφει μια ροή ειδήσεων, προεπισκοπήσεις άρθρων.
|
charset |
Η κωδικοποίηση του αρχείου που συνδέεται.
Σήμερα το πρότυπο είναι η utf-8.
|
type |
Ο τύπος δεδομένων του αρχείου που συνδέεται. |
Τιμές του χαρακτηριστικού media
Στο HTML5 ως τιμές μπορούν να οριστούν media queries.
| Τιμή | Περιγραφή |
|---|---|
all |
Όλες οι συσκευές. |
screen |
Οθόνη υπολογιστή. |
handheld |
Τηλέφωνα, smartphones, συσκευές με μικρή οθόνη. |
braille |
Συσκευές που βασίζονται στο σύστημα Braille, προορίζονται για τυφλούς ανθρώπους. |
speech |
Ομιλητικοί συνθεσάιορες, καθώς και προγράμματα για την αναπαραγωγή κειμένου με φωνή. Εδώ συμπεριλαμβάνονται και τα φωνητικά προγράμματα περιήγησης. |
print |
Εκτυπωτές. |
projection |
Προτζέκτορες. |
tty |
Τηλέτυποι, τερματικά, φορητές συσκευές με περιορισμένες δυνατότητες οθόνης. Για αυτές δεν πρέπει να χρησιμοποιούνται pixels ως μονάδα μέτρησης. |
tty |
Τηλεοράσεις που μπορούν να ανοίγουν ιστοσελίδες (συμβαίνει και αυτό). |
Προεπιλεγμένη τιμή: all.
Παράδειγμα
Ας δούμε πώς φαίνεται η δομή μιας απλής HTML σελίδας, στην οποία θα προσθέσουμε σύνδεση αρχείων CSS και εικονίδιο favicon:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" media="screen">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
