CSS:ää käytetään sivuilla kolmella tavalla: upotetut tyylit, upotetut tyylisivut ja linkitetyt tyylisivut

2024-07-12

CSS-tyylejen käyttö sivuilla sisältää kolme tapaa: upotetut tyylit, upotetut tyylisivut ja linkitetyt tyylisivut.

1. Sisäänrakennettu tyyli

Inline-tyyli on suhteellisen suora tyyli, joka määritellään suoraan HTML-tunnisteessa ja toteutetaan style-attribuutin kautta. Tämä menetelmä on helpompi oppia, mutta se ei ole kovin joustava.

【Esimerkki】Ohjaa sivua käyttämällä upotettuja tyylejä.


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

Tulokset:

2. Upotettu tyylisivu

Käytä upotettuja tyylisivuja <style>...</style> Tunnisteet sisältävät CSS-tyylejä sivulla Sisäisten tyylisivujen muoto ei ole yhtä suora kuin tekstin sisällä olevat tyylit, mutta sivu on säännöllisempi.

【Esimerkki】Käytä upotettuja tyylisivuja sivujesi tyylin luomiseen.


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

Tulokset:

3. Linkitetty tyylisivu

Linkittäminen ulkoiseen CSS-tyylitaulukkoon on yleisin tapa viitata tyylisivuun.Määritä ensin CSS-tyyli erillisessä tiedostossa ja välitä se sitten HTML-sivulle<link> Tunnisteet viittaavat niihin, tämä on tehokkain tapa käyttää CSS-tyylejä.

<link>Tunnisteen syntaksirakenne on seuraava:

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

rel: Ulkoisen asiakirjan ja kutsuvan asiakirjan välinen suhde.

href: absoluuttinen tai suhteellinen polku CSS-asiakirjaan.

tyyppi: ulkoisen tiedoston MIME-tyyppi

【Esimerkki】Viittaa CSS-tyyleihin sivulla.

(1) Luo css-hakemisto ja luo sitten hakemistoon css.css-tyylitiedosto.


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

(2) Siirry sivulle<link> Tunnisteet tuovat CSS-tyylitiedostoja sivulle.


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

Tulokset:

4. Tyylisivukutsujen prioriteetti

Tyylisivukutsujen prioriteettijärjestys noudattaa seuraavia periaatteita:

(1) Sisällisessä tyylissä määritellyllä tyylillä on korkein prioriteetti.

(2) Muut tyylit noudattavat läheisyysperiaatetta siinä järjestyksessä, jossa ne näkyvät tai niissä viitataan HTML-tiedostoon, mitä lähempänä tekstiä, sitä korkeampi prioriteetti.

(3) Valitsimien prioriteettijärjestys on jälkeläinen valitsin, luokan valitsin, ID-valitsin, ja prioriteetti laskee järjestyksessä.

(4) Tyylit, joita ei ole määritelty missään tiedostossa, noudattavat selaimen oletustyyliä.

Teknologian jakaminen