简单的认识CSS

hellow大家好!今天我们就来简单了解一下CSS!

如果说HTML是一张素颜照啊那CSS就是化妆美颜加滤镜啦。

说到CSS呢第一个要说的就是样式选择器了,毕竟代码这么多我们要去细分啊这个是什么颜色的啊那个字体大小是多少啊,如果没有选择器那就要乱套啦。

最简单的就是行内样式

例如:

<div style="color: aqua; font-size: 50px;">

简单的CSS

</div>

简而言之啊就是在标签旁加style方式来书写样式,具体有什么样式各位先别急等我慢慢道来!

第二个就是页面样式表

页面样式表又分为标签选择器、类选择器和id选择器

标签选择器是最广泛的一个选择器

例如:

<style>

div{

color: red;

}

</style>

<body>

<div >

简单的CSS

</div>

</body>

但是由于这个选择器选择范围太广了所以在实际工作中很少运用啦

和标签选择器相反啊类选择器是实际工作中运用最广泛的一个

话不多说来看例子

<style>

.color{

    color: red;

}

</style>

<body>

     <div class="color">

        简单的CSS

    </div>

</body>

由于其选择的精准性啊比其他选择器要好用的多

最后一个是ID选择器,这个选择器运用的也不是很多,特性在于它的唯一性

例如

<style>

#color{

    color: red;

}

</style>

<body>

     <div id="color">

        简单的CSS

    </div>

</body>

这个和类选相差不大啊择器也比较好理解

第三个样式是链接式样式表

首先在相同文件夹目录下创建一个名为xxx.css的文件哈,并在tiitle标签下中引入这个样式

例如<link rel="stylesheet" href="./xxx.css"> ,其中啊rel为关联的意思,关联一个样式表(stylesheet)的文档,这个目前实际工作中啊经常会用到的啦,用来搭配上述我们说的类选择器。如果能熟练掌握链接式样式表和类选择器那我们在平常的工作也能得心应手啦。

最后一个是嵌入式样式表

和链接式样式表一样在相同文件夹目录下创建一个名为xxx.css的文件并在style标签下引入

例如

<style>

@import url(./inedex.css);

</style>

这样就完成并可以在css文件里添加样式啦

如果其中一个标签啊同时被多个样式选中,那这个标签该听谁的呢?

让我们来看看啊,这三种样式表也是有先后顺序的优先级的

行内样式表>页面样式表>>链接式样式表

这样子你是否明白了呢?勤加练习并发现其中的乐趣让学习更持久!

下面是成品欣赏!

 

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值