您現在的位置是:電腦技術吧?>? 基礎知識 ??>??css樣式表,css樣式表能實現的是??>??正文詳情

css樣式表,css樣式表能實現的是

費莫芷波2019-11-23 16:41:46 人圍觀
簡介什么是css為什么序言有這篇文章?很容易談論的是,很容易將CSS代碼的內容復制到剪貼板。還有什么,蘇艾?我一直認為你一定比我聰明得多。但是當我在微信上瀏覽一個頁面時,修改

前言  為什么會有這篇文章,外部引入樣式有什么好談的,不外乎就是  CSS Code復制內容到剪貼板    就這么簡單,還有什么,so easy,我之前都是這么認為的你肯定比我聰明多了~_^,但是當做一個頁面在微信上瀏覽并且修改再瀏覽的時候我發現不對勁,因為已經上傳的樣式表木有改變,IOS還好,可以強制刷新頁面。

但是安卓端這塊一直在用微信的緩存,還沒有刷新的按鈕,所以覺得css引入問題目測應該沒有這么簡單。

  好了,下面都是一些自己的純扯蛋瞎扯,歡迎前輩多拍磚。

  關于路徑  在還沒有說之前先說下關于css引入的2種方式:  相對路徑(Relative Path),顧名思義:就是css文件相對某一個參照物的位置。

上物理課的時候老師都會提到相對運動:指某一個物體對另外一個物體的相對于一個固定參照物來是相對運動的。

我們走路看汽車的時候覺得汽車往后走,汽車看我們的時候是往前走,那么相對路徑也是醬樣子的,網頁所處目錄就是我們的參照物。

像剛剛上面這段css代碼的引入就是一個相對路徑地址,test是網站的目錄,style.css文件跟這個網頁文件是同處一個目錄層級,如圖:

  那么在網頁文件index.html引入css應該是  CSS Code復制內容到剪貼板    假如說css文件放在跟index.html同級目錄,名為css文件夾里面,類似這樣:

  假如css放跟目錄也就是test這里

  /斜杠符號在這里表示的就是根目錄,也就是這些網頁文件之間聯系的參照物。

  絕對路徑(Absolute Path),既然是絕對的,那就說明這個地址是唯一性,獨立性。

相對本地來說,剛剛的站點test的絕對地址為F:test,相對服務器來說,就應該是127.0.0.1/test類似這樣的IP地址。

  關于路徑引入  要相對路徑還是絕對路徑引入css文件,個人認為本地預覽的時候可以選擇相對路徑,項目上線的時候改成絕對路徑來引入,為什么?有以下幾點:  1. 減少索引,絕對地址的唯一性可以確保用戶在輸入網頁的時候,瀏覽器直接去索引到那個IP地址,直接一刀致命,沒有拖沓。

而相對路徑就要一步步索引目錄,這就好比在路上遇見一個心儀的妹紙,我們害羞不敢當面去談話,于是我們制造了無數的偶遇之后才有膽子上去問聯系方式,到最后才發現妹紙早名花有主,早知如此,何必當初呢~  2. 增加外鏈,對于做SEO的人來說,我們都知道外鏈能帶來不錯的權重提高,就算是別人來抓我們的內容,假如它沒有改成自己的服務器地址,那說明這個網站的引用地址還是我們的網址,爬蟲會通過這個圖片引用地址反爬回去,但相對路徑引用,因為地址發生變更,因此爬蟲爬回去之后找不到相應的文件,因此爬蟲的工作也即將停止。

  3. 提高排名,假如是你一個干前端的,那么多少都會遇到某一個自己喜歡的動畫效果,HTML搞下來了,但是不想要直接把css也下下來,因此會在本地直接調用網絡地址。

當你預覽這個頁面的時候不小心點到了引入地址,會跳轉到相應的網站css,即使你沒有訪問其主頁,但是你還是訪問了他的域名,無意之中還是增加了其訪問量。

  當然了,第三點是我自己YY出來的,至于是不是我們無從考究,希望有過研究的可以分享一下你們的見解咯。

  絕對路徑幾種表現  一般式  剛剛我們提到了相對來說不管是引用圖片還是引用css文件,路徑最好是絕對路徑,所以上面的style.css文件的引入地址應該是  CSS Code復制內容到剪貼板    這樣的引入似乎是正確了的,各種對SEO來說也達到的滿意程度,但是某寶的做法是這么做  某寶式

  淘寶的css還有js的引入是通過他們的CDN分布式形式,而且后面都帶有?t=20150105,這跟我們的做法不太一致,后面的20150105應該是這個時間更新的,為了方便記住版本信息,但是為什么帶?問號。

于是有Google一番,各路大神對此的解釋可以解答我心中的疑惑:  標注版本號。

  方便查看最近修改情況。

可以是日期。

【這是淘寶一樣】  用隨機數防止緩存。

  如果更改css,為了避免瀏覽器緩存,不會及時更新導致頁面沒有出現相應效果,在使用時帶上一個動態參數,讓瀏覽器重新下載這個css文件。

  那就好理解了,帶?只是為了讓瀏覽器把舊版本的css給over掉,重下新的css版本號。

這個也好解釋了為什么微信瀏覽已經修改過的css文件,但是樣式還沒有調試過來,因為微信調用的還是老版本的css文件,因此假如各位csser們想要第一時間能預覽到最新修改的樣式,那么引入的路徑最好是?=xxx類似這樣的版本號,以便讓瀏覽器重下我們已經修改過的css文件。

  Facebook式  假如你能翻墻,能上Facebook,那么不妨看看Facebook的css引入又跟我們國內的不太一樣,如圖:

  這么一大堆的大小寫英文字母是干嘛的,為什么又跟我們國內的不太一樣,問了一下同事,他說是類似哈希加密文件,于是百科一了一下哈希算法,大概解釋如下:  舊譯哈希(誤以為是人名而采用了音譯)。

它也常用作一種資訊安全的實作方法,由一串資料中經過散列算法(Hashing algorithms)計算出來的資料指紋(data fingerprint),經常用來識別檔案與資料是否有被竄改,以保證檔案與資料確實是由原創者所提供。

  最后一句話解釋很好,就是經常被用來識別是否被篡改。

假如說本地和網絡上的這個css文件被篡改了,那么它會通知瀏覽器重下這個已經被修改css文件,然后清掉之前的css緩存。

好了,說到緩存的問題,發現某寶的緩存還是蠻贊的。

  某寶的css刷新前后對比

  只有這數字的css每次F5之后都會加載一次,其他的css文件都是304,何為304?簡單地說就是啟用本地緩存機制,假如說這個css是公用的,

版權聲明:本文由 費莫芷波 整理編輯。

原標題:css常用樣式表,css外部樣式表

轉載注明出處:http://www.dn9ww09s.icu/basics/14110.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 抖音新人上熱門技巧,抖音6元1000粉絲

    抖音新人上熱門技巧,抖音6元1000粉絲 相關圖片抖音怎樣將同城改為關注最近,很多小伙伴都說自己在玩顫音,但是怎么拍也不能流行。那么,自助餐怎么受歡迎呢?現在,超人軟件編輯將為您介紹自助餐版iPhone的相關內容,希望您...

  • 鄉村小神醫全文免費閱讀,鄉村小神醫吳能免費版

    鄉村小神醫全文免費閱讀,鄉村小神醫吳能免費版 相關圖片下載手機閱讀《鄉村醫生》是作者繆武創作的一部奇幻小說。它講述了一個在山谷里的窮孩子的故事,他得到了長壽的神秘公式,并做了很多桃花下載:http://a.crxz鄉村小神醫林小天...

  • 小王子粘土,輕粘土小王子教程

    小王子粘土,輕粘土小王子教程 相關圖片超輕粘土小王子教程視頻你好,我是Erwa,騰訊tgidas的動畫師。我很榮幸能參加與小王子電影聯合推出的游戲版《小王子的愛情消除》的H5世界觀推廣活動。同時,我們還制作了另一個版...

  • 變形計里有個叫麗姐,關于麗姐的變形計

    變形計里有個叫麗姐,關于麗姐的變形計 相關圖片麗姐變形計主人公李潔是女主人公在農村的妹妹的外號。在社會的幫助下,李潔冷酷無情的形象引起了很多人的關注。接下來,超人軟件編輯為您帶來變形的吉利妹妹表情包大全,有需...

  • 網頁編程代碼,excel宏代碼編寫教程

    網頁編程代碼,excel宏代碼編寫教程 相關圖片編程入門基礎教程一。啟動Dreamweaver cs52。單擊左上角的“文件”“新建”。三。在“新建文檔”界面中選擇一個空白頁。四。選擇“HTML”作為“頁面類型”,選擇“無”HTML教程...

  • 是卡,視視

    是卡,視視 相關圖片酷視卡套餐能不能升級近日,不少網友表示看到有人買月亮。如果你想賺錢,你可以先把你的帳戶升級到月球,然后再賣掉它。那么,如何升級呢?接下來,超人軟件編輯將為您介紹大...

  • 手玩,手玩件

    手玩,手玩件 相關圖片單手玩的游戲你能說“喜歡”來賺錢不是很神奇嗎?事實上,你可以通過說“喜歡”來賺錢。你怎么能玩“喜歡”?現在,超人軟件編輯器將向您介紹如何使用“like”的教程。讓我們看...

  • 水晶葡萄怎么做,有水晶葡萄嗎

    水晶葡萄怎么做,有水晶葡萄嗎 相關圖片水晶葡萄簡介我的朋友小鬼在網上收集了一些水晶圖片,包括一組非常漂亮的水果。她正在學習用焰火制作圖片,所以她問我如何用FW制作這樣的圖片,所以她為她和我不需要多說的每個...

  • office2010綠色破解版,office2010激活工具

    office2010綠色破解版,office2010激活工具 相關圖片office2010激活教程Office是我們日常工作中最常用的辦公軟件。此版本是office的第12個版本,于2009年11月19日發布。Office2010有6個版本,除了免費版本,它免費下載辦公軟件...

  • 百葉窗特效,百葉窗照片特效

    百葉窗特效,百葉窗照片特效 相關圖片百葉窗光影特效怎么拍出來的Flash AS3是一種將圖片制作成百葉窗效果的簡單方法,適合初學者的教程。我希望你能練習!圖片百葉窗效果:制作過程:選擇任意圖片作為本動畫中的圖片...

熱評文章

  • 派派怎么用,派派有啥用

    派派怎么用,派派有啥用 相關圖片派派是做什么用的黃金失手是送寶游戲中的道具。只要你有足夠多的金幣,你就可以把它們換成獎品。那么如何利用派系的黃金魅力呢?派系的黃金魅力有什么用?接下來,超人軟件編...

  • 網頁排版,網頁排版模板

    網頁排版,網頁排版模板 相關圖片網頁排版設計軟件為了讓您了解CSS的作用,以及為什么要使用CSS而不是HTML表來進行web頁面布局,下面是一個向您解釋的示例。其中一個頁面用HTML格式化,另一個用CSS格式網頁顯示排版不...

  • win10精簡版怎么升級專業版,win10升級專業版要錢嗎

    win10精簡版怎么升級專業版,win10升級專業版要錢嗎 相關圖片win10家庭版添加gpedit在安裝win10的過程中,很多用戶選擇了個人版和旗艦版。但是,有些用戶需要安裝win10 professional版本。如果他們是win10系統,他們需要升級專dell家庭版升級專業版...

  • 吳亦凡,吳亦凡個人資料

    吳亦凡,吳亦凡個人資料 相關圖片吳亦凡在追娜扎創意總是一個命題作文。在項目的早期階段,團隊了解到:1。吳一凡簽署的全國攻勢將是一場立體完整的戰役,品牌團隊希望tgidas能通過在H5模塊中的精彩創意引爆話題...

  • win10 任務欄透明,win10任務欄不能透明

    win10 任務欄透明,win10任務欄不能透明 相關圖片win10任務欄親愛的win10用戶,您厭倦了傳統的桌面位置嗎?win10系統的任務欄如何啟動透明效果?現在,超人軟件編輯器將為您介紹win10任務欄的透明設置方法,并抓緊時間win10任務欄透明...

  • html鼠標懸停,html鼠標懸停顯示圖片

    html鼠標懸停,html鼠標懸停顯示圖片 相關圖片html鼠標懸停事件代碼如下:a href=?title=這里是顯示的文本hello/a將鼠標懸停在hello上時,這里將有文本顯示的文本。html鼠標懸停事件hover...

  • 領取高溫補貼條件,高溫補貼怎么發放

    領取高溫補貼條件,高溫補貼怎么發放 相關圖片高溫補貼發放時間炎炎烈日下,美甲官方發起了一項針對用戶和朋友的高溫補貼活動。用戶領取高溫補貼后可退出。我怎樣才能拿到指甲的高溫補貼?指甲高溫補貼怎么退?現在,超人...

  • 背景設定,kenshi背景設定

    背景設定,kenshi背景設定 相關圖片人物背景一。一般來說,flash動畫的背景色只能從216種網頁安全色中選擇。如果要使用網頁的安全色以外的顏色作為動畫的背景色,可以使用以下方法:1。在動畫中畫一個矩形(如何修...

  • 2019小咖秀怎么刪除作品,小咖秀2700部合集

    2019小咖秀怎么刪除作品,小咖秀2700部合集 相關圖片小咖秀怎么找以前作品小嘎秀是一款非常有趣的短片拍攝軟件。很多小朋友喜歡用它來拍攝搞笑視頻,但他們不知道如何刪除小嘎秀的作品。現在,超人軟件小編想介紹一下如何玩Andr...

  • win10邁克菲怎么關閉,邁克菲卸載后影響

    win10邁克菲怎么關閉,邁克菲卸載后影響 相關圖片window10怎么卸載邁克菲最近,許多小型合作伙伴報告說,他們的win10 McAfee無法卸載。那么什么不能卸載win10 McAfee?接下來,超人軟件編輯器將介紹如何卸載win10 邁克菲如何卸載干凈...

關注微信

变脸官网查询