前端基础——CSS

文本修饰

.css文件引入以样本表<link rel=“stylesheet”,herf=“mi.css”>
CSS修饰均放在头部head标签中

位置

text-align属性设置

<style>
h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}
</style>

vertical-align属性设置

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

定位

浮动布局 float
float属性可使序列由列变行
&左浮

float:left;

&右浮

float:right;

&默认

float:none;

&继承

float:inhert;

清除布局 clear
clear属性规定哪个元素可以在清除的元素旁边以及在那一侧浮动

float:left;
clear:both;

字体

font属性

font-family:宋体；
#设置字体
font-size:40px；
#字体大小
font-size:2.5em;
#建议使用em:16px=1em
font-style:normal;
# 正常文字
font-style:italic;
# 斜体文字
font-style:oblique;
# 倾斜文本
font-weight:bold;
font-weight:900;
# 加粗字体
font-weight:normal;
font-weight:lighter;
# 正常字体
color：black;
#定义字体颜色

背景图像

图像轮播

动画相关的背景颜色的渐变过程

@keyframes mymove {
  from {background-color: red;}
  to {background-color: blue;}
}

图片渐变替换

@keyframes banner {
    0%{
        background-image: url("images/122.jpg");
    }
    50%{
        background-image: url("images/123.jpg");
    }
    100%{
        background-image: url("images/124.jpg");
    }

图片背景重复

	background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
# repeat-x图像在水平方向上重复repeat-y图像垂直方向重复
	background-image: url("tree.png");
    background-repeat: no-repeat;
#图像仅显示一次不重复

动画过渡效果

	动画过渡效果的修饰
  1.(transition过度）all:所有的全部 
       transition:all ； 给所有过度效果（单位s）                                                                                     
       transition：all ease；（默认效果慢快慢）
       transition：all linear;（匀速变换）                                                
       transition：all ease-in;（低速开始）                                                                              
       transition：all ease-out:（低速结束）  
       transition:background-color 1s ,width 5s,height 5s ; （同时背景宽高效果过度时间和格式）                                
       transition:过度属性 过度时间 时间曲线 延迟时间(鼠标点上去2s后开始变换）;（复合写法）    

更改图像位置

background-position属性用于指定图像背景位置

  background-image: url("/i/photo/tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  #置顶且靠右
  margin-right: 200px;
}

盒子覆盖问题

   2.(transform)位移属性                                                 
       transform:translate();平移(位移)	                                                           
       transform: translatey(位移y轴);                                                                      
       transform: trnslatex(位移x轴);
       可以放两个值：第一个值位移x轴 第二个位移y轴
       transform: translate(100px,100px);(两个值一起写往右下角移 写的时候用，隔开)
       比如：/* transform: translateY(50px); */可以利用x、y轴平移消除覆盖
       盒子被遮挡时，还可以使用positon加z-index属性修饰
      eg： position: absolute;
       	   z-index: 1000;