CSS3高级选择器：:<style type="text/css">内部css编辑
<h1 style="color:..;">style属性的应用<h1>
<p style=".........">直接在html标签中设置样式</p>
<head><link href="style.css" rel="stylesheet" type="text/css" /></head>链接外部样式表
<head><style>@import url("外部名");</style></head>导入外部样式表
层次选择器: 祖 后代{}后代选择器 父>子{}子选择器 兄弟1+兄弟二相邻兄弟选择器紧接一个元素后，必须相邻兄弟1~兄弟2通用兄弟选择器某元素后所有的兄弟元素 id>类>标签
*{}全局选择器 span,p{}并集选择器
属性选择器：a[xx]{}有xx属性就选中 a[href=""]{}匹配属性的值，就被选中 a[href^=""]{}匹配以xx开头属性的值 a[href$=""]匹配以xx结尾的属性的值 a[href*=""]{}匹配包含的值
结构伪类选择器： first-of-type(选择所以属于其父元素的第一个p类型的元素) :last-of-type(选择说要属于其父元素的最后一个p类型的元素) :first-child(选择所以属于其父元素的第一个子元素的p元素) :last-child(选择所以属于其父元素的最后一个子元素的p元素) :nth-child(n)(选择所有属于其父元素的第n个子元素的p元素) :before(在每个p元素的内容前插入内容) :after(p元素内容之后插入)
&：display:inline-block横向排列 img,span{vertical-align:middle}图片与文本垂直居中对齐 border：1px solid 颜色；边框、
背景： background-color:背景颜色 background-image:url();背景图片 background-repeat:repeat沿水平和垂直两个放向平铺 no-repeat 不平铺只显示一次 repeat-x水平方向平铺 repeat-y垂直方向平铺； background-position:170px 2px ,center默认，right 右上角出现 left bottom左下角出现 top上方水平居中位置出现
css3渐变：linear-gradient(to top 从底到顶 to bottom从顶到底 to left从右到左 to right从左到右 to top left 从右下方到左上方 to top right从左下方到右上方 to bottom left从右上方到左下方 to bottom right 从左上方到右下方 ,颜色，颜色)
背景尺寸：必须要加宽高才可以显示出来 back-size:auto默认150px200px contain按照比列缩放图片 background-size:cover配合background-position:center满屏效果
文字：font-size:字体大小；color：字体颜色；font-family: 隶书 设置字体类型 font-style : normal正常 italic 斜体字 oblique倾斜的字体 字体分格 font-weight :normal,bold,bolder,lighter,100- 字体粗细
字体属性font:分格 粗细 大小 类型 color 颜色 text-align:left左right右center中间justify两端对齐 对齐方式 text-indent:20px 文本首行缩进 line-height: 设置文本的行高 text-decoration:none默认 underline文本下划线 overline上划线 line-through删除线 设置文本的装饰
$:<span>突出文本 p{}标签选择器 <标签名 class="名">内容</标签名> css中 .class名 类选择器
#id名称{} id选择器
超链接样式： a标签名:hover伪类名 {} text-decoration:none无下划线underline有下划线 a:link单击访问前的超链接样式 a:visited单击访问后的超链接样式 a:hover鼠标悬停时的超链接样式 a:active单击未释放的样式 由前到后设置
列表样式：list-style-type:none无标记符号 disc实心圆默认 circle空心圆 square实心正方形 decimal数字; 基本使用list-style:none
盒子模型：border边框 margin外边距 padding内边距 top上 bottom下 left左 right右 盒子属性
边框:border-上-color:边框颜色 border-color：四个边框一个颜色 border-width边框粗细 thin细边框medium默认 thick粗边框 border-上-width:像素值；border-上-style：solid实线 dotted点线 dashed虚线 none无 简写 border：颜色，粗细，样式；
外边距:margin-上:距离值； margin所有外边距 margin:0px auto;盒子居中，必须是块元素并且要设置固定宽度
内边距：padding-上：20px设置内边距
定义盒子尺寸：box-sizing:content-box默认值border-box盒子宽高等于内容宽高inherit继承父元素
圆角边框：border-radius：length{数值}按顺时针顺序 border-radius:50%圆形宽高必须相同 border-radius:50px 50px 0 0；半圆上下元素宽度是高度的两倍 左右相反
盒子阴影:box-shadow:inset阴影类型，设置是内，不设置是外 x-offset正在右，负在左 y-offset正在顶，负在顶 blur-radius阴影模糊半径 值越大越模糊 为0则不模糊 color 阴影颜色
box-shadow:x轴 y轴 模糊半径 颜色 如果不设置x，y的值那么就是四边都有阴影；
display属性的使用：block块级元素的默认值 inline行内元素的默认值 inline-block:行内块元素，具有行块元素特性 none元素不会被显示
float属性：float:left;向左浮动 float:left;向右浮动
清除浮动：clear:left不允许左浮动 right右 both左右两侧不允许浮动; class=“chear” chear:没有副作用
overflow:解决父级边框塌陷问题：属性visible默认 hidden超出内容被修剪，并且不可见 scroll会被修剪，但可以滚动条的形式查看多出内容 auto如果内容被修剪，可以滚动条查看
position属性:定位：static 默认没有定位 relative相对定位在标准文档流中相对于原本位置进行偏移
对其他盒子没有影响 absolute绝对定位 以盒子为基准偏移，脱离文档流，对于其他盒子有影响 fixed固定定位，以浏览器为标准，固定在浏览器上保持不动
position:relative; top:;bottom，垂直方向 left，right水平方向
| -top | |
| -left | 0.0 left top |
可以在父级窗口增加一个相对定位；以父级窗口和绝对定位配合使用
z-index属性改变重叠位置:为0值大在值小上方 一样时则保持原来覆盖关系 层透明度 opacityx:0.1值0-1越小越透明 filter:alpha(opacity=x)x值为0-100越小越透明; |都可以直接x|
CSS3变形: transform:[transform-function]*;2D变形 transform:translate(x,y);位移 scale(x,y)缩放
skew(x,y)倾斜单位用deg表示 rotate(xdeg)旋转正为顺负为逆
CSS3过度：transition-property:指定过度或动态模拟的css属性 -duration:指定完成过度所需要的时间
-timing-function:指定过度函数 -delay:指定过度开始延迟时间；
transition:background-color变色 2s动画时间 过度 函数else由快到慢，逐渐变慢 linear匀速运动 ease-in越来越快 else-out越来越慢 else-in-out先加速再减速 过度延迟时间 3s:正值:过度效果不会立即触发，过了设置的时间后才触发 负值:效果会从该时间点开始显现，之前的动作被截断 0默认值，过度效果立即执行;
过度触发机制：伪类触发：:hover :active :focus :checked等
CSS3动画关键帧:@keyframes IDENT动画名称{ 0%或from 百分比{css内容样式} percentage百分比{css样式} to或几%百分比{css样式}}
调用CSS3动画animation：名称 2s linear animation:动画名称 动画的播放时间 动画的播放方式 开始播放动画的时间 动画的播放次数 动画的播放方向 动画的播放状态 动画时间外属性
具体代码 animation-name 动画名称 -iteration-count动画播放次数通常为整数特殊值：infinite无限
-direction播放方向normal循环向前播放alternate偶数向前，奇数向方播放 -play-state播放状态running和paused播放和暂停 -fill-mode开始之前和结束之后的操作forwards结束后应用最后关键帧的位置 backwards应用动画的初始帧 both同时具有两种
扫一扫
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
