Java学习日记005————使用CSS美化网页

可以有效的传递页面信息；使页面漂亮，美观，吸引用户；突出用户的主题，使用户一眼就可以看到；提升用户的体验。

我们在制作前端页面的时候，经常会出现要对进行过CSS更改样式的页面文字进行进一步修饰的情况，这个时候我们就可以使用span标签将要修饰的文字包起来，给CSS一个可选择的标签去进一步更改。

实例

	
		
		
		
			.div1{
				color: green;
			}
			.sp1{
				font-size: 30px;
			}
		
	
	
		
			这是一段已经被CSS修饰过的文字！！
		
	

代码运行结果如下: 

现在我们就学会了如何对一段文字中的个别文字进行特殊修改，那么都有什么样的修改文字样式的CSS呢。

1. font-family：（文字字体）

实例：

2.font-size:(大小)

实例：

3. font-style： normal（正常）、italic（斜体）和oblique（偏斜体）

实例：

 4.font-weight：normal（正常），bold（粗），bolder（更粗），light（更细）

实例：

 实现代码如下：

	
		
		
		
			
			.div1 span:nth-child(1){
				font-family: "楷体";
			}
			.div1 span:nth-child(2){
				font-family: "微软雅黑";
			}
			.div2 span:nth-child(1){
				font-size: 60px;
			}
			.div2 span:nth-child(2){
				font-size: 10px;
			}
			p span:nth-child(1){
				font-style: normal;
			}
			p span:nth-child(2){
				font-style: italic;
			}
			p span:nth-child(3){
				font-style: oblique;
			}
			.div3 span:nth-child(1){
				font-weight: normal;
			}
			.div3 span:nth-child(2){
				font-weight: bold;
			}
			.div3 span:nth-child(3){
				font-weight: bolder;
			}
			.div3 span:nth-child(4){
				font-weight: lighter;
			}
		
	
	
		
		
		 	我这是楷体 
		 	我这是微软雅黑
		 
		
		
		 	我超大的好不好 
		 	我超小的好不好
		
		 
		

			正常，
			斜体，
			偏斜体
		
		
		
			正常
			粗
			更粗
			更细
		
	

1.color：（颜色）

实例： 

 2.text-align：left(把文本排到左边)，right（把文本排列到右边），center（把文本排列到中间），justify（实现两端对齐效果）

实例：

 3.line-height

实例：

4.text-indent 

实例：

 实现代码如下

	
		
		
		
			.p1{
				color: gold;
			}
			.div1{
				width: 500px;
				height: 200px;
				border: 1px green solid;
			}
			.div2{
				width: 200px;
				height: 50px;
				background-color: #008000;
			}
			.div3{
				width: 200px;
				height: 30px;
				background-color: yellow;
			}
			.div1 p:nth-child(1){
				text-align: left;
			}
			.div1 p:nth-child(2){
				text-align: right;
			}
			.div1 p:nth-child(3){
				text-align: center;
			}
			.div2 p{
				line-height: 50px;
			}
			.div3 p{
				text-indent: 20px;
			}
		
	
	
		
我是金色的字哒，芜湖！
		
			
我来组成左边
			
我来组成右边
			
我来组成中间
		
		
			
我的行高是50px
		
		
			
我直接缩进20px
		
		
			

		
	

PS：在写前端的时候我们通常会采用这个CSS来将所有的超链接的下划线进行消除

text-decoration:none;

通常采用list-style-type、list-style-image、list-style-position、list-style，来修改列表样式。

list-style-type的用法：

PS：现在网页中，使用列表样式通常采用 list-style-image来修改列表前面的标记。