注：各类选择器很重要！！！
伪类选择器
：hover/*鼠标经过时*/
a:hover div{
对div的更改
}
a:hover +div{
对div更改的
}
...<a>
<div></div>
</a>...
结构伪类选择器
父元素
...<style>
/*选中第1个li，last-child选中最后一个“孩子”*/
ul li:first-child{
...
}
/*选中第几个li并进行背景颜色设计*/
ul li:nth-child(4){
...
}
/*选中第li的奇数，even是偶数，先看（）里面的，再看li，所以是整体ul里面的第几个*/
ul li:nth-child(odd){
...
}
/*先看li再看（）里面的，所以是li的的第几*/
ul li:nth-of-type(..){
...
}
</style>
...<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>....
伪元素选择器
/*创建伪元素，在每一行li前面加content里面的内容*/
<style>
1.ul li::before(or after){
content:"~"
}
2.input ::placeholder{ /*表单提示词*/
color:red
}
3.ul li:nth-child(4)::selection{ /*选中时*/
。。。
}
</style>
...<body>
<form>
<input type="text" name="" placeholder="输入框内固定的较浅的提示词">
</form>
<ul>
<li>1213</li>
<li>34234</li>
...
</ul>
文本样式
text-indent:2em/*缩进*/
text-align:center/*文本水平对齐方式*/
text-decoration:none/*去除文本装饰，比如超链接默认有下划线，可以去除*/
text-decoration:line-through/*删除线*/
line-height:60px/*行高，一行字的高度*/
line-height:200px
height:200px/*单行文本垂直居中，行高等于文字高度*/
list
css具有层叠性，后面的会覆盖前面的
<style>
ul li{
list-style:none/*去除无序列表的默认样式*/
}
</style>
<body>
<ul>
<li>2423</li>
<li>gref</li>
<li>wefef</li>
<li>rgeae</li>
</ul>
</body>
元素显示模式转换
<style>
.box{
display:inline/*行内元素，无法设置宽高，可以转化为行内块元素,这里是转化为行内元素的意思*/
dispaly:inline-block/*行内块元素*/
display:none/*隐藏元素，脱离文档流*/
display:block/*块元素*/
}
</style>
<body>
。。。
</body>
背景
/*单个*/
background-color
background-image:url(../dsv.jpy)
background-repeat:repeat-y /*y轴上滚动*/
background-no-repeat /*不滚动*/
background-position：top left
/*复合*/
background：fixed url(../dsv.jpy) no-repeat
.one :hover{} /*鼠标点上去的样子*/
！！！五彩导航列题
边框
/*单写*/
border-radius:10px
border-width:2px
border-style:solid(实线) or dotted(虚线)
border-color:black
border-radius:10px /*边框弧度，把边框椭圆化*/
border-top-left-radius /*左上边框弧度*/
/*连写*/
border: 4px solid black
合并相邻边框
<style>table{
border-collapse:collapse /*合并边框*/
}
td{
border:5px solid red;
}</style>...
<table cellspacing="0">
<tr>
<td>...</td>
...
</tr></table>...
阴影
<style>
div{
box-shadow:20px 20px 10px 10px;/*x轴的偏移程度 y轴偏移程度 x轴宽度 y轴宽度*/
text-shadow:red 0 2px/*颜色 x轴的偏移量 y轴的偏移量（字体阴影）*/
}
</style>
...<body><div>
</div>
</body>
轮廓线
<style>
input[type="text"]{
outline:none;/*虚化轮廓线*/
outline-style:groove;/*改变输入框的轮廓形状*/
}
</style>...
<body>
<input type="text" id="">
</body>
防拖拽
<style>
textarea{
resize:home;/*防止文本拖拽*/
vertical-align:top;/*改变与文字的对齐方式*/
}</style>
...
隐藏元素
<style>
div{
width:300px;
height:300px
}
.box1{
/*三种隐藏方法*/
1.display:none;/*隐藏盒子，脱离文档流，隐藏位置不在*/
2.visibility:hidden;/*元素隐藏位置保留*/
3.opacity:0;/*元素隐藏位置任在，只是透明度降为0*/
background-color:pink;
}
.box2{
background-color:green;
}...
</style>
<body>
<div class="box1">111</div>
<div class="box2">222</div>
</bpdy>...
定位
相对定位和绝对定位
子绝父相，父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动。如果都没有找到，则想对于浏览器进行定位。
<style>
.father{
position：relative；/*相对定位*/
width:600px;
botom:-100px;/*推出*/
height:600px;
background-color:pink;
}
.son{
position:absolute;/*绝对定位，不保留原来位置*/
width:300px;
height:300px;
background-color:aqua;;
}
</style>...
<body>
<div class="father"></div>
<div class="son"></div>
</body>
固定定位
<style>
div{
position：fixed；/*固定定位，相对于可视区域定位*/
right：40px；
top:50%;
width：。。。
}
</style>...
<body>
<div>小妲己</div>
</body>
粘性定位
position：sticky/*部分文章固定，其他滚动*/
z-index:数字 /*定位中显示的优先级*/
盒子模型
盒子大小：padding+content+border
内边距
<style>
div{
width:
height:
background:
/*单写*/
padding-top:20px/*内边距*/
padding-left：
padding-right：
paddingt-bottom：
/*复写*/
padding：1px 2px 4px 5px /*上 右 下 左*/
padding：3px 4px 5px /*上 左右 下*/
}
</style>...
<body>
<div>fbdsuvhixdnb</div>
</body>
外边距
margin-bottom:..
margin-right:5px
外边距塌陷
父元素的第一个子元素的margin-top被父元素吃掉
1.给父元素添加边框；
2.给父元素加一个padding值；
3.overflow：hidden（文本溢出的解决）
样式继承
超链接样式的修改必须单拎出来，因为div修改它还是不变
css的样式继承，不是所有的样式都能继承，职业改变之后的布局无影响
flex布局（！！！）
margin:0 auto/*水平居中*/
display:flex;
/*排列方式*/
flex-direction:row-reverse
flex-direction:column
flex-direction:colum-reverse
flex-direction:row
/*让flex布局变为多行*/
flex-wrap:wrap;
flex-wrap:nowrap
/*主轴上的布局*/
justify-content:center
justify-content:end
justify-content：sapce-between
justify-content:space-around
justify-content:space-evently
/*侧轴上的布局*/
align-items:center;
align-items:end;
align-items:start:/*默认排序*/
align-content:start
align-content:end
align-content:center
align-content:space-between
flex
order:任何数字 /*值越小，越靠前*/
浮动float（最早用来做文字环绕图片）
让元素脱离文档流，不再保留原来位置，会造成在其下方的兄弟元素位置发生变化
缺点：*当子元素向上发生浮动时，其父元素的高度发生塌陷
*当其中一个发生浮动时，下面的元素也会改变位置
解决办法：1.改变浮动方向
2.直接让父亲也浮动
3.父亲~overflow:hidden
4.clear:both;清除浮动
渐变，字体图标，媒体查询(了解)
background-image:linear-gradient(to ...)/*渐变*/
网页上找到字体图标，加入购物车，打开项目，下载图标，按指示操作。
默认外边距
先去掉所有的内外边距然后再写（默认ul 6px body 8px）
2d转换
/*平移*/
transform:translate(x轴的偏移量,y轴的偏移量);
transform：translateX(70px)
transform：translateY(-60px)
/*旋转*/
transform:rotatez(40deg);
/*复合写法，旋转要放在最后！！！*/
trabsform:translate(100px) rotateZ(45deg)/*平面旋转*/
/*缩号*/
transform:scale(0.5)
transform:scaleX(2) /*只是沿着X轴发生括号里面的倍数变化，Y轴同理*/
/*复合写法*/
transform:translate(100px,100px) scale(1.5) rotate(45deg)
3d转换
/*在父里面*/
transform-style:preserve-3d;
perspective:800px;/**/
perspective-origin:100px 200px
/*在子里面*/
与2D操作同，但是多了一个Z轴。还有一个特殊情况，rotate（1，1，0，45deg），绕对角线旋转
backface-visibility：hidden/*背部隐藏*/
transform-origin：bottom/*指定绕什么线转*/
CSS过渡
.son{
transition:all 6s;
width:300px;
}
.son:hover{
transform:rotatez(40deg);
}
动画
/*定义*/
@keyframes myMovie{
from{
width:
background-color:
}
to{
width:200px;
background-color:yellow;
}
div{
width:200px;
height:50px;
background-color:pink;
animation:myMovie;
}
其余见浏览器自查。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
