HTML5_提供的 新功能_less 編譯_

HTML5_提供的 新功能

• class 操做
  • ele.classList（注意： 高版本的 IE 都不支持）
    • • 獲取 <div id="ele" class="... ..."></div>列表
    • ele.classList.add("current");
    • ele.classList.remove("current");
    • ele.classList.toggle("current");    /* 刪除返回 false */

 

• 元素 新屬性
• conteneditable
  • 內容可編輯性
  • <div contenteditable="true"></div>

 

• HTML5 容許自定義屬性，操做標籤上的屬性
• <div id="ele" data-warhorse="戰馬"></div>
  • 讀自定義的屬性
    • ele.getAttribute("data-warhorse");
    • ele.dataset.warhorse;
  • 寫自定義的屬性
    • ele.setAttribute("data-warhorse", "戰馬山莊");
    • ele.dataset.warhorse="戰馬山莊";

• <div id="ele" data-war-horse="戰馬"></div>
  • 讀： ele.dataset.warHorse;
  • 寫： ele.dataset.warHorse = "戰馬山莊";

 

• 屬性分爲
  • <> 標籤上的屬性 attributes
    • 讀： ele.getAttribute("id");
    • 寫： ele.setAttribute("id", "big_box");
    • 之後只要看到 Attribute，就是操做 <> 標籤上的屬性

• • 對象上的屬性 var obj = {name:"kjf", age="18"}
    • 讀： obj.name;    或者    obj["name"];
    • 寫： obj.name="God";    或者    obj["age"]="180000";    
      • 動態添加屬性： obj.addr="The Hell 1024.";

• • 有些屬性 既是標籤上的屬性，也是對象上的屬性
    • id
    • src

 

• HTML5 表單    <form action="服務器地址">
• <input name="test" type = 
• "email"        ?test=951932321%40qq.com
• "tel"        ?test=138654798
• "url"        ?test=http
• "search"        ?test=hfhfghfg        有一個 X 能夠將內容清空
• "number"        ?test=3        有 上/下按鍵 調整值的大小
• "number"        min="-30"    max="50"    step="10"        每10個調整一次，大於-30，小於50        

 

• "range"        ?test=30        滑動條，提交數值後回到默認位置（50）
• "range"        min="-30"    max="50"    step="10"        每10個調整一次，大於-30，小於50
• "color"        ?test=%23000000        會出現一個顏色選擇器
• "datetime-local"        ?test=2018-11-10T22%3A00        出現一個日期選擇器（年/月/日 時分秒）
• "time"        ?test=         時/分/秒 選擇器
• "date"        ?test=         年/月/日 選擇器
• "week"        ?test=        某年第n個周 選擇器
• "month"        ?test=2018-11        某年第n個月 選擇器

• 新屬性 
• placeholder
• <input type="text" name="user_name" placeholder="請輸入用戶名">
• <input type="password" name="user_password" placeholder="請輸入密碼">
• 改變用戶輸入文本樣式
  • input[type="text"] { color: blue; }
• 改變placeholder 的文本樣式
  • input[type="text"]::-webkit-input-placeholder { color: olive; }

• autocomplete        是否保存用戶默認值，默認爲 on。
• <input type="text" name="user_name" autocomplete="off">        關閉選擇提示爲 off

• autofocus        自動獲取焦點
• <input type="text" name="user_name" autofocus="autofocus">

• required        驗證類，表示此 表單項 不能爲空
• <input type="text" name="user_name" required="required">

 

• less 編譯（三種 CSS預處理器 之一）        lesscss.cn

CSS 中出現的計算

大屏手機，小屏手機____等比計算

• less 概論
• 其實也是 CSS 樣式，只不過是 動態樣式語言
• 增長了變量，Mixin，函數等特性，使得 CSS 更易維護和擴展
• less 既能夠運行在 客戶端，也能夠藉助 Node.js 在 服務器端 運行

• less 初次使用
• less        支持原生 js，node
• sass        支持 ruby 環境
• stylus        支持 node    開發項目使用
• 使用 less 讓元素 垂直水平居中 
  

  • /**** 導入 less.js 包 ****/ <script type="text/javascript" src="./js/less.min.js"> 
    <style type="text/less">    /**** 修改樣式表類型 ****/ @zero: 0; /**** 變量 的定義 ****/
        * {
            margin: @zero;    /**** 變量 的使用 ****/
            padding: @zero;
        }
    
        #wrap {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto
            
            width: 600px;
            height: 600px;
            background-color: blue; #box {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto
            
                    width: 600px;
                    height: 600px;
                    background-color: blue;
            }
        }
    <style>

 

• less 編譯工具

http://koala-app.com/

 

• 項目根文件夾下新建一個 "css" 文件夾
• 建立 index.less 文件，編寫 less 代碼
• @zero: 0;
• @grey: #2a2a2a;
• 將整個項目 css 文件夾拖到 koala 軟件中，按 refresh 按鍵編譯

• 註釋 

//

/* */

• 選擇器變量
• 定義

@xzq: wrap;

• 使用

#@{xzq} { background-color: skyblue; }

• 屬性變量
• 定義

@w: width;

• 使用

@{w}: 500px;

• url 變量 @url

• 變量的延遲加載 （面試題）
• 第一種狀況

• /**** 屬性 three 後面是 數字幾****/
  @var: 0;
  .wrap {
      @var: 1;
      .box{
          @var: 2;
          width: @var;
          @var: 3;
      }
      width: @var;
  }
  /****
      先找最內層的 子元素 .box
      不論定義多少同名變量，老是 生效 最後一個 @var: 3;
  
      再看上一層 父元素，屏蔽 子元素 進行分析
  ****/
  .wrap{
      width: 1;
  }
  
  .wrap .box {
      width: 3;  
  }

• 第二種狀況

• /**** 屬性 three 後面是 數字幾****/
  @var: 0;
  .wrap {
      @var: 1;
      .box{
          width: @var;
      }
      width: @var;
  }
  /**** ★★★
      先找最內層的 子元素 .box 不論定義多少同名變量，老是 生效 最後一個; 可是若是 子元素 中找不到，則到上一層 父元素 去找 再看上一層 父元素，屏蔽 子元素 進行分析
  ****/
  .wrap{
      width: 1;
  }
  
  .wrap .box {
      width: 1;  
  }

 

• 嵌套 選擇器
• 子元素
  
• 
  
• nth-child
• 
  
• & 表明 當前元素前面 的全部元素
• :hover
• 
  
•  交集選擇器
• 元素 class 不只要 有 start 還要有 active
• 混合 mixin（less 函數）的形式
• 
  
  • mixin.less 和 index.less 都爲自行編寫，而後由 koala 軟件編譯，生成 index.css 和 mixin.css
• mixin.less

  • .ele_center(@width:100px, @height:100px, @color:#ccc){
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    
        width: @width;
        height: @height;
        background-color: @color;
    }

• index.css

  • /**** Mixin ,  CSS Function ****/
    
    /*  封裝一個混合
            普通 混合
            參數 混合
            默認值 混合
        Bootstrap 的柵格源碼都是用 less 寫的
    
        引入一個外部的 .less 文件
            @import "mixin/mixin.less"
    
     */
    @import "mixin/mixin.less";
    
    #wrap {
        /* 調用混合 */
        .ele_center(@width: 600px, @height: 600px, @color:#110099);
    
        >#box1 {
            /* 調用混合 */
            .ele_center(@width: 300px, @height: 300px);
    
            >#box2 {
                /* 調用混合 */
                .ele_center(@color:#808000);
            }
        }
    }