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

最新推荐文章于 2022-12-05 22:11:55 发布

fatloongcat

最新推荐文章于 2022-12-05 22:11:55 发布

阅读量968

点赞数 1

分类专栏： Java学习日记文章标签： java css 前端

本文链接：https://blog.csdn.net/fatdragoncat/article/details/122552459

版权

Java学习日记专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、使用CSS修饰网页的好处

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

二、页面文本修饰

一）span

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

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div1{
				color: green;
			}
			.sp1{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			这是一段已经被CSS<span class="sp1">修饰</span>过的文字！！
		</div>
	</body>
</html>

代码运行结果如下:

现在我们就学会了如何对一段文字中的个别文字进行特殊修改，那么都有什么样的修改文字样式的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（更细）

实例：

实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.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;
			}
		</style>
	</head>
	<body>
		
		<div class="div1">
		 	<span>我这是楷体</span> 
		 	<span>我这是微软雅黑</span>
		</div> 
		
		<div class="div2">
		 	<span>我超大的好不好</span> 
		 	<span>我超小的好不好</span>
		</div>
		 
		<p>
			<span>正常</span>，
			<span>斜体</span>，
			<span>偏斜体</span>
		</p>
		
		<div class="div3">
			<span>正常</span>
			<span>粗</span>
			<span>更粗</span>
			<span>更细</span>
		</div>
	</body>
</html>

三）文本样式

属性	含义	举例
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

实例：

实现代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.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;
			}
		</style>
	</head>
	<body>
		<p class="p1">我是金色的字哒，芜湖！</p>
		<div class="div1">
			<p>我来组成左边</p>
			<p>我来组成右边</p>
			<p>我来组成中间</p>
		</div>
		<div class="div2">
			<p>我的行高是50px</p>
		</div>
		<div class="div3">
			<p>我直接缩进20px</p>
		</div>
		<div id="">
			<p></p>
		</div>
	</body>
</html>

三、超链接伪类

一）伪类样式

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

fatloongcat

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Java学习日记005————使用CSS美化网页

一、使用CSS修饰网页的好处可以有效的传递页面信息；使页面漂亮，美观，吸引用户；突出用户的主题，使用户一眼就可以看到；提升用户的体验。二、页面文本修饰一）span我们在制作前端页面的时候，经常会出现要对进行过CSS更改样式的页面文字进行进一步修饰的情况，这个时候我们就可以使用span标签将要修饰的文字包起来，给CSS一个可选择的标签去进一步更改。实例<!DOCTYPE html><html> <head> <meta charset
复制链接

扫一扫