DIV+CSS详解

✪DIV+CSS"这种叫法其实是一种不准确的叫法
　　在做笔记的最前面必须先给大家纠正一个错误，就是"DIV+CSS"这种叫法其实是一种不准确的叫法，是国人给这种布局标准页面的方法起的名字，是对技术理解不够透彻导致的，而标准的叫法是什么呢？呵呵，没错，标准叫法是xHTML+CSS！
 
　　单纯从代码上辨别过去的页面布局方法和现在流行的页面布局方法，认为过去布局页面用的是Table，称之为"Table+CSS"，而现在布局页面呢，用DIV，所以叫"DIV+CSS"。听起来也挺合理，岂不知这种叫法误导了绝大部分网页开发者，将网页制作者引入两大误区：
【误区一】网页中用了Table，页面就不标准，甚至觉得用Table丢人，Table成为了判定页面是否标准的关键点。
【误区二】认为网页中的DIV标签用的越多越好，甚至有人将页面中所有的标签都替换为DIV，DIV的多少，决定页面标准的程度。
　　为了能够避免大家进入误区，必须要了解"Table"和"DIV"这两个网页元素诞生的目的，首先Table诞生的目的是为了存储数据，而DIV诞生的目的就是为了架设页面结构，两者有不同的工作职能，当需要存储数据的时候用Table是最方便快捷的，比如W3Cfun.com的一个主题页面"浏览器大全"，地址是：http://www.w3cfuns.com/portal.php?mod=topic&topicid=6，这个时候肯定用Table 最合适了，而表格外面组成页面结构的部分当然用 DIV 了，这是由他们两个诞生的目的决定的，也是符合 W3C 标准的， 那么这个页面就是标准页面。
 
　　但是DIV+CSS这种已经深入人心，特别是对于我这种刚学习的菜鸟来说，DIV+CSS这种叫法更是贴切的多，反正后面我也会用DIV+CSS这种叫法来解释，至于会不会误导你们就仁者见仁智者见智了，哈哈！我还想评论呢：我猜html5普及以后,会不会被叫做section+css?哈哈，你们说呢？
  ✪什么是W3C标准？
　　W3C标准不是一个标准，而是一系列标准的集合，包含三部分的标准：结构标准、表现标准和动作标准。
与结构标准对应的代表语言是xHTML，与表现标准对应的代表语言是CSS，与动作标准对应的代表语言是JavaScript。
 
　　好了，关于web前端的那点常识讲完了，下面开始做今天的笔记了，对了，由于放寒假了，这个这个，貌似没什么时间写博客了，哈哈，你们懂得。
  ★DIV+CSS的介绍
　　在CSS布局方式中,DIV是这种布局方式的核心对象,我们的页面排版不再依赖于表格. 仅从DIV的使用上说,做一个简单的布局只需要两样东西:DIV与CSS.因此我们称这种布局方式为 DIV + CSS 布局。
  ● DIV：布局容器标签
div 是XHTML中指定的,专门用于布局设计的容器标签。用于存放html 元素，文字，图片，视频的元素。内容样式由CSS指定。
  ● CSS：层叠样式表
CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，是用于控制网页样式并允许样式信息与网页内容分离的一种技术。
  ★DIV+CSS的优势
1.符合 W3C标准，微软等公司均为 W3C支持者。
2.能够对网页的布局、字体、颜色、背景等图文效果实现更加精确的控制,调整更加方便,现在很多网站均使用DIV+CSS框架模式,更加印证DIV+CSS是大势所趋
3.将格式和结构分离，有利于格式的重用及网页的修改维护，在团队开发中更容易分工合作而减少相互关联性
4.CSS的极大优势表现在简介的代码，制作体积更小，下载更快，节省大量带宽，而且众所周知，搜索引擎喜欢简洁的代码。
5.利用CSS样式表，可以将站点上的所有网页都只指向同一个CSS文件，可以实现许多网页同时更新。
 
  ★应用CSS
基本语法结构 : 选择符{属性:属性值;}
举例：  p{color:red;}   /* CSS的注释方式 */
 
  引入方式:
【内嵌式】：在HTML文档内部，将CSS代码卸载<head>标记之间，并需要采用<style>标记进行声明
<head>

　　<style>

　　p{color:red;}

　　</style>

</head>
【内联式】：选择你想控制的HTML标签，给它添加style属性，注意这种方式的引入CSS，是不需要写选择器的
<h1 style="color:red;"></h1>
【链接式】：在实际网站建设中，链接式CSS用法是最常用效果最好的。
<1>新建一个以css为后缀的文件。在里面写入css。
<2>在需要用到该css的HTML内部的<head>标记中加入link标签，href属性指明外部CSS文件的路径
<head>

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

</head>
【导入式】：与链接式的用法基本相同，区别在于语法和使用方法上略有不用。
<style>

<!--

@import url(css/index.css);

-->

</style>

DIV+CSS详解的更多相关文章

  1. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

  2. css详解background八大属性及其含义

    background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...

  3. jquery的css详解（二）

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  4. css详解3

    推荐学习链接:css盒模型 1.盒模型的常用属性 1.1.pading <html lang="en"> <head> <meta charset=& ...

  5. jquery的css详解（一）

    通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...

  6. Web前端之CSS详解20180329

    一.CSS概述 html显示效果有限,所以单独成立了一门语言就做css, css是层叠样式表,用来定义网页的显示想过,可以解决html代码对样式定义的重复, 简单来说就是,css将网页内容和显示样式进 ...

  7. JavaWeb之CSS详解

    CSS的简介 1.CSS概述及作用 CSS:Cascading Style Sheets)是层叠样式表用来定义网页的显示效果.可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强 ...

  8. css详解笔记

    CSS中的块级元素与行内元素 块级元素特性: 1.占据一整行,总是重起一行并且后面的元素也必须另起一行显示. 2.内联元素特性: 3.和其他内联元素显示在同一行. 块级元素列举如下: div(文档分区 ...

  9. 02_HTML5+CSS详解第四天

    依旧是CSS部分贴个CSS主要知识点总结的链接:http://blog.csdn.net/html5_/article/details/26098273 [自己的笔记做得好乱,以前一直以为是字丑的原因 ...

随机推荐

  1. ARC085F NRE

    看了题解. 题目大意 你有一个长度为 \(N\) 的全为 \(0\) 的序列 \(A\),给你一个长度同样为 \(N\) 的 \(0/1\) 序列 \(B\),允许你对把 \(A\) 的一些区间中的数 ...

  2. 红米手机5 Plus完美刷成开发版获取root权限的教程

    小米的设备不同手机型号通常情况小米官方都提供两个不同系统,可分为稳定版和开发版,稳定版没有提供ROOT超级权限管理,开发版中就提供了ROOT超级权限,较多时候我们需要使用的一些功能强大的工具,都需要在 ...

  3. 廖雪峰Java9正则表达式-1正则表达式入门-2正则表达式匹配规则

    正则表达式的匹配规则: 从左到右按规则匹配 匹配规则及示例 可以匹配 不能匹配 "abc" "abc" 不能匹配:"ab", "A ...

  4. note 12 集合Set

    集合Set +无序不重复元素(键)集 +和字典类似,但是无"值" 创建 x = set() x = {key1,key2,...} 添加和删除 x.add('body') x.re ...

  5. Zabbix调优不完全指南(https://www.jianshu.com/p/2d911d55448f)

    从学习搭建zabbix到完成各类监控.调优.二次开发已经过去了两年,期间通过QQ学习群.zabbix官方社区.各个技术博客整理学习了不少关于各种报错的处理方法,现在将常见的一些报错处理方法整理出来分享 ...

  6. 关于对CSS中超链接那部分的设置

    a:link{                                  //正常下的超链接 color:red;                          //超链接的颜色 text ...

  7. Linux查看版本（centos）

    1.查看内核版本 1.1.uname -a 1.2.cat /proc/version 2.查看发行版本 cat /etc/redhat-release

  8. js将一维数组转化为二维数组

    遇到的问题: 后端返回的是一组一维数组,但是需要展示的格式是二维数组,常见的场景举例:后台返回10个长度的数组,需要分成3个一组展示在banner上. 例:[1,2,3,4,5,6,7,8,9,10] ...

  9. DLC 基本逻辑运算

    逻辑代数:分析设计数字电路的数学基础是逻辑代数 变量的取值只能是 0 1 逻辑代数中只有三种基本逻辑运算,即 与 或 非 与逻辑运算: 只有决定一件事情的全部条件都具备时,这事件才成立.这样的因果关系 ...

  10. PG数据库基本命令——查询（笔记）

    1.插入数据(insert 语句) 语法: INSERT INTO TABLE_NAME (column1, column2, column3,...columnN) VALUES (value1, ...