適用於所有頁面的基礎樣式base.css

a1burning發表於2018-05-22
CSS

這玩意，俗稱base.css 幾乎所有的頁面，在搭建之前，都要用下面那個。BUT

/*還在用這個？過時了吧？*/
*{
  margin:0;
  padding:0;
}
複製程式碼

一網打盡並不是最全的，最好的。還是要講究需要什麼用什麼，小白知道怎麼用就行了，而對於追求更高層次的而言，不僅要知其然，還要知其所以然。 什麼文字域、什麼a連結的預設下劃線，通通都一邊呆著去。我把這個base.css準備好，有利於下面的介面的開發。 之前總結過一次 ，但是在我新建一個工程的時候，在有些情況下，我有時候又會忘了如何去配置。所以還是總結在這個裡面，使用起來更加的方便。 所以還是要先講原理後上程式碼的：

【目錄】

  • 塊元素 + 關於邊距問題 + 關於字型的問題 + 關於列表的原點問題 + （可選）滑鼠手勢 + （可選）寬高設定
  • 行內塊元素
  • 行內元素 + a標籤 + i標籤 + textarea標籤
  • 清除浮動類
  • 版心——主體內容可視區
  • 通用配置——（隨意搭配） + 浮動 + 定位 + 一些固定邊距 + 背景顏色
  • （可選）自定義表單設定 + 自定義單選框/核取方塊設定 + 自定義數值框設定
  • 配置完整版程式碼base.css

塊元素

關於邊距問題

<body>有8px的外邊距

<p>有16px的外邊距

<h1>~<h6>都有內外邊距，有預設字型加粗

<ul><ol><li>標籤就不用說了，前面還有間隙啊醜啊醜

所以要把這些塊元素的間隙都要清除 margin:0;padding:0;

關於字型的問題

  1. 瀏覽器的預設字型大小是16px，字型為宋體,而不同的瀏覽器的文字樣式是不一樣的。現在基本上大多數頁面的字型是14px，大多數為微軟雅黑這種扁平化又常見的字型。
  2. 況且IE6（雖然現在很少會相容IE6了）不認識奇數字號，所以為了便於顯示，基本也都用偶數字號。
  3. font-family: "Microsoft Yahei",sans-serif，tahoma; 這樣寫會依次載入三個字型。而且寫的時候要注意，中文字型一定要加引號，英文下可以不加引號，英文之間有空格的必須加引號。
  4. 為了避免檔案編碼（GB2312,UTF-8）等不匹配時產生亂碼的問題，XP系統不支援微軟雅黑的中文等原因。我們也推薦使用css的unicode編碼的字型。如： 宋體->\5B8B\4F53 微軟雅黑->\5FAE\8F6F\96C5\9ED1

關於列表的原點問題

這個也是一個頭疼的事，現在基本上都是用ul和li搭建，所以就提前把那些東西去掉。這些list-style-type、list-style-position、list-style-position都不要所以寫合寫： list-style:none;

關於表格邊框問題

之前一直避免運用表格是因為表格有很多自己特有屬性，導致css控制其樣式非常困難。但是最近我需要大量的使用表格，用ul和li去做就比較心累。聽說表格對於資料載入還是有其優勢，所以我就冒險使用了表格。哈哈~~ 不過後來發現，其實也很簡單。主要就是邊框的問題麼，所以就有了合併邊框： border-collpase:collpase; 然後設定單元格之間的距離為0之後就可以為所欲為了哈哈 border-spacing:0; 其餘的寬高什麼的，都可以直接用css控制了，也很方便。

（可選）滑鼠手勢

我在寫頁面的時候，發現我寫的文字自動變成了游標的形式，其實有的地方要有的地方不要，所以這裡做了可選，如果不要就在這裡配置，什麼時候需要用別的再覆蓋就可以。如果無所謂不設定也是可以的。 cursor: default;

（可選）寬高設定

有的時候如果要適配的話，要求html標籤和body標籤按照百分比計算。 有的時候需要rem佈局的時候，還要考慮font-size的值。這個根據不同的佈局進行配置。 html,body{ width: 100%; height: 100%; font-size: 100px!important; }

行內塊元素

行內塊元素有：

  • 內外邊距 margin: 0;padding: 0;
  • 有邊框 border: 0 none;
  • 有藍色輪廓線 outline-style: none;
  • 因為預設基線對齊有預設3px的距離。 vertical-align: bottom; ##行內元素 ###a標籤 a標籤有自己預設的樣式
  • a標籤的預設樣式是藍色的，且下面有一條下劃線。
  • a標籤在點選active和visited的狀態的時候也有下劃線。
    • text-decoration文字的修飾 none 表示無修飾 blink 閃爍（一般不用） underline 下劃線 line-through 貫穿線 overline 上劃線
    • color:#333;
  • a標籤移動上去的時候會變顏色 a:hover{ color:#333; }

i標籤

i標籤是有語義的標籤，是斜體，但是現在基本用來載入小圖示。所以裡面if要用到小的文字的時候就要去掉字型風格： 防止字型傾斜 normal italic oblique 後面兩個是斜體，但是第三個基本上不使用，兩者在web中都是一樣的，但是在設計中是不一樣的 font-style: normal;

textarea標籤

表單預設都有很多的樣式：

  • 邊框 border:none;
  • 輪廓線 outline: none;
  • 文字域可拖拽 resize: none;

清除浮動類

浮動常用，清除浮動也就常用，封裝成一個類，直接加類會更加方便 .clearfix

版心——主要內容可視區

版心根據設計稿的不同設計，加上瀏覽器不同的解析度，一般這個可以保證內容水平居中在頁面上。注意的是一定要指定其寬度 .w

通用配置

我們其實有的時候需要一些通用配置，什麼是通用配置，就是經常用的一些css屬性，有的時候為了結構看上去很明確，就單獨一個成類。可以設定的屬性就可以跟隨自己的實際情況來定，到時候只要加到標籤的類裡面就可以了。 可以舉一個栗子： <div class=".nav .p_r"> ——<div class=".nav-in .p_a .clearfix"> ———<i class=".f_l"></i><span class=".f_r"></span> ——</div> </div> 上面的程式碼，nav是父盒子相對定位，nav-in是子盒子絕對定位（top和left就在類裡面定位就可以了），裡面的元素一個左浮動一個右浮動，外面的盒子再清除一下浮動。這樣看上去，是不是結構清晰明瞭。：）

浮動

.f_l{float:left;} .f_r{float:right;}

定位

p_a{position:absolute;} p_r{position:relative;}

一些固定邊距

m_b10{margin_bottom:10px;} p_l10{padding_left:10px;}

背景顏色

bgc-blue{background-color:#137ac6;}

(可選)自定義表單設定

自定義單選框/核取方塊設定

這個可以自己選擇單選框和核取方塊的設定，因為有的時候，一套頁面風格比較同意，單選框不會隨意變。 注意這裡只針對input+label的方式去自定義——這個詳見css中的自定義表單的文章

自定義數值框設定

因為input的type=number的數值框中的上下按鈕，會有預設的樣式，所以最好的辦法就是隱藏，然後自己用div自己做一個上下按鈕。 這個也在css中的自定義表單的文章會詳細闡述。

下面來個完整版的base.css

body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{
    /* 預設有邊距，都要清除 */
    margin: 0;
    padding: 0;
    /*字型設定*/
    font-size: 14px;
    font-family: "Microsoft Yahei",sans-serif;
    color: #ccc;
    /* 去掉列表的原點 */
    list-style: none;
    /* 預設滑鼠 */
    cursor: default;
}

/*可選*/
html,body{
    width: 100%;
    height: 100%;
    font-size: 100px!important;
}

/*行內塊元素*/
input,img{
    margin: 0;
    padding: 0;
    border: 0 none;
    outline-style: none;
    vertical-align: bottom; 
}

/*行內元素*/
a,a:active,a:visited{
    /*下劃線和顏色*/
    text-decoration: none;
    color: #ccc;
}

a:hover{
    color:#333;
}

textarea{
    /* 邊框清零 */
    border:none;
    /* 輪廓線清零 */
    outline: none;
    /* 防止文字域被隨意拖拽 */
    resize: none;
}

i{
    /*文字樣式*/
    font-style: normal; 
}

table{
    /*邊框合併*/
    border-collapse:collapse;
    border-spacing:0;
}


/* 使用偽元素清除浮動 */
.clearfix::before,
.clearfix::after{
    content:"";
    height: 0;
    line-height: 0;
    display: block;
    visibility: none;
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* 版心*/
.w{
    width: 1883px;
    margin: 0 auto;
}

/*可選*/
/*單選框和核取方塊的配置，一般是分開的*/
input[type="radio"],input[type="checkbox"]{
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none;
}

label{
    display: inline-block;
    cursor: pointer;
}

label input[type="radio"]+span,label input[type="checkbox"]+span{
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url("../images/nocheck.png") no-repeat;
}

label input[type="radio"]:checked+span,label input[type="checkbox"]:checked+span{
    background: url("../images/check.png") no-repeat;
}

label input[type="radio"]:checked~i,label input[type="checkbox"]:checked~i{
    color: #38d6ff;
}

/*可選*/
/* 自定義數字框配置 */
input[type="number"]{
    width: 76px;
    height: 36px;
    background-color: rgba(5,45,82,0.4);
    border: 2px solid #ccc;
    border-radius: 4px;
    color: #fff;
    font-size: 20px;
    padding: 0 10px;
}

input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
}

input[type="number"]+div{
    width: 30px;
    height: 40px;
    padding-left: 2px;
    cursor: pointer;
}

input[type="number"]+div > .count_add{
    display: block;
    width: 28px;
    height: 19px;
    background: url("../images/count_add.png") no-repeat;
    background-size: contain;
    margin-bottom: 2px;
}

input[type="number"]+div > .count_subtract{
    display: block;
    width: 28px;
    height: 19px;
    background: url("../images/count_subtract.png") no-repeat;
    background-size: contain;
}
複製程式碼

這樣，在頁面中直接引入base.css就可以啦。 是不是很方便？

@burning_韻七七

@version1.0 ——2018.01.17——建立文章【適用於所有頁面的基礎樣式base.css】

@version1.1 ——2018.05.22——修改文章a的active和visited狀態的下劃線樣式處理

相關文章