通俗易懂的CSS

目录

什么是CSS

CSS的创建

1、内联样式

2、内部样式

选择器

1、类选择器(class选择器)

2、id选择器

3、伪类

4、选择器优先级


什么是CSS

HTML和CSS有什么关系呢?

以服装制造厂为例哟?

HTML类似于我规定了衣服的大小,衣服上的图案大小和其位置拜访呀,与其是什么颜色,是什么图案并没有什么直接关系哟。

而CSS呢就是我衣服的颜色,衣服上的图案样式,和在衣服上的位置关系哟。嘻嘻……是不是比较好理解呢?

<hr>

那为什么要将两者分开规定呢?

当然是为了代码复用性更高了。而对于服装制造厂来说当然是为了流水线化的作业,这样才能在更短的时间创造更多的钱,是不是很诱人呢?


CSS的创建

1、内联样式

我们也知道对于同一类型的衣服会有很多不同的款式,那么我们在流水线化作业的时候我们不可能也不会抽取每一件衣服做相同的操作(除非有趣闲得无聊那另外说!没办法,金主爸爸就是那么牛,我们只能努力赚钱了,呵呵哒……)这就是CCS当中的内联样式,其就是写在标签中,即使对于有相同结构的亦是如此,即繁琐由无意义。那么如何使用呢?&lt;p style="color:sienna;margin-left:20px"&gt;这是一个段落。</p>

2、内部样式

所以我们一般会对同一批次的衣服做统一化操作,但也仅仅是对于这一批次。这就是CSS当中的内部样式,它在&lt;head&gt;标签中定义一个&lt;style&gt;标签,并且在其标签内定义样式。

3、外部样式

而CSS当中还有一个外部样式,那什么是外部样式呢?就像我们阿迪和森马联名出一款限量版衣服,当然两家公司合作谁都不想被别的公司比下去,或者说都想突出自己的特色,毕竟谁都不想做个小透明是吧,嘿嘿……而为了突出自己的特点,肯定是会提出自己的一些要求或者呀?!在产品中使用自己公司的一些标签之类的东东……所以外部样式就是引入外来文件来改变本文件的样式。

大家懂了吗?不懂的话还有度娘娘可以帮到你哟,嘻嘻……


选择器

既然我们要对某些批次的衣服做特殊处理,那么我们怎么选中我需要的批次的衣服呢?所以我们一般会给每一批次的衣服添加一个批号,那么为了选中页面上的标签,CSS会有什么动作呢?当然是选择器呀!!!选择器也是有分类的,可分为类选择器,id选择器,伪类选择器等。

1、类选择器(class选择器)

类选择器顾名思义就是对一类标签做相同处理,比如我将同一批次的衣服做成黑色。

2、id选择器

而id选择器就是类似于对某一件衣服做特殊处理,就是老板的女儿要过生日了,老板呢又是女儿奴了喔,就想为女儿做一个独一无二的衣服,那么工厂为了与其他衣服区分,肯定会给这件衣服做唯一标签以作区分,id选择器就是这样的作用。当然现在浏览器的解释器已经很完善了,即使对多个标签作相同id选择器也不会标签,但作为一个优秀程序员肯定是不会有这样的失误不是吗?嘿嘿……

3、伪类

而伪类选择器是什么呢?

就是我想让衣服在关灯四周是漆黑的情况下可以发光,那么伪类选择器就是在元素特殊状态下的样式变化,就常用到伪类的标签就是&lt;a&gt;标签,我们想点击时鼠标变成手指形状,而点击后该链接变成紫色表示已点击过。

<head>
    <style>
        a:link {color:#000000;}      /* 未访问链接*/
        a:visited {color:#00FF00;}  /* 已访问链接 */
        a:hover {color:#0000FF;}  /* 鼠标移动到链接上 */
        a:active {color:#FF0000;}  /* 鼠标点击时 */
    </style>
</head>

<body>
    <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
</body>

注意: 

(1)a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。

(2)a:active必须在a:hover之后才能看到效果

4、选择器优先级

如果有两个主管都想对衣服做相同操作,那肯定有先后顺序吧,不然肯定会乱套,那么到底听谁的呢?肯定是官大的压小的呀,

那么选择器的作用也是有优先级:内联样式>id选择器>类选择器

 

想要知道CSS更多内容,敬请期待下一节内容哟!!!

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值