HTML引用css樣式有三種方法,那麼,有哪三種方法呢?本篇文章就來跟大家詳細介紹一下html引用css檔案的三種方法。 將樣式表套用至HTML文件和CSS中的XHTML文件大致可分為以下三種方法。 (推薦教學:css影片教學) 1、使用元素呼叫並應用外部CSS檔案 2、使用元素應用於文檔單元</p> <p>3、透過向元素添加樣式屬性來應用樣式</p> <p><strong>使用<link>元素呼叫並應用外部CSS檔案</strong></p> <p>創建一個CSS文件,與HTML文件分開描述樣式表,並從HTML文件中呼叫它。對於調用,透過描述HTML文件的<head>元素中的<link>元素來指定外部CSS檔案。若要通知瀏覽器等應用的樣式是基於CSS,請為<link>元素的type屬性的值指定text / css。考慮到與XHTML的兼容性,易於修改樣式等,建議以這種方式設定樣式表。 </p> <p style='color: rgb(0, 0, 0); font-family: "Microsoft YaHei"; white-space: normal;'>樣式表元件在外部檔案(xxx.css)中描述。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p {color:blue; line-height:1.5;}</pre><div class="contentsignin">登入後複製</div></div><p style="color: rgb(0, 0, 0); font-family: "Microsoft YaHei"; white-space: normal;">HTML原始碼</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><html> <head> <link rel =“ stylesheet ”type =“ text / css ”href =“ xxx.css ”> </ head> <body> <p>这是一个段落</ p> </ body> </ html></pre><div class="contentsignin">登入後複製</div></div><p style="color: rgb(0, 0, 0); font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;"><strong><span style="color: rgb(20, 25, 30); font-family: "Microsoft Yahei", "Hiragino Sans GB", Helvetica, "Helvetica Neue", 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px;">使用<style>元素套用於文件單元</span></strong></p><p style="color: rgb(0, 0, 0); font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;">##在HTML在文檔的<head>元素中編寫<style>元素,並為每個文檔設定樣式表。指定text / css作為<style>元素的type屬性的值,以通知瀏覽器等應用的樣式基於CSS。 <span style="color: rgb(20, 25, 30); font-family: "Microsoft Yahei", "Hiragino Sans GB", Helvetica, "Helvetica Neue", 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px;"></span><br/></p>此外,使用<! - - >註解樣式表部分是為了防止<style>元素的內容顯示在與樣式表不對應的舊瀏覽器中。但是,由於近年來大多數瀏覽器都支援<style>元素,即使省略<! -- 和-->,也幾乎沒有問題。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><html> <head> <style type="text/css"> <!-- p {color:blue; line-height:1.5;} --> 这是一个段落。