CSS初始化程式碼-css教學-PHP中文網

CSS初始化程式碼

巴扎黑

發布： 2017-04-05 11:26:56

原創

1695 人瀏覽過

為什麼要初始化CSS？

CSS初始化是指重設瀏覽器的樣式。不同的瀏覽器預設的樣式可能不盡相同，所以開發時的第一件事可能就是如何把它們統一。如果沒有對CSS初始化往往會出現瀏覽器之間的頁面差異。每次新開發網站或新網頁時候透過初始化CSS樣式的屬性，為我們將用到的CSS或html標籤更加方便準確，使得我們開發網頁內容時更加方便簡潔，同時減少CSS代碼量，節約網頁下載時間。

CSS 初始化範例程式碼

/* CSS 重設www.admin10000.com */
body,p,dl,dt,dd,ul,ol, li ,h1,h2,h3,h4,h5,h6,前,代碼,表單,字段集,圖例,輸入,按鈕,文字區域,p,區塊引用,th,td { 邊距:0;# 填入:0 ;##}##主題
{背景：## fff; 顏色:#555;# 字型大小:14px; 字型系列: Verdana、Arial、Helvetica、sans-serif; }#td，th，標題
{字體大小:14px; }#h1、h2、h3、h4 、h5 , h6
{ 字體粗細:##正常##; 字型大小:100%; #}#位址、標題、引用、程式碼、 dfn、em、strong、th、var {
字型樣式:正常; 字型粗細:正常;#}#a {
## 顏色:#555; 文字裝飾##:none; }#a:hover { 文字裝飾
:下劃線; #}#img { 邊框
:無; #}ol ,ul,li { 列表樣式
:#無; #}##輸入、文字區域、選擇、按鈕{
#14px Verdana、Helvetica、 Arial、無襯線字體; }#table { border-collapse:collapse##;##}html
{overflow-y: scroll ;} /*
css common */ .clearfix:after
{content: "."##; display: block; height:0; clear:both;# visibility: hidden#;}.clearfix
{ *zoom##:##1 ; } 上面是admin10000.com使用的CSS重置程式碼，這段程式碼是我比較喜歡用的一種方式，雖然還不夠完美但是常用的幾乎已經都包含了。各主流瀏覽器下的預設css樣式

# 下面順便給出admin10000.com 的html模板，

用於每次新開發頁面使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
　　<title>网站标题 - Admin10000.com </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="zh-CN" />
	<meta name="Author" content="网页作者" /> 
	<meta name="Copyright" content="网站版权" /> 
	<meta name="keywords" content="网站关键字" />
	<meta name="description" content="网站描述" />
	<link rel="Shortcut Icon" href="网站.ico图标路径" />
	<link type="text/css" rel="stylesheet" href="CSS文件路径" />
	<script type="text/javascript" src="JS文件路径"></script>
</head>
<body>
</body>
</html>

登入後複製

以上是CSS初始化程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！