Tre modi in cui i CSS vengono utilizzati nelle pagine: stili in linea, fogli di stile incorporati e fogli di stile collegati

2024-07-12

Il modo in cui gli stili CSS vengono utilizzati nelle pagine include tre metodi: stili in linea, fogli di stile incorporati e fogli di stile collegati.

1. Stile in linea

Lo stile inline è uno stile relativamente diretto, definito direttamente all'interno del tag HTML e implementato tramite l'attributo style. Questo metodo è più facile da imparare, ma non è molto flessibile.

【Esempio】Applica stili in linea per controllare la pagina.


<!-- 在页面元素中定义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>

Risultati di:

2. Foglio di stile incorporato

Utilizzo dei fogli di stile incorporati <style>...</style> I tag includono stili CSS nella pagina La forma dei fogli di stile in linea non è diretta come gli stili in linea, ma la pagina sarà più regolare.

【Esempio】Utilizza i fogli di stile incorporati per definire lo stile delle tue pagine.


<!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>

Risultati di:

3. Foglio di stile collegato

Il collegamento a un foglio di stile CSS esterno è il modo più comune per fare riferimento a un foglio di stile.Per prima cosa definisci lo stile CSS in un file separato, quindi passalo nella pagina HTML<link> Tag per fare riferimento ad essi, questo è il modo più efficiente per utilizzare gli stili CSS.

<link>La struttura sintattica del tag è la seguente:

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

rel: la relazione tra il documento esterno e il documento chiamante.

href: percorso assoluto o relativo al documento CSS.

tipo: tipo MIME del file esterno

【Esempio】Stili CSS di riferimento nella pagina.

(1) Creare una directory css, quindi creare un file di stile css.css nella directory.


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

(2) Passa nella pagina<link> I tag introducono file di stile CSS nella pagina.


<!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>

Risultati di:

4. Priorità delle chiamate ai fogli di stile

L'ordine di priorità delle chiamate ai fogli di stile segue i seguenti principi:

(1) Lo stile definito nello stile in linea ha la massima priorità.

(2) Altri stili seguono il principio di prossimità nell'ordine in cui appaiono o vengono referenziati nel file HTML Quanto più vicini al testo, maggiore è la priorità.

(3) L'ordine di priorità dei selettori è selettore discendente, selettore di classe, selettore ID e la priorità diminuisce in ordine.

(4) Gli stili non definiti in nessun file seguiranno lo stile predefinito del browser.

Condivisione della tecnologia