只是总结了一些平时容易忘记的知识点,太基础的没摘录,望大家不喜就喷。
0.HTML和CSS
1.标签子元素
/*a盒子下面的第一个b元素,注意b元素必须为a元素下面的第一个元素,否则失效*/
.a > b:nth-child(1){
color:red;
font-size:red;
}
.ul1 > li:nth-child(1):修饰class=ul1的第1个li子元素
.ul1 > li:nth-child(2):修饰class=ul1的第2个li子元素
.ul1 > li:nth-child(3):修饰class=ul1的第3个li子元素
2.边框
boder-radius:设置边框圆角,设置为50%为一个圆;
box-shadow:10px 10px 5px red;/x,y方向偏移量,透明度,颜色/
transition:transform 2s;旋转效果两秒内平滑完成;
transform:rotate(50deg);旋转50度
text-decoration:none 去掉文字的下划线
text-decoration:underline; 下划线
text-decoration:line-through; 删除线
list-style: none;去掉li 的圆心
border:solid 1px red; 设置容器的边框线为1px,实线solid,dashed虚线,dotted点,红色,会占实际宽高
outline:solid 1px red; 设置容器的边框线为1px,实线,红色,不会占实际宽高
line-height:30px;行高,设置文字垂直居中方式,如果行高值等于容器的值就会垂直居中
text-align:center/left/right; 设置文字水平居中方式, 居中/靠左/靠右
letter-spacing:5px; 设置每个字符间距
3.white-space
white-space: normal; 默认空白处理,忽略空白;
white-space: pre;保留空白符;
white-space: pre-line;容器宽度不够时,自动换行
4.background
background-color:black;背景颜色
background-image:url("../images/b.jpg");
background-repeat: no-repeat;背景图不重复
background-repeat: repeat-x;重复水平方向
background-repeat: repeat-y;重复垂直方向
background:url("../images/b.jpg") no-repeat;
5.list-style
list-style:none; 去掉li的圆心
list-style:disc;实心圆
list-style:circle;空心圆
list-style:square;实心正方形
list-style:decimal; 数字1.2.3
6.内外间距
左外间距
margin-left:30px;
margin-top:40px;
上,右,下,左
margin:30px 100px 200px 100px;
内间距
padding:30px 100px 100px 100px;
盒子实际宽高=height/width + padding + border
7.border
border:solid 10px blue;
border-right:solid 10px blue; 右边框线
border-top:solid 10px blue;; 上边框线
border-left:solid 10px blue;;左边框线
border-bottom:solid 10px blue;底部边框线
margin:auto;实现相对外部容器的水平居中
8.选择器
1:ID选择器 #id{}
2:类选择器 .class{}
3:标签选择器 div{}
4:后代选择器
语法:div p
作用:选择 div 里面的所有p元素,不论是第一代,还是第二代
div .p
作用:选择所有div的后代中class="p"的元素,后代不论是第一代,还是第二代
div .p #nav
作用:选择所有div的后代中class="p"的后代中ID=nav的元素
5:子代选择器:
语法:div > p
作用:只选择第一代元素
6:相邻兄弟选择器
语法:div + p
作用:只选择div后面的第一个p元素,注意是相邻的第一个。
7:兄弟选择器
语法:div ~ p
作用:选择div后面的所有p元素
选择器的优先级:标签<类选择器 a标签的几种状态: 1:内部样式 2:行内样式 border-radius:2px; //单位是圆角的弧度 background-size 属性规定背景图片的尺寸。 在 CSS3 中,text-shadow 可向文本应用阴影。 rotate() 方法 transform: rotate3d(1,1,1,50deg); translate() 方法 scale() 方法 skew() 方法 应用于宽度属性的过渡效果,时长为 2 秒: 实例 如果是img只能缩放scale() //针对transform的效果变化全部在2s内完成 动画9.a标签
a:link 未访问状态
a:visited 已访问状态
a:hover 鼠标移上状态
a:active 激活选定状态:鼠标单击但未释放10.样式
10元
3:外部样式
行内样式优先级最高, 内部样式和外部样式谁后加载就优先11.一些常用css3标签用法
border-radius:50%; 圆
box-shadow:10px 10px 5px 颜色
第1,2个参数是设置阴影x,y方向,第3个参数设置阴影的透明度,
第4个参数设置阴影的大小范围,第5个参数设置阴影的颜色。
box-shadow:-5px -5px 20px 2px black;
在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸和容器的大小决定的。
在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
background-size: 200% 200px;
div{
background:url(bg_flower.gif);
}
h1{
text-shadow: 5px 5px 5px #FF0000;
}
通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
div{
transform:rotate(50deg); //旋转50度
}
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:
div{
transform: translate(50px,100px);
}
通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:
实例
div{
transform: scale(2,4);
}
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
实例
div{
transform: skew(30deg,20deg);
}
div{
transition: width 2s;
}
向宽度、高度和转换添加过渡效果:
div{
transition: width 2s, height 2s, transform 2s;
}
transition:0.7s; 所有效果都在0.7秒内过渡完成
div可以直接设置宽高用transition过渡完成
//缩放0.5倍,同时x,y移动50px
transform: scale(0.5,0.5) translate(50px,50px);
transition:transform 1s,width 2s;
//所有效果变化都在2s内完成
transition-duration: 2s;
@keyframes myfirst 定义动画,名称叫myfirst
{
from {background: red;}
to {background: yellow;}
}
把 "myfirst" 动画捆绑到 div 元素,时长:5 秒:
div{
animation: myfirst 5s;
}