CSS控制网页样式

最新推荐文章于 2022-09-13 22:21:00 发布

king_eagle2015

最新推荐文章于 2022-09-13 22:21:00 发布

阅读量2.2k

点赞数 2

分类专栏：系统前端文章标签： css

本文链接：https://blog.csdn.net/whp15369657805/article/details/50452704

版权

系统前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS（Cascading Style Sheets）层叠样式表示一种用来表示HTML或XML等的文件样式的计算机语言，能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

【CSS控制页面方式】

CSS对页面有很多控制方式，包括行内样式，内嵌式，链接式和导入式等。

行内样式：最为直接，直接对HTML使用Style属性：

     <p style="color:#FF0000; font-size:20px; text

内嵌式：CSS代码卸载<head></head>之间，用在<style></style>标记进行声明：

<style type="text/css">
<!--
p{
	color:#FF00FF;
	text-decoration:underline;
	font-weight:bold;
	font-size:25px;
}
-->
</style>

链接式：将HTML页面本身与CSS样式风格分离成两个或者多个文件，使用频率最高：

先写CSS文档：

h2{
	color:#0000FF;
}
p{
	color:#FF00FF;
	text-decoration:underline;
	font-weight:bold;
	font-size:20px;
}

在html中引用：

<link href="1.css" type="text/css" rel="stylesheet">

导入样式：采用import导入样式表，在HTML文件初始化时，会导入到HTML文件内，作为文件一部分，类似内嵌式的效果：

<style type="text/css">
<!--
@import url(1.css);
-->
</style>

【HTML基本元素】

HTML操作最多的对象是文字，段落，图片，背景，针对这些操作元素，对于这些操作元素CSS操作方法大同小异，针对这些对象有不同的操作方法。

【实战设计解析网页构建过程】

在网页设计过程中首先要思考网页有哪些元素，将相同或相似的元素组合在一起，起一个相同的class名称或者id，这样可保证在设置CSS样式过程中避免重复，减少代码，让自己的思路更加清晰。

下面对网站框架的实践：

源代码：

<html>
	<head>
		<title>廊坊师范学院</title>
		<style>
			<!--
			body{
				padding:0px;
				margin:0px;
				background-color:#339966;
			}
			.topbanner{
				background-color:##fbc9ba;
			}
			.leftbanner{
				width:80%;
				height:500px;
				vertical-align:top;
				margin-left:0px;
				padding-left:30;
				color:#ffffff;
				font-size:14px;
				line-height:12px;
				background-color:#6d1700;
				
			}
			.mainpart{
				text-align:center;
			}
			-->
			
		</style>
	</head>
	<body>
		
		<table class="topbanner" align="center" cellpadding="1" cellspacing="0">
			<tr><td><img src="log1.jpg" border="0"></td></tr>
			<tr><td>
		       <table  cellpadding="1" cellspacing="0">
				<tr>
				  <td style="width:220px">
					<p class="leftbanner">
						<br><br>首页<br><br>分类讨论
						<br><br>谈天说地<br><br>精华区
						<br><br>我的信箱<br><br>休闲娱乐
						<br><br>立即注册<br><br>离开本站
					</p>
				  </td>
				  <td class="mainpart">
					正文内容...
				  </td>
				</tr>
		</table>
		<td>
		</tr>
		</table>
		
	</body>
</html>

在网页设计最常用的是table，使用table可以减少很多CSS对齐样式，让自己的代码减轻，但是必须要思考清晰自己的布局。

【总结】

CSS让我们不断提高自己的审美观念，更像是在建一座高楼大厦，在建立大厦前不断构思，如何让用户体验度更好，如何让自己的代码尽可能少，都是我们需要不断思考的问题。

king_eagle2015

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
19
评论
CSS控制网页样式

CSS（Cascading Style Sheets）层叠样式表示一种用来表示HTML或XML等的文件样式的计算机语言，能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
复制链接

扫一扫