CSS的颜色设置和字体设置

CSS颜色通常有三种表示的方法

第一种直接写颜色所对应的英文，比如：red是红色， blue是蓝色
第二种是十六进制表示法，比如：#ff0000是红色
第三种是R(红),G(绿),B(蓝),A(透明度)表示，比如：color: rgba(200,0,0,0)

十六进制 0-9， a-f

rgba前三个的取值范围 0-255， a的取值为0-1之间的小数，0代表完全透明，1代表完全不透明

CSS常用的文本样式设置

color:  red          //设置颜色
font-size: 50px;       	//设置字体的大小
font-family: "微软雅黑"  	//设置字体
font-style: italic;		//字体倾斜，normal不倾斜
font-weight: bold;  	//加粗，normal为不加粗
line-height: 0px;		//文字的行高
text-decoration:none; 	//取消a标签的下划线
text-indent: 20px;		//文本首行缩进
text-align: center;		//文本居中

**line-height: 50px;  		//文本垂直居中**
.odiv{
	width: 300px;
	height: 500px;
	background-color: aquamarine;
	text-align: center;
	line-height: 500px;      //一般尺寸的高设为多少，这个值就是多少
}

<div class="odiv">文本内容</div>

CSS边框属性

.box{
	width: 300px;
	height: 300px;
	/*设置边框的时候尽量三个属性值都带上，前后顺序可以打乱，solid是实线， dashed是虚线*/
	border: 1px solid red;
	
	/*也可以单独设置一个方向上的边框*/
	/*border-top: 1px solid red;
	border-bottom: 1px solid red;*/
	
	/*设置圆角属性值，从左上角开始顺时针方向给4个值，也可以只写一个值，表示4个方向都是这个值。如果要显示一个圆形，那么就给属性的值为50%，同时要保证宽高相等*/
	/*如果写两个值，那么它是对角分配的，第一个值给左上和右下，第二个值给右上和左下*/
	border-radius: 10px 20px 30px 40px;
}

**设置阴影**
box-shadow: 10px 10px 20px 30px red inset;
	第一个值设置X轴（水平）位移，正值往右位移，负值往左
	第二个值设置Y轴（垂直）位移，正值往下位移，负值往上
	第三个值设置模糊程度
	第四个值是扩散范围
	第五个值是阴影的颜色
	第六个值是否为内阴影，如果想要内阴影可以设置inset，如果不设置，默认阴影向外扩散
	
.box{
	width: 200px;
	height: 200px;
	box-shadow: 10px 10px 20px 30px red inset;
}

<div class="box">文本内容</div>

CSS背景属性

/*设置背景颜色和图片*/
.box{
	width: 200px; 
	height: 200px;
	background: red;
	<!--添加背景图片-->
	background-image: url("图片路径")
	<!--图片的尺寸按上下左右百分百显示-->
	background-size: 100% 100%;
	
	<!--设置图片显示的位置，显示某一块尺寸的图像。网页的 0，0坐标是窗口的左上角， 如果要显示图片某个中心的位置，则意味这要把图片整体往左上角移动。注意在网页当中让图片或者元素往上移动或者往左移动，都是负值 -->
	background-position: -1063px -705px;
	
}

.box{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	<!--背景图片的组合写法， no-repeat设置图片不会重复显示-->
	background: url("图片路径") red no-repeat;
}

<div class="box></div>