What is inline style
Inline styles, in fact, its name can be seen on its characteristics, is used directly in the HTML tag styleattribute set CSS styles. For example, like the following:
<p style="font-size: 18px;">行内样式</p>
The HTML styleattribute provides a method by changing the style of all HTML elements, syntax is as follows:
<标签 style="样式声明1;样式声明2;样式声明3"></标签>
Remember to use a semicolon between each style declarations ;separated yo, otherwise the style will fail.
Example:
For example, the following code uses CSS inline styles to set the font in the first paragraph to 20px, the color is red, and it is displayed in bold. The font size in the second paragraph is set to 16px, the color is green, and it is displayed in italics:
<!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>
to sum up
Inline styles with them is very simple, and very convenient, directly through the styleproperty to set the style in the HTML tag. But the inline style only works on the current HTML tag, that is, if we want multiple tags to use the same style, we need to set it multiple times.
Inline styles are written in HTML tags, so this method cannot separate content and presentation, and essentially does not reflect the advantages of CSS.
If in-line styles are used for all tags in a large application, not only will the code be redundant, but the subsequent maintenance will also be large, so this method is not recommended to set styles.
I am currently working in front-end development. If you also want to learn front-end development technology now, and you encounter any questions about learning methods, learning routes, learning efficiency, etc. during the process of getting started learning front-end, you can apply to join my front-end Learning exchange skirt: 421374697 . It gathers some beginners, changers, and beginners who are self-learning front-end. I also have some front-end learning mind maps compiled during the time I was doing front-end technology , front-end factory interview questions, front-end development source code tutorials, and PDF documents. Books and tutorials can be obtained from the skirt pig if you need them.
Inline style
- Directly on the element
:styleform, the object writing 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>
- The style object that defines the
datamiddle, and direct reference to:stylethe
- Define the style on data:
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
- In the element, the style object is applied to the element through the form of attribute binding:
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
- In
:styleby the array, a plurality of referencedatapatterns on objects
- Define the style on data:
data: {
h1StyleObj: {
color: 'red', 'font-size': '40px', 'font-weight': '200'
},
h1StyleObj2: {
fontStyle: 'italic'
}
}
- In the element, the style object is applied to the element through the form of attribute binding:
<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 array
<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'}
]
}