Que es el estilo en línea

Estilos en línea, de hecho, su nombre se puede ver en sus características, se utiliza directamente en el styleconjunto de atributos de etiquetas HTML estilos CSS. Por ejemplo, como el siguiente:

<p style="font-size: 18px;">行内样式</p>

El styleatributo HTML proporciona un método al cambiar el estilo de todos los elementos HTML, la sintaxis es la siguiente:

<标签 style="样式声明1;样式声明2;样式声明3"></标签>

Recuerde usar un punto y coma entre cada declaración de estilo ;separada yo, de lo contrario, el estilo fallará.

Ejemplo:

Por ejemplo, el siguiente código usa estilos CSS en línea para establecer la fuente en el primer párrafo en 20px, el color es rojo y se muestra en negrita. El tamaño de fuente en el segundo párrafo está establecido en 16px, el color es verde y se muestra en cursiva:

<!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>

para resumir

Los estilos en línea con ellos es muy simple y muy conveniente, directamente a través de la stylepropiedad para establecer el estilo en la etiqueta HTML. Pero el estilo en línea solo funciona en la etiqueta HTML actual, es decir, si queremos que varias etiquetas usen el mismo estilo, debemos configurarlo varias veces.

Los estilos en línea se escriben en etiquetas HTML, por lo que este método no puede separar el contenido de la presentación y, en esencia, no refleja las ventajas de CSS.

Si se usan estilos en línea para todas las etiquetas en una aplicación grande, no solo el código será redundante, sino que el mantenimiento posterior también será excelente, por lo que no se recomienda usar este método para establecer estilos.

Actualmente estoy trabajando en el desarrollo de front-end. Si desea aprender tecnología de desarrollo de front-end ahora, y tiene alguna pregunta sobre métodos de aprendizaje, rutas de aprendizaje, eficiencia de aprendizaje, etc. durante el proceso de comenzar a aprender front-end, puede solicitar unirse a mi front-end Falda de intercambio de aprendizaje: 421374697 . Reúne a algunos principiantes, cambiadores y principiantes que son de autoaprendizaje front-end. Aquí también tengo algunos mapas mentales de aprendizaje de front-end compilados durante el tiempo que estuve haciendo tecnología de front-end, preguntas de entrevistas de fábrica de front-end, tutoriales de código fuente de desarrollo de front-end, documentos PDF Se pueden obtener libros y tutoriales del cerdo de la falda si los necesita.

Estilo en línea

Directamente en la :styleforma del elemento , el estilo de escritura del objeto

<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>

El objeto de estilo que define el datamedio, y la referencia directa a :stylela

Defina el estilo en los datos:

data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

En el elemento, el objeto de estilo se aplica al elemento a través de la forma de enlace de atributo:

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

En :stylela matriz, una pluralidad de datapatrones de referencia en objetos

Defina el estilo en los datos:

data: {
h1StyleObj: {
 color: 'red', 'font-size': '40px', 'font-weight': '200'
},
h1StyleObj2: {
fontStyle: 'italic' 
}
}

En el elemento, el objeto de estilo se aplica al elemento a través de la forma de enlace de atributo:

<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>

: matriz de estilo

    <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'}
                ]
            }

Estilos CSS en línea y estilos en línea, léalo

Que es el estilo en línea

Ejemplo:

para resumir

Estilo en línea

Supongo que te gusta