码迷,mamicode.com
首页 > Web开发 > 详细

h5css样式

时间:2019-12-06 09:16:44      阅读:793      评论:0      收藏:0      [点我收藏+]

标签:ram   orm   倾斜   hit   ima   Fix   偶数   ext   eating   

兼容性前缀:
谷歌:webkit
火狐:moz
ie:ms
欧鹏:o
选择器:
属性选择器:
* = 包含 {href * = ‘www‘}
^ = 以什么开头
$ = 以什么结尾
伪类选择器:
第一个:first-of-type
最后一个:last-of-type
第几个:nth-of-type()
选中前n个:nth-of-type(-n)
选中后5个:nth-of-type(n + 5)
第4个到第8个::nth-of-type(-n + 8):nth-of-type(n + 4)
奇数个:nth-of-type(2n + 1)odd
偶数:nth-of-type(2n)even

子级:
child:first-child
:last-child
:nth-child

空的元素:empty
除了:not()
可用的::not(:disabled) / :enabled
禁用的::disabled
获得焦点::focus
当前激活元素::target
选项卡实例:
<a href="#p1">123123</a>
<a href="#p2">123123</a>
<a href="#p3">123123</a>
<p id="p1">sadadsada23</p>
<p id="p2">3123123123</p>
<p id="p3">31asfegerg123</p>
同级 后一个:+
同级后所有个:~
直系子级:>
所有的元素:*
选中的:checked
第一个字母:first-letter
第一个词:first-word
第一行:first-line

文本:
描边:text-stroke
文字阴影:text-shadow x轴偏移量 y轴偏移量 模糊范围 颜色
盒子阴影:box-shadow x轴偏移量 y轴偏移量 模糊范围 模糊半径 颜色 阴影位置
盒子倒影:box-reflect:above上 、 below下 、 left左 、 right右 偏移量
滤镜:filter:blur()
径向渐变:radial-gradient(circle圆形 / ellipse椭圆 、 半径 、颜色 、 范围)
线性渐变:linear-gradient(方向 颜色 范围)
重复渐变:repeating-

外部字体:@font-face{font-family:; src:url{‘‘}}
单行文本截断:text-overflow:ellipsis(溢出变成3个点) clip(溢出裁减掉)
还有另外两个值:overflow:hidden
white-space: nowrap;
多行文本截断:display: -webkit-box;
text-overflow:ellipsis:
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow:hidden;
强制换行:word-wrap:break-word;

颜色:rgba

边框多色:border-colors
边框图:border-image: 图片路径 url() 、 裁剪大小 、 平铺方式 repeat(重复) round(拉伸)
圆角:border-radius : 左上角:border-top-left-radius
右上角:border-top-right-radius
左下角:border-bottom-left-radius
右下角:border-bottom-right-radius
背景基点:background-origin:border-box 从边框开始 / content-box 从内容区域开始(默认值) / padding-box 从内边距开始
背景裁剪:background-clip:border-box 从边框开始 / content-box 从内容区域开始(默认值) / padding-box 从内边距开始
背景大小:background-size:宽度 / 高度 contain按宽平铺/cover按高平铺(重点)
背景固定方式:background-attachment:fixed不随着滚动条滚动而滚动/scroll随着滚动条滚动(重点)
背景:background : 多个背景用逗号隔开

变形:transform:位移translate、旋转rotate、缩放scale、倾斜、skew
过渡:transition:
过渡属性transition-property all所有的 每一组用逗号隔开
过渡时间transition-duration
过渡延迟transition-delay
过渡运动方式:transition-timing-function
1.ease加速 2.ease-in加速 3.ease-in-out先加速后减速 4.linear匀速 5.ease-out减速 6.cubic-bezier贝塞尔曲线
动画:animation
动画名称:animation-name
动画时间:animation-duration
动画次数:animation-iteration-count infinite无限
动画方向:animation-direction normal 正向 reverse 反向 alternate 来回(一次正一次反)
动画状态:animation-play-state running运动 paused暂停
动画的运动方式:animation-timing-function:
1.ease加速 2.ease-in加速 3.ease-in-out先加速后减速 4.linear匀速 5.ease-out减速 6.cubic-bezier贝塞尔曲线
动画时间外状态:animation-fill-mode
forwards 动画结束时停在最后一帧
backwards 动画结束时返回到第一帧
both 动画立即执行第一帧,结束时停在最后一帧
none 结束完之后无
写动画:@keyframes

多列布局:columns
间隙:column-gap
列数:column-count
列宽:column-width
边框:column-rule
边框样式:column-rule-style
边框粗细:column-rule-width
边框颜色:column-rule-color
跨列:column-span

弹性盒子:display:flex;
父盒子:
方向:flex-direction
row/row-reverse/column/column-reverse
横向对齐方式:justify-content
flex-start左对齐 / flex-end右对齐 / center居中对齐 /space-between两端对齐 / space-around等间距对齐
纵向对齐方式:align-items
flex-start上对齐 / flex-end下对齐 / center居中对齐 / stretch等高 / baseline基线对齐
纵向行对齐方式:align-content
flex-start左对齐 / flex-end右对齐 / center居中对齐 /space-between两端对齐 / space-around等间距对齐
换行:flex-wrap
wrap换行 / nowrap不换行
缩写(方向和换行的缩写):flex-flow
子盒子:
扩展空间:flex-grow(对剩余空间进行划分)
压缩空间:flex-shrink
1份宽度 = (子元素总宽-容器宽)/总份数(每个元素占一份,flex-shrink:3 + 2)
压缩后的空间 = 子元素宽 - 1份宽度 * 份数
宽度:flex-basis
缩写:flex 先写扩展空间、再写压缩空间、最后写宽度

顺序:order 值越小越靠前,越大越靠后 可以是负数,不可以为小数
单独样式:align-self

媒体查询:
@media (min-width)and(max-width){}
screen屏幕
all所有的
prient打印设备

h5css样式

标签:ram   orm   倾斜   hit   ima   Fix   偶数   ext   eating   

原文地址:https://www.cnblogs.com/xiewangfei123/p/11993131.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!