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. 升级GCC以支持C++11

    本文主要介绍在Linux系统下,如何升级GCC以支持C++11.目前来看GCC是对C++11支持程度最高最多的编译器,但需要GCC4.8及以上版本.  本文使用操作系统:Centos 6.4 Desk ...

  2. 报错：Exception in thread "main" java.lang.NoClassDefFoundError: Lorg/apache/hadoop/fs/FileSystem

    报错现象: Exception in thread "main" java.lang.NoClassDefFoundError: Lorg/apache/hadoop/fs/Fil ...

  3. 初学爬虫，关于scrapy

    对于anaconda与pycharm,因为在pycharm中一直下不成功tensorflow,所以后来又下了anaconda,pycharm就可以直接使用anaconda的编译器, 一直都很正常,但是 ...

  4. WebApi设置HttpContext.Current.User

    1.Web.config配置上system.web节点下加入以下配置 <system.web> <authentication mode="Forms"> ...

  5. docker 命令汇集

    1,查看容器 docker ps [-a] #-a表示全全部否者仅显示运行的 2,登录容器 docker exec -it [containerId] /bin/bashdocker exec -it ...

  6. Asp.NET 简易通用WebServices 附件服务

    [toc] 总述: 用了很久的附件分离服务, .NET 2.0平台开始使用.  配置好服务后, 由调用端定义并管理目录级次.  调用端存储目录即可.  附件服务: 相应配置节点放入 web.confi ...

  7. html 5 dialog标签：定义特殊术语或短语

    html5中<dialog>标签作用是定义特殊术语或短语,这里主机吧详细介绍下<dialog>标签用法.<dialog>标签属性以及<dialog>标签 ...

  8. Java高级框架------Spring（二）

    五．如何给Bean的属性赋值(注入) 1. 通过构造方法来赋值 2. 设置注入(通过set方法) 2.1 如果属性是基本类型或String等简单 <bean id="peo" ...

  9. 羊车门问题(Python)

    羊车门问题(结对作业) 在完成本题之前,请仔细阅读下面内容: 题目描述:有3扇关闭的门,一扇门后面停着汽车,其余门后是山羊,只有主持人知道每扇门后面是什么.参赛者可以选择一扇门,在开启它之前,主持人会 ...

  10. 关于mysql 表导入数据

    一.实验准备: 1.实验设备:Dell laptop 7559; 2.实验环境:windows 10操作系统; 3.数据库版本:mysql 8.0; 二.实验目的: 1.将一个宠物表pet.txt文件 ...