手把手教你写CSS行内样式与内联样式

2020-12-17 本文已影响0人前端王祖蓝

style行内样式表，写在标签内部；
行内样式表里面的属性也是成对出现的，每一对属性之间用分号分隔（英文的）。
学会了一些属性如:
boder-radius，可以使按钮的四个角变为圆弧;
text-decortation文本下划线;
text-align文本的位置;
line-height行高等属性;

下面是行内样式表的写法：

<input type="button" value="立即注册" style="background-color: brown;width: 150px;height: 50px;border: none;color:white;font-size:20px;border-radius: 10px">

这一部分学习运用CSS和div将html区块化，以下是做的一个小练习


   <header style="height: 80px;background-color: blue;">
            
    <div style="height: 100%;width: 300px;background-color: black;float: left">
</div>
            
    <div style="height: 100%;width:500px;background-color: sandybrown;float:left">
</div>
     
   </header>
     
   <aside style="width: 30%;height: 400px;background-color: #ffcc00;float: left">
</aside>
     
   <section style="width: 70%;height: 150px;background-color: black;float:right">
</section>
     
   <article style="width: 70%;height:250px;background-color: chartreuse;float:right">
</article>
     
   <footer style="width: 100%;height: 150px;background-color: aqua;position: absolute;top: 480px">

   </footer>

内联样式: 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。

直接在元素上通过 :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>

手把手教你写CSS行内样式与内联样式

猜你喜欢

热点阅读