![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
css相关
曾吹雨
这个人很不懒,什么都想写~~
展开
-
css的优先级及复合选择器权重计算
css优先级优先级公式优先级:继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important注意: 如果加!important只提高加了的这个属性的优先级, 而且其他的属性还是按照我们的优先级排列Important例子: color: yellow !important;1,Css继承的样式>默认的样式2,通配符读选择器样式的优先级>继承的样式3,标签选择器的优先级>通配符选择器的优先级4,类选择器样式的优先原创 2020-07-30 23:16:44 · 793 阅读 · 0 评论 -
display可以控制标签的显示模式
-display:none|inline|block|inline-block-继承性:无-display值的解释:~none:此元素不被显示,此文档中被移除。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间~block:此元素按块级元素显示:前后换行符,自己占一行。内联元素–>块元素~inline:此元素按内联元素显示:1个挨着1个。块元素–>内联元素~inline-block:按行内标签进行排版,但是可以设置宽高,而且高度可以影响行高 displ原创 2020-07-30 23:57:00 · 409 阅读 · 0 评论 -
css选择器总结(内附实例及截图)
目录通配符选择器ID选择器类选择器ID选择器跟类选择器的区别复合选择器5.1 标签指定式选择器(即…又…)5.2 后代选择器(包含选择器)(重点)5.3 并集选择器(常用)5.4 子代选择器5.5 交集选择器属性选择器通配符选择器通配符选择器用“*”表示,它是所有选择器中作用最广的,能匹配页面中所有的元素,基本语法如下:*{ 代码块}通配符选择器的穿透力很强,优先级高于继承的样式,会覆盖继承的样式,一般不用ID选择器HTML标签中I原创 2020-07-30 21:21:01 · 362 阅读 · 0 评论 -
css伪元素总结(内附实例)
目录:first-line:first-letterfirst-child:before与 :after:selection伪元素是控制内容:first-line控制第一行的元素样式:first-letter控制第一个元素的样式first-child选择属于第一个子元素的元素设置样式/* 选择第一个孩子是span标签的元素 */ span:first-child{}:before与 :after可以设置元素之前之后的内容,并且配合conte原创 2020-07-30 23:04:32 · 335 阅读 · 0 评论 -
css伪类总结
目录:linkhover (重点)activevisitedfocus-:nth-child()伪类:link伪类将应用于未被访问的链接。IE6不兼容,解决此问题直接使用a标签/* 未被访问过的超级链接 */ a:link { color: red; }hover (重点)伪类将应用于有鼠标指针悬浮停于其上的元素。在IE6只能应用于a连接,IE7+所有元素都兼容/* 鼠标停留在超级链接后出现原创 2020-07-30 21:34:31 · 154 阅读 · 0 评论 -
css颜色跟背景总结(内含实例及截图)
目录css颜色表示1.1 命名颜色1.2 RGB颜色表示法1.3 十六进制颜色制1.4 rgba有关背景相关属性2.1 背景颜色2.2 背景图2.3 图像重复background-repeat属性2.4 背景图像位置background-position属性2.5 Background-attachment背景附件属性2.6 背景连写2.7 多背景1.css颜色表示1.1 命名颜色直接采用某个颜色的英文单词命名-transparent 透明色-red,black…原创 2020-07-31 10:53:08 · 444 阅读 · 0 评论 -
原生js制作PC端轮播图
功能分析1.鼠标经过离开轮播图左右按钮显示隐藏2.点击左侧按钮图片向左播放一张,右边同理3.拖欠播放同时,下面的小圆圈也跟着变化4.点击小圆圈,播放相应的图片5.鼠标不经过轮播图,轮播图自动播放6.鼠标经过轮播图,自动播放停止HTML标签的结构及css样式 <div class="box"> <!-- 左侧按钮 --> <a href="javascript:;" class="arrow-l"> &原创 2020-07-30 20:27:26 · 297 阅读 · 0 评论 -
css文本外观属性大全(内附实例与图解)
目录letter-spaceing:字间距Word-spacing:单词间距line-height:行间距text-decoration:文本修饰text-align:水平对齐方式text-indent:首行缩进white-space:空白符处理Word-break:自动换行text-Shadow:文字阴影overflow 文字溢出text-overflow 文字溢出处理letter-spaceing:字间距Letter-spac原创 2020-07-31 15:02:45 · 3390 阅读 · 0 评论 -
制作封装缓动画函数
利用JavaScript制作轮播图先封装好一个缓动画函数该函数可以有三个输入,分别是目标对象obj、目标距离target以及回调函数callback每次调用时停止定时器防止因为开启太多定时器导致速度越来越快缓动画的核心算法就是(target - obj.offsetLeft)/ 10注意将步长改成整数,否则会出现动画长度不准确问题代码如下 function animate(obj,target,callback) { // 先清除以前的定时器 cl原创 2020-07-27 15:27:56 · 135 阅读 · 0 评论 -
css字体样式属性大全(内附实例)
目录font-size:字号大小font-family:字体font-weight:字体粗细font-style:字体风格综合设置字体样式font-size:字号大小font-size 属性用于设置字体字号,该属性的值可以使用相对长度单位,也可以使用绝对单位长度,其中,相对单位比较常用,推荐使用像素单位px,绝对单位使用较少可选参数值:xx-small|x-small|small|medium|large|x-large|xx-large|smaller|la原创 2020-07-31 00:08:53 · 3625 阅读 · 0 评论 -
vscode常用emmet语法及快捷键
ul>li>a >表示父子关系效果: <ul> <li><a href=""></a></li> </ul>批量生成: ()表示数量,Lu>(li>a)*3效果: <ul> <li><a href=""></a></li> <li>.原创 2020-07-30 20:42:24 · 945 阅读 · 0 评论