简单的CSS样式

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就是保留原有样式不变啦

今天我们的教学就到这里，来欣赏一下成果吧！

 

这个是大家现在可以做出来的哦！快去尝试吧！

本次的更新就到这里啦，点个关注再走哦！