WEB前端開發學習----6.CSS 和 JS 在html的使用方法

時間 2019-11-09

標籤 web 前端開發學習 6.css css html 使用方法欄目 HTML 简体版

原文原文鏈接

CSS的導入總共有四大方法：javascript

1. 行內式：直接在html標籤元素內嵌入css樣式（不推薦）css

2.嵌入式：在html頭部head部份內插入style聲明html

3.導入式：使用@import引用外部CSS文件方法：<style type="text/css">
@import "mystyle.css";
</style>java

4.連接式：使用link來調用外部的css文件（推薦）：<link href="mystyle.css" rel="stylesheet" type="text/css"/>瀏覽器

外部css文件中，不用<style>標籤。服務器

通常來，常見的是2,3,4三種方法。dom

2方法的優勢：速度快，全部的CSS控制都針對本頁面標籤，沒有多餘的CSS命令函數

2方法的缺點：不利於改版，單個頁面顯得臃腫。CSS不能共享，形成代碼重複。網站

3方法的優勢：和2方法比起來，能夠進行CSS共享，頁面比較簡潔、搜索引擎

3方法的缺點：@import引用的CSS會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候比較明顯

4方法的優勢：

a. 有利於SEO，使用此方法引用外部css文件，將使得html頁面的源代碼少不少比起直接加入css樣式，由於搜索引擎蜘蛛爬行網頁的時候是不爬行css文件的，這樣使得html源代碼不多，使得蜘蛛爬行更快，處理更少，增大了此網頁的權重，有利於排名。
b. 節約html使得瀏覽器下載網頁時候分開線程了，就像加載一個頁面同時有兩條線在打開一個頁面道理，使得網頁打開格外快。（用戶瀏覽此網頁的時候html源代碼和css文件同時下載，使得網頁加載更加快速）
c. 修改網頁的樣式方便，只需修改css樣式便可修改網頁的美工樣式，若是在網站項目中此方法，因整站應用了共用的css基本樣式，這樣修改整站風格樣式根據快捷方便。

d. 當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

4方法的缺點：會對網站服務器產生過多的HTTP請求，之前是一個文件，而如今倒是兩個或更多文件了，服務器的壓力增大，瀏覽量大的網站仍是謹慎使用。有興趣的能夠觀察一下像新浪等網站的首頁或欄目首頁代碼，他們總會把css或js直接寫在html裏，而不用外部文件

通常來講：若是僅須要引入一個CSS文件，則使用連接方式；若是須要引入多個CSS文件，則首先用鏈接方式引入一個「目錄」CSS文件，這個「目錄」CSS文件中再使用導入式引入其餘CSS文件。

若是但願用javascript來動態決定引入哪一個css文件，則必須使用鏈接式才能實現。

Javascript 使用方法：

1.在 HTML 文檔中放入不限數量的腳本。

腳本可位於 HTML 的 <body> 或 <head> 部分中，或者同時存在於兩個部分中。一般的作法是把函數放入 <head> 部分中，或者放在頁面底部。這樣就能夠把它們安置到同一處位置，不會干擾頁面的內容。

注意：多個script 在同一頁面中是相關聯的。儘可能避免同名。

2.對於外部的js腳本，只需引入便可：