在PC Web開發(fā)中,為了方便重復使用,提高代碼復用率和減少冗余代碼,我們通常會將一些公用的樣式定義在CSS樣式表中,對于樣式表中的CSS代碼,我們稱之為CSS樣式庫,這在Web開發(fā)中是非常重要的一部分。
為了讓項目中的開發(fā)變得更加便捷,我們通常會在初始定義中加入Reset CSS,即重新定義頁面元素的默認樣式,通常為以下代碼:
html,body,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,textarea,select,button{margin:0;padding:0}
除了Reset CSS以外,我們還可以定義一些公用的CSS樣式,例如按鈕hover樣式、表格顏色、背景色等,用于整個項目中所有相應元素的樣式。
button:hover{ background-color: #fff; color: #333; } table{ border-collapse: collapse; width: 100%; border: 1px solid #ddd; } table td{ border: 1px solid #ddd; padding: 10px; } .bg-color{ background-color: #f5f5f5; }
以上樣式可以作為一個公用的CSS樣式庫,方便在項目中重復使用,避免重復定義樣式,減少代碼冗余。
實際開發(fā)中,我們通常會將以上代碼存放在一個公共的CSS文件中,并在需要使用樣式的頁面中引入該文件。
<link href="css/common.css" rel="stylesheet">
這樣,我們就可以方便地在項目中使用這些公用樣式了。當我們需要修改公用樣式時,只需要修改公用CSS文件即可,其它引用該CSS文件的頁面會自動應用更新后的樣式。