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

Java学习日记005————使用CSS美化网页,第1张

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来修改列表前面的标记。

 

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5708046.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-17
下一篇 2022-12-17

发表评论

登录后才能评论

评论列表(0条)

保存