1. 程式人生 > >html引入外部css的用法

html引入外部css的用法

/ 代表根目錄,慎用 
../ 代表上一級目錄 
../../ 代表上兩級目錄 
/.. 代表下級目錄 
/../.. 代表下兩級目錄

標準寫法: 

同級 直接引用檔名 
<link rel="stylesheet" type="text/css" href="theme0.css" />


下級 同級目錄/下級目錄/檔名 

<link rel="stylesheet" type="text/css" href="css/theme0.css" />

html程式碼引用外部css檔案時若css檔案在本檔案的父目錄下的其他目錄下,可使用絕對路徑。此時路徑要寫為  “ /... ”形式,如在tomcat下建立一個test檔案,在該檔案中建立兩個檔案 夾as與css,在as下建立一個html檔案,在css資料夾下建立一個css檔案test.css,若html檔案想要引用css資料夾下的css檔案,則引用格式為 <link rel="stylesheet" href="/test/css/test.css"> ,這種方法僅在tomcat下嘗試有效,其他地方我嘗試了一下發現沒有效果


在不使用tomcat伺服器,僅雙擊開啟html檔案時,若要連結其它目錄的css檔案,路徑要追溯到html檔案與css檔案的共同根節點的父節點。比如:資料夾a下建立一個資料夾b,b下建立資料夾ht與css,ht中建立一個html檔案,css下有一個css檔案d.css,當html檔案引用css檔案時,引用格式為<link rel="stylesheet" href="/a/b/css/d.css">

相關推薦

html引入外部css用法

/ 代表根目錄,慎用 ../ 代表上一級目錄 ../../ 代表上兩級目錄 /.. 代表下級目錄 /../.. 代表下兩級目錄標準寫法: 同級 直接引用檔名 <link rel="stylesheet" type="text/css" href="theme0.css"

久未更 ~ 五之 —— 引入外部CSS樣式表 小節

col div ... fun class utf-8 css樣式 splay date > > > > > 久未更 系列一:在html中引入外部css樣式表 1 //引入外部css樣式表 2 //<lilnk&

react link引入外部css樣式的坑

剛開始的程式碼是這樣的,使用react router4.x寫的demo路由跳轉後,頁面的沒有渲染,是因為沒有引入外部css檔案(或者說引入外部檔案路徑錯誤)   <!DOCTYPE html> <html lang="en"> <head>

Vue style裏面使用@import引入外部css, 作用域是全局的解決方案

外部 href src mozilla exp 前端性能 資源 sta 樣式表 問題描述 使用@import引入外部css,作用域卻是全局的 &lt;template&gt; &lt;/template&gt; &lt;scrip

JSP頁面引入外部CSS檔案,重新整理後不起作用如何解決

一般CSS程式碼可以寫在專門的CSS檔案中,然後某個頁面需要時直接呼叫CSS檔案即可。但發現將CSS檔案引入後仍然不起作用。重新整理後無效果。其實只要在<link>標籤裡新增一個charset="utf-8"就可以了。就像下面這樣:<link rel="st

html引入外部檔案的路徑問題

假如有專案結構如下: 有兩種路徑: 絕對路徑:“絕對”意味著相對於Web伺服器根目錄。形式上,以 / 開頭,比如 <img src="/web/images/exampl

HTML引入外部JS檔案的方法

在引入外部JS檔案的情況下,不能在<script></script>之間插入程式碼,插入的程式碼不執行,只執行引入的外部檔案。 attack.html 程式碼: <!D

html引用外部Css文件失效原因

css樣式 粘貼 原因 一個 發現 引用 inf col info 先說下具體情況,一開始準備寫個小練習,寫了一個網頁。覺得頭部css太冗長 就決定寫在外部css文件,把style裏的css樣式全部粘貼進新建的Base.css文件裏一打開瀏覽器一看,不行!!!之後便百度原因

HTML引入CSS樣式三種方法及優先級 CSS樣式的寫法

分開 通過 str 相同 gif 標記 sof 偽類 cnblogs HTML引入CSS樣式三種方法及優先級: 方法 css的樣式引用由3種方式。分別為行內樣式、內部樣式(嵌入式)和外部樣式; 行內樣式: 在對象的標記內使用對象的s

html引入css的方法,以及css選擇器

html 中間 col css選擇器 sheet strong sna 方法 權限 Html中引入css的四種方式 1、行內式 style=“XXX”寫在標簽中 <h1 style = "color: #000;"> 2、

CSS引入外部字體

css font如何引入外部字體呢?1.獲取相關文件通常我們在網站下載到的字體包都是以TTF結尾的文件,但是我們前端開發時通常需要四種文件。字體後綴和瀏覽器有關,如下所示 .TTF或.OTF,適用於Firefox 3.5、Safari、Opera .EOT,適用於Internet Explorer 4.0

html頁面,css引用外部字型

@font-face { font-family: 'Tw'; src: url('../fonts/Tw.eot'); src: url('../fonts/Tw.eot?#iefix') format('embedded-opentype'), url('.

html頁面引入外部html的方法 (使用第三方外掛)

   一般情況下,引入外部html的方法無非就5種,分別是: 1、iframe <iframe src="test.html"></iframe> 2、link方式 <link rel="import" href

gulp-html-import,在html引入外部html檔案

寫於 2016.06.14 專案地址: gulp-html-import 曾經學習PHP的時候,深深覺得include語法非常好用,後接觸了ejs,發現裡面也有類似的語法,能夠方便地引入公共html檔案;在學習了vue,react等框架以後,“元件化思想”更是在我腦海根深蒂固,再也無

HTML檔案裡把所有的css、js檔案引入後,其他的HTML檔案引入該頁面後,可以使用該頁面引入css和js

怎樣將一個HTML檔案裡把所有的css、js檔案引入後,然後其他的HTML檔案就不需要在進行引入了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

HTML引入CSS的三種方式

三種方式如下: 並且這三種方式引入CSS之間的優先順序是: 內聯樣式>內部樣式表>外部樣式表 同時: 要使用內聯樣式,你需要在相關的標籤內使用樣式(style)屬性。Style 屬性可以包含任何 CSS 屬性

HTML引入JS和CSS

CSS 檔案的四種使用方式 - 連結式 link在html載入前就載入 <link href="test.css" rel="stylesheet" type="text/css"/> - 匯入式 import在html載入後加載--顯示無樣式的頁面後再次渲染 <

html引入css檔案和js檔案方式

 <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> 使用link標籤引入css檔案  <script src="../lib/OpenLayers.js"&g

不同瀏覽器css引入外部字型的方式

/** * 字型字尾和瀏覽器有關,如下所示 * .TTF或.OTF,適用於Firefox 3.5、Safari、Opera * .EOT,適用於Internet Explorer 4.0+ * .SVG,適用於Chrome、IPhone * 比如: */ @font-fa

在 .vue檔案的樣式檔案中如何引入外部的樣式檔案 (.css .less)

一般情況下vue開發的時候都是一個元件一個元件進行開發,每個元件都有自己的樣式檔案, 基本結構如下所示: <template>        <div class="test">        測試一下,哈哈        </div&