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文档书籍教程,需要的话都可以找裙猪获取。

内联样式

  1. 直接在元素上通过 :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>
  1. 将样式对象,定义到 data 中,并直接引用到 :style
  • 在data上定义样式:
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
  • 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
  1. :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'}
                ]
            }

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):