What is inline style

Inline styles, as their name suggests, use the style property to set CSS styles directly within the HTML tag. For example, something like this:

<p style="font-size: 18px;" > Inline style </p>Copy the code

The style attribute in HTML provides a way to change the style of all HTML elements in the following syntax:

< p style=" max-width: 100%; Style declaration 2; Style declaration 3"></ tag >Copy the code

Remember to use semicolons between each style declaration; Separate, otherwise the style will fail.

Example:

For example, in the following code, the font in the first paragraph is set to 20px with the color red and bold using CSS inline styles. In the second paragraph, set the font size to 16px, color to green, and tilt it:

<! DOCTYPE> < HTML > <head> <meta charset=" UTF-8 "> <title>CSS </title> </head> <body> <p style=" FONT-SIZE: 20px; color: red; font-weight: bold;" "> <p style="font-size: 16px; color: green; font-style: italic;" > This is inline style </p> </body> </ HTML >Copy the code

conclusion

Inline styles are simple and convenient to use by setting the style directly in the HTML tag using the style attribute. But inline styles work only for the current HTML tag, which means that if we want multiple tags to use the same style, we’ll need to set it multiple times.

Inline styles are written in HTML tags, so they don’t separate content from presentation, essentially missing the benefits of CSS.

If all the tags in a large application use inline styles, not only the code is redundant, but also the maintenance is very large, so it is not recommended to use this style.

I am currently working as a front-end developer. If you also want to learn front-end development technology, you can apply to join my front-end learning exchange skirt: 421374697 if you have any problems about learning methods, learning routes and learning efficiency during the process of learning the front-end. Inside gathered some are learning front-end beginners, career change, the first stage, I also have here I do front-end technology this time sorted out some front-end learning mind map, front-end factory interview questions, front-end source development tutorial, PDF document books tutorial, if you need to find skirt pig access.

Inline style

  1. It passes directly over the element:styleWrite style objects in the form of
< h1: style = "{color: 'red', 'the font - size:' 40 px '}" > this is a kind of h1 < / h1 > < div class = "box" > <! Font size must be quoted. Note: All there are horizontal lines must be in quotes - > < h1: style = "{color: 'red', 'the font - size:' 50 px '}" > this is a kind of h1 < / h1 > < / div > < script SRC = ". / lib/vue - 2.4.0. Js "> < / script > < script > var = new vm vue ({el: 'box', data: {}}); </script>Copy the code
  1. Define the style object todata, and directly referenced to:style 中
  • Define styles on data:
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
Copy the code
  • Within an element, style objects are applied to the element in the form of attribute bindings:
<h1 :style="h1StyleObj">Copy the code
  1. in:styleThrough an array, reference multipledataThe style object on
  • Define styles on data:
data: {
h1StyleObj: {
 color: 'red', 'font-size': '40px', 'font-weight': '200'
},
h1StyleObj2: {
fontStyle: 'italic' 
}
}
Copy the code
  • Within an element, style objects are applied to the element in the form of attribute bindings:
<h1 :style=" h1StyleObj, h1StyleObj2 "style=" h1 </h1 <body> <! <div class="box"> <div class="box"> <div class="box"> - < h1: style = "{color: 'red', 'the font - size:' 50 px '}" > this is a kind of h1 < / h1 > -- > <! -- </div> --> <div class="box"> <! <h1 :style="styleobj"> This is a nice h1</h1> </div> <script SRC ="./lib/ vue-2.3.0.js "></script> <script> var vm=new Vue({ el:'.box', data:{ styleobj:{ color:'red', width:'500px', height:'500px' } } }); </script>Copy the code

:style array

<div class="box"> <p :style="stylearr"> < / p > < input @ click = "show ()" type = "button" value = "submit" > < / div > < script SRC = "vue - 2.4.0. Js" > < / script > < script > new vue ({ El :'. Box ', data:{Iscolor:true, colorobj:{red:true, green:true},Copy the code