资讯专栏INFORMATION COLUMN

css3重要语法汇总

zhiwei / 982人阅读

摘要:属性指定了列与列间的边框样式属性指定了两列的边框厚度属性指定了两列的边框颜色属性是所有属性的简写。属性指定了列的宽度。多媒体查询代码除那些设备特定的媒体类型代码

线性渐变

linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet)
linear-gradient(指定渐变方向, 颜色的起点,颜色的结束)

文本溢出于省略标记

text-overflow:ellipsis; (溢出文本显示省略号)
overflow:hidden; (溢出内容为隐藏)
white-space:nowrap; (强制文本在一行内显示)

文字与字体之嵌入字体

@font-face {

font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;

}

文字与字体之文本阴影

text-shadow: 水平偏移距离 垂直偏移距离 模糊程度 颜色

背景图片裁剪
background-clip : border-box | padding-box | content-box | no-clip
background-clip : 边框 | 内填充 | 内容 | 不裁剪

属性选择器通配符

a[属性^="value"] 以value开头
a[属性$="value"] 以value结尾
a[属性*="value"] 任意位置

结构性伪类选择器
子选择器 例如#a>p 选择#a的所有子类(直接子类)

相邻选择器 选择紧接在另一个元素后的元素,有相同的父元素。只选择第一个相邻的匹配元素

~ 匹配选择器 例如#b~p匹配所有在#b元素之后的所有p元素
:root 选择当前匹配元素根元素 :root === html
:not 选择除某个元素之外的所有元素 input:not([属性="value"])
:empty 用来选择没有任何内容的元素
:first-child 选择父元素的第一个子元素
:last-child 选择父元素的最后一个子元素
:nth-child(n) 定位某个父元素的一个或多个特定的子元素 ,其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)
:nth-last-child(n) 从某父元素的最后一个子元素开始计算,来选择特定的元素。
:first-of-type 定位一个父元素下的某个类型的第一个子元素
:nth-of-type(n) 定位于父元素中某种类型的子元素
:last-of-type 选择是父元素下的某个类型的最后一个子元素
:enabled 对可用状态表单元素设置样式
:disabled 对不可用状态表单元素设置样式
:checked 对选中状态元素设置样式
::selection 突出显示的文本
:read-only 指定处于只读状态元素的样式 元素中设置了“readonly=’readonly’”
:read-write 指定当元素处于非只读状态时的样式。
::before和::after 用来给元素的前面或后面插入内容

CSS3变形

旋转rote()
扭曲 skew()
缩放 scale()
位移 translate()

css3动画过渡属性

transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
transition :简写属性设置四个过渡属性
transition(transition-property,transition-duration,transition-timing-function,transition-delay)
transition(css属性,过渡时间,过渡函数,延迟时间)
transition(all 0 ease 0)默认

css3动画

Keyframes:关键帧 @keyframes 动画名称{…}
animation-name:动画名称
animation-duration: 动画时间
animation-timing-function:动画播放方式
animation-delay:定义动画开始播放时间
animation-iteration-count:设置动画播放次数
animation-direction:动画播放方向
animation-play-state:播放状态
animation-fill-mode:定义在动画开始之前和结束之后发生的操作

css3多列

column-count:指定了需要分割的列数。
column-gap 属性指定了列与列间的间隙。
column-rule-style 属性指定了列与列间的边框样式:
column-rule-width 属性指定了两列的边框厚度:
column-rule-color 属性指定了两列的边框颜色:
column-rule 属性是 column-rule-* 所有属性的简写。
column-width 属性指定了列的宽度。

css3多媒体查询

@media not|only mediatype and (expressions) {

CSS 代码...;

}
@media 除那些设备|特定的媒体类型 and (expressions) {

CSS 代码...;

}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113131.html

相关文章

  • GitHub 值得收藏的前端项目[每月更新...]

    摘要:也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的,响应式的组件,你可以在网页的项目上到处使用一个可定制的文件,使浏览器呈现的所有元素,更一致和符合现代标准。 GitHub 值得收藏的前端项目 整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,本篇文章会持续更新,版权归原作者所有。欢迎github star与fork 预...

    maxmin 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • 可能是最全的前端动效库汇总

    摘要:非常的庞大,而且它是完全为设计而生的动效库。它运行于纯粹的之上,是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具,它支持大量的浏览器,只要它们支持和特性。可以通过安装吊炸天了,接近现实生活中的物理运动碰撞惯性动画库。 收集日期为2019-02-28,★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库,是许多基础动...

    afishhhhh 评论0 收藏0
  • 个人分享--web前端学习资源分享

    摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...

    sherlock221 评论0 收藏0

发表评论

0条评论

zhiwei

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<