CSS样式详解-优快云博客

1.选择器：对于id标识的，使用#idName;class标识的，使用.className；对于没有标识的，使用标签名，如body.

2.background：设置颜色、图片、以及图片的一些设置

<style>
			/*color属性*/
			/*对于color属性，可以使用三种方式来实现：颜色名称；rgp色值；16进制色值*/
			/*repeat属性*/
			/*对于repeat属性，表示这个背景图片的填充方式：如body尺寸为400*400，图片大小为200*200，默认会用4张图片来填充，
	 * 如果设置repeat-x，则只在顶部显示横向的两张；如果设置repeat-y，则只在左侧显示纵向的两张；对于no-repeat，则只显示一张*/
			/*position属性*/
			/*用来表示背景图片显示的位置：假设body尺寸400*400，图片200*200，设置no-repeat，如果设置position为left，
	 * 则图片会显示在左侧靠边居中；如果position为left top，则显示在左上角*/
			
			body {
				background-color: red;
				background-color: #FF0000;
				background-color: rgb(255, 0, 0);
				background-image: url(../img/analyse_icon@.png);
				background-repeat: no-repeat;
				background-position: left top;
			}
		</style>

3.关于text的一些属性

<style>
		/*text-align*/
		/*设置文字的对齐方式：其中justify的效果是所有行宽度相同
		 * （和left,right等的区别是：left也会自动换行，但是两行分别的宽度由于内容的不同，宽度不会完全一样）*/
		
		/*text-indent*/
		/*设置文字的缩进*/
		
		/*text-transform*/
		/*设置英文的大小写：uppercase-全部大写；lowercase-全部小写；capitalize-首字母大写*/
		p{
			color: #FF0000;
			text-align: justify;
			text-indent: 100px;
		}
		/*text-decoeation：设置标签的修饰，如下划线等等*/
		/*none:去掉修饰*/
		/*overline:上面加横线*/
		/*line-through:在中间加横线*/
		/*underline:在下面在横线*/
		a{
			text-decoration: underline;
			
		}
	</style>
	<body>
		<p>测试的数据测试的数据测试的数据测试的数据测试的数据测试的数据测试的数据
		测试的数据测试的数据测试的数据测试的数据测试的数据测试的数据测试的数据
		测试的数据测试的数据测试的数据测试的数据测试的数据测试的数据
		测试的数据测试的数据测试的数据测试的数据测试的数据测试的数据测试的数据</p>
		<a href="Background.html">点击跳转</a>
	</body>

4.设置链接<a>在鼠标放上和离开的不同显示

<style>
		a:link{background-color: red;text-decoration: none;}/*没有访问过的*/
		a:visited{background-color: gray;}/*已经访问过了*/
		a:hover{background-color: yellow;}/*鼠标移动上*/
		a:active{background-color: aqua;}/*点击时候*/
	</style>
	<body>
		<a href="Background.html">点击进行跳转</a>
	</body>