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. 从创业者角度看《印度合伙人 Padman》后的一点感受

    最近对印度电影颇有兴趣,周末在家看了<印度合伙人 Padman>.本文试着从一名创业者视角,谈谈个人的一点看法. 0.故事简介 引用自 https://movie.douban.com/s ...

  2. Sql更新

    //要传一个DataSet,和若干个表 /// <summary> /// 更新数据库 /// </summary> /// <param name="data ...

  3. 刘志梅201771010115.《面向对象程序设计（java）》第十七周学习总结

    实验十七  线程同步控制 实验时间 2018-12-10 1.实验理论知识 多线程    多线程是进程执行过程中产生的多条执行线索.进程    线程是比进程执行更小的单位.线程不能独立存在,必须存在于 ...

  4. idea springboot 父子工程 子工程maven不自动import

    父工程删除对spring boot启动项的引用,因为父工程 dependencyManagement,它不会自动加载包,只指定包的版本, 如果在父工程中引用了包,但是没有指定包版本,子工程将不会识别到 ...

  5. C语言博客作业6---结构体&文件

    C语言博客作业6---结构体&文件 1.本章学习总结(2分) 1.1思维导图 请以思维导图总结本周的学习内容.如下图所示: 1.2.学习体会 描述本周学习感受,也可以在这里提出你不理解地方.对 ...

  6. java 导出 excel 最佳实践，java 大文件 excel 避免OOM(内存溢出) excel 工具框架

    产品需求 产品经理需要导出一个页面的所有的信息到 EXCEL 文件. 需求分析 对于 excel 导出,是一个很常见的需求. 最常见的解决方案就是使用 poi 直接同步导出一个 excel 文件. 客 ...

  7. sql获取时间段内的所有日期

    ,'2015-01-01 00:00:00') h INTO vinson_h DELETE vinson_h DECLARE @h int SELECT @h=DATEDIFF(HOUR,'2015 ...

  8. Appium自动化学习1

    1.Appium-desktop配置Desired Capabilities { "platformName": "Android", "platfo ...

  9. git 入门与应用

    git可视化界面的项目版本控制软件,适用于git项目管理 SourceTree 安装方法 https://blog.csdn.net/qq_26230421/article/details/79921 ...

  10. PHP实现防止SQL注入的2种方法

    PHP简单实现防止SQL注入的方法,结合实例形式分析了PHP防止SQL注入的常用操作技巧与注意事项,PHP源码备有详尽注释便于理解,需要的朋友可以参考下! 方法一:execute代入参数 $var_V ...