• [織夢吧]唯一域名:www.1kkarat.com,織夢DedeCMS學習平臺.

    當前位置: > 網頁制作 > DIV&CSS >

    為今后的項目制作空白CSS模板文件

    來源: www.1kkarat.com 編輯:織夢吧 時間:2018-09-19點擊:


    如果你曾經收藏過許多關于CSS的最佳實踐但還沒開始利用它們,那么這篇文章將幫助你制作一個很好且很有組織的CSS文件來應用于一些CSS最佳實踐。在 這里我將為為我的下一個項目制作一個基本的CSS模板文件。使用標準的重設(Reset)方法,定義一些基本的方便的類,命名一些常見的頁面區域等…

    在開始之前,創建一個新建文件夾并將它命名為”styles”(您也可以命名自己喜歡的名字),然后在該文件夾下創建兩個文件分別命名為“reset.css” 和 “style.css”,F在你的文件夾結構不出意外的話應該是這樣的:

    –root
    |
    styles
    – reset.css
    – style.css
    |

    1-單獨使用一個全局CSS重設方法

    我以Eric Meyer的重設為基礎。只是去掉了其中的“ins”, “del”和 “table”,因為我實在是很少使用它們,因為某些原因又重新定義了“strong”“em”,我知道您也許會有自己的方式,所以您也可以自由為自己的文件定義。寫完CSS重設后,將其存儲為”reset.css”。

    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, b, u, i, center, 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-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after, q:before, q:after {
    content: ”;
    content: none;
    }
    :focus {
    outline: 0;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    caption, th, td {
    text-align: left;
    font-weight: normal;
    }
    strong {
    font-weight: bold;
    }
    em {
    font-style: italic;
    }

    在這個重設文件里我去掉了“body”樣式,因為通常我們在不同的項目中都會定義不同的”body”樣式,所以我們將它放在style.css文件中。

    2-在頂部為樣式表添加描述注釋

    現在我們打開style.css來開始寫一些基本的樣式。在創建一個新樣式文件(style.css)后,第一件事應該是在文件頂部寫一些結構性的 注釋,用來描述一些樣式的細節,比如版本、作者、作者的詳細聯系方式等,這將幫助你和其他前端開發人員使用該文件。描述細節應當包括像作者姓名、版本和提 供更多信息的URL地址。我比較喜歡,因為它比較廣泛。

    /*
    主題名稱: 玫瑰主題
    URI: the-theme’s-homepage
    描述: a-brief-description
    作者: 您的姓名
    作者 URI: 您的-URI
    模板: 在這里可以提示它的父級模板
    版本: 版本號
    彬Go-集前端開發/網頁設計/網站可用性/用戶體驗于一體的趣味互聯網生活
    網址:http://blog.bingo929.com/
    */

    3-定義便于搜索的目錄表

    現在,我們來一起定義我們樣式的目錄表。定義TOC能幫助其他人甚至自己更容易與閱讀和理解代碼。也許您會覺得這個沒什么必要,但請相信我!

    首先讓我們看看它應當是什么樣子的:

    [目錄表]
    0- Reset
    1- Global
    2- Links
    3- Headings
    4- Header
    5- Navigation
    6- Middle
    7- Forms
    8- Extras
    9- Footer

    正如您看到的,我們將目錄表從0到9分成10部分。

    • TOC非常簡單以至于它不會花費您超過1分鐘的時間。
    • 您不用為每個項目定義不同的TOC。
    • 命名的使用非常普遍,所以可以適合模本的任何部分。
    • 不使用動態的#ID和.class。
    • 它并不大所以不會占用很多Kbytes。
    • 順序的數字很有用,用途請往下看。

    4-使用注釋將每個部分隔開并使用一個=標記

    請看一下樣式,在0部分我將之前的重設樣式表reset.css導入。

    /* =0 Reset
    –––––––––––––––––––––––––––––––––––––––––––––––––––*/
    @import url(’reset.css’);
    /* =1 Global

    –––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =2 Links
    –––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =3 Headings
    –––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =4 Header
    –––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =5 Navigation
    –––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =6 Middle
    –––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =7 Form
    –––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =8 Extra
    –––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =9 Footer
    –––––––––––––––––––––––––––––––––––––––––––––––––––*/

    在每個部分的分區注釋中使用=標記,可以幫助您和您的團隊其他成員快速找到需要的代碼。大家都知道,在CSS樣式中的聲明幾乎是不會使用等號的,所 以我們可以使用等號來幫助搜索。比如你想尋找表單的相關樣式代碼,可以先查看目錄表中表單對應的數字,然后搜索”=7″便可以快速跳轉到表單的相關代碼區 域。

    5-定義最常用的類

    其實有一些類是我們要經常使用的,那我們為什么不一次性把它們都定義好呢?現在正是時候!我添加了一些個人比較喜歡的,當然您也可以按照自己的喜好進行增刪改。將它們定義在“=1 Global”下。
    我還把body選擇器定義在了Global中。
    注:一下定義類僅僅是比較簡單的一些。

    /* =1 Global
    –––––––––––––––––––––––––––––––––––––––––––––––––––*/
    body {
    line-height: 1;
    font: normal 12px Arial, Helvetica, sans-serif;
    vertical-align: top;
    background: #fff;
    color: #000;
    }
    .right {
    float: right;
    }
    .left {
    float: left;
    }
    .align-left {
    text-align: left;
    }
    .align-right {
    text-align: right;
    }
    .align-center {
    text-align:center;
    }
    .justify {
    text-align:justify;
    }
    .hide {
    display: none;
    }
    .clear {
    clear: both;
    }
    .bold {
    font-weight:bold;
    }
    .italic {
    font-style:italic;
    }
    .underline {
    border-bottom:1px solid;
    }
    .highlight {
    background:#ffc;
    }
    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    img.alignleft {
    float:left;
    margin:4px 10px 4px 0;
    }
    img.alignright {
    float:right;
    margin:4px 0 4px 10px;
    }
    .clearfix:after {
    content: “.”;
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }
    .clearfix {
    display: block;
    }
    html[xmlns] .clearfix {
    display: block;
    }
    * html .clearfix {
    height: 1%;
    }

    6-為鏈接和標題定義樣式

    最后,我們來定義適當的鏈接和標題的樣式,因為他們在任何項目中都是必需的。如果你在制作某個網頁,你不可能不是用它們。

    /* =2 Links
    ––––––––––––––––––––––––––––––––––––––––––––––––––*/
    a:link, a:visited {
    color: #333;
    }
    a:hover {
    color: #111;
    }
    a:active {
    color: #111;
    }
    /* =3 Headings
    ––––––––––––––––––––––––––––––––––––––––––––––––––*/
    h1 {
    font: bold 2em “Times New Roman”, Times, serif;
    }
    h2 {
    font: bold 1.5em “Times New Roman”, Times, serif;
    }
    h3 {
    font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
    }
    h4 {
    font: bold 1em Arial, Geneva, Helvetica, sans-serif;
    }
    h5 {
    font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
    }

    style.css模板的最終代碼

    /*
    主題名稱: 玫瑰主題
    URI: the-theme’s-homepage
    描述: a-brief-description
    作者: 您的姓名
    作者 URI: 您的-URI
    模板: 在這里可以提示它的父級模板

    [目錄表]
    0- Reset
    1- Global
    2- Links
    3- Headings
    4- Header
    5- Navigation
    6- Middle
    7- Forms
    8- Extras
    9- Footer
    */
    /* =0 Reset
    –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
    @import url(’reset.css’);

    /* =1 Global
    –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
    body {
    line-height: 1;
    font: normal 12px Arial, Helvetica, sans-serif;
    vertical-align: top;
    background: #fff;
    color: #000;
    }
    .right {
    float: right;
    }
    .left {
    float: left;
    }
    .align-left {
    text-align: left;
    }
    .align-right {
    text-align: right;
    }
    .align-center {
    text-align:center;
    }
    .justify {
    text-align:justify;
    }
    .hide {
    display: none;
    }
    .clear {
    clear: both;
    }
    .bold {
    font-weight:bold;
    }
    .italic {
    font-style:italic;
    }
    .underline {
    border-bottom:1px solid;
    }
    .highlight {
    background:#ffc;
    }
    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    img.alignleft {
    float:left;
    margin:4px 10px 4px 0;
    }
    img.alignright {
    float:right;
    margin:4px 0 4px 10px;
    }
    .clearfix:after {
    content: “.”;
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }
    .clearfix {
    display: block;
    }
    html[xmlns] .clearfix {
    display: block;
    }
    * html .clearfix {
    height: 1%;
    }
    /* =2 Links
    –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
    a:link, a:visited {
    color: #333;
    }
    a:hover {
    color: #111;
    }
    a:active {
    color: #111;
    }
    /* =3 Headings
    –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
    h1 {
    font: bold 2em “Times New Roman”, Times, serif;
    }
    h2 {
    font: bold 1.5em “Times New Roman”, Times, serif;
    }
    h3 {
    font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
    }
    h4 {
    font: bold 1em Arial, Geneva, Helvetica, sans-serif;
    }
    h5 {
    font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
    }
    /* =4 Header
    –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =5 Navigation
    –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =6 Middle
    –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =7 Form
    –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =8 Extra
    –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
    /* =9 Footer
    –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

    總結

    感謝大家閱讀本文,CSS最佳實踐在某種意義上的確會對我們提供很大的幫助。它可以幫助我們節省更多的工作時間,顯著提高工作效率。如果您有任何看法或建議,歡迎。

    下載源文件

     

    來源: 翻譯:

     

    About D8

    • ©2014 織夢吧(d8) DedeCMS學習交流平臺
    • 唯一網址 www.1kkarat.com 網站地圖
    • 聯系我們 1978130638@qq.com ,  QQ
    视频一区二区中文字幕日韩在线视频_视频一区二区中文字幕亚洲精品