css
选择器优先级,标签>id>class
权重 id>class>标签
只记录能想到的以免遗忘:
1.字体css可继承
2.表格:表格细线的合并,表格单元格合并,单元格内容水平居中,首行和首列的标签,这些应该够了
3.边框.背景属性
border:dotted/solid 5px #f00;
可拆分成三个来写
border-style:solid;
border-width:5px;
bogrder-color:#00f; css由上至下执行
背景属性:
背景图片div background-imge:url(1.png);//相对路径
挡图片小于div背景大小时会默认横向铺满和纵向铺满;
background-repeat:repeat-x/y/norepeat 横纵不铺满
background-position:10px 20px 距离左边值,上边值 控制图片方位
background-color:#ccc;控制背景颜色
希望背景图片固定不随滚动轴滚动
background-attachment:fixed;
background:blue url("xxx.jpg") no-repeat fixed 10px 20px;//颜色 地址 不重复 固定 左边 右边
4.隐藏,滚动条,zindex属性
内容超出div的情况,超出部分隐藏
overflow:hidden//不占位置
overflow:auto//超出部分自动产生滚动条,一般使用此项
overflow:scroll//不论是否超出都产生滚动条
visibility:hidden;占据页面位置,块的隐藏
position:absolute;脱离文档流
5.鼠标,列表,垂直居中属性
cursor:pointer;
cursor:wait;
cursor:help;
<ul type="">尽管某些html属性可修改外观,但是我们不会去改html,而是去改css
list-style-type:none/disc/circle;空,实心圆,空心圆
列标签加图片
list-style-image:url("1.jpg");
垂直居中属性
img{
vertical-align:middle/text-top/text-bottom;垂直居中,置顶,置地
}
6.行内元素和块级元素
块级元素:div,
div{
height:100px;
width:100px;
border:solid 1px red;
}
块级元素特点:
1.块级元素的内容,默认显示在块的左上角
2.块元素,单独占满一行.(文档流,)
常用的块级元素:
div
p
h1-h6
form
menu
pre
table
三种列表
olli ulli dldt
行内元素
<span>只显示文字内容</span>//1.可存在于同一行2.设置高度宽度无效
常用的行内元素
span
a
lable
img
textarea
strong
input
select
7.行内元素和块级元素相互转换
块级元素->行内元素 display:inline;
行内元素->块级元素 display:block;
display:inline-block;既有行也有块元素
8.浮动
块级元素的并排,浮动
<div id="d1">1</div><div id="d2">1</div><div>3</div>
#d1{
float:left;
}
#d2{
float:left;
}
第一个div往左边漂浮,第二个跟在第一个后面向左面漂浮
若前一个div有浮动,会影响后一个div的css样式所以要清除被影响div的左边浮动
清除左边浮动
clear:left;
clear:right;清除下一个div的浮动影响
同时清除左右
clear:both;
9盒子模型
上下左右边框
#d1{
width:100px;
height:100px;
boder:solid 1px red;
border-bottom/top/left/right
}
设置内边距
padding:10px;上下左右
padding:10px 2px;上下左右
padding:1px 2px 4px;//上左右下
padding:1px 2px 4px 2px;上下左右
padding-top left right bottom
设置之后div会变大,相应的div要变下,从下,右边开始减少
是指外边距
margin:10px;上下左右
margin:10px 2px;上下左右
margin:1px 2px 4px;//上左右下
margin:1px 2px 4px 2px;上下左右
margin-top left right bottom 同时支持行内元素
CSS定位
staitc :默认,和不设置情况一样
relative
1,相对定位没有脱离文档流,会单独占满一行,他的方位会受到top left bottom right影响
2.相对于块的最近的父元素定位,会被兄元素占位挤开,不管父元素是否定位
3.可设置浮动,依旧会被兄元素占位挤开
absolute:脱离文档流
1.脱离文档流,不会单独占满一行,他的方位只会收到top.left,bottom right影响,
2.一个块的top,left,bottom,right是相对于什么?
1)如果他的父元素做了定位,就相对于的是最近的一个父元素
2)如果父元素没有定位就相对于body定位
fixed :固定定位
1.脱离文档流,相对于body当前页面,不会单独占满一行
2.top left right bottom 始终相对于的是body
top.left right bottom 只有设置了定位(相对,绝对,固定)的时候才有用
css3圆角,阴影,背景铺满
#d1{
width:100px;
height:100px;
border:solid 2px red;
border-radius:10px;//表示以此间距进行圆角处理,100%为圆
border-radius:10px 20px;//左上和游侠是10,右下和坐下时20
border-radius:10px 20px 0px ;//左上是10,右下是0 忧伤和坐下时20
border-radius:10px 0 0 0 ;//只显示左上的10圆角
box-shadow:10px 10px 10px #ccc;//阴影的横向,纵向,半径,颜色
}
body{
background-img:url("1.png");
background-repeat:no-repeat;
background-size:cover;//会铺满该元素
}
css3旋转,倾斜,位移,平滑过渡,缩放
*{
padding:0px;
margin:0px;
}
#d1{
widht:150px;
height:150px;
border:solid 2px red;
background-color:#fc9
position:200px;
left:200px;
transform:rotate(30deg) scale(0.5) translate(20px,30px) skew(30deg,0deg);//沿顺时针旋转30度,-30deg则沿逆时针旋转30度--scale(0.5)放大or缩写n倍;
//--位移,x,y距离,--倾斜角度横竖
}
//平滑过渡动画,当鼠标放到div上
#d1:hover{
transform:rotate(30deg) scale(2);
transtion:transform/all 1s ease/ease-in/ease-out;//所有属性 时长 缓慢 渐渐
}
css3自定义动画--//浏览器可能不兼容 加个前缀
//-webkit-:兼容谷歌浏览器 moz- ms-ie o- opera 明白了
#d1{
position:absolute;
top:100px;
left:100px;
width:750px;
height:438px;
-webkit-animation:donghua 20s infinite/2 ease;//动画名称,播放时长,播放次数/一直播放/2次 播放快慢
}
@keyframes donghua{
0%{
transform:translateX(0deg);
}
50%{
transform:rotateX(180deg);
}
100%{
transform:rotateX(360deg);
}
}
css3渐变效果
线性渐变
#d1{
widht:300px;
height:200px
border:solid 1px red;
background:-webkit-gradient(linear,left top,left bottom,from(blue) to(red),color-stop(0.4,#fff),color-stop(0.4,#333));//-webkit-谷歌浏览器支持写法,填充渐变色,中间加个白色色标过度,色标可加多个
}
径向渐变
#d1{
widht:300px;
height:200px
border:solid 1px red;
background:-webkit-gradient(radial,center center,0,center center,200,from(blue),to(red),color-stop(0.4,#fff));
}
10响应式布局
同一个页面在不容的设备看到的是不同的效果
<div id="header">头部</div>
<div id="main">
<div id="main-left">主题-左边</div>
<div id="main-center">主题-中间</div>
<div id="main-right">主题-右边</div>
</div>
<div id="footer"></div>
通过
@media screen and (min-width:900px)//如果你的pc最小宽度是900px;
@media screen and (max=width:600px)//手机上看
<style type="text/css">
/*屏幕宽度大于900的时候*/
*
{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
#header
{
height:100px;
border:solid 1px red;
margin:0px auto;
}
#main
{
margin:10px auto;
height:400px;
}
#footer
{
margin:0px auto;
height:100px;
border:solid 1px red;
}
@media screen and (min-width:900px)
{
#header,#footer
{
width:800px;
}
#main
{
width:800px;
height:400px;;
}
#main-left
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
#main-center
{
width:394px;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
}
@media screen and (min-width:600px) and (max-width:900px)
{
#header,#footer
{
width:600px;
}
#main
{
width:600px;
height:400px;;
}
#main-left
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
#main-center
{
width:396px;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
display:none;
}
}
@media screen and (max-width:600px)
{
#header,#footer
{
width:300px;
}
#main
{
width:300px;
height:400px;;
}
#main-left
{
display:none;
}
#main-center
{
width:300px;
height:400px;
border:solid 1px red;
}
#main-right
{
display:none;
}
}
</style>
</head>
<body>
<div id="header">头部</div>
<div id="main">
<div id="main-left">主题-左边</div>
<div id="main-center">主题-中间</div>
<div id="main-right">主题-右边</div>
</div>
<div id="footer"></div>
</body>
