代码里style 和css是什么

html-css013

代码里style 和css是什么,第1张

style 是样式的意思 而css和style是一样的作用

就是对网页 上 文字 的 字体 颜色 大小

图片的 大小 相对距离 层次

以及其他东西的样式

另外 可以 在 其中使用 像

glow blur 之类的滤镜 来使 网页内容达到各种漂亮的

效果~

style 有2种使用方法

一个是直接做为标记

<style>

</style>

2是做为标签属性

<div style="position:absolute">

</div>

css是外部样式

style是行内样式

两都的区别css对于后期的修改比较灵活。

有效执行顺序,如果内部写了style样式的话,style为最终执行样式,意思就是style的优先级高于css

1.数组方法,元素为css的名称,可以在里面使用三目运算

<div :class="[ isOne?'one':'', 'two']">数组方法 </div>

2.对象方法,元素键名为css名称,用true和false 来控制是否显示

<div :class="{'one':isOne,'two':true}">对象方法</div>

3.直接加入,加入的内容是css名称,可以通过计算来控制显示的css,名称

<div :class="isOne?'one':'two'" >直接加入</div>

1.数组方法,元素是一个个对象,对象则是style的键值对,当然可以用三目运算控制

<div :style="[{color: 'green',fontSize: '30px'} , isOne ?{'font-weight': 'bold'}:{}]" >数组方法</div>

2.对象方法,元素键名为style名称,值为style属性值。当然可以用三目运算控制来控制是否显示对应的style属性值

<div :style="{ color: isOne ?'green':'#f00' , backgroundColor:'#f00'}" >对象方法</div>

3.直接加入,只要保证得出来的字符串是正确的即可,怎么用都可以

<div :style="(isOne ? 'color:green' : '')+ 'backgroundColor:#f00' ">直接加入</div>