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. 【rabbitmq】RabbitMQ 集群与网络分区

    网络分区(network partitions) 官网-网络分区 网络设备故障导致的网络分裂.比如,存在A\B\C\D\E五个节点,A\B处于同一子网,B\C\D处于另外一子网,中间通过交换机相连.若 ...

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

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

  3. python模拟大数据登陆

    #针对tableu 撰写的大数据框架 #tesseract 识别简单的验证码 不多说  直接上代码 # coding:utf-8 from selenium import webdriver from ...

  4. 4、redis 分布式锁

    1. 前言 关于分布式锁的实现,目前常用的方案有以下三类: 数据库乐观锁: 基于分布式缓存实现的锁服务,典型代表有 Redis 和基于 Redis 的 RedLock: 基于分布式一致性算法实现的锁服 ...

  5. WordPress版微信小程序3.2版发布

    WordPress版微信小程序(下称开源版)距离上次更新已经过去大半年了,在此期间,我开发新的专业版本-微慕小程序(下称微慕版),同时开源版的用户越来越多,截止到2018年11月26日,在github ...

  6. Java笔记Spring（七）

    DispatcherServlet初始化,继续分析日志 主要部分: 23-May-2018 17:47:55.457 INFO [RMI TCP Connection(3)-127.0.0.1] or ...

  7. docker的核心概念和安装

    里Dcoker的安装要求 我这里安装的是在vmware下的centos7 64位 并且通过模拟远程连接xshell 我在安装好之后就配置了静态ip,这里我就不多说怎么配置了 具体静态ip配置可以参考 ...

  8. iOS应用图标AppIcon

    应用图标需求:(像素px) 29pt:      58*58 ( @2x ) 87*87 ( @3x ) 40pt:      120*120 ( @2x ) 180*180 ( @3x ) 60pt ...

  9. Flink开发环境搭建（maven）

    1.下载scala sdk http://www.scala-lang.org/download/ 直接到这里下载sdk,(https://downloads.lightbend.com/scala/ ...

  10. python-web自动化-文件上传操作（非input标签的上传,需要借助第三方工具）

    文件上传操作 一.文件上传分两种情况:1. 如果是input可以直接输入路径的,可以直接调send_keys输入路径 2. 非input标签的上传,需要借助第三方工具:    2.1 Autolt 需 ...