初识Web 之 CSS 基础之属性（二）-优快云博客

一，CSS属性

1.文本属性

这些属性码一次就会有大概印象，再就是可以查文档都有，eg：w3school的教材

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本属性介绍</title>
		<style type="text/css">  
@import url(../css/sys/world.css); 
</style>
<!--		<link rel="stylesheet" type="text/css" href="../css/sys/world.css"/>-->
	</head>
	<body>
		<p>
			I am a student , i love eat everything !!
		</p>
		<p>
			Iamastudent,iloveateverything!!
		</p>
	</body>
</html>

css文件

	     p{
				color: rgb(234,26,256);
				direction: left;
				line-height: 60px;
				letter-spacing: 5px;
				text-align: left;
				text-decoration: underline;
				word-spacing: 5px;
				text-shadow: #008000;
				white-space: initial;
			   
			/*	font-size 70px;
				font-family:"微软雅黑";
				font-style: oblique;
				font-weight: bold;*/
			/*  font-style:
			  font-variant
			  font-weight
			  font-size/line-height
			  font-faminlly
			 简写顺序;*/
			/*	font:ooblique bold 70px/90px "微软雅黑";*/
				
			}

下面注释掉的是简写的情况和必须遵循的顺序

运行结果

2.字体属性

编码类似文本属性就不贴了

3.背景属性

这个就只用一个html做内部引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#bj{
				width:400px;
				height: 400px;
				border: 2px solid green;
				font-size: 30px;
				/*切割技术*/
				background-attachment: fixed;
			/*	background-color: beige;
				background-image: url(../img/user/1.jpg);
				background-repeat: no-repeat;
				background-position: 50px 10px ;*/
				background: yellow url(../img/user/1.jpg) no-repeat 0px 0px ;
			}
		</style>
		
	</head>
	<body>
		<div id="bj">
			皮卡丘丘丘
		</div>
	</body>
</html>

运行结果再右边

4.超链接伪类

这个是和鼠标操作有关的有关种类

有关鼠标点击前，悬停时，点击后文本的响应情况

link 点击前的颜色 visited 访问后改变的颜色 hover 悬停时情况

还有鼠标的方式 cursor:__; 可以选择鼠标的形状，具体属性文档里面肯定会有的，我也记不住鸭，啊哈；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link {color: #FF0000}	/* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF;cursor: cell;}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}	/* 选定的链接 */

		</style>
	</head>
	<body>
		<a href="#"> 超级玛丽</a>
		<a href="#"> 超级玛丽</a>
		<a href="#"> 超级玛丽</a>
	</body>
</html>