什么是行内样式
行内样式，其实从它的名字就可以看出来它的特点，就是直接在 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 的优势。
如果在一个大的应用中所有标签都使用行内样式，不仅代码冗余，后期的维护也会很大，所以不推荐使用这种方式来设置样式。
内联样式
直接在元素上通过 :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>
:style 数组的写法
<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前端的道路上披荆斩棘
这套资源的领取方式：点击这里获取
