爱站程序员基地1 选择器
a）类选择器
.p1{ color:red }<p class=\"p1\">查看文字内容</p>
b)id选择器
#div1{width: 200px;height: 200px;background: yellow;}<div id=\"div1\">111</div>
c)标签选择器
div{color: #0000FF;}h1{color: red;}<div id=\"\">1111</div><h1>aaaaa</h1>
d)包含选择器
ol li{color: gold;}#div1 span{color: aqua;font-size:30px;}<ol><li>列表项222</li>ol><div id=\"div1\"><span>111asdfasdfa</span></div>
e）属性选择器
/* 属性选择器：根据标签的属性，来选择一个 或多个标签 *//*选中 有id属性的div */div[id] {color: yellow;}div[id=div2] {font-size: 200px;}font[color^=r] {color: #0000FF;}font[color$=d] {font-size: 30mm;}/* 多个选择器，你可以并列写一块，使用逗号隔开 */h3,span,b,i,#div1,.aa{font-size: 100px;}<div id=\"div1\">1111111</div><!-- 一个标签的class属性值可以有多个，只需空格隔开就行 --><div id=\"div2\" class=\"aa bb cc\">2222</div><font size=\"7\" color=\"red\">一行文本</font><h3>adfsasf</h3><span>asdfadsfa</span><b>asdfasdfafds</b><i>asdfasdfasdfasd</i>
f）子选择器
/* > 子选择器 选择嵌套的父子关系的元素*/#div2 >h1 {color: yellow;}#div3 >div >span{color: #00FFFF;}<div id=\"div2\"><h1><span>asdaa</span></h1><h1>asdaa</h1></div><div id=\"div3\"><div id=\"div4\"><span>aaaaspan</span></div></div>
h）相邻选择器
/* 相邻选择器，注意元素之间是并列关系 */#div1 +#div2{background: gold;}<div id=\"div1\">aaa</div><div id=\"div2\">bbbb</div><div id=
CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
CSS/ 菜鸟教程 自学网站，容易自学入门，大家没事可以看看
2鼠标悬浮与落下
1.链接状态 :link
2.鼠标悬浮状态 :hover
3.鼠标按下的状态 :active
4.链接访问过后的状态
#div1{height: 300px;width: 300px;/* 背景颜色 */background: #00FFFF;/* 设置背景图片 */background-image: url(img/20150708112951_Ts8dW.jpeg);/* 设置背景图片的尺寸 ，100% 把背景区域填满 */background-size: 100% 100%;}/* 鼠标悬浮 */#div1:hover{background:red;background-size: 100% 100%;background-image: url(img/20190315021959_37640.jpg);}/* 鼠标按下 */#div1:active{background: yellow;background-size: 100% 100%;background-image: url(img/20180225184943_ZRAdx.jpeg);}<div id=\"div1\"></div>
3常见属性
/* 对于溢出div层的内容怎么处理，默认处理溢出就溢出
overflow: auto 自动，超过加上滚动条
overflow:hidden 溢出 的内容不要了
overflow:visible; 显示溢出的内容 默认值
overflow:scroll;
overflow:scroll 内容不超出，也加上滚动条。
*/
float: left; 从左往右一字排列 right 从右往左一字排开
clear:left; 清除左浮动
clear:right; 清除右浮动
clear:both; 清除左右浮动
/* 让框中的文字居中 text-align: center 文本左右居中 /
text-align: center;
/ 把行高 设置的和外框高度一样，那么里面的文本就会上下居中 /
line-height: 40px;
/ 边框圆角 /
border-radius: 5px;
color: blue;
/ 字重 可以加粗文字 /
font-weight: 500;
/ 字符间距 /
letter-spacing: 3px;
/ 阴影 */
box-shadow: 5px 5px 5px gray;
/* 鼠标图形 pointer变小手 */
cursor: pointer;
/* 去掉a标签的下划线 */
text-decoration: none;
/* display: none; 让块隐藏掉
display:block; 显示为块元素，可以让行标签，转化为块标签
/
/ 显示为行标签，可以把块标前抓换成行标签 /
display: inline;
/ 我要把块标签变成行标签
我虽说把他变成行标签，但是我想让，针对块标签的一些属性，对他也生效，比如margin-top: 50px;
那么可以用这个值就行 inline-block 转换成行标签，但是能使用块标签的属性
*/
display:inline-block;
visibility: hidden; 隐藏元素后，占的位置还在，相当于把他透明了
visibility: visible;显示元素，默认值
/* position 设置元素的定位方式：relative相对定位默认值 absolute绝对定位
一旦元素设置为绝对定位置，那么我要设置元素的距离原点的位置 就用这几个属性
top
bottom
left
right
如果是relative相对定位，那么元素之间的相互间距
margin-left
margin-right
margin-top
margin-bottom
*/
/* fixed固定背景图片，不要随滚动条滚动scroll 背景图片会滚动*/background-attachment:fixed;
/* 文字阴影 值1 阴影的左右方向 值2 上下 值3 阴影的大小 值4阴影的颜色 */
text-shadow: 10px 10px 20px aqua;
/*
颜色单词
颜色的16进制值
rgb(红绿蓝)
rgba(255,100,255,0.5) a 代表透明度 值0-1
*/
color:rgba(255,100,255,0.5);
/* 过渡 值1 你要过渡的属性，值2 过渡时长 值3 延时过渡 值4 过渡速率 /
/ transition:background-color,height,width 1s 0s linear; /
/ all所有属性都过渡 /
/ transition:all 1s 0s linear; */
transition-property:background-color,height,width ;
transition-duration: 1s;
transition-delay: 0s;
transition-timing-function: linear;
/* 在内层使用margin挪动内层，会拖动外层，为了不拖动外层，
给外层加一个属性overflow: hidden; 那么就不会拖动外层*/
margin-top: 400px;
transition: margin-top 1s;
/* 位移动画 值1 左右 值2上下*/
transform: translate(500px, 0px);
/* transform: translateX(100px);
transform: translateY(100px); */
transition: transform 1s;
/* 旋转动画 /
transform: rotate(45deg);
/ 缩放动画 */
transform: scale(1.5, 1.5);
/* 扭曲动画 */
transform: skew(45deg, 20deg);
transition: transform 1s;
/动画名称/
/animation:mydh 1s;/
/开启动画/
animation-name: mydh;
/动画执行时长/
animation-duration:2s ;
/动画延迟执行/
animation-delay: 0s;
/动画的速率/
animation-timing-function: linear;
/动画执行次数/
animation-iteration-count:20;
/*动画执行完毕停留到最后一帧 forwards
backward动画执行完毕，停留到开始的那一帧，默认值
*/
animation-fill-mode:forwards;
/alternate 动画原路返回/
animation-direction:alternate;
/动画开启与暂停/
animation-play-state:running;
<style>#mydiv{width: 200px;height: 200px;background: red;/*动画名称*//*animation:mydh 1s;*//*开启动画*/animation-name: mydh;/*动画执行时长*/animation-duration:2s ;/*动画延迟执行*/animation-delay: 0s;/*动画的速率*/animation-timing-function: linear;/*动画执行次数*/animation-iteration-count:20;/*动画执行完毕停留到最后一帧 forwardsbackward动画执行完毕，停留到开始的那一帧，默认值*/animation-fill-mode:forwards;/*alternate 动画原路返回*/animation-direction:alternate;/*动画开启与暂停*/animation-play-state:running;}@keyframes mydh {/*初始状态*/from{width: 200px;height: 200px;background: red;}/*最终状态*/to{width: 1000px;height: 200px;background: red;}}</style>/////*自定义动画*/@keyframes mydh {0% {width: 200px;height: 200px;background: red;}10% {width: 300px;height:300px;background:yellow;background-image:url(\"img/moshic.png\");top: 50px;left:100px}20% {width: 300px;height:300px;background:yellow;background-image:url(\"img/moshic.png\");top: 50px;left:100px}30% {width: 300px;height:300px;background:yellow;background-image:url(\"img/moshic.png\");top: 50px;left:100px}40% {width: 300px;height:300px;background:yellow;background-image:url(\"img/moshic.png\");top: 50px;left:100px}60% {width: 300px;height:3200px;background:yellow;background-image:url(\"img/moshic.png\");top: 150px;left:100px}80% {width: 5300px;height:300px;background:yellow;top: 150px;left:100px}100% {width: 1300px;height:200px;background:yellow;top: 50px;left:100px}}</style><div id=\"mydiv\"></div>
