CSS部分
CSS样式书写方式
嵌入样式< style >< /style >里面
内联样式(行内式)写在style:” “里面
外联样式通过< link rel=”stylesheet” href=”” >引入
###样式
width:宽
height:高
padding:内边距(看情况可以参考margin)
margin:外边距
margin:10px;四个方向都是10px;
margin:10px 20px;上下10px 左右20px
margin:10px 20px 30px; 上10px 左右20px 下30px
margin:10px 20px 30px 40px 四个值上右下左
也可以单独书写某一个方向的值:margin-top: ;margin-left: ;margin-right: ;margin-bottom: ;
特殊情况盒子水平居中margin:100px auto;盒子一定要有宽度。
border:边框
border,三个值 线粗细 线样式 线颜色.
3要素,4条边。
3要素:border-width、border-style(solid dashed dotted)、border-color;
4条边:border-top、border-right、border-bottom、border-left。
Opacity:文字和背景都变
###Background:背景
background: rgba(0, 0, 0, 1.0)背景变透明
包含四个值
1 background-color背景颜色
2 background-image背景图片
3 background-repeat是否平铺
4 background-position图片位置
5 background-size背景图片大小
line-height:行高。单行文字在盒子垂直居中
Text-align:center文字水平居中
font
Font-size:字体大小;
Font-weight:bold加粗
Font-weight:normal正常
Font-style:italic;文字倾斜
Font-style:normal正常
Text-decoration:none不加下划线;
Text-decoration:underline下划线
Font-family:设置字体;
Color:文字颜色
显示效果
Display:none;隐藏
Display:block;转化成块级元素也可以是显示的意思
Display:inline;转化成行内元素
Display:inline-block转化成行内块
Cursor:pointer;小手;
overflow:hiddden
1、溢出隐藏(百度图片展示)
2、清除浮动影响(子级元素浮动之后,父级检测不到子级元素的高度,加此属性可以解决浮动影响)
3、解决外边距塌陷(子级元素接了上外边距之后父级跟着下来)
4、滚动条
Overflow-X:auto(hidden)出现滚动条或者溢出隐藏
Overflow-Y:auto(hidden)
盒子投影
shadow
Box-shadow:水平方向光照 垂直方向的光照 羽化程度 颜色;
文本投影
Text-shadow: 水平方向光照 垂直方向的光照 羽化程度 颜色
三大动画模块
转化模块:
关键属性:Transform:
属性值:
Translate(0px,0px)
rotate(30deg)旋转
scale()缩放
值与值之间用空格隔开
也可以书写XYZ一个方向(具体参考音乐盒的制作)
Transform-origin:center center;旋转中心点。
过渡模块
关键属性:
Transition:all 时间;
过渡模块书写步骤:(不是只有一种写法,可以通过增加删除类来控制,具体参考千寻案例)
1、 书写默认样式
2、 触发之后的样式:hover
3、 回到默认样式书写transition:all 时间(all也可以单独改成某一个属性:比如:width)
动画模块:
关键属性:animation:name 时间 linear(平缓) infinite(循环)
使用步骤:
- 定义动画:@keyframes name {
a) 每一帧的状态
b) 每一帧都是一个样式条
} - 使用动画:animation:name 时间 linear(平缓) infinite(循环)
3D效果
transform-style:preserve-3d可以让其内部的元素以该元素作为参照物进入三维坐标
Border-radius:5px;
出现圆角(可以四个不同的值:左上 右上 右下 左下)
Border-radius:50%;变成圆形
所有css3的属性前面都要加私有前缀:-moz-,-ms-,-o-,-webkit
也就是都要写五遍浮动
Float:left;左浮动:脱离标准流
Float:right;右浮动:脱离标准流
浮动之后的元素可以给宽高
浮动之后同级元素也要浮动
###相对定位
就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。
相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘。
相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用:
1) 微调元素
2) 做绝对定位的参考,子绝父相
一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点。
要听最近的已经定位的祖先元素的,不一定是父亲,可能是爷爷:
不一定是相对定位,任何定位,都可以作为参考点
定位之后(固定或绝对)盒子居中
当做公式记忆下来。就是
left:50%; margin-left:负的宽度的一半。
top:50%; margin-top:负的高度的一半。
###固定定位
fixed,就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。
固定定位坐标!
###z-index
表示谁压着谁。数值大的压盖住数值小的。
● 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。
● z-index值没有单位,就是一个正整数。默认的z-index值是0。
● 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。选择器
标签(直接书写标签名字)
P{
}
Id(命名:id=””,选择的时候通过#ID名字,id具有唯一性,类似我们的身份证号码)
“#ID”名字{
}
类名(命名:class=””,选择的时候通过.类名字,类名可以重复,类似我们的名字)
.类名{
}
Div p 空格 后代
Div>p子代
H3.special 交集选择器
H3,h1并集选择器
“*”通配符,选择所有标签
###继承性。
有一些属性给祖先元素,所有的后代元素都集成上了。
哪些属性能继承:color、font-、text-、line-
层叠性。
层叠性是一种能力,就是处理冲突的能力。当不同选择器,对一个标签的同一个样式,有不同的值,听谁的?这就是冲突。css有着严格的处理冲突的机制:
■ 选择上了,数权重,(id的数量,类的数量,标签的数量)。如果权重一样,谁写在后面听谁的。
■ 没有选择上,通过继承影响的,就近原则,谁描述的近听谁的。如果描述的一样近,比如选择器权重,如果权重再一样重,谁写在后面听谁的。
!important标记
!important提升的是一个属性,而不是一个选择器