網(wǎng)站的元素怎么做網(wǎng)站?
說(shuō)明：網(wǎng)頁(yè)開發(fā)有三種技術(shù)，分別是html、css和js，分別對(duì)應(yīng)頁(yè)面的結(jié)構(gòu)、表現(xiàn)和動(dòng)作。css樣式引入，是指把對(duì)頁(yè)面的渲染作用到html上，有以下三種方式：行內(nèi)式、內(nèi)嵌式和外聯(lián)式。
第一種：行內(nèi)式（不推薦）
在標(biāo)簽內(nèi)設(shè)置樣式，多個(gè)屬性設(shè)置用分號(hào)（;）間隔
<!-- 用行內(nèi)式設(shè)置字體顏色為藍(lán)色 -->
<h1 style="color: blue;">行內(nèi)式</h1>
第二種：內(nèi)嵌式（推薦）
在body標(biāo)簽外設(shè)置style標(biāo)簽，在style標(biāo)簽內(nèi)寫html元素的屬性。建議style標(biāo)簽，寫在head標(biāo)簽內(nèi)。
<head>
……
<style>/* 用內(nèi)嵌式設(shè)置字體顏色為藍(lán)色*/h1 {color: red;}
</style><!-- 建議style標(biāo)簽寫在head標(biāo)簽內(nèi) -->
</head>
<body><h1>內(nèi)嵌式</h1>
</body>
第三種：外聯(lián)式（專業(yè)）
把樣式代碼抽出來(lái)，生成一個(gè).css為后綴的文件，html需要用的話，引用就行，且可以外聯(lián)多個(gè)css文件。需要注意的是，路徑可以用絕對(duì)路徑；但要用相對(duì)路徑的話，路徑是html文件視角的，“./”表示html文件的平級(jí)目錄；“…/”表示上級(jí)目錄，“…/…/”表示上上級(jí)目錄，以此類推。
<head>
……<!-- vscode 敲"link:css"會(huì)有代碼提示 --><link rel="stylesheet" href="../essay/css.css"></head>
<body><h1>外聯(lián)式</h1>
</body>
優(yōu)先級(jí)
html元素使用樣式的原則是：就近原則，即哪一種樣式距離自己近，就優(yōu)先使用哪一個(gè)。
去掉行內(nèi)樣式，查看另外兩種樣式的使用
總結(jié)
第一種行內(nèi)式，樣式只能對(duì)單個(gè)元素，且如果樣式代碼寫了很多，標(biāo)簽會(huì)變得很長(zhǎng)，代碼不易閱讀，不推薦使用；
第二種內(nèi)嵌式，把樣式和頁(yè)面接口分開，提高了代碼的閱讀性。但是，如果頁(yè)面結(jié)構(gòu)較復(fù)雜，css樣式非常多，維護(hù)和開發(fā)會(huì)比較吃力。比如想看某個(gè)元素的樣式，需要頻繁的上下查看。頁(yè)面結(jié)構(gòu)不是很復(fù)雜，樣式代碼不是很多的情況下推薦使用。
第三種外聯(lián)式，支持外聯(lián)多個(gè)css樣式文件，是專業(yè)的引入方式，像瀏覽器搜到的一些網(wǎng)站，如CSDN官網(wǎng)，就是使用該方式。
