手把手教你写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>

手把手教你写CSS行内样式与内联样式相关推荐

Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP
本文完整版:<Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP> Vue3 Typescript + Axios 全栈开发教程前端 Vue3 ...
手把手教你写复制U盘文件神器（二）
前言:切莫用其干坏事,否则后果自负今天我们来聊聊如何将文件上传至服务器. 首先,需要前面(文章一)的代码为基础,在此基础上传文件.为了节省篇幅,在这我贴出改动的代码. 为了方便程序的通用性,在同级目 ...
手把手教你写个微信小程序
手把手教你写个微信小程序很多人看完bmob快速入门,并完成了bmob的基本配置之后依然不知道如何下手去写自己的代码,那么跟着我一起来一步一步做个小程序吧. 工具:Bmob后端云新建小程序项目一. ...
[PHP初级]手把手教你写注册程序 2
[PHP初级]手把手教你写注册程序 2 信息的验证为什么要验证输入信息? 验证显示错误信息链接输入界面以及取得输入信息请看第一章信息的验证这一章说信息的验证. 为什么要验证输入信息? 验证 ...
手把手教你写一个生成对抗网络
成对抗网络代码全解析, 详细代码解析(TensorFlow, numpy, matplotlib, scipy) 那么,什么是 GANs? 用 Ian Goodfellow 自己的话来说: " ...
php注册程序,[PHP初级]手把手教你写注册程序 1
[PHP初级]手把手教你写注册程序 1 实例内容在此教程,我们将通过写一个用户注册程序,学习以下内容: 数据的传输与获取信息的验证 pdo方式操作数据库事务处理前台显示文件:index.php ...
python k线合成_手把手教你写一个Python版的K线合成函数
手把手教你写一个Python版的K线合成函数在编写.使用策略时,经常会使用一些不常用的K线周期数据.然而交易所.数据源又没有提供这些周期的数据.只能通过使用已有周期的数据进行合成.合成算法已经有一个 ...
手把手教你写Linux I2C设备驱动
手把手教你写Linux I2C设备驱动标签:Linux 设备驱动详解 i2c 原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http:/ ...
手把手教你写DI_2_小白徒手撸构造函数注入
在上一节:手把手教你写DI_1_DI框架有什么? 我们已经知道我们要撸哪些东西了那么我们开始动工吧,这里呢,我们找小白同学来表演下小白同学 :我们先定义一下我们的广告招聘纸有什么: 好,我们实现两 ...
手把手教你写DI_3_小白徒手支持 Singleton 和 Scoped 生命周期
在上一节:手把手教你写DI_2_小白徒手撸构造函数注入浑身绷带的小白同学:我们继续开展我们的工作,大家都知道 Singleton是什么,就是全局只有一个呗,我们就先从它开始,这个多简单,我们找个字典 ...

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

手把手教你写CSS行内样式与内联样式相关推荐

最新文章

热门文章