CSS之与HTML之间的耦合

最新推荐文章于 2022-12-25 10:39:44 发布

冯浩月

最新推荐文章于 2022-12-25 10:39:44 发布

阅读量930

点赞数

分类专栏： B/S学习 ---CSS学习之旅

本文链接：https://blog.csdn.net/m18633778874/article/details/79339467

版权

B/S学习同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

---CSS学习之旅

2 篇文章 0 订阅

订阅专栏

【前言】

小编最近学习了一个视频，关于“精通CSS.DIV网页样式与布局”的内容学习，进一步的认识了CSS与HTML之间的联系和区别，下面就让小编来简单的总结分析一番吧。

【CSS】

一、背景

在Web2.0时代，网页标准化CSS+DIV的设计方式便逐渐取代传统的表格布局模式，而CSS的学习就成为了设计人员的必修课。

二、主要学习内容

通过视频，学习到了关于CSS的一些常用的知识，主要包括CSS的基本语法和概念，设置文字、图片、背景、表格、表单和菜单等网页元素的方法，以及CSS滤镜的使用。着重学习了如何利用CSS+DIV进行网页布局，并列举了大量的实例，并详细涉及到一些技术细节，包括扩展CSS与JavaScript、XML和Ajax的综合应用等内容，并给出了5个常见类型的完整网页的综合实例，我的博客、小型工作室网站、企业网站、网上购物网站和旅游网站。

【CSS与HTML之间的较量】

一、二者之间的联系

1.CSS的产生

CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS是1996年由W3C审核通过，并且推荐使用的。

2.CSS与HTML的关联

CSS的引入是为了使得HTML能够更好地适应页面的美工设计，是以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪和PDA等。

二、传统HTML的缺点

在CSS没有被引入页面设计之前，传统的HTML语言要实现页面美工上的设计是十分麻烦的，举例说明。如果希望对段落中的字体进行设置，需要引入<font>标记，如下：

1.传统的HTML语言实现

<html>
<head>
	<title>页面标题</title>
   </head>
<body>
	<h2><font color="#0000FF" face="黑体">CSS标记1</font></h2>
	<p>CSS标记的正文内容1</p>
	<h2><font color="#0000FF" face="黑体">CSS标记2</font></h2>
	<p>CSS标记的正文内容2</p>
	<h2><font color="#0000FF" face="黑体">CSS标记3</font></h2>
	<p>CSS标记的正文内容3</p>
	<h2><font color="#0000FF" face="黑体">CSS标记4</font></h2>
	<p>CSS标记的正文内容4</p>
</body>
</html>

2.引入CSS之后的效果

<head>
<title>̉页面标题</title>
<style>
<!--
h2{
	font-family:黑体;
	color:blue;
}
-->
</style>
   </head>
<body>
	<h2>CSS标记1</h2>
	<p>CSS标记的正文内容1</p>
	<h2>CSS标记2</h2>
	<p>CSS标记的正文内容2</p>
	<h2>CSS标记3</h2>
	<p>CSS标记的正文内容3</p>
	<h2>CSS标记4</h2>
	<p>CSS标记的正文内容4</p>
</body>
</html>

效果图

3.相比CSS为基础的页面设计方法，HTML体现的劣势

（1）维护困难

为了修改某个特殊标记（例如上例中的<h2>标记）的格式，需要花费很多时间，尤其对于整个网站来说，后期修改和维护的成本很高。

（2）标记不足

HTML本身的标记十分少，大多是为网页内容服务的，而关于美工样式的标记，如文字间距、段落缩进等标记在HTML中很难找到。

（3）网页过“胖”

由于没有同意对各种风格样式进行控制，HTML页面的体积往往过大，占掉了很多宝贵的带宽。

（4）定位困难

在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的<table>标记同样也导致页面的复杂和后期维护的困难。

【小结】

CSS和HTML之间的关系可以说是，相辅相成，两者的关系是你中有我，我中有你，当然设计出一个富有美感的网页，不是那么简单地，还需要很多其他的综合应用的知识，JavaScript、XML和Ajax等内容。

感谢您的访问！

冯浩月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
20
评论
CSS之与HTML之间的耦合

【前言】小编最近学习了一个视频，关于“精通CSS.DIV网页样式与布局”的内容学习，进一步的认识了CSS与HTML之间的联系和区别，下面就让小编来简单的总结分析一番吧。【CSS】一、背景在Web2.0时代，网页标准化CSS+DIV的设计方式便逐渐取代传统的表格布局模式，而CSS的学习就成为了设计人员的必修课。二、主要学习内容通过视频，学习到了关于CSS的一些常用的知识，主要包括CS...
复制链接

扫一扫