首页 > 代码库 > css3的基本语法和简单妙用
css3的基本语法和简单妙用
选择器
属性选择器：
E[attr=val]
E[attr]
E[attr^=val] 属性值以val开头
E[attr$=val] 属性值以val结尾
E[attr*m=val]属性值含有val,不管在什么位置
伪类选择器：
E：first-child 选中父元素中的第一个E子元素
E:last-child 选中父元素中的最后一个E子元素
E:nth-child(n) 选中父元素中第n个子元素（元素0开始，n从0开始）n(数字，表达式 -5+n,2n+1,odd,even)
E:nth-last-child(n) 选中父元素中倒数第n个子元素（元素0开始，n从0开始）
E:empty 选中内容为空，或没有子元素
E:target 选中锚点的的目标元素
E:not(选择器)
eg:
/*p:first-child 先找父元素 找到所有的子元素 在去找第一个子元素 匹配是不是p 如果不是无效的选择器*/
/*p:first-of-type 先找父元素 找到所有的p元素 找第一个*/
/*p:nth-of-type 第几个*/
/*p:last-of-type 最后一个p*/
/*p:nth-last-of-type 倒数第几个*/
结构选择器：+ ~
E[attrxxxx]+E 选择当前的元素 然后找到相邻的下一个元素
E[attrxxxx]~E 选择当前的元素 然后后面所有的元素
eg：
1 <style> 2 body{ 3 margin: 0; 4 padding: 0; 5 } 6 div{ 7 color: red; 8 font-size: 20px; 9 text-align: center; 10 } 11 /* + 选择到当前的元素然后找到紧邻的下一个元素*/ 12 div:nth-child(3) + div{ 13 color: blue; 14 } 15 16 /* ~ 先选择到某个元素 然后找后面所有的元素*/ 17 /*div ~ div{ 18 color: blue; 19 }*/ 20 </style> 21 </head> 22 <body> 23 <div>1</div> 24 <div>2</div> 25 <div>3</div> 26 <div>4</div> 27 <div>5</div> 28 </body>
伪元素：
：before ：after
推荐单冒号兼容性好
出现省略号：
white-space:nowrap;
overflow：hidden;
text-overflow：ellipsis;
::first-letter 选择首字母
::first-line 第一行
::selection 选中的区域 只能变color和background-color
私有前缀：
webkit chrome safari 新版opera
moz firefox
ms IE
o 老版opeara
透明色：
rgba
opacity 能继承 取值0-1
transparent 完全透明
hsla
h 色调
s 饱和度0-100%
l 亮度 0-100%
a alpha 透明度
阴影
文字阴影
text-shadow:水平位移 垂直位移 模糊程度 颜色
水平位移 值越大越往右 反之往左
垂直位移 值越大越往下 反之往上
模糊程度 值从0开始，越大越模糊
颜色
盒子阴影
box-shadow:水平位移 垂直位移 模糊程度 扩展半径 颜色 内阴影（inset）
水平位移
垂直位移
模糊程度
扩展半径 可以为负值，值越大，扩展半径越大
颜色
内阴影 inset(可选)
盒子尺寸
box-sizing
content-box 盒子的尺寸=CSS中的尺寸+padding+border
border-box 盒子的尺寸=CSS中的尺寸=padding+border+可变的内容尺寸
*, ::before, ::after {
/*防止溢出*/
box-sizing: border-box;
/*盒子的大小从边框开始计算*/
-webkit-box-sizing: border-box;
}
边框
边框半径
border-radius:x x x x/y y y y
正圆:border-radius:50%;
边框图片
border-image-source:url();
切割图片 border-image-slice:
border-image-repeat:round;
背景：
background-size:
数字，百分比，
cover 完全覆盖整个元素，不考虑图片内容是否损失
contain 完全显示图片，不考虑是否覆盖整个元素
background-origin 背景原点(默认是padding-box)
background-clip 背景图片的显示位置
多背景：
background-image:
url("images/bg1.png") left top,
url("images/bg2.png") right top,
url("images/bg3.png") right bottom,
url("images/bg4.png") left bottom,
url("images/bg5.png") center center;
渐变
线性:
（方向，颜色 位置，颜色 位置）
background-image:linear-gradient(to right,red,green);
background-image:linear-gradient(0deg,red,green);
径向：
（半径 at 位置，颜色 位置，颜色 位置）
background-image:radial-gradient(20px at 10px,red,green);
过渡:
transition:过渡属性 过渡时间 过渡延迟 过渡速度
transition-property ..-duration ..-delay transition-timing-function:ease linear ease-in ease-in-out
transition: all 0.2s
过渡all所有变化的属性 0.2s代表属性从初始变化到结束所用的时间
事件:transitionend
2D转换:
1）位移 translateX(),translateY(),translate(X,Y)
2) 旋转 rotate 值越大 是顺时针 反之则逆时针
3）缩放 scale 值越大 放大 反之缩小
4）倾斜 skewX skewY skew
3D转换：
translateZ() translate(X,Y,Z)
视角：perspective
3d转换：transform-style:
flat 2d平面呈现
perserve-3d 3d空间呈现
元素水平和垂直的方向上都居中：
1）如何水平垂直居中一个已知尺寸的元素
position:absolute;
top:50%;
left:50%;
margin-left:-宽的一半
margin-top:-高的一般
2）如何水平垂直居中一个未知尺寸的元素
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
3）利用 flex 布局
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
animation:
1)定义动画：
格式：@keyframes 动画名称{
0%{}
25%{}
50%{}
75%{}
100%{}
}
2)调用动画
复合属性: animation:动画名称 动画总时间 动画延迟 动画速度
动画名称 animation-name 自定义的
动画总时间 animation-duration 时间
动画延迟 animation-delay 时间
动画速度 animation-timing-function ease ease-in ease-in-out linear steps(n)
动画次数 animation-iteration-count 数字 infinite(无线)
动画播放状态 animation-play-state running paused
动画完成时的状态 animation-fill-mode backwards回到最初 forwards停留在最后完成时的状态
动画方向 animation-direction reverse（反方向）
事件:animationend
伸缩布局：
..容器 给某个元素设置display：flex 就是伸缩容器
..项目 伸缩容器中直接的子元素就是伸缩项目
主 轴 默认水平方向，可调整
侧 轴 永远垂直主轴
主轴方向：
flex-direction: row;默认水平
flex-direction: row-reverse;水平反向
flex-direction: column;竖直
flex-direction: column-reverse;竖直反向
伸缩项目在主轴上的对齐方式：
/*主轴对齐方式 开始点对齐*/
justify-content:flex-start;
/*结束点对齐*/
justify-content: flex-end;
/*中心对齐*/
justify-content: center;
/*两端对齐*/
justify-content: space-between;
/*空间环绕*/
justify-content: space-around;
flex-wrap nowrap(不换行) wrap(换行) 默认不换
设置换行后的排列方式
align-content flex-start(起始点对齐) flex-end(终止点对齐) center(居中对齐) space-between(两端对齐) space-around(空间环绕)
设置不换行的排列方式
align-items(侧轴对齐) flex-start(起始点对齐) flex-end(终止点对齐) center(居中对齐) stretch(拉伸)
伸缩项目
1.伸缩项目在伸缩容器中所占的空间
flex:伸缩项目在伸缩容器剩余空间的比例
2.自己排列自己的对齐方式
align-self: flex-start(起始点对齐) flex-end(终止点对齐) center(居中对齐)
3.定义自己的排列顺序
order 值越小，越靠前
em rem:
em:的基准值 16px 默认的字体大小是16px,基准值是相对于父元素来的
rem：的基准值 16px 默认的字体大小是16px
r 是root 根元素的意思 html文档的根元素是 html标签
基准值是相对于来根元素（html）来的
css3的基本语法和简单妙用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。