手把手教你写CSS行内样式与内联样式
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>
