CSS控制网页样式

亦凉 2022-08-19 04:49 300阅读 0赞

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

#       【CSS控制页面方式】 #

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

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

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

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

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

先写CSS文档：

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

在html中引用：

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

# 【HTML基本元素】 #

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

![SouthEast][]  
【实战设计解析网页构建过程】

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

下面对网站框架的实践：

![SouthEast 1][]

源代码：

<html>
    	<head>
    		<title>廊坊师范学院</title>
    		<style>
    			
    			
    		</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让我们不断提高自己的审美观念，更像是在建一座高楼大厦，在建立大厦前不断构思，如何让用户体验度更好，如何让自己的代码尽可能少，都是我们需要不断思考的问题。

[SouthEast]: /images/20220731/53fed0add3d0484ea895744778b6b25a.png
[SouthEast 1]: /images/20220731/2b66412e715d4a2a9fcc865aab0d50c0.png