前端开发教程二

css的那点事儿

如果说想给页面写css样式了，必须要先写一个style标签

	格式:
	
		<style>
			css样式内容 
		</style>

一、元素类型

1.块元素;

	特点:
		1.独占一行;
		2.可以设置宽高;
		3.不受空格影响;
		
	p	div	 h1-h6	ol ul li	

2.行内元素;(一行之内的元素)

	特点:
		1.不独占一行;
		2.不可以设置宽高;
		3.受空格影响;(仅受一个空格的影响)

	span	a	i em b strong

	超链接标签：
	
		格式:
		
			<a href="链接地址" ></a>
			
		*在写a标签的时候，必须要有href属性，才可以实现链接效果;
		*如果想a标签跳转已有的线上项目的话，格式：
				herf="http://链接地址"

3.行内块元素;(一行之内的块元素)

	格式:
		1.不独占一行;
		2.可以设置宽高;
		3.受空格影响;(仅受一个空格的影响)
		
	img

	<img src="图片的路径" />

二、选择器

1.标签选择器(元素选择器)

	格式：
		标签名{
			css样式;
		}

2.类选择器(class选择器)-----(相当于给元素起一个昵称、或者是绰号)

	格式:
	
		<div class="class自定义名字" ></div>
		
		.class名字{
			css样式;
		}

三、css属性

	格式:
	
		属性名: 属性值;
		
	例：
	
		width: 像素值(单位:px);
		
		
	width: 像素值;			设置宽度;
	height:	像素值;			设置高度;
	
	设置背景色:
	
		background: 可以放颜色的单词(十六进制的颜色的色值);		设置背景颜色;
	
	设置背景图:
	
		background: url("图片的路径")		图片是否重复					x轴的位置				y轴的位置;
			
																repeat-x(横向平铺)			left|center|right		top|center|bottom
																repeat-y(纵向平铺)			像素值					像素值
																no-repeat(不重复)


	边框：
	
		格式：
		
			border: 边框的宽度	线性		边框的颜色;
			 
		例：
			border: 1px 	solid 	red;
			
					1像素	实心的	红色

附加：

PS的使用方法：

1.ctrl+R	显示标尺

2.如何显示信息板？

	答：热键F8
	
3.如果信息板显示的不是像素单位怎么办？

	答：编辑菜单---首选项---单位与标尺---标尺(像素);
	PS软件切图:

矩形选中工具进行选中----ctrl+c------ctrl+n(新建)------ctrl+v-----ctrl+s(保存)

保存格式:png、jpg

以上就是本文要讲的内容，本段文字只讲了css的简单认识，我们下期再会 *注：以上内容均来自智游集团张瑞传授*