CSS CSS3
布局属性
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100 !important为最高权值important;
a:link一般状态 a:visited点击后 a:hover鼠标经过时 a:active:点击时
list-style-type:none;去点 list-style-image列表图片 list-style-position:900px;列表图片位置
背景颜色background-color:;字体颜色color:; 边框颜色border-color:;
display:none;显示为无block显示 display:block;区块 display:inline-block;行内块元素
绝对定位(position:absolute)相对定位(position:relative)固定定位(position:fixed) placement-top:1px;放置绝对定位
text-align:center;水平居中 vertical-align: middle;把此元素放置在父元素的中部。left;左:right;右 opacity: 0.6;透明
font-weight:bold;字体加粗 italic=斜体 font-size:;字体大小 line-height:;行高
background-repeat:no-repeat;背景图不重复 repeat全图 repeat-x repeat-y 背景位置background-position:先x left后y center;
background:url(images/9821.png ) no-repeat left bottom 20px,url(images/9821.png )left top;多重背景语法
background-size:100%;背景图片大小 background-size:cover;以背景图最适合的比例铺满整个屏幕
background-attachment: fixed;背景图片固定在相应位置 z-index: 99;加大层叠权值
background-origin: content-box;从填充 background-origin: padding-box; 从外边框 background-origin: border-box;从内边框 (背景图的开始位置)
padding:填充;margin:边界;auto居中 上右下左如顺时针,padding:20px 10px 15px 30px; 上下 左右一样padding:10px 20px box-sizing:border-box;让填充在内边距
overflow: scroll;溢出的将以卷动滚动条的方式呈现 hidden;隐藏溢出容器的内容且不出现滚动条 auto;当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条
text-decoration:underline;下划线 overline=上划线 line-through=中划线 text-indent:2em;段落缩进
中文、字母间距letter-spacing:50px;英文单词间距word-spacing:50px; width:宽度; heigh:高度;
浮动=float:left;左,float:right;右 防止浮动上来=overflow:hidden;clear:both;消除左右浮动
边框=border:solid;实线,dashed(虚线),dotted(点线) border:1px solid #fff;
border-radius:圆角;
CSS3动画属性
transition: all=全部 color=颜色 1s过度时间 规定速度效果的速度曲线。 定义过渡效果何时开始;
transition-property:width; 规定设置过渡效果的CSS属性的名称
transition-duration: 5s; 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function: linear;
规定速度效果的速度曲线。linear(默认)规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1))。
ease规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))
ease-in-out规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay: 2s;延迟2秒执行效果
transform-style: preserve-3d;设置为3D效果 perspective: 1000px;景深
transform:scale(1.2);放大先X后Y 1.2=X和Y rotate(-30deg)=旋转 translateZ(100px)=偏移 translate(X,Y)=偏移
transform-origin:x y z;设置动画基准点
@keyframes=定义动画 go=名称{ 0%{transform:tranlateX(0px);} 50%{transform:tranlateY(300px);} 100%{transform:tranlateY(0px);}} }
animation:name=定义名称 10s=动画总共时间 innear=匀速 ease-in=快到慢 ease-out=慢到快 ease-in-out=慢快慢
1s=延迟播放 infinite=无线播放(或者设置2次 20) alternate=反向播放;
animation-play-state:paused;=动画暂停animation-fill-mode:forwards;停留最后一针 animation-fill-mode:backwards;在第一针位置等待
CSS3阴影属性
text-shadow: 0px 3px 5px rgba(0,0,0,0.5);阴影代码 可以多重阴影如text-shadow: 0px 3px 5px rgba(0,0,0,0.5),0px 3px 5px rgba(0,0,0,0.5);
第1个长度值用来设置对象的阴影水平偏移值。可以为负值 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 rgba(0,0,0,0.5);颜色
box-shadow:;是背景阴影 text-shadow:;是内容阴影
CSS3 选择器
子选择器即大于符号(>),用于选择指定标签元素的第一代子元素 .first>span{border:1px solid red;}内容
p:target选择器可用于选取当前活动的目标元素。 当点击 a链接 跳转的目标元素样式就会激活
例子跳转至内容 1
内容 1...
E::first-line 伪元素选择器 选择匹配E元素内的第一行文本
E::first-letter 伪元素选择器 选择匹配E元素内的第一个字符
E::before 伪元素选择器 在匹配E的元素前面插入内容
E::after 伪元素选择器 在匹配E的元素后面插入内容
使用E::before与E::after 为类选择器需要配合( content属性来使用)content: "hello "
更深入的例子div:hover::before { content: ''; height: 100%; top: 0; left: -5000px; position: absolute; width: 10000px; z-index: -1; }
:first-child选择某个元素的第一个子元素;
:last-child选择某个元素的最后一个子元素;
:nth-child()选择某个元素的一个或多个特定的子元素;:nth-child(4n+1)隔三选一 :nth-child()不支持负数
第一个参数是代表从第几个参数开始选取):nth-child(2n)==:nth-child(even)"选择偶数 :nth-child(2n+1)"和":nth-child(odd)" 选择奇数
:nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
:nth-of-type()选择指定的元素;如( div p ::nth-of-type ) 或 :nth-of-type(even) 偶尔 odd 是奇数
:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
:first-of-type选择一个上级元素下的第一个同类子元素;
:last-of-type选择一个上级元素的最后一个同类子元素;
:only-child选择的元素是它的父元素的唯一一个了元素;
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
:empty选择的元素里面没有任何内容。
E[attr]:只使用属性名,但没有确定任何属性值;
E[attr="value"]:指定属性名,并指定了该属性的属性值;
E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面
E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);
E[attr][attr="value"]( 可以有多个匹配 这样只要是同时具有这两属性的元素都将被选中)
CSS3 弹性盒布局
display:flex;新版弹性盒模型 flex-direction:row;设置主轴为水平方向 flex-direction:column;设置主轴为垂直方向
flex-direction:row-reverse;设置主轴为水平反向排序 flex-direction:column-reverse;设置主轴为垂直反向排序
flex-wrap:no-wrap不换行wrap换行; 指定子元素是否换行
justify-content:flex-start;元素在主轴开始位置 justify-content:flex-end;元素在主轴结束位置 justify-content:center;元素在主轴中间 justify-content:space-between;富裕空间平均分配在每两个元素之间 justify-content:space-around;富裕空间平均分配在每个元素两侧
align-items:flex-start;元素在侧轴开始位置,富裕空间在侧轴结束位置 align-items:flex-end;元素在侧轴结束位置,富裕空间在侧轴开始位置
align-items:center;元素在侧轴中间,富裕空间在侧轴两侧 align-items:baseline;根据侧轴方向上文字的基线对齐
flex-grow:1;弹性盒空间(2两倍弹性空间) order: 1;排列顺序,数值小的排在前面(允许负值)
flex-shrink:0;属性都为1,当空间不足时,都将等比例缩小。为0时则不会缩小
align-self: center;用于覆盖父级指定的布局方式
display:-webkit-box;老版弹性盒模型 -webkit-box-orient:horizontal;设置主轴为水平方向 -webkit-box-orient:vertical;设置主轴垂直平方向
-webkit-box-direction:reverse;反序排序 老板弹性盒模型需要两条 -webkit-box-orient:horizontal; -webkit-box-direction:reverse; 配合使用 并且不以边界为起点
-webkit-box-pack:start;元素在主轴开始位置,富裕空间在主轴结束位置 -webkit-box-pack:end;元素在主轴结束位置,富裕空间在主轴开始位置
-webkit-box-pack:center;元素在中间,富裕空间在主轴两侧 -webkit-box-pack:justify;富裕空间平均分配在每两个元素之间
-webkit-box-align:start;元素在侧轴开始位置,富裕空间在侧轴结束位置 -webkit-box-align:end;元素在侧轴结束位置,富裕空间在侧轴开始位置
-webkit-box-align:center;元素在侧轴中间,富裕空间在侧轴两侧
-webkit-box-flex;弹性盒空间 -webkit-box-ordina-group;元素具体位置
HML HTML5标签
meta 移动端设置标签
name="viewport"窗口设定 width=device-width页面大小屏幕等宽 initial-scale=1初始化比例大小
minimum-scale=1.0允许缩放的最小比例 maximum-scale=1.0允许缩放的最大比例 user-scalable=no用户是否可以缩放
常用HTML5标签
contenteditable="true" 给某个元素加上该属性就变成可编辑状态
导航条标签
页面主题内容标签
底部导航标签
标记时间
进度条标签 value值可以用来控制进度条
[if !supportLists]• [endif]
[if !supportLists]• [endif]controls : 显示或隐藏用户控制界面
[if !supportLists]• [endif]autoplay : 媒体是否自动播放
[if !supportLists]• [endif]loop : 媒体是否循环播放
[if !supportLists]• [endif]currentTime : 开始到播放现在所用的时间
[if !supportLists]• [endif]duration : 媒体总时间(只读)
[if !supportLists]• [endif]volume : 0.0-1.0的音量相对值
[if !supportLists]• [endif]muted : 是否静音
[if !supportLists]• [endif]autobuffer : 开始的时候是否缓冲加载,autoplay的时候,忽略此属性
[if !supportLists]• [endif]paused : 媒体是否暂停(只读)
[if !supportLists]• [endif]ended : 媒体是否播放完毕(只读)
[if !supportLists]• [endif]error : 媒体发生错误的时候,返回错误代码(只读)
[if !supportLists]• [endif]currentSrc : 以字符串的形式返回媒体地址(只读)
[if !supportLists]• [endif]play() : 媒体播放
[if !supportLists]• [endif]pause() : 媒体暂停
[if !supportLists]• [endif]load() : 重新加载媒体
[if !supportLists]• [endif](Video额外特性)
[if !supportLists]• [endif]poster : 视频播放前的预览图片
[if !supportLists]• [endif]width、height : 设置视频的尺寸
[if !supportLists]• [endif]videoWidth、videoHeight : 视频的实际尺寸(只读)
[if !supportLists]• [endif]
插入音频
分行 空格
水平横线
创建表格的四个元素table、tbody、
:表格的一行 td表格的一个单元格
当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才会显示。
HTML(表单标签)