* 一个元素可以使用多个类，类与类之间用空格区分，靠后的类优先级高
一、
css共有3种书写方式：行内样式、内部样式、外部样式。
1.行内样式：
<div style="width:400px;height:200px;background:red;"></div>
2.内部样式：
选择器：ID选择器、类选择器、元素选择器
* 类选择器的优先级大于元素选择器
1.ID选择器
2.类选择器
3.元素选择器
4.组合选择器
div .c{
height:100px;
background:aqua;
}
p.c{
background:yellow;
} （类为c的p元素）
5.引外部样式
<head>
<link href="mycss.css" rel="stylesheet">
</head>
6.css注释
/*
*/
7.如果没有明确指定高度，和内容的高度一样
8.width:60%; 百分数只能宽度用，60%是父元素的百分比
9.宽和高对行级元素不起作用
10.背景颜色：
background-color:rgb(255,0,0); （函数取颜色）
background-color:rgba(255,0,0,0.5); （0<a<1，透明）
11.背景图片
图片：background-image:url("u=2157521115,4232086434&fm=26&gp=0.jpg");
重复：background-repeat:no-repeat;（不重复）
位置：background-position:right bottom;（右下）
background-position:center bottom;（第一个定左右 ，第二个定上下）
background-position:10px 10px;（向右，向下）
background-position:10% 10%;
background-position:-200px -200px;（负值可以裁剪图片）
background:rgba(255,0,0,0.2)url("u=2157521115,4232086434&fm=26&gp=0.jpg")no-repeat 100px 100px;（可以只写一个backgroud）
12.边框
border:5px darkred solid(实线); dashed（虚线）
下边框：border-bottom:2px orangered dashed;
圆：border-radius:400px;
13.字体
颜色：color:palevioletred;
大小：font-size:40px;
字体：font-family:方正胖娃繁体;
粗细：font-weight:bolder；（加粗）
位置：text-align:center; （只能水平方向移动）
装饰：text-decoration:underline（下划线）; line-through（删除线）
缩进：text-indent:20px; （相当于空两格）
* 14.盒子模型
margin（外边距）:元素与元素之间的距离或者元素与它父元素之间的距离
margin:20px 10px 40px 50px;（上 右 下 左）
margin:20px 10px; （上下 左右）
margin：（1）负值可以移出去
（2）可以让子元素居中 margin:0 auto;（要居中的元素一定有固定的宽度）
padding（内边距）：元素的边框与内部的距离 （会引起元素的撑大，不能有负值）
15.位置
1.position:static;
2.position:absolute;
right:0;
bottom:0;
绝对定位（会使元素摆脱文档流的束缚）
z-index:10; （谁大谁飘在最上面）
3.position:relative;
left:20px;
top:20px;
相对定位：使用相对定位的元素不脱离文档流(不能乱跑)
4.窗口定位：position:fixed（固定）;
* 子绝父相：子元素逃不出父元素
* 占满整个屏幕：
.c {
background:orange;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
16.浮动 float
* 浮动的元素会脱离文档流
* 1.浮动的元素遇到其他元素会停下来
2..浮动的元素遇到父元素会停下来
* clear:both; 清除上一个元素的影响，
<div class="a"></div>
<div class="clear"></div>
在浮动元素后加一个空元素
17.元素的展示和消失
展示：display:block; 能将行级元素变成块级元素去展示
display:inline-block; 按块级元素展示，但是不占一整行，保留原来的宽高
鼠标展示：cursor(鼠标):pointer（小手）;
cursor:progress（加载）;
cursor:wait（等待）;
隐藏：overflow:hidden; 将超出的部分隐藏起来
元素透明：opacity:0.5; （取值 0<opacity<1）
伪类：鼠标掠过时会变
.a{width:200px;
height:300px;
background:red;
}
.a:hover{
background:blue;
width:500px;
cursor:pointer;
}
去除列表的点：list-style:none;
18.元素阴影
box-shadow:3px 3px 2px black;
网友评论