您現在的位置是:電腦技術吧?>? 組裝維修 ??>??reset,reset是什么??>??正文詳情

reset,reset是什么

桐宛白2019-11-17 04:50:36 人圍觀
簡介trip reset什么意思在當今的Web設計/開發實踐中,使用CSS向語義(x)HTML標記添加樣式樣式是一個重要的關鍵。在設計師的夢想中,有一個完美的世界:所有瀏覽器都可以理解和應用多電腦

在當今網頁設計/開發實踐中,使用CSS來為語義化的(X)HTML標記添加樣式風格是重要的關鍵。

在設計師們的夢想中都存在著這樣的一個完美世界:所有的瀏覽器都能夠理解和適用多有CSS規則,并且呈現相同的視覺效果(沒有兼容性問題)。

但是,我們并沒有生活在這個完美的世界,現實中發生的失竊卻總是恰恰相反,很多CSS樣式在不同的瀏覽器中有著不同的解釋和呈現。

  當今流行的瀏覽器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS規范,這就會導致有的瀏覽器對CSS的解釋與設計師的CSS定義初衷相沖突,使得網頁的樣子在某些瀏覽器下能正確按照設計師的想法顯示,但有些瀏覽器卻并沒有按照設計師想要的樣子顯示出來,這就導致瀏覽器的兼容性問題。

更糟的是,有的瀏覽器完全無視CSS的一些聲明和屬性。

  正因為上述沖突和問題依然存在于這個不完美的世界,所以一些設計師想到了一種避免瀏覽器兼容性問題的方法,那就是CSS Reset,什么是CSS Reset?

我們可以把它叫做CSS重設,也有人叫做CSS復位、默認CSS、CSS重置等。

CSS重設就是由于各種瀏覽器解釋CSS樣式的初始值有所不同,導致設計師在沒有定義某個CSS屬性時,不同的瀏覽器會按照自己的默認值來為沒有定義的樣式賦值,所以我們要先定義好一些CSS樣式,來讓所有瀏覽器都按照同樣的規則解釋CSS,這樣就能避免發生這種問題。

一.最簡化的CSS Reset(重設) :CSS Code復制內容到剪貼板

    *{ padding:0; margin:0; }
  這是最普遍最簡單的CSS重設,將所有元素的padding和margin值都設為0,可以避免一些瀏覽器在理解這兩個屬性默認值上的分歧。

CSS Code復制內容到剪貼板

    *{ padding:0; margin:0; border:0; }
  這是在上一個重設的基礎上添加了對border屬性的重設,初始值為0的確能避免一些問題。

CSS Code復制內容到剪貼板

    *{ outline:0; padding:0; margin:0; border:0; }
  在前兩個的基礎上添加了outline屬性的重設,防止一些沖突。

二.濃縮實用型CSS Reset(重設):CSS Code復制內容到剪貼板

    *{ vertical-align:baselinebaseline; font-weight:inherit; font-family:inherit; font-style:inherit; font-size:100%; outline:0; padding:0; margin:0; border:0; }
  該CSS重設方法出自Perishable Press,這是他常用的方法。

三.Poor Man 的CSS Reset:CSS Code復制內容到剪貼板

    html,body{ padding:0; margin:0; } html{ font-size:1em; } body{ font-size:100%; } aimg,:linkimg,:visitedimg{ border:0px; }
  這個重設方法將html和body下元素的padding和margin都設為0,并分別為html標簽和body標簽下的所有元素設置了初始的字體大小,最重要的是把有鏈接的圖片的默認邊框去掉了。

四.Siolons Global ResetCSS Code復制內容到剪貼板

    *{ vertical-align:baselinebaseline; font-family:inherit; fo nt-style:inherit; font-size:100%; border:none; padding:0; margin:0; } body{ padding:5px; } h1,h2,h3,h4,h5,h6,p,pre,blockquote,form,ul,ol,dl{ margin:20px0; } li,dd,blockquote{ margin-left:40px; } table{ border-collapse:collapse; border-spacing:0; }
五.Shaun Inmans Global ResetCSS Code復制內容到剪貼板
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,th,td,embed,object{ padding:0; margin:0; } table{ border-collapse:collapse; border-spacing:0; } fieldset,img,abbr{ border:0; } address,caption,cite,code,dfn,em, h1,h2,h3,h4,h5,h6,strong,th,var{ font-weight:normal; font-style:normal; } ul{ list-style:none; } caption,th{ text-align:left; } h1,h2,h3,h4,h5,h6{ font-size:1.0em; } q:before,q:after{ content:; } a,ins{ text-decoration:none; }
六.Yahoo(YUI) CSS Reset:CSS Code復制內容到剪貼板
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td{ padding:0; margin:0; } table{ border-collapse:collapse; border-spacing:0; } fieldset,img{ border:0; } address,caption,cite,code,dfn,em,strong,th,var{ font-weight:normal; font-style:normal; } ol,ul{ list-style:none; } caption,th{ text-align:left; } h1,h2,h3,h4,h5,h6{ font-weight:normal; font-size:100%; } q:before,q:after{ content:; } abbr,acronym{ border:0; }
七.Eric Meyers CSS ResetCSS Code復制內容到剪貼板
    html,body,div,span,applet,object,iframe,table,caption, tbody,tfoot,thead,tr,th,td,del,dfn,em,font,img,ins, kbd,q,s,samp,small,strike,strong,sub,sup,tt,var, h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr, acronym,address,big,cite,code,dl,dt,dd,ol,ul,li, fieldset,form,label,legend{ vertical-align:baselinebaseline; font-family:inherit; font-weight:inherit; font-style:inherit; font-size:100%; outline:0; padding:0; margin:0; border:0; } :focus{ outline:0; } body{ background:white; line-height:1; color:black; } ol,ul{ list-style:none; } table{ border-collapse:separate; border-spacing:0; } caption,th,td{ font-weight:normal; text-align:left; } blockquote:before,blockquote:after,q:before,q:after{ content:; } blockquote,q{ quotes:; }
八.Condensed Meyer Reset:CSS Code復制內容到剪貼板
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre,form,fieldset,input,textarea,p,blockquote,th,td{ padding:0; margin:0; } fieldset,img{ border:0; } table{ border-collapse:collapse; border-spacing:0; } ol,ul{ list-style:none; } address,caption,cite,code,dfn,em,strong,th,var{ font-weight:normal; font-style:normal; } caption,th{ text-align:left; } h1,h2,h3,h4,h5,h6{ font-weight:normal; font-size:100%; } q:before,q:after{ content:; } abbr,acronym{ border:0; }
九.Ateneu Popular CSS ResetCSS Code復制內容到剪貼板
    html,body,div,span,applet,object,iframe,h1,h2,h3, h4,h5,h6,p,blockquote,pre,a,abbr,acronym, address,big,cite,code,del,dfn,em,font,img,ins, kbd,q,s,samp,small,strike,strong,sub,sup,tt, var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baselinebaseline; } :focus{ outline:0; } a,a:link,a:visited,a:hover,a:active{ text-decoration:none } table{ border-collapse:separate; border-spacing:0; } th,td{ text-align:left; font-weight:normal; } img,iframe{ border:none; text-decoration:none; } ol,ul{ list-style:none; } input,textarea,select,button{ font-size:100%; font-family:inherit; } select{ margin:inherit; } hr{ margin:0; padding:0; border:0; color:#000; background-color:#000; height:1px }
十.Chris Poteets Reset CSSCSS Code復制內容到剪貼板
    *{ vertical-align:baselinebaseline; font-family:inherit; font-style:inherit; font-size:100%; border:none; padding:0; margin:0; } body{ padding:5px; } h1,h2,h3,h4,h5,h6,p,pre,blockquote,form,ul,ol,dl{ margin:20px0; } li,dd,blockquote{ margin-left:40px; } table{ border-collapse:collapse; border-spacing:0; }
十一.Tantek Celik Reset CSSCSS Code復制內容到剪貼板
    :link,:visited{text-decoration:none} ul,ol{list-style:none} h1,h2,h3,h4,h5,h6,pre,code{font-size:1em;} ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin:0;padding:0} aimg,:linkimg,:visitedimg{border:none} address{font-style:normal}
十二.Christian Montoya Reset CSSCSS Code復制內容到剪貼板
    html,body,form,fieldset{ margin:0; padding:0; font:100%/120%Verdana,Arial,Helvetica,sans-serif; } h1,h2,h3,h4,h5,h6,p,pre, blockquote,ul,ol,dl,address{ margin:1em0; padding:0; } li,dd,blockquote{ margin-left:1em; } formlabel{ cursor:pointer; } fieldset{ border:none; } input,select,textarea{ font-size:100%; font-family:inherit; }
十三.Rudeworks Reset CSSCSS Code復制內容到剪貼板
    *{ margin:0; padding:0; border:none; } html{ font:62.5%LucidaGrande,Lucida,Verdana,sans-serif; text-shadow:#0000px0px0px; } ul{ list-style:none; list-style-type:none; } h1,h2,h3,h4,h5,h6,p,pre, blockquote,ul,ol,dl,address{ font-weight:normal; margin:001em0; } cite,em,dfn{ font-style:italic; } sup{ position:relative; bottombottom:0.3em; vertical-align:baselinebaseline; } sub{ position:relative; bottombottom:-0.2em; vertical-align:baselinebaseline; } li,dd,blockquote{ margin-left:1em; } code,kbd,samp,pre,tt,var,input[type='text'],textarea{ font-size:100%; font-family:monaco,LucidaConsole,courier,mono-space; } del{ text-decoration:line-through; } ins,dfn{ border-bottom:1pxsolid#ccc; } small,sup,sub{ font-size:85%; } abbr,acronym{ text-transform:uppercase; font-size:85%; letter-spacing:.1em; border-bottom-style:dotted; border-bottom-width:1px; } aabbr,aacronym{ border:none; } sup{ vertical-align:super; } sub{ vertical-align:sub; } h1{ font-size:2em; } h2{ font-size:1.8em; } h3{ font-size:1.6em; } h4{ font-size:1.4em; } h5{ font-size:1.2em; } h6{ font-size:1em; } a,a:link,a:visited,a:hover,a:active{ outline:0; text-decoration:none; } aimg{ border:none; text-decoration:none; } img{ border:none; text-decoration:none; } label,button{ cursor:pointer; } input:focus,select:focus,textarea:focus{ background-color:#FFF; } fieldset{ border:none; } .clear{ clear:both; } .float-left{ float:left; } .float-rightright{ float:rightright; } body{ text-align:center; } #wrapper{ margin:0auto; text-align:left; }
十四. Anieto2K Reset CSSCSS Code復制內容到剪貼板
    html,body,div,span,applet,object,iframe, h1,h2,h3,h4,h5,h6,p, blockquote,pre,a,abbr,acronym,address,big, cite,code,del,dfn,em,font,img, ins,kbd,q,s,samp,small,strike, strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td, center,u,b,i{ margin:0; padding:0; border:0; outline:0; font-weight:normal; font-style:normal; font-size:100%; font-family:inherit; vertical-align:baselinebaseline } body{ line-height:1 } :focus{ outline:0 } ol,ul{ list-style:none } table{ border-collapse:collapse; border-spacing:0 } blockquote:before,blockquote:after,q:before,q:after{ content: } blockquote,q{ quotes: } input,textarea{ margin:0; padding:0 } hr{ margin:0; padding:0; border:0; color:#000; background-color:#000; height:1px }
十五.CSSLab CSS ResetCSS Code復制內容到剪貼板
    html,body,div,span,applet,object,iframe,h1,h2,h3, h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address, big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li, fieldset,form,label,legend,table,caption,tbody,tfoot, thead,tr,th,td{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baselinebaseline; } :focus{ outline:0; } table{ border-collapse:separate; border-spacing:0; } caption,th,td{ text-align:left; font-weight:normal; } aimg,iframe{ border:none; } ol,ul{ list-style:none; } input,textarea,select,button{ font-size:100%; font-family:inherit; } select{ margin:inherit; } /*FixesincorrectplacementofnumbersinolsinIE6/7*/ ol{margin-left:2em;} /*==clearfix==*/ .clearfix:after{ content:.; display:block; height:0; clear:both; visibility:hidden; } .clearfix{display:inline-block;} *html.clearfix{height:1%;} .clearfix{display:block;}
  好了,CSS重設目前先總結到這里,這15套重設方法其實都是有共同點的,也許有的實現方法不同,但大部分都是同一個目的,就是為了讓更多的瀏覽器能顯示同樣的效果。

有了這些CSS重設作為資料和參考,也許會對你的工作有所幫助甚至提高效率,但是,畢竟這些重設都是別人寫的,你完全也可以為自己量身定制一套CSS重設。

版權聲明:本文由 桐宛白 整理編輯。

原標題:reset什么意思呢,factory reset

轉載注明出處:http://www.dn9ww09s.icu/assemble/13058.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • wps公式編輯器無法使用,wps重新安裝公式編輯器

    wps公式編輯器無法使用,wps重新安裝公式編輯器 相關圖片wps公式編輯如何改變字體在使用WPS進行編輯時,有時需要插入公式,但此時,我們發現公式的選項將變為灰色并且不可用。怎么了?WPS公式編輯器不能做什么?下面的小編輯為您帶來W...

  • 圖像網格轉換,醫學圖像與網格

    圖像網格轉換,醫學圖像與網格 相關圖片怎樣關閉ps打開圖像上的網格網格化圖像效果在設計中也很常見,如圖4-127所示。此效果適合作為網頁或列的背景圖像。具體制作方法如下:圖4-127網格圖像效果1。打開焰火中的材質圖像...

  • win7無法關機修復工具,win7一直顯示正在關機

    win7無法關機修復工具,win7一直顯示正在關機 相關圖片w7系統不能關機怎么辦最近,很多win7的用戶和朋友都報告說,當他們想關機時,點擊關機按鈕總是無法反映。那么如果win7不能關閉呢?現在,超人軟件編輯器告訴你,如果win7點擊關閉,...

  • win7的臨時文件在哪,win7大量臨時文件

    win7的臨時文件在哪,win7大量臨時文件 相關圖片windows系統臨時文件最近,很多小伙伴說,他們用系統維護軟件檢查電腦,發現了很多臨時文件。我可以刪除win7的臨時文件嗎?win7的臨時文件夾的路徑在哪里?我不需要說太多。接下來...

  • 寫給大家看的設計書,寫給設計師的話

    寫給大家看的設計書,寫給設計師的話 相關圖片對設計師的祝福迪夫生來就有欺負人的基因(如果你不明白,請先看最后一篇文章)。事實上,這主要是因為你還沒有遇到能征服它的人!哈哈,今天帶大家去把他干掉,好吧,我承認...

  • 自刪除exe,exe怎么刪除

    自刪除exe,exe怎么刪除 相關圖片誤刪exe最近,很多小伙伴說,打開任務管理器后,他們發現一個名為xlueops.exe的程序正在運行。那么什么是xlueops.exe?可以刪除xlueops.exe嗎?注冊表exe不小心刪除...

  • 什么是阿爾法狗,為什么叫阿爾法狗

    什么是阿爾法狗,為什么叫阿爾法狗 相關圖片阿爾法狗宣布退役第二屆阿里巴巴UCAN用戶體驗論壇的演講即將開始。本次會議的嘉賓是同濟大學設計與創意學院院長盧永琪。未來的設計將如何發展,設計的本質是什么?這次演講一定...

  • 為什么右鍵新建沒有word,右鍵新建word

    為什么右鍵新建沒有word,右鍵新建word 相關圖片右鍵新建沒有wps一些用戶安裝Office后,發現鼠標右鍵沒有新的word選項,在使用過程中非常不方便。如果右鍵單擊創建一個新單詞怎么辦?如何右鍵單擊以添加單詞?Word2007電腦無法新建...

  • 環境音效,環境音效選什么

    環境音效,環境音效選什么 相關圖片腳步聲音效本周末,我將介紹三個可以模擬環境聲音效果的在線網站(咖啡廳、雨天、海邊、叢林等),它們不僅可以幫助你集中精力工作,還可以幫助你放松和減壓,這是非常實際的...

  • 新版高德地圖的組隊在哪里,高德地圖組隊查老公

    新版高德地圖的組隊在哪里,高德地圖組隊查老公 相關圖片高德地圖組隊能通話嗎最近,goldmap推出了團隊建設功能。很多用戶說他們不明白goldmap team building的用途是什么?如何使用goldmap團隊建設?然后,超人軟高德地圖如何使用組隊成員...

熱評文章

  • steam無充值加好友,steam怎么設置拒絕加好友

    steam無充值加好友,steam怎么設置拒絕加好友 相關圖片steam0級加好友如果在steam平臺上下載安裝游戲,當一些游戲需要邀請好友參與時,可以直接粉碎steam搜索好友,與好友一起體驗游戲的樂趣。但有些用戶仍然不知道如何在steam網頁版stea...

  • win10臨時文件能刪嗎,c盤臨時文件可以清理嗎

    win10臨時文件能刪嗎,c盤臨時文件可以清理嗎 相關圖片windows臨時安裝文件可以刪除嗎在Windows系統中,臨時文件的積累是導致系統運行緩慢的一個非常重要的原因。我可以刪除臨時Windows文件嗎?臨時windows文件夾在哪里?讓我們用超人軟win...

  • ppt保存格式,excel保存格式

    ppt保存格式,excel保存格式 相關圖片excel保存后格式消失文本區域的格式在保存時可以保存到數據庫中,但在顯示時,由于/N和不能相互旋轉,頁面不能按開頭的格式顯示,因此在顯示頁面時,應該在值外嵌套一層標簽,即...

  • 電腦用格式工廠怎么剪輯視頻,格式工廠截取片段

    電腦用格式工廠怎么剪輯視頻,格式工廠截取片段 相關圖片格式工廠無法再次截取作為互聯網上最強大的免費視頻編輯工具,format factory被認為有很多剛使用過這個軟件的新手朋友。他們不知道如何從format factory截取視頻以格式工廠如何剪掉不要...

  • icon圖標,iconfont圖標

    icon圖標,iconfont圖標 相關圖片icon設計現在越來越多的移動應用和web應用開始重視動態效果的設計,它能給用戶帶來愉悅的交互體驗,是應用美觀的重要組成部分。(`)圖標,即圖標。在交互過程中,各種圖標的應圖...

  • wps行距怎么調小,wps里行距怎么調整

    wps行距怎么調小,wps里行距怎么調整 相關圖片wps表格上下間距怎么調在使用WPS時,在輸入文檔內容的同時,我們還將設置文本的間距和行距,這將使文檔更加美觀,滿足我們的要求。但是,如果使用較少的WPS,則可以設置行距wps冒...

  • 炫酷播放器,炫酷的播放器是怎樣弄的

    炫酷播放器,炫酷的播放器是怎樣弄的 相關圖片AcG播放器上圖是音頻播放器的用戶界面,其中還隱藏了歌曲的播放列表。整個播放器的界面除了大背景的人像圖和歌曲的星譜外,都是用CSS和字體來繪制的。看來唯一的困難就是CD和C電...

  • 三星手機突然網速很慢,三星s8上網速度慢

    三星手機突然網速很慢,三星s8上網速度慢 相關圖片手機網絡太慢了我相信對于三星手機用戶來說,最麻煩的是上網速度慢。三星上網速度慢怎么辦?三星上網速度慢怎么辦?讓我們用超人軟件來了解一下,三星的網速慢怎么辦?一。移...

  • css水平垂直居中,css中圖片垂直居中

    css水平垂直居中,css中圖片垂直居中 相關圖片css垂直對齊今天,我想和大家分享純CSS實現的垂直時間線效果。垂直時間線適用于具有類似任務調度的頁面。實現采用藍色作為主題色,界面效果良好。讓我們看看呈現:實現代碼HTML...

  • word怎么讓頁碼從某一頁開始,word不顯示頁碼怎么辦

    word怎么讓頁碼從某一頁開始,word不顯示頁碼怎么辦 相關圖片wps怎么從第三頁開始設置頁碼當使用WPS輸入文檔時,我們有時會在文檔中添加頁碼,以便標準化和便于查看。但是,如果您的文檔包含封面和目錄,則封面和目錄的前兩頁應從頁碼中刪...

關注微信

变脸官网查询