• <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>

    卓象程序員 | 哈爾濱IT培訓 | 品質教育,口碑傳承 | 為做出口口相傳,好口碑的教育品牌而奮斗!

    卓象程序員讓每一位學員高薪就業 聯系我們13101507057

    加微信,了解詳情
    您所在的位置:首頁 > 文章 >卓象技術

    「卓象程序員」當你看輕css的時候,我已經將代碼優化好了并受到了表揚
    時間: 2019-10-23 09:03:59     來源: 卓象IT實訓基地【原創】


          無論是已經工作的全棧式工程師,還是正在努力奮斗的程序小白,一般都是從HTML+CSS簡單開發起步的,最近我的新班同學正在學習css,在檢查大家的代碼時,我突然想起了工作時重構項目的情景。當我看見一串串密密麻麻的css樣式,.最重要的是沒有按照正規規范寫時,我感覺有一種吃到了山竹皮的苦澀和無力..


    那么下面我會介紹給大家幾個步驟,保證大家寫出的代碼既漂亮又實用!


    1. 公共內容處理

    在編寫代碼時,特別是編寫線上的項目時,是不可以在每個頁面上寫重復代碼的。這樣冗余的代碼影響體驗和網站運行速度。那么我們完全可以把有用同樣樣式的header區域和footer區域用一個獨立的css樣式表外聯。這樣就不用每個頁面進行相同的代碼編寫了,而且后期維護也特別方便


    2. 注意代碼格式,規范縮進

    對于新手來講,規范的代碼編寫格式有利于自己對代碼的把控,減少錯誤的產生。

    不規則方式代碼:

    規則方式代碼:


    大家看,這個就是按照規范書寫的HTML代碼,是不是看起來清爽又整齊?這樣的寫法是十分重要的,不僅是在編寫時,可以很快的看到自己想要的部分。在公司協同工作時,其它人看到你的代碼進行添加數據接口時調用樣式很方便,而且有利于日后的維護。特別是還能給大家留下很不錯的印象,這樣離自己的工程師夢會邁出很踏實的一步。


    3. 合理運用樣式表

    我們在css的學習中,有三種引入方式。行內樣式表(內斂樣式)、內部樣式表(內嵌樣式)、外聯樣式表(引入樣式)。那我們要清楚每一個樣式表的優缺點,和使用頻率。

    1) 行內樣式表

    優點:書寫方便、權重高。

    缺點:沒有實現樣式和結構相分離,控制范圍少。

    使用頻率:少。

    2) 內部樣式表

    優點:特定的頁面寫特定的樣式。

    缺點:沒有實現樣式和結構徹底分離。

    使用頻率:中。


    3) 外聯樣式表

    優點:樣式和結構相分離,方便維護與改寫。

    缺點:需要引入。

    使用頻率:極高。


    所以我為大家總結出以下幾點:

    1) 盡量不使用行內樣式表

    2) 盡量不用id選擇器來給標簽寫樣式,權重值大

    3) 盡量不使用 !important


    最后希望大家注意細節,處理好自己的代碼,離自己的工程師夢越來越近。大家也可以在下面留言,有什么問題我會盡量整理,盡快的發出大家關心的問題。


    每日分享技術干貨~

    報名卓象免費訓練營課程

    學習最新熱門IT技術

    找一份自己滿意的高薪工作

    15天免費學習??!

    卓象程序員

    ★ 零基礎,隨時體驗

    ★ 免費試聽,滿意后再報名

    ★ 小班授課,學習氛圍濃厚

    ★ 口碑相傳,80%學員來自口碑推薦

    ★ 教學嚴管,闖關式學習保障學習效果

    ★ 公司地點,哈爾濱市東直路123號7樓




    热99re久久精品|天天综合网久久综合免费人成|91久久久久久久精品青草| 亚洲AV无码无一区二区Ⅰ久久|
  • <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>