css选择器
id选择器---用#
class类选择器---用.
元素选择器---用元素标签
属性选择器---input[type=”text”]{
Border:2px;
}
伪类选择器
|
/*未访问时*/ a:link{ |
|
|
color:black; |
|
|
text-decoration: none; |
|
|
} |
|
|
/*访问后*/ |
|
|
a:visited{ |
|
|
color: gainsboro; |
|
|
} |
|
|
/*移入*/ |
|
|
a:hover{ |
|
|
background: lightpink; |
|
|
} |
|
|
/*点击时，那一瞬间*/ |
|
|
a:active{ |
|
|
font-size: 30px; |
|
|
background: rosybrown; |
|
|
} |
根元素选择器
|
:root{ |
|
|
background: gainsboro; |
|
|
} |
空元素选择器
|
table :empty{ |
|
|
background: darkblue; |
}
自动获取焦点
|
input[type="password"]:focus{ |
|
|
border:10px dashed #DDC90F; |
|
|
} |
选择被选中的元素
|
input[type="checkbox"] :checked{ |
|
|
font-size: 20px; |
|
|
} |
选中时变成。。。。
|
p::selection{ |
|
|
background: deeppink; |
|
|
color: papayawhip; |
|
|
} |
选中时第一行变成。。。。
|
.div2:first-line{ |
|
|
color: slateblue !important; |
|
|
} |
选中时第一个字变成。。。。
|
.div2:first-letter{ |
|
|
font-size: 20px; |
|
|
font-weight: 900; |
|
|
} |
在内容之前和之后加内容（与content一起用）
|
.div2:before{ |
|
|
content: "我说："; |
|
|
} |
|
|
.div2:after{ |
|
|
content: "再见！"; |
|
|
} |
通用选择器（选择所有元素）
|
*{ |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
选择除了e元素之外所有元素
：not（e）
选择第n行元素
ul li:nth-child(n){
background:red
}
选择倒数第你n行元素
ul li:nth-last-child(n) {
background:red
}
选择奇数行元素
ul li:nth-child(odd){
background:red
}
选择偶数行元素
ul li:nth-child(even){
background:red
}
选择3n+2行元素
ul li:nth-child(3n+2){
background:red
}
多个元素一起选择
|
h1,h2,h3,h4,h5,h6{ |
|
|
font-weight: normal; |
|
|
} |
第四课
Css样式
|
.p1{ |
|
|
/*font-weight: bold;*/ 设置字体宽度 |
|
|
/*font-weight: 400;*/ |
|
|
/*font-weight: 700;*/ |
|
|
font-weight: 900; |
|
|
/*font-style: italic;*/ 设置字体样式(倾斜) |
|
|
font-style: oblique; |
|
|
/*首行缩进*/ |
|
|
text-indent: 20px; |
|
|
/*字间距*/ |
|
|
letter-spacing: 20px; |
|
|
line-height: 40px; 行间距 |
|
|
} |
|
.p2{ |
|||||
|
word-spacing: 20px; 设置词间距对英文有效 |
|||||
|
/*全部大写*/ |
|||||
|
/*text-transform: uppercase;*/ |
|||||
|
/*全部小写*/ |
|||||
|
/*text-transform: lowercase;*/ |
|||||
|
/*首字母大写*/ |
|||||
|
text-transform: capitalize; |
|||||
|
} |
|||||
|
.div1{ |
|||||
|
border: 1px solid #000; |
|||||
|
text-align: center; 横向居中 |
|||||
|
/*上线*/ |
|||||
|
/*text-decoration: overline;*/ 字体加上划线 |
|||||
|
/*text-decoration: underline;*/ 字体加下划线 |
|||||
|
/*中间删除线*/ |
|||||
|
/*text-decoration: line-through;*/ |
|||||
|
/*横向水平值 纵向值 模糊值 颜色*/ 字体隐影 |
|||||
|
text-shadow: 5px 0 2px green; |
|||||
|
table td{ |
|||||
|
30px; |
|||||
|
height: 60px; |
|||||
|
/*vertical-align: top;*/ 设置字体垂直居上 |
|||||
|
/*vertical-align: bottom;*/ 设置字体垂直居下 |
|||||
|
/*vertical-align: middle;*/ 设置字体垂直居中 |
|||||
|
} |
|||||
|
.box1{ |
|||||
|
400px; |
|||||
|
height: 400px; |
|||||
|
border: 5px double #000; |
|||||
|
/*background-color: red;*/ 设置背景颜色 |
|||||
|
/*background-image: url("../img/logo_db.png");*/ 设置背景图片 |
|||||
|
/*background-repeat: no-repeat;*/ 设置背景平铺（不平铺） |
|||||
|
/*background-repeat: repeat-x;*/ 设置背景平铺（x轴平铺） |
|||||
|
/*background-repeat: repeat-y;*/ 设置背景平铺（y轴平铺） |
|||||
|
/*background-position: center right;*/ 设置背景中心居右 |
|||||
|
/*background-size: 50%;*/ 设置背景大小（父元素的50%） |
|||||
|
/*扩展到足够大超出部分隐藏*/ |
|||||
|
/*background-size: cover;*/ |
|||||
|
/*扩展到最大*/ |
|||||
|
/*background-size: contain;*/ |
|||||
|
background: yellow url("../img/logo_db.png") no-repeat center; |
|||||
|
}背景设置缩写 |
|||||
|
Ul li { |
|
|
list-style: none; 列表样式（无前面的圆点） |
|
|
/*空心圆*/ |
|
|
/*list-style-type: circle;*/ |
|
|
/*list-style-type: upper-roman;*/ 大写罗马数字 |
|
|
list-style-image: url("../img/logo_db.png");前面圆点换成图片 |
|
|
} |
/*----------利用行高制作淘宝导航logo----------*/
.change1{
154px;
height: 30px;
background-image: url(../img/logo_db.png);
overflow: hidden;
}
.change1 a{
display: block;
/*background: red;*/
line-height: 200px;
}
/*---------利用首航缩进制作淘宝导航logo----------*/
.change2{
154px;
height: 30px;
background-image: url(../img/logo_db.png);
text-indent: -1000px;
}
.change2 a{
display: block;
}
/*--------利用定位制作淘宝导航logo----------*/
.change3{
154px;
height: 30px;
font-size: 12px;
color: transparent;
text-decoration: none;
position: relative;
}
.change3 span{
154px;
height: 30px;
background-image: url(../img/logo_db.png);
position: absolute;
top: 0;
left: 0;
}
.change3A{
text-decoration: none;
}
/*雪碧图*/
.spriteTest{
179px;
height: 179px;
border: 1px solid #000;
background-image: url("../img/30d5bc953b7afba77514.jpg");
background-size: 1000px 729px;
}
.spriteTest:hover{
background-image: url("../img/30d5bc953b7afba77514.jpg");
background-size: 1000px 729px;
background-position: -279px 0;
.box2{
100px;
height: 100px;
background: red;
border-radius: 5px; 圆角设置
box-shadow: 4px 0 5px #000; 隐影设置
}
/*渐变*/
.box3{
500px;
height: 100px;
/*background: linear-gradient(#000,lightgrey);*/
/*background: linear-gradient(to right,#000,lightgrey);*/
background: linear-gradient(rgba(0,0,0,.5),rgba(252,12,12,.5));
}
/*转换*/
.box4{
200px;
height: 200px;
background: yellow;
/*-webkit-transform: translate(50px,200px);*/
/*-moz-transform: translate(50px,200px);*/
/*-o-transform: translate(50px,200px);*/
/*-ms-transform: translate(50px,200px);*/
/*transform: translate(50px,200px);*/
/*旋转45度*/
/*transform: rotate(45deg);*/
/*放大x轴放大3倍 y轴放大0.5倍*/
/*transform: scale(3,.5);*/
/*transform: skew(45deg,0deg);*/拉扯
/*transform: rotateX(80deg);*/绕x轴旋转
transform: rotateY(180deg);绕y轴旋转
}
.box5{
100px;
height: 100px;
background: greenyellow;
/*当点击时背景颜色 渐变 过度*/
-webkit-transition: all linear 2s;
}
.box5:hover{
background: green;
}
背景颜色自动变化
.box6{
100px;
height: 100px;
background: mediumspringgreen;
/*简写方式：animation:动画名称 持续时间 移动方式 何时(延时多久)开始 播放次数 反复运动 （运动或者暂停 一般不使用）;*/
/*animation-name: firstAnimation;*/
/*animation-duration: 5s;*/
/*animation-timing-function: linear; 线性过渡*/
/*ease; 平滑*/
/*ease-in; 慢到快*/
/*ease-out;快到慢*/
/*ease-in-out;慢到快再慢*/
/*animation-delay: 2s;*/
/*animation-iteration-count: infinite; 无限循环*/
/*次数*/
/*animation-direction: alternate; 轮流*/
/*normal; 正常方向*/
/*animation-play-state: running; 运行*/
/*paused; 暂停*/
-webkit-animation: yellowAndSuper 3s ease-in 2;
}
@keyframes yellowAndSuper {
/*from{*/
/*background: mediumspringgreen;*/
/*}*/
/*to{*/
/*background: yellow;*/
/*}*/
0%{
background: red;
}
20%{
background: orange;
}
40%{
background: yellow;
}
60%{
background: green;
}
80%{
background: blue;
}
100%{
background: purple;
}
}