當我們開始開發一個網站時,在處理頁面的基礎樣式方面,相信大家都有自己的方法和技巧。如果你使用的是HTML5作為網站的開發語言,那么你有一種非常有效的方式可以幫助你擁有自己的樣式而不必擔心瀏覽器默認樣式:清除基本樣式。
html { box-sizing: border-box; font-size: 62.5%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; } body { font-size: 1.6rem; line-height: 2; font-family: Arial, Helvetica, sans-serif; background-color: #f0f0f0; color: #333; } h1, h2, h3, h4, h5, h6 { font-weight: bold; line-height: 1.2; margin-bottom: 1rem; } p { margin-bottom: 1rem; } a { color: #07c; }
這段代碼將清除標準的HTML和CSS樣式,并使用自定義的基本樣式。在 body 中我們指定了頁面的背景顏色、文字顏色、行高和字體大小。除此之外,我們還指定了標題的字體、加粗和行高,并為段落設置了一個底部的邊距。
上面的 pre 標簽包裹的塊級代碼提供了更好的可讀性,讓你可以清晰地閱讀和編輯你的 HTML5 樣式表,這也是一個非常有用的技巧。