CSS的行内样式与内联样式，看完就会了
什么是行内样式
行内样式，其实从它的名字即可以看出来它的特点，就是直接在 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 的优势。
假如在一个大的应用中所有标签都使用行内样式，不仅代码冗余，后期的维护也会很大，所以不推荐使用这种方式来设置样式。
我目前是在职前台开发，假如你现在也想学习前台开发技术，在入门学习前台的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我所在的前台学习交流裙：421374697。里面聚集了少量正在自学前台的初学者,转行者，初阶者，我这里也有我做前台技术这段时间整理的少量前台学习思维导图，前台大厂面试题，前台开发源码教程，PDF文档书籍教程,需要的话都可以找裙猪获取。
内联样式
- 直接在元素上通过
: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'} ] }说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS的行内样式与内联样式，看完就会了
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS的行内样式与内联样式，看完就会了
