Τρεις τρόποι χρήσης του CSS σε σελίδες: ενσωματωμένα στυλ, ενσωματωμένα φύλλα στυλ και συνδεδεμένα φύλλα στυλ

2024-07-12

Ο τρόπος με τον οποίο χρησιμοποιούνται τα στυλ CSS στις σελίδες περιλαμβάνει τρεις μεθόδους: ενσωματωμένα στυλ, ενσωματωμένα φύλλα στυλ και συνδεδεμένα φύλλα στυλ.

1. Ενσωματωμένο στυλ

Το ενσωματωμένο στυλ είναι ένα σχετικά άμεσο στυλ, που ορίζεται απευθείας μέσα στην ετικέτα HTML και υλοποιείται μέσω του χαρακτηριστικού στυλ. Αυτή η μέθοδος είναι πιο εύκολη στην εκμάθηση, αλλά δεν είναι πολύ ευέλικτη.

【Παράδειγμα】Εφαρμόστε ενσωματωμένα στυλ για τον έλεγχο της σελίδας.


<!-- 在页面元素中定义CSS样式 -->
<p style="font-size: 36px; color:red">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 24px; font-weight: bold;">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 18px; font-style: italic">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 14px; text-decoration: line-through;">您好，欢迎访问 pan_junbiao的博客</p>

Αποτελέσματα των:

2. Ενσωματωμένο φύλλο στυλ

Χρήση ενσωματωμένων φύλλων στυλ <style>...</style> Οι ετικέτες περιλαμβάνουν στυλ CSS στη σελίδα Η μορφή των ενσωματωμένων φύλλων στυλ δεν είναι τόσο άμεση όσο τα ενσωματωμένα στυλ, αλλά η σελίδα θα είναι πιο κανονική.

【Παράδειγμα】Χρησιμοποιήστε ενσωματωμένα φύλλα στυλ για το στυλ των σελίδων σας.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
    
    <!-- 内嵌式样式表 -->
    <style type="text/css">
        h1, h2, h3{
            font-family: Tahoma, Geneva, sans-serif; /*定义字体*/
            color: blue; /*文字颜色*/
        }
    </style>
</head>
<body>
    <h1>大风起兮云飞扬</h1>
    <h2>威加海内兮归故乡</h2>
    <h3>安得猛士兮守四方</h3>
</body>
</html>

Αποτελέσματα των:

3. Συνδεδεμένο φύλλο στυλ

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

<link>Η συντακτική δομή της ετικέτας είναι η εξής:

<link rel='stylesheet' href='path' type='text/css'>

rel: Η σχέση μεταξύ του εξωτερικού εγγράφου και του εγγράφου κλήσης.

href: απόλυτη ή σχετική διαδρομή προς το έγγραφο CSS.

τύπος: Τύπος MIME εξωτερικού αρχείου

【Παράδειγμα】Αναφορά στυλ CSS στη σελίδα.

(1) Δημιουργήστε έναν κατάλογο css και, στη συνέχεια, δημιουργήστε ένα αρχείο στυλ css.css στον κατάλογο.


/*定义CSS样式 */
h1,h2,h3{								
    color:#6CFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
p{
    color:#F0CC;	/*定义颜色*/
    font-weight:200;
    font-size:24px;	 /*设置字体大小*/
}

(2) Περάστε στη σελίδα<link> Οι ετικέτες εισάγουν αρχεία στυλ CSS στη σελίδα.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
 
    <!--页面引入CSS样式表-->
    <link rel="stylesheet" type="text/css" href="/css/css.css">		
</head>
<body>
    <h2>春夜喜雨</h2>
    <p>好雨知时节，当春乃发生。</p>
</body>
</html>

Αποτελέσματα των:

4. Προτεραιότητα κλήσεων φύλλου στυλ

Η σειρά προτεραιότητας των κλήσεων φύλλου στυλ ακολουθεί τις ακόλουθες αρχές:

(1) Το στυλ που ορίζεται στο ενσωματωμένο στυλ έχει την υψηλότερη προτεραιότητα.

(2) Άλλα στυλ ακολουθούν την αρχή της εγγύτητας με τη σειρά με την οποία εμφανίζονται ή αναφέρονται στο αρχείο HTML Όσο πιο κοντά στο κείμενο, τόσο μεγαλύτερη είναι η προτεραιότητα.

(3) Η σειρά προτεραιότητας των επιλογέων είναι επιλογέας απόγονος, επιλογέας κλάσης, επιλογέας αναγνωριστικού και η προτεραιότητα μειώνεται κατά σειρά.

(4) Τα στυλ που δεν ορίζονται σε κανένα αρχείο θα ακολουθούν το προεπιλεγμένο στυλ του προγράμματος περιήγησης.

Κοινή χρήση τεχνολογίας