HTML <style> ετικέτα

Ορισμός και χρήση

<style> Το στοιχείο χρησιμοποιείται για την ορισμό των διατριβών στυλ του έγγραφου (CSS).

Στο <style> Στο στοιχείο, μπορείς να καθορίσεις τον τρόπο εμφάνισης του στοιχείου στο περιηγητή.

Παρακαλώ σημειώστε ότι το στοιχείο style ορίζει τις ενσωματωμένες διατριβές CSS του έγγραφου HTML, ενώ το στοιχείο link χρησιμοποιείται για την εισαγωγή στυλ από εξωτερικά φύλλα στυλ.

Το στοιχείο style μπορεί να εμφανιστεί σε οποιαδήποτε περιοχή του έγγραφου HTML. Ένας φάκελος μπορεί να περιέχει πολλαπλά στοιχεία style, οπότε δεν χρειάζεται να τοποθετήσεις όλες τις ορισμένες διατριβές στο τμήμα head. Στις περιπτώσεις που χρησιμοποιείται το μηχανισμό μοτίβων, αυτή η ιδιότητα είναι πολύ χρήσιμη, καθώς επιτρέπει την προσθήκη ειδικών στυλ για την ιστοσελίδα που δημιουργείται, προσθέτοντας έτσι επιπλέον στυλ στις διατριβές που ορίζονται από το μοτίβο.

Για περισσότερες πληροφορίες:

Εκμάθηση HTML:HTML CSS

Εκμάθηση CSS:Εκμάθηση CSS

Εγχειρίδιο HTML DOM:Στοιχείο Style

Παράδειγμα

Παράδειγμα 1

Χρήση <style> Το στοιχείο εφαρμόζει απλό φύλλο στυλ στο έγγραφο HTML:

<html>
<head>
<style>
  h1 {χρώμα:κόκκινο;}
  p {χρώμα:μπλε;}
</style>
</head>
<body>
<h1>Αυτό είναι ένα τίτλος</h1>
<p>Αυτό είναι ένα παράδειγμα παραγράφου.</p>
</body>
</html>

Προσπάθησε το εαυτό σου

Παράδειγμα 2

Πολλαπλά στυλ για τον ίδιο στοιχείο:

<html>
<head>
<style>
  h1 {χρώμα:κόκκινο;}
  p {χρώμα:μπλε;}
</style>
<style>
  h1 {χρώμα:πράσινο;}
  p {χρώμα:κόκκινο;}
</style>
</head>
<body>
<h1>Αυτό είναι ένα τίτλος</h1>
<p>Αυτό είναι ένα παράδειγμα παραγράφου.</p>
</body>
</html>

Προσπάθησε το εαυτό σου

Συμβουλές και σχόλια

Σημείωση:Όταν ο περιηγητής διαβάζει το φύλλο στυλ, διαμορφώνει το έγγραφο HTML με βάση τις πληροφορίες του φύλλου στυλ. Αν έχουν οριστεί κάποιες ιδιότητες για τον ίδιο επιλογέα (στοιχείο) σε διαφορετικά φύλλα στυλ, θα χρησιμοποιηθούν οι τιμές από το τελευταίο φύλλο στυλ που διαβάστηκε (βλέπε τον παραπάνω παράδειγμα)!

Tip:To link to an external stylesheet, use <link> tag.

Tip:To learn more about style sheets, please read our Εκμάθηση CSS.

Attribute

Attribute Value Description
media Media queries Specifies the media used for the style.
type text/css Specifies the media type of the <style> tag.

Global attributes

<style> The tag also supports Global attributes in HTML.

event attributes

<style> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display with the following default values <style> Element:

style {
  display: none;
}

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support