css样式学习3

1.文本居中显示：

通过设置文本的行高于外部容器高度一致；可以实现文本垂直居中

例：

width: 200px;
height: 100px;
border: 1px solid red;
text-align: center;
line-height: 100px;

2.背景图片：
/*背景颜色*/
background-color: blue;
/*背景图片*/
background-image: url("图片路径");
/*背景图片的展示方式*/
background-repeat: no-repeat;
/*背景图片的位置*/
background-position: center top;

/*背景图片的大小
contain：图片宽高等比例缩放，直到宽或高填满父布局，可能出现图片填充布局不完整
cover：图片宽高等比例缩放，直到较小的宽或高填满父布局，可能出现图片溢出。*/
background-size: cover;

 

3.超链接：

/*伪类选择器*/
/*1:默认链接状态*/
a:link{
    color: blue;
}
/*2：已访问状态*/
a:visited{
    color: darkgray;
}
/*3：鼠标悬浮状态*/
a:hover{
    color: red;
}
a:active{
    color: orange;

4.Margin外边距的几种书写样式：

/*margin: 0 auto;*/
/*margin: 20px;上右下左*/
/*margin: 20px 30px;!*上下 左右*!
margin: 50px 80px 30px;!*上   左右   下*!
margin: 20px 50px 80px 30px;!*上  右  下  左*!*/