CSS+DIV网页样式与布局

傷城~ 2022-08-05 02:19 284阅读 0赞

# 一、什么是CSS? #

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

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

# 二、什么是DIV？ #

**        DIV是层叠样式表中的定位技术，全称DIVision，即为划分。DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。DIV就是将HTML划分为几块，方便对HTML进行管理。**

# 三、为什么是CSS+DIV? #

## what： ##

** ****DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离，使站点的访问及维护更加容易。**

## why： ##

**  因为在CSS诞生之前，都是使用标签的属性来定义样式的，比如要实现加粗的效果，就要写“<b>加粗内容</b>”，要是定义一个字体是7号字，就要写“<font  size=7></font>“，但是这个html标签属性提供的功能有限，size的字号不是您想定义多大就是多大，到了10就不好使了，怎么办呢，W3C就指定了CSS，用css来代替传统的html标签的属性功能，以弥补html标签的功能缺陷。**

**       使用css的id和class属性可以很方便的给html标签加上一个特殊的标记，然后通过css的访问机制可以很方便的定义样式，这样，如果很多标签样式一致，我们就给它定义一个类（class），然后写样式就可以了，要是table就不行了，每一个标签都得把样式写进去，重复的标签样式造成代码臃肿，又难以维护**

**       div是一个标签，代表块级元素，而div嵌套div的模式就称为盒子模型。使用div主要是为了CSS样式的应用。**

## Benefits: ##

**1、使用DIV+CSS布局，页面代码精简**

**2、提高访问速度、增加用户体验性**

**3、div+css结构清晰，很容易被搜索引擎搜索到**

**4、让网页体积变得更小。**

#               #