手把手教你写CSS行内样式与内联样式
source link: https://my.oschina.net/u/4867164/blog/4813275
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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>
Recommend
-
161
前言 总括： 本文通过实例讲解CSS中最大的难点之一，行内元素的布局，主要是挖掘line-height和vertical-align两个属性在布局方面的使用。 原文博客地址：深入理解行内元素的布局 知乎专栏&&简书专题：前端进击者（知乎）&a
-
91
VAC万融链，Value added chain，是在开发比特币和以太坊之外的第三种区块链生态系统，并致力于拓展区块链技术的 应用边界和技术边界 ，使普通互联网用户能感受到区块链技术的价值。万融链（VAC）是一个公有链，他是区块链技术的有一个新突破，在区块链技术的应用上...
-
67
这几天在海关做项目，需要内外网两个环境，内网IP访问需要外网进行转发内网：172.16.102.8外网：10.99.115.211#iptables-tnat-APREROUTING-ptcp-ieth0-d10.99.115.211--dport1521-jDNAT--to172.16.102.8:1521#iptablessave
-
25
今天，我们要讲的是块级元素、行内元素、替换元素、非替换元素的区分和特点。 元素的分类 1 替换和不可替换元素 从元素本身的特点来讲，可以分为替换和不可替换元素。 1.1 替换元素
-
45
酷工作 - @richzhu - # 哈啰出行长期内推各类岗位>包括不限于：技术部门(上海，杭州)、职能部门(上海，杭州)、车辆运营(包括二三线城市)、公关部门，等等由于本人在技术部，所以简单说下技术部的需求：
-
32
近日，深信服安全团队捕获到针对国内企业的新型勒索病毒攻击事件，攻击者通过爆破获得跳板机权限后，利用全套黑客工具包对内网主机进行渗透，人工投放勒索病毒进行加密，该勒索病毒加密邮箱与后缀为硬编码的字符串“.[[email protected]].DEA...
-
31
本月初，作为 Notion Pro，我先行拿到了反向链接（backlink）的测试权限，在最近使用过程中，的确在一些重协作的场景上带来不一样的体验。 关于 Notion 添加反向链接，Notion 中文社区的 Power User 成员 羅蔔多克 RobDock 在群...
-
16
在编辑文本时大小写常常是需要注意的地方，大小写的转换是很枯燥而繁琐的工作，所幸，Linux 提供了很多能让这份工作变得容易的命令。接下...
-
5
0x00 Preface 内网渗透主要是基于前期外围打点getshell的webserver，通过收集webserver上的信息，然后对其他内网主机进行口令上的攻击，当然也有一些基于漏洞的攻击。 内网相关概念这里不再进行介绍，大家可以自行百度，诸如什么是域、域与工...
-
9
css显示模式（行内元素，块元素，行内块元素） 原创 ISSA2号 2022-05-25...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK