a:hover{
color:red;
font-size:20px;
}
链接字体颜色大小
<marquee></marquee>滚动字条
<hr> 分割线
空格
<img src=""> 插入图片
<embed src=""> 插入视频
float:left;
padding-right:0.5px;
图片悬浮 与文字间距
title:显示图片名称alt
设置背景颜色,transparent表示透明:{background-color:transparent|color}
插入背景图片:background-image: url(84039d9d4c68de1dab34f6f5c4_560.jpg)
背景图片重复:background-repeat:repeat水平和竖直方向都平铺
repeat-x水平平铺 repeat-y竖直平铺 no-repeat不重复平铺
背景图片显示:background-attachment:fixed固定在页面的可见区域里
scroll随页面一起滚动
背景图片位置:background-position legth设置图片与边距水平和垂直方向的距离
percentage以页面元素框的宽度或者长度的百分比放置图片
top,center,bottom,left,right
背景图片大小:background-size:length percentage,cover,contain
边框样式: border-style:dashed破折线 dotted点线 solid直线 double双线 groove 槽线式 Ridge脊线式 inset内嵌 outset突起效果
border-width线宽
设置背景颜色,transparent表示透明:{background-color:transparent|color}
插入背景图片:background-image: url(84039d9d4c68de1dab34f6f5c4_560.jpg)
背景图片重复:background-repeat:repeat水平和竖直方向都平铺
repeat-x水平平铺 repeat-y竖直平铺 no-repeat不重复平铺
背景图片显示:background-attachment:fixed固定在页面的可见区域里
scroll随页面一起滚动
背景图片位置:background-position legth设置图片与边距水平和垂直方向的距离
percentage以页面元素框的宽度或者长度的百分比放置图片
top,center,bottom,left,right
背景图片大小:background-size:length percentage,cover,contain
边框样式: border-style:dashed破折线 dotted点线 solid直线 double双线 groove 槽线式 Ridge脊线式 inset内嵌 outset突起效果
border-width线宽
超级链接伪类:a:link未被访问时的样式
a:hover鼠标悬停时的样式
a:active激活时的样式
a:visited被访问过的样式
a:hover鼠标悬停时的样式
a:active激活时的样式
a:visited被访问过的样式
鼠标样式:auto自动 crosshair精确定位十字 default默认鼠标指针
hand手形 move移动 help帮助 wait 等待 text文本
n-resize箭头朝上双向 s-resize箭头朝下双向
w-resize箭头朝左双向 e-resize箭头朝右双向
ne-resize右上 se-resize右下 nw-resize左上 sw-resize左下
pointer指示 url自定义
hand手形 move移动 help帮助 wait 等待 text文本
n-resize箭头朝上双向 s-resize箭头朝下双向
w-resize箭头朝左双向 e-resize箭头朝右双向
ne-resize右上 se-resize右下 nw-resize左上 sw-resize左下
pointer指示 url自定义
*父元素只设置了宽,没有设置高,子元素浮动,使父元素包住子元素的方法:
1.父级元素设为inline-block,缺点是margin:0 auto;失效,用text-align:center居中
2.父级元素也浮动,缺点是margin:0 auto失效
3.父级元素设置高
4.设置br标签 <br clear="all"/> 不推荐使用
5.clear:both;父元素后面加<p style="clear:both"></p> 不符合标准
6:父元素:after{content:"";display:block;clear:both;}
*定位的三种特性
相对定位 relative
1.不影响本身特性
2.不使元素脱离文档流
3.提升层级
4.无法触发bfc
5.针对自己本身进行定位
绝对定位 absolute
1.会是元素完全脱离文档流
2.内容撑开宽度和高度
3.使元素支持所有CSS样式
4.提升层级
z-index:数值 定位层级设置 数字越大层级越高
5.绝对定位要和相对定位配合使用
6.如果有定位父级,针对定位父级发生偏移,没有定位父级,针对document进行偏移
7.如果绝对定位的子级有浮动,可以省略清除浮动
固定定位 fixed
1.不兼容IE6
2.针对窗口定位
*兼容性
1.在IE下大部分兼容性都是因为haslayout属性触发的问题,尽量触发haslayout属性 zoom:1;可以触发,
在IE下父级有边框时,子元素margin会失效,需要触发父级haslayout属性。
2.盒子模型数据要精准
3.IE6下双边距的bug:块元素有浮动,横向margin值会扩大二倍,解决方法:display:inline
4.margin-left 一行中左侧第一个元素有双边距 display:inline
5.在IE6,7下,li本身没有浮动,li里面内容有浮动,li下会产生一个间隙。解决:给li加浮动。或者加vertical-align:top
6.当一行子集元素之和与父级的宽度相差3px,或者子级元素不满行的情况,最后一行子级元素的margin-bottom会失效。
7.文字溢出bug:子元素的宽度和父级的宽度如果相差小于3px的时候,两个浮动元素中间有注释或者内联元素,就会出现文字溢出,内联元素越多,溢出越多。解决:用div把注释或内联元素包起来。
8.在IE6下,当浮动元素和绝对定位元素是兄弟元素时,绝对定位会失效。解决:不让浮动元素和绝对定位元素是兄弟关系,用div或其他标签把绝对定位元素包起来。
9.在IE6,7下,子级元素有相对定位,父级元素overflow包不住子级元素。解决:给父级也添加相对定位
10.在IE6下,如果绝对定位的父级宽高是奇数时,子级元素的right和bottom值会有1px偏差
11.透明度:filter:alpha(opacity=50)
12.在IE6,7下,输入型的表单标签上下会有1px间隙,解决:给input加浮动
13.<!--[if ie 6]>我是IE6<[!endif]-->在IE6下显示“我是IE6”
14._background或*background ie6支持, +background ie7支持, \9 :ie10之前的IE解析
*表格
1.清除默认样式table{border-collapse:collapse;} td,th{padding:0;}
2.特性:单元格默认平分,th默认加粗,水平垂直居中;td默认不加粗,垂直居中;td,th宽度大于table不管用;如果th,td没有设宽度,表格同一列继承最大宽度(行同理);display:table
3.合并单元格:colspan="数值"(横向) rowspan="数值"(纵向) 数值代表合并数量,被合并的单元格必须删掉
*表单
<form action="提交地址" method="提交方式" target="">
<input type="text/password/submit/radio(单选)/checkbox(多选)/file/bottom/hidden/reset" name="一定要设置"/>
</form>
get::在地址栏做内容的拼接,用户看得到
post:把表单元里面的内容做拼接,并且打包传送到action的地址,用户看不到
target:_blank新窗口打开 -self当前窗口
lable嵌套实现点击文字也可以选中选项<lable><input/></lable>或<lable for="id"></lable><input id="id"/>
<select name="" id=""><option value="河北">河北</select>
<textarea name="" id="" cols="" rows="">中国不是、、</textarea>
清除默认样式:input{margin:0;padding:0;}
option{padding:0;}
textarea{padding:0;resize:none;outline:none;}
*背景图尺寸background-size
1.具体数值
2.百分比
3.cover
4.contain
背景裁切:background-clip:(需要rgba配合-透明度)
1.border-box:从边框开始显示背景
2.padding-box:从padding区域开始显示背景
3.content-box:从内容区域开始显示背景
4.text:从文本区域显示背景
线性渐变IE9以下不支持,加内核前缀
linear-gradient(90deg角度,颜色,颜色.....);颜色后面可以加宽度确定区域
制作光斑:
linear-gradient(
rgba(255,255,255,0) 100px,
rgba(255,255,255,1) 120px,
rgba(255,255,255,1) 140px,
rgba(255,255,255,0) 160px,
rgba(255,255,255,0) )
角度:模糊的值或具体的数值(to right,to left,to top,to bottom)角度指水平线与渐变线之间的角度,逆时针方向
非标准下(有内核前缀)90-x=y;x标准角度,y非标准角度
1.radial-gradient(circle at center,red,yellow,blue)从圆心开始渐变
括号里的第一个值:圆心位置或者圆的形状circle(默认为椭圆),可以是模糊的值,也可以是具体的数值
模糊的值:at center/left/rigth/top/bottom
具体的数值:x偏移量 y偏移量
颜色可以通过具体的数值规定渐变的范围,具体数值可以是100px或者百分比
标准下加 circle at
标准之前没有设置(即有内核前缀)
2.重复的渐变repeating-linear-gradient
盒阴影
box-shadow:inset(内阴影)10px右边阴影宽 10px下边阴影 30px阴影程度 red颜色(可以不断增加)
文字阴影
text-shadow
蒙版
目前只有-webkit-内核支持,需要PNG的透明度遮罩,
-webkit-mask:url();
和背景设置一样,可以设置多个PNG为模板
倒影
只有-webkit-内核支持
-webkit-box-reflect:left/right/below/above
第二个值:倒影与本体之间的距离
第三个值:渐变,可以是透明度的渐变,也可以是PNG透明的图片链接
*媒体查询
当屏幕发生变化,根据设置的最大宽度或最小宽度时,读取大括号中的代码
@media screen and(
当屏幕发生变化,最大宽度到达某个值的时候,如max-width:960px
){执行以下代码}
viewport布局百分比<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maxmum-scale=1.0,user-scalable=no">
width:控制viewport的大小,可以制定一个数值或一个特殊值,device-width就是设备的宽度
initial-scale:初始缩放,页面开始缩放的程度
maxnum-scale,minimum-scale:最大最小缩放倍数
user-scalable=no:是否允许用户调整页面,若为No,maxnum-scale,minimum-scale会失效
子选择器:div>span
作用范围:div下的span享受样式,p中的span不享受样式
<div>
<p>
<span>我是第一个</span>
</p>
<span>woshi</span>
<span>srt</span>
<span>ertert</span>
</div>
相邻兄弟选择器:p+span
作用范围:可以选择相邻的两个元素,且有同一个父级,+后面的享受样式
同级元素通用选择器:p~span
同级元素通用选择器:p~span
作用范围:p之后的同级span享受样式
属性选择器:选择带有某种属性的所有元素,选择带有某种属性值,并规定属性值的元素
<a href=""></a>与<a></a>a[属性名]{} input[属性名="属性值"]{}
p:nth-child(1){样式}选择父级下第一个元素,第一个必须是p
p:nth-of-type(1){}一定会匹配P,若值为n,n可以计算,2n表示偶数,2n-1表示奇数
p:first-child{},p:last-child{},p:first-of-type{},P:last-of-type{}
*字体与盒模型
@font-face{
font-family:"自定义字体名称";
src:url("字体图片的路径地址"),
url("字体图片的路径地址"),
url("字体图片的路径地址"),
url("字体图片的路径地址");
font-weight:;
font-style:;
}
找字体的网站 下载 修改字体图片格式的线上工具 上传,使用里面的CSS文件
字体图片格式:.ttf .otf .woff .eot .svg
如果想搭建盒模型,首先在父级建立盒模型空间
方法:display:-webkit-box;display:-moz-box;
排列方式有两种:水平,垂直
-webkit-box-orient:vertical;垂直
-webkit-box-orient:horizontal;水平
子级排列位置可以由-webkit-box-pack:center/end/start(左边)/justify(均分);设置
子级具体份数由-webkit-box-flex:几份;设置
<style>
.test{border:1px solid #666;
display:-webkit-box;/*使左浮动*/
-webkit-box-pack:center;/*使居中*/
/*-webkit-box-pack:end;右浮动*/
/*-webkit-box-pack:justify;均分*/
-webkit-box-orient:horizontal;/*竖着*/
}
.test div{
height:100px;
width:100px;
background:red;
text-align:center;
line-height:100px;
border:1px solid #FFF;
}
.test div:nth-of-type(1){
-webkit-box-flex:1;
}
.test div:nth-of-type(2){
-webkit-box-flex:2;
}
.test div:nth-of-type(3){
-webkit-box-flex:3;
}
</style>
</head>
<body>
<div class="test">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
分栏
column-count:3;分几栏
column-gap:100px;分栏之间的间隙
column-rule:5px solid 颜色 设置分栏之间的分割线
IE9以下不支持,火狐加前缀
配合媒体查询使用@media scree and(max-width:){}
过渡
transition:1s 1s all ease;
第一个值:过度的总时间
第二个值:延迟过渡的时间
第三个值:需要过渡的样式
第四个值:过渡的方式linear匀速 ease慢速开始然后慢慢变快
ease-in慢速开始ease-out慢速结束ease-in-out开始和结束都慢cubic-bezier(1,0,1,0)贝瑟尔曲线
2D变换
transform:translate(x,y)位移 rotate(xdeg)旋转 scale缩放 skew(旋转角度)斜切
变换原点transform-orgin:left、top、right、bottom、center(默认值)
3D变换
首先需要给需要进行3d变换的元素的父级添加3d环境和景深
方法:translate-style:preserve-3d;添加3d环境
perspective:数值
rotatX,
rotatY,
rotatZ,translateX,translateY,translateZ,
animation:
首先定义一套关键帧
方法:@keyframes 动画名称
{
0%{相应样式}
10%{相应样式}
20%{相应样式}
100%{相应样式}
}
然后调用动画名称:
方法:animation:1s 1s 动画名称 运动方式 执行次数
第一个值:运动总时间
第二个值:延迟运动时间
第三个值:动画名称
第四个值:运动方式
linear匀速 ease慢速开始然后慢慢变快
ease-in慢速开始 ease-out慢速结束 ease-in-out开始和结束都慢 cubic-bezier(1,0,1,0)贝瑟尔曲线
第五个个值:运动次数 具体数值或无限次infinite