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

Java学习日记005————使用CSS美化网页 一、使用CSS修饰网页的好处

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

二、页面文本修饰 一）span

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

实例

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

代码运行结果如下: 

 

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

二）文本修饰

属性名

含义

举例

font-family

设置字体类型

font-family:"隶书";

font-size

设置字体大小

font-size:12px;

font-style

设置字体风格

font-style:italic;

font-weight

设置字体的粗细

font-weight:bold;

font

在一个声明中设置所有字体属性

font:italic bold 36px "宋体";

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;
			}
		
	
	
		
		
		 	我这是楷体 
		 	我这是微软雅黑
		 
		
		
		 	我超大的好不好 
		 	我超小的好不好
		
		 
		

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

三）文本样式

属性

含义

举例

color

设置文本颜色

color:#00C;

text-align

设置元素水平对齐方式

text-align:right;

text-indent

设置首行文本的缩进

text-indent:20px;

line-height

设置文本的行高

line-height:25px;

text-decoration

设置文本的装饰

text-decoration:underline;

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
		
		
			

		
	

三、超链接伪类 一）伪类样式

二）使用CSS修改超链接 

伪类名称

含义

示例

a:link

未单击访问时超链接样式

a:link{color:#9ef5f9;}

a:visited

单击访问后超链接样式

a:visited {color:#333;}

a:hover

鼠标悬浮其上的超链接样式

a:hover{color:#ff7300;}

a:active

鼠标单击未释放的超链接样式

a:active {color:#999;}

 

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

text-decoration:none;

四、列表样式

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

list-style-type的用法：

值

说明

语法示例

none

无标记符号

list-style-type:none;

disc

实心圆，默认类型

list-style-type:disc;

circle

空心圆

list-style-type:circle;

square

实心正方形

list-style-type:square;

decimal

数字

list-style-type:decim

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