Hellow大家好!今天我们来学习一些简单的CSS样式
上几期我们学习了很多选择器啊不知道大家掌握的怎么样了,有没有努力练习呢。既然我们都能熟悉运用选择器了那下一步该干什么呢,当然是通过选择器要来页面添加样式啦,话不多说上干货!
1、首先呢是改变样式的颜色,来看个例子
<div>我是红色 </div>
<style>
div{ color: red; }
</style>
是不是非常简单呢,大家应该发现了吧,这个英语的本身啊就是它的含义,color在英语里就是颜色的意思,再加上样式red,英语里是红色的意思,就变成这个效果啦
2、第二个呢是改变背景颜色
<div>我的背景是红色</div>
<style>
div{ background-color: red; }
</style>
这样背景颜色就变成红色了,再告诉大家一个秘密,很多样式是可以一起用的哦
<div>我的背景是红色,但我是绿色</div>
<style>
div{ background-color: red;
color: green;}
</style>
看起来非常的丑啊...大家自己也可以去尝试一下哦
3、第三个是改变字体大小
<div>我是小红</div>
<span>我是小蓝</span>
<style>
div{font-size: 50px;}
</style>
非常的有趣啊,这个样式也可以和前面两个一起用哦,大家快去试一下吧!
4、下一个是改变字体!我们中华上下五千年文化博大精深啊,字体也是多种多样啊有楷书隶书宋体大篆小篆,这些在网页中也都是可以修改的哦
<div class="hong">我是小红</div>
<div class="lan">我是小蓝</div>
<div class="lv">我是小绿</div>
<style>
.hong{font-family: 楷书;}
.lan{font-family: 宋体;}
.lv{font-family: 隶书;}
</style>
是不是网页花样繁多!只有想不到没有做不到!
5、最后是字体的粗细
<div class="hong">我是小红</div>
<div class="lan">我是小蓝</div>
<div class="lv">我是小绿</div>
<style>
.hong{font-weight: bold;}
.lan{font-weight: lighter;}
.lv{font-weight: normal;}
</style>
顾名思义啊bold有粗的意思啊就是加粗,lighter就是变细,normal就是保留原有样式不变啦
今天我们的教学就到这里,来欣赏一下成果吧!
这个是大家现在可以做出来的哦!快去尝试吧!
本次的更新就到这里啦,点个关注再走哦!