css是层叠样式表。
层叠样式表,(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用),或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时,以html为后缀名进行保存即可。
CSS,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
工作原理:
CSS是一种定义样式结构,如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式,从而实现级联效果。
以上内容参考:百度百科-CSS
在网页中我们经常看到鼠标划上时会显示一些网页中一开始没有的东西,例如二级菜单,或者鼠标划上图片时会显示一些淡入淡出的效果
问:这是怎么原理实现的?
其实就是显示和隐藏
问:那么这个现实和隐藏如何实现呢?
其实方法有很多,下面我来带着大家看一下每种实现方式和其不同点
无论使用哪一种方式实现,首先这个东西必须先存在,我们先在结构中存在
一级导航
二级导航 二级导航 二级导航
这样的结构写法在我们的页面中一开始是所有的导航都是显示的
我们想要实现一开始只显示一级导航效果,当鼠标划上一级导航的时候显示二级导航效果
方法一:用display:none和display:block方式实现
一开始给p标签一个display:none
当鼠标划上div时让p标签显示 div:hover p{display:block}
注意:此方式可以实现显示和隐藏的效果,但是不支持过渡效果,也就是你不能看到逐渐显示的过程
方法二:用opacity:0; opacity:1方式实现
一开始给p标签一个opacity:0
当鼠标划上div时让p标签显示 div:hover p{opacity:1}
注意:此方式可以实现显示和隐藏的效果,支持过渡效果,在p标签的初始状态上加上一个transition:1s你是可以看到从无到有淡入淡出的效果的
>need-to-insert-img
方法三:用height:0; height:100px方式实现
一开始给p标签添加一个height:0但是由于里面有二级菜单的内容文字所以会存在溢出,添加一个overflow:hidden即可解决
当鼠标划上div时让p标签显示 div:hover p{height:100px}
注意:此方式可以实现显示和隐藏的效果,支持过渡效果,在p标签的初始状态上加上一个transition:1s你是可以看到类似于卷帘门从上向下拉的效果。
哈哈是不是学到了,好了不说了,老铁们自己看着办法,反正我把方式方法都告诉大家了,是收藏还是点赞。