css层叠样式表
三种书写方式
- 行内样式
- 内部样式
- 外部样式
任何一个网页元素都是矩形
行内样式
每一个元素都可以书写行内样式
<div style="width:400px;height:20px;background:red;"></div>
style样式
<style>
div {
width: 400px;
height: 20px;
background: red
}
</style>
选择器
-
id选择器
<style>
#d{
width:200px;
height:200px;
background:red;}
</style>
<div id="d"></div>
-
类选择器
<style>
.c{
height:100px;
background:orange;
}
</style>
<p class=""c"></p>
-
元素选择器
<style>
h1{
height:200px;
background:green;
}
</style>
<h1>
今天
</h1>
组合选择器
- div p{
空格代表的是子元素
} - p.c{
类为c的p元素
}
类选择器的优先级大于元素选择器，谁选的精确用谁。最后的效果是选择器效果的叠加，行内优先级大于内部大于外部。
外部样式
<link href="mycss.css" rel="stylesheet">
css中的注释:/* */
<div class="c d"></div>c.d中后写的起作用,d的优先级大于c
宽高
- 如果块级元素没有输入宽度和高和内容，则宽度是沾满屏幕，高度是0，
如果里面有内容，则高度和内容的高度是一样的。 - width可以用%表示，其中指的是父元素的百分比,百分比不可以给height用。
宽和高对行级元素不起作用
背景颜色
颜色的书写可以用颜色的英文名称，同时也可以用十六进制的数表示，或者用函数的方法eg：rgb（255,0,0）表示红色rgba（255,0,0,0.5）其中a代表透明在0-1之间取值，1为不透明，0为全透明
背景图片
background-repeat: no-repeat;背景图片不平埔
background-repeat: repeat-x;横向平铺
background-repeat: repeat-y;纵向平铺
背景图片出来的位置：
background-position: left top;（左上角）
background-position: center bottom;（中间底部）
background-position: center center；（正中间）
background-position:10px 10px;(往下移10px，往右移10px）
background-position:20% 50%;（移动图片中心点）
- 倘若图片大小大于容器的 大小，可实现对图片的截取。
- 偏移是相对于容器的偏移。
边框
border: 5px red dashed;（粗细为5px 红色 虚线/solid实现）
- 在border后加-bottom -right -top -left 为控制四个不同的边
border-radius:5px; （控制边框的角的弧度）
字体
color（控制字体颜色 ）
font-size：ddd；（控制字体大小）
font-family：（字体）
font-weigth:bold;(粗体）
<strong></strong>加粗字体
text-align：左，中，右
text-decoration:underline;(下划线)
text-decoration:line-through;(横穿线)
text-indent:20px;(文字缩进）
盒子模型
元素的大小，元素与元素的距离
margin：（外边距，元素与元素之间的距离或者元素和父类之间的距离）
margin:10px 20px;(控制上下和左右）
margin:10px 20px 30px 40px;(控制上右下左）
margin:0 auto;(元素的居中）要想居中必须有固定的大小
padding:(内边距 ，元素的内容和边框的距离）
使用padding会引起元素的撑大。padding无负值
- boby自在padding属性，p自带margin属性 ，所以在书写网站时书写
*{
margin:0;
padding:0;
}
定位
position：static；
position：absolute；（绝对定位，使其脱离文档流）然后是使用top;right;left;bottom进行定位
可以先left=50%；然后margin=（width的一半）实现居中
z-index:（-999-999）定位纵向排列的顺序。
- 将绝对定位的四个方向都为零时，不用写宽高，则沾满屏幕
- 要想让子元素在父元素里面跑需要子绝父相
.c{
height:400px;
width:400px;
background:red;
position:relative;
left:0;
top:0;
}
.d{
width:200px;
height:200px;
background:greenyellow;
position:absolute;
bottom:0;
right:0;
}
父元素也可以绝对定位，但是会对其他元素早成影响。所以较多使用相对定位。
position:relative（相对定位）
使用相对定位的区块不影响其他区块的位置。只是将自己将以调整。
相对定位不可以乱跑：只可以用left和top属性。
窗口定位：position：fixed（窗口定位）
相对于窗口进行定位，可以实现将区块定位于窗口的某些位置，使其不受文档流的约束。
浮动属性：float；
方向：向左或向右
浮动的元素会脱离文档流。浮动元素遇到其他的浮动元素会停下来或者挨到父元素的边会停下来。
.a{
width:200px;
height:200px;
background:red;
float:left;
z-index:-20;
}
.b{
width:400px;
height:400px;
background:limegreen;
float:left;
z-index: 20;
}
.c{
width:600px;
height:600px;
background:blue;
}
image.png
- 父元素高度是子元素高度之和，因此大部分时间不写父元素的高度
*浮动会对其他的元素造成影响，若不想造成影响，则在此浮动元素下创建一个空的元素加上clear：both
<div class="a"></div>
<div class="clear"></div>
<div class="b"></div>
.clear{
clear:both;
}
或者将清楚写在下一个元素的里面:
.a{
width:200px;
height:200px;
background:red;
float:right;
}
.b{
width:300px;
height:300px;
clear:both;
background:limegreen;
}
元素的展示和消失
display：block；（能将行级元素变为块级元素进行展示）
display：none；（将元素消失）
display:inline-block(行类块，首先按块级元素进行展示，其次后面元素可以跟在后面显示，即可以将块级元素变为行级元素，但保留块级元素的性质）
鼠标
cursor:pointer；（变为小手）
cursor:progress;(变成箭头加圆圈）
cursor:crosshair;(变成十字架）
cursor：wait；（变成圆圈）
overflow溢出
overflow:hidden;(超出部分隐藏）
