什麼是行內樣式
行內樣式，其實從它的名字就可以看出來它的特點，就是直接在 HTML 標籤中使用 style 屬性設定 CSS 樣式。例如像下面這樣的：
<p style="font-size: 18px;">行內樣式</p>HTML 中的 style 屬性提供了一種改變所有 HTML 元素樣式的透過方法，語法格式如下所示：
<標籤 style="樣式宣告1;樣式宣告2;樣式宣告3"></標籤>要記得用在每個樣式宣告之間使用分號 ; 分隔喲，否則樣式會失效的。
示例：例如下面這段程式碼，透過 CSS 行內樣式，將第一個段落中的字型設定成了 20px，顏色為紅色，加粗顯示。第二個段落中的字型大小設定為 16px，顏色為綠色，傾斜顯示：
<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS學習</title> </head> <body> <p style="font-size: 20px;color: red;font-weight: bold;">這是行內樣式</p> <p style="font-size: 16px;color: green;font-style: italic;">這是行內樣式</p> </body></html>行內樣式用起來其實很簡單，並且很方便，直接透過 style 屬性在 HTML 標籤中設定樣式即可。但是行內樣式僅對當前的 HTML 標籤起作用，也就是說，如果我們希望多個標籤使用同一個樣式，則需要設定多次。
行內樣式都是寫在 HTML 標籤中，因此這種方式不能使內容與表現分離，本質上沒有體現出 CSS 的優勢。
如果在一個大的應用中所有標籤都使用行內樣式，不僅程式碼冗餘，後期的維護也會很大，所以不推薦使用這種方式來設定樣式。
<div class="box"> <p :style="stylearr">世界之窗，關注你我！</p> <input @click="show()" type="button" value="提交"> </div> <script src="vue-2.4.0.js"></script> <script> new Vue({ el:'.box', data:{ Iscolor:true, colorobj:{ red:true, green:true }, //有鍵值對的需要使用物件陣列 stylearr:[ {background:'red'} ] }最後為了幫助大家學習前端，讓學習變得輕鬆，高效！今天給大家分享一套教學資源，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等幫助大家在學習Web前端的道路上披荊斬棘