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. 2.NB-IoT及通信协议

    NB-IoT 1.什么是NB-IoT? NB-IoT全称窄带物联网(Narrow Band IOT),构建于蜂窝网络,只消耗大约180KHz的带宽,可直接部署于GSM网络.UMTS网络或LTE网络,以 ...

  2. 菲律宾Globe/TM卡最省钱的上网方案

    基本技能点 1:发送SURFALERT ON到8080,这样就关掉了余额扣费的上网方式,防止因为套餐耗尽后疯狂扣话费. 2:用Coins.ph充个15Pisos(也就2元人民币),或则充多点钱都可以. ...

  3. python之路——21

    复习 1.序列化:数据类型转换成字符串的过程 为了方便存储和网络传输2.序列化模块: 1.json 1.dumps 2.loads 3.dump 和文件相关 4.load 不能load多次 2.pic ...

  4. Condtion type Z123 is mandatory!

    user exit: MV45AFZZ->userexit_save_document_prepare ZI_EXIT_SD_CNEMS_SAVE_PREPARE ***Start of ins ...

  5. mybatis与Spring

    提问1:如果没有spring-mybatis,我们如何在spring中使用定义bean,如何使用事务? mybatis-Spring为我们带来多种方式的Mapper接口的注册,扫描,识别. 如果不使用 ...

  6. mysql------Windows7 64bit安装教程------下载mysql

    .1.进入官网的下载位置,https://dev.mysql.com/downloads/installer/: 2.选择“Windows”; 3.点击"MySQL Installer&qu ...

  7. JAVA递归实现全排列

    全排列(permutation) 排列组合概念 排列,就是指从给定n个数的元素中取出指定m个数的元素,进行排序 组合,则是指从给定n个数的元素中仅仅取出指定m个数的元素,不考虑排序 全排列 以数字为例 ...

  8. sqlserver 使用脚本创建作业

    --[作业常用的几个步骤] EXEC msdb.dbo.sp_delete_job EXEC msdb.dbo.sp_add_job EXEC msdb.dbo.sp_add_jobstep EXEC ...

  9. git push时报错refusing to merge unrelated histories

    1. 删除本地项目中的.git目录,然后向远程仓库提交代码的时候,重新配置后再次提交.会有冲突. 解决方式: git remote add origin [//your giturl] git pul ...

  10. JavaScript数组方法--pop、shift、unshift

    其实还有一个方法push,应该放在一起说的,问题是他跟concat跑了,那只剩下这哥仨了. pop:pop()方法从数组中删除最后一个元素,并返回该元素的值.此方法更改数组的长度.捎带一下push,p ...