手把手教你寫CSS行內樣式與內聯樣式

style行內樣式表，寫在標籤內部；行內樣式表裏面的屬性也是成對出現的，每一對屬性之間用分號分隔（英文的）。學會了一些屬性如: boder-radius，能夠使按鈕的四個角變爲圓弧; text-decortation文本下劃線; text-align文本的位置; line-height行高等屬性;html

下面是行內樣式表的寫法：vue

<input type="button" value="當即註冊" style="background-color: brown;width: 150px;height: 50px;border: none;color:white;font-size:20px;border-radius: 10px">

這一部分學習運用CSS和div將html區塊化，如下是作的一個小練習數組

<header style="height: 80px;background-color: blue;">
            
    <div style="height: 100%;width: 300px;background-color: black;float: left">
</div>
            
    <div style="height: 100%;width:500px;background-color: sandybrown;float:left">
</div>
     
   </header>
     
   <aside style="width: 30%;height: 400px;background-color: #ffcc00;float: left">
</aside>
     
   <section style="width: 70%;height: 150px;background-color: black;float:right">
</section>
     
   <article style="width: 70%;height:250px;background-color: chartreuse;float:right">
</article>
     
   <footer style="width: 100%;height: 150px;background-color: aqua;position: absolute;top: 480px">

   </footer>

內聯樣式: 因爲要將表現和內容混雜在一塊兒，內聯樣式會損失掉樣式表的許多優點。請慎用這種方法，例如當樣式僅須要在一個元素上應用一次時。要使用內聯樣式，你須要在相關的標籤內使用樣式（style）屬性。ide

直接在元素上經過 :style 的形式，書寫樣式對象

<h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>

<div class="box">
        <!-- 內聯樣式書寫爲對象形式  其中font-size 必須加引號  
        注意：凡有橫線的都必須加引號 -->
        <h1 :style="{color:'red','font-size':'50px'}">這是一個善良的h1</h1>
    </div>
    
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
    var vm=new Vue({
        el:'.box',
        data:{

        }
    });
    </script>

將樣式對象，定義到 data 中，並直接引用到 :style 中

在data上定義樣式：

data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

在元素中，經過屬性綁定的形式，將樣式對象應用到元素中：

<h1 :style="h1StyleObj">這是一個善良的H1</h1>

在 :style 中經過數組，引用多個 data 上的樣式對象

在data上定義樣式：

data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}

在元素中，經過屬性綁定的形式，將樣式對象應用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">這是一個善良的H1</h1
<body>
    <!-- <div class="box">
         內聯樣式書寫爲對象形式  其中font-size 必須加引號  
        注意：凡有橫線的都必須加引號 -->
        <!-- <h1 :style="{color:'red','font-size':'50px'}">這是一個善良的h1</h1> 
    <!-- </div>  -->
    <div class="box">
          <!-- 使用對象形式添加內聯樣式 -->
            <h1 :style="styleobj">這是一個善良的h1</h1>
        </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
    var vm=new Vue({
        el:'.box',
        data:{
            styleobj:{
                color:'red',
                width:'500px',
                height:'500px'
            }
        }
    });
    </script>